Опишіть ваш проєкт
Наші спеціалісти звʼяжуться з вами найближчим часом
Надіславши запит, ви отримуєте:
  • Лист чи дзвінок від нашого менеджера
  • Оцінку свого проєкту
  • Особисту зустріч, за необхідності
  • Конфіденційність гарантовано!
maxim_kaschjev
Ваш менеджер
Максим Кащєєв
Із задоволенням відповімо на всі ваші запитання
Задати питання
Digital Marketing

Як це робиться? Налаштування розширеної електронної комерції

У цій статті я розповім про головні особливості та простоту налаштування розширеної електронної комерції для вашого інтернет-магазину. Багато хто з нас досі залишаються затятими прихильниками стандартної електронної комерції, не усвідомлюючи до кінця, чого вони себе позбавляють.

Річ у тім, що розширена електронна комерція - це потужний інструмент, який дасть вам змогу в повному обсязі аналізувати поведінку відвідувачів на вашому сайті, з першого знайомства з пропонованими товарами до моменту завершення покупки.

Особливості Enhanced Ecommerce

Як я вже говорила, налаштування розширеної електронної комерції дасть вам змогу отримати детальну інформацію про взаємодії користувачів із контентом вашого інтернет-магазину. Так ви зможете отримувати інформацію:

  • про товари, якими цікавився користувач
  • про те, які товари найчастіше користувачі додають у кошик і видаляють з нього
  • перегляди детальної інформації про товари
  • про здійснені транзакції
  • про етапи, на яких користувач з якоїсь причини перервав процес купівлі товару

Покрокове керівництво з налаштування розширеної електронної комерції:

Крок 1. Встановлюємо на сайт код відстеження Universal Google Analytics

Якщо на сторінках вашого інтернет-магазину досі стоїть старий код Google Analytics, то його потрібно видалити, а на його місце додати код Universal Google Analytics.

Код Google Analytics:

Змінюємо на код відстеження Universal Google Analytics:

Крок 2. Підключаємо плагін es.js розширеної електронної комерції

Це можна зробити за допомогою команди:
ga('require', 'ec');

Цю команду необхідно впровадити в код відстеження Universal Google Analytics. Крім того, необхідно активувати функцію "Розширена електронна торгівля" у вашому акаунті Google Analytics:"

  • переходимо у вкладку "Адміністратор" і в колонці "Подання" вибираємо пункт "Налаштування електронної торгівлі":

  • у вікні, що відкрилося, активуємо налаштування розширеної електронної комерції (встановлюємо повзунок "Увімкнено"):

  • натискаємо кнопку "Відправити". Що стосується налаштування маркування етапів оформлення замовлення, то заповнювати це не обов'язково, але ми поговоримо про це пізніше.

Крок 3. Встановлення фрагментів коду

Для відстеження детального процесу покупки, який виконують відвідувачі, необхідно встановити відповідні фрагменти коду на кожну сторінку сайту. Після впровадження коду ви зможете переглядати інформацію про:

  • перегляди показів товарів
  • кліки за посиланнями на товари
  • перегляди детальної інформації про товари
  • додавання товарів у кошик і видалення з нього
  • початок процесу оформлення покупки
  • здійснення транзакцій
  • повернення коштів

Нижче наведені фрагменти коду, які потрібно розмістити на сайті.

1. Код відстеження перегляду товарів

У цьому прикладі користувач вперше бачить товар у результатах пошуку. Цей фрагмент коду необхідно встановити на кожну сторінку, де представлений широкий асортимент товарів інтернет-магазину (наприклад, сторінки категорій, головна сторінка сайту тощо). Для реєстрації цього показу використовується команда ec:addImpression, а інформація про товар передається в об'єкті impressionFieldObject:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');
ga('ec:addImpression', {
  'id': 'P12345',                   // Детальна інформація про продукт
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel/T-Shirts',
  'brand': 'Google',
  'variant': 'black',
  'list': 'Search Results',
  'position': 1                     // 'position'- позиція продукту в результаті пошуку (списку).
}); ga('ec:addImpression', {
  'id': 'P67890',
  'name': 'YouTube Organic T-Shirt',
  'type': 'view',
  'category': 'Apparel/T-Shirts',
  'brand': , 'YouTube',
  'variant': 'gray',
  'list': 'Search Results',
  'position': 2
});
ga('send', 'pageview');              // Надіслати враження про продукт із початкової сторінки перегляду.

2. Код відстеження кліка по товару

Користувач натискає на товар, який його зацікавив, щоб дізнатися про нього докладніше.

Цей фрагмент коду необхідно встановити для кожної картки товару в представленому списку категорії. Щоб зареєструвати цей клік, використовуйте ec:addProduct і ec:setAction:

// Викликається, коли користувач клікає по продукту
function onProductClick() {
  ga('ec:addProduct', {
    'id': 'P12345',
    'name': 'Android Warhol T-Shirt',
    'category': 'Apparel',
    'brand': 'Google',
    'variant': 'black',
    'position': 1
  });
 ga('ec:setAction', 'click', {list: 'Search Results'});
  // Клік по продукту і перенаправлення користувача на сторінку товару
  ga('send', 'event', 'UX', 'click', 'Results', {
      'hitCallback': function() {
        document.location = '/product_details?id=P12345';
      }
  });
}

Створити посилання на товар можна так: /next-page.html"    onclick="onProductClick(); return !ga.loaded;""Android Warhol T-Shirt

3. Код відстеження перегляду інформації про товар

Після кліка на продукт користувач потрапляє на сторінку товару, де бачить його детальний опис.

Цей код необхідно встановити безпосередньо на саму сторінку товару.

Використовуйте ec:addProduct, щоб зареєструвати цей перегляд, і вкажіть дію типу detail за допомогою ec:setAction:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');
ga('ec:addProduct', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel',
  'brand': 'Google',
  'variant': 'black'
});
ga('ec:setAction', 'detail');
ga('send', 'pageview');       // Надсилання деталей про продукт

4. Код для відстеження додавання/видалення товару до/з кошика

Користувач збирається купити товар, попередньо відправивши його в кошик.

Щоб зареєструвати додавання в кошик покупок (або видалення з нього), використовуйте ec:addProduct і задайте тип дії add (або remove):

Цей фрагмент коду встановлюється безпосередньо на кнопку "Додати в кошик" або "Купити".

// Виклик функції, коли товар буде додано до кошика
function addToCart(product) {
  ga('ec:addProduct', {
    'id': product.id,
    'name': product.name,
    'category': product.category,
    'brand': product.brand,
    'variant': product.variant,
    'price': product.price,
    'quantity': product.qty
  });
  ga('ec:setAction', 'add');
  ga('send', 'event', 'UX', 'click', 'add to cart');     // Надсилання даних
}

Нижче представлений фрагмент коду необхідно встановити на кнопку "Видалити з кошика":

ga("create", "UA-XXXXX-Y");
ga("require", "ec");
ga("ec:addProduct", {
  "id": "bc823",
  "name": "Fuelworks T-Shirt",
  "price": "92.00",
  "brand": "Fuelworks",
  "category": "T-Shirts",
  "variant": "red",
  "dimension1": "M",
  "position": 0,
  "quantity": 1
});
ga("ec:setAction", "remove");
ga("send", "event", "detail view", "click", "removeFromCart");

5. Код для відстеження процесу оформлення замовлення

Процес оформлення замовлення складається з етапів. У тому разі, якщо у вашому інтернет-магазині всього один етап оформлення замовлення, то вам необхідно на сторінку кошика додати код:

ga("create", "UA-XXXXX-Y");
ga("require", "ec");
ga("ec:addProduct", {
  "id": "bc823",
  "name": "Fuelworks T-Shirt",
  "price": "92.00",
  "brand": "Fuelworks",
  "category": "T-Shirts",
  "variant": "red",
  "dimension1": "M",
  "position": 0,
  "quantity": 1
});
ga("ec:setAction", "checkout", {
  "step": 1
});
ga("send", "pageview")

У тому разі, якщо процес оформлення складається з декількох етапів, то для передавання даних у Google Analytics вам потрібно буде встановити відповідний код відстеження для кожного етапу оформлення покупки. Для візуалізації проходження відвідувачами всіх етапів оформлення замовлення, рекомендується встановити для кожного з них маркування в Google Analytics.

6. Транзакція

І нарешті, користувач завершує оформлення покупки.

Для відстеження продажу використовуйте ec:addProduct, щоб додати кожен товар, а потім ec:setAction, щоб задати тип дії purchase (покупка). Відомості про транзакцію (наприклад, загальний дохід, податок і вартість доставки) надаються в об'єкті actionFieldObject.

Цей фрагмент коду необхідно встановити на завершальну кнопку оформлення замовлення:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');
ga('ec:addProduct', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel',
  'brand': 'Google',
  'variant': 'black',
  'price': '29.20',
  'quantity': 1
});
// Transaction level information is provided via an actionFieldObject.
ga('ec:setAction', 'purchase', {
  'id': 'T12345',
  'affiliation': 'Google Store - Online',
  'revenue': '37.39',
  'tax': '2.85',
  'shipping': '5.34',
  'coupon': 'SUMMER2013'    // User added a coupon at checkout.
});
ga('send', 'pageview');     // Send transaction data with initial pageview.

Після активації функції розширеної електронної торгівлі та впровадження всіх вище представлених фрагментів коду на сторінках вашого інтернет-магазину, ви зможете аналізувати весь процес оформлення замовлення і виділити для себе проблемні ділянки сайту, на яких відвідувач перериває купівлю товару.

Поділіться своєю емоцією від статті
Давайте обговоримо Ваш проєкт
Ми з радістю зробимо безкоштовну оцінку вашого проєкту
Або просто завантажте файл з презентацією або описом
Моісєєв Артем
Business Development Manager
Моісєєв Артем