Перед налаштуванням потрібно отримати ідентифікатор показника Google Analytics 4. Як це зробити, описано тут:
Також необхідно підключити до сайту контейнер GTM. Як це зробити, описано в нашій інструкції:
Дії в адмін панелі GTM
Для підключення Google Analytics в контейнері GTM необхідно налаштувати тег Google. Для цього в диспетчері тегів у налаштуваннях контейнера, з яким ви працюєте:
Перейдіть у розділ Теги та натисніть Створити.
У полі Конфігурація тега виберіть тип тега Тег Google.
У полі Ідентифікатор тегу додайте ваш ідентифікатор показника GA4.
У блоці Тригери встановіть для тега стандартний тригер All Pages.
Натисніть Зберегти.
Після створення тега контейнер необхідно опублікувати, натиснувши Надіслати, а потім у вікні, що відкриється — Опублікувати.
Перевірити роботу тега можна або за допомогою режиму попереднього перегляду диспетчера тегів, або за допомогою Google Tag Assistant— спеціалізованого плагіна для браузера Chrome.
Увага: якщо ви налаштували підключення Google Analytics, Facebook Pixel чи інших систем через GTM, немає потреби включати ці системи окремо на сайті в розділі Маркетингові системи.
Стандартні події в DataLayer
У магазинах на Хорошопі реалізовано передачу інформації про стандартні події, які необхідні для відстеження поведінки покупців на сайті та електронної торгівлі в Google Analytics, за допомогою рівня даних (DataLayer).
На даний момент передаються такі стандартні події:
Відвідування сторінки каталогу ("event": "view_item_list")
Відвідування сторінки товару ("event": "view_item")
Додавання товару в кошик ("event": "add_to_cart")
Видалення товару з кошика ("event": "remove_from_cart")
Початок оформлення замовлення ("event": "begin_checkout")
Успішне оформлення замовлення ("event": "purchase")
Запит зворотного дзвінка ("event": "callbackRequest")
З повною інформацією про формат та параметри подій можна ознайомитися в документації Google:
У подіях для розширеної торгівлі не реалізовано передавання даних про категорію та бренд товару, але ми плануємо доопрацювати цей функціонал.
Важливо: в Хорошопі подія Успішне оформлення замовлення — динамічна і спрацьовує при натисканні на кнопку Оформити замовлення. Така реалізація необхідна для правильної фіксації успішного замовлення у разі, якщо відразу після його оформлення покупця автоматично перенаправляє на сторінку оплати замовлення в платіжному сервісі.
Якщо раніше ви налаштовували передачу даних до Google Analytcis через GTM, то події старого формату також працюють коректно. Якщо ви плануєте переналаштувати GTM на новий формат подій, зверніться до сапорту, щоб переключити на проєкті передачу подій в форматах для GA4.
Передача в аналітику події
Нижче описано приклад налаштування передачі в аналітику однієї з подій — Додавання товару до кошика і налаштування цілі за цією подією. Коли покупець додає товар у кошик, на рівні даних передається стандартна подія addToCart.
dataLayer.push({ ecommerce: null });
dataLayer.push({
"event": "add_to_cart",
"ecommerce": {
"items": [
{
"item_id": model.article + "",
"item_name": model.title + " (артикул: " + model.article_for_display + ")",
"price": model.price * 1,
"currency": GLOBAL.currency.iso,
"quantity": model.quantity
}
]
}
});
Для реєстрації події в аналітиці та налаштування цілі необхідно виконати такі кроки:
У контейнері GTM створіть змінну:
У розділі Змінні в полі Спеціальні змінні створіть нову змінну з типом Спеціальна подія.
Створіть тригер add_to_cart:
У розділі Тригери створіть новий тригер. Задайте зрозумілу назву тригера і виберіть тип активатора Спеціальна подія.
У поле Назва події потрібно вставити мітку add_to_cart. В умові Запуск тригера виберіть Окремі користувацькі події.
У блоці Запускати цей тригер, коли відбувається подія і виконуються всі відповідні умови установіть за порядком значення Спеціальна подія, дорівнює, add_to_cart.
Збережіть тригер.
Створіть тег add_to_cart:
У розділі Теги виберіть Створити і задайте зрозумілу назву тега.
У полі Тип тегу виберіть Google Analytics: подія Google Analytics 4.
У налаштуваннях тега задайте Ідентифікатор показника Google Analytics 4 та Назву події — add_to_cart.
Позначте чекбокс Відправити дані про електронну комерцію у розділі Інші налаштування → Електронна комерція та виберіть Джерело даних — Data Layer.
В розділі Тригери виберіть раніше створений тригер add_to_cart з типом Спеціальна подія.
Збережіть тег.
Після створення тега необхідно опублікувати на сайті нову версію контейнера.
Перевірка передачі даних
Перевірити спрацьовування тега під час додавання товару в кошик можна в режимі попереднього перегляду.
Для перевірки передачі події в аналітику перейдіть в обліковий запис аналітики в Звіти → У реальному часі → Кількість подій за параметром “Назва події”.
Готова конфігурація GTM від Хорошоп
Ви можете імпортувати в свій контейнер GTM готовий файл конфігурації для подій, які Хорошоп передає в DataLayer.
Увага: цей файл конфігурації містить повні налаштування для передачі подій, включаючи готовий тег Google. Якщо ви вже почали налаштовувати передачу подій вручну, завантажувати файл конфігурації не потрібно.
Як імпортувати
Створіть акаунт GTM або зайдіть в існуючий.
Перейдіть у вкладку Адміністратор та у колонці Контейнер виберіть пункт Імпортувати контейнер.
Завантажте файл конфігурації json і виберіть відповідні параметри залежно від цілей. Якщо акаунт новий і налаштувань ще немає, тоді оберіть робочу область та імпортуйте файл. Якщо в GTM є налаштування, то бажано створити окрему робочу область для імпорту.
Заміна ідентифікатора
Після імпорту конфігурації обовʼязково необхідно замінити ідентифікатор показника у всіх тегах, починаючи з тега Google:
Перейдіть в розділ Теги та натисніть на назву тега Google GA4 - NEW для редагування.
Змініть ідентифікатор G-0000000000 на свій ідентифікатор показника GA4.
Натисніть Зберегти.
Повторіть цю процедуру для всіх тегів типу Google Analytics: подія Google Analytics 4.
Опублікуйте контейнер.