• Марія Кавака

Налаштування Ecommerce Google Analytics 4 (App+Web) через Google Tag Manager. Докладна інструкція

У цій статті мова буде йти про те, за чим я вважаю, майбутнє веб-аналітики, а саме Google Analytics 4 (раніше App + Web) і Ecommerce. Годі зволікати, одразу до діла!

  1. Що таке Ecommerce в Google Analytics

  2. Як виглядають звіти Ecommerce в інтерфейсі GA4

  3. Налаштування Ecommerce GA4 за допомогою Google Tag Manager

3.1. Написання ТЗ розробнику

3.2. Налаштування необхідних тегів в GTM


4. Самостійне налаштування Ecommerce GA4 на основі даних Enhanced Ecommerce Google Analytics


Що таке Ecommerce в Google Analytics


Звіти по електронній торгівлі (Ecommerce) - це спеціальна група звітів в Google Analytics, яка містить в собі різноманітні звіти для оцінки ефективності роботи інтернет-магазинів. Хоча, в деяких випадках цю групу звітів можна також використовувати і для оцінки роботи інших типів бізнесу, але це вже тема іншої статті.


У повній версії налаштування Ecommerce для Google Analytics 4 ви зможете відслідковувати такі взаємодії користувачів з товарами на сайті:

  • Product / Item List Views / Impressions - Перегляд товару в лістингу (більш докладно кожен крок я розписую в блоці Налаштування Ecommerce GA4 за допомогою GTM)

  • Product / Item List Clicks - Клік по товару в лістингу

  • Product / Item Detail Views - Перегляд повної інформації про товар. Дуже часто це рівноцінно перегляду картки товару

  • Adds / Removes from Cart - Додавання / Видалення товару з кошика

  • Checkouts - Проходження етапів оформлення

  • Purchases - Купівля

  • Refunds - Повернення товару

Крім дій з товарами можна також відстежувати взаємодію з банерами на сайті:

  • Promotion Views / Impressions - Перегляд промо-банера

  • Promotion Clicks - Клік по промо-банеру

Відмінною рисою і болем звітів по Ecommerce є той факт, що дані для них не збираються при базовій установці Google Analytics😭. Для отримання даних маркетологу доводиться витратити чимало сил, часу і енергії. А все тому, що для коректного налаштування маркетологу, в команді з розробником, необхідно зрозуміти, що таке dataLayer і як він працює в GTM. І хоча, на думку багатьох, налаштування електронної торгівлі це "пекельна праця"🤯, більшість фахівців все ж проходять через це і отримують заповітні звіти. Оскільки ви читаєте цю статтю, припускаю, що ви знаєте, як виглядають звіти Enhanced Ecommerce в стандартній версії Google Analytics😏.


Як виглядають звіти Ecommerce в інтерфейсі GA4


На даний момент в інтерфейсі ми бачимо лише інформацію про факт здійснення транзакції і доході з неї. На цьому все😔. Принаймні на даному етапі розвитку нової аналітики.

Але Google Analytics 4 крутий же не самим інтерфейсом, а тим, що дозволяє нам "за копійки" скласти зібрану інформацію в BigQuery і далі самостійно на основі сирих даних побудувати потрібні звіти. І ось ця функція вже працює. Під дані Ecommerce в схемі BigQuery відведено дуже багато полів. На скріншоті нижче всі навіть не помістилися.


Налаштування Ecommerce GA4 за допомогою Google Tag Manager


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


У цілому, налаштування Ecommerce для Google Analytics 4 за допомогою Google Tag Manager нічим особливо не відрізняється від налаштування Enhanced Ecommerce для Google Analytics. Етапи ті ж самі:

  • Написати ТЗ розробнику для передачі даних в dataLayer

  • Перевірити коректність установки кодів розробником (цей етап найдовший і може повторюватися кілька разів.)

  • Налаштування необхідних тегів в GTM

Давайте розберемо ці етапи детальніше.


Написання ТЗ розробнику для передачі даних в dataLayer


Цей етап можна назвати найпростішим. Все що вам потрібно, це перейти на сторінку офіційної документації та на основі зібраної там інформації написати ТЗ розробнику😃. Подумала я, перед тим, як сісти робити перші налаштування. Як виявилося, однієї сторінки довідки мало і потрібно ще почитати тут.😏 Адже саме за другим посиланням розповідається які саме дані необхідно передавати в кожен з параметрів товарів або промо-банерів.


Тепер озброївшись інформацією з довідки ми готові до написання ТЗ💪. У ньому необхідно розписати детально кожен крок налаштування.


Написання ТЗ на відслідковування взаємодії з товарами


Перегляд товару в списку товарів


Під цією подією маємо на увазі перегляд товару в списках на сайті. Наприклад, в списку "Знижені в ціні товари":


Або в списку "Переглянуті товари":

Дуже часто пишуть, що інформацію про цю подію необхідно передавати в момент завантаження сторінки. Насправді така реалізація некоректна, оскільки в момент завантаження сторінки користувач ще не встиг переглянути всі товари на сторінці. Дуже часто буває ситуація, що користувач взагалі не доскролює до певних списків, інформація про які вже передалася в момент завантаження сторінки. Щоб уникнути спотворення даних, рекомендую передавати подію в момент відходу користувача зі сторінки (подія в браузері beforeunload), попередньо зберігши інформацію про те, які товари потрапляли в видиму область екрана користувача.


Назва події в GA4: view_item_list


Саме під таким ім'ям ви зможете в подальшому знайти її як в користувацькому інтерфейсі, так і в BigQuery.


Приклад коду для відстеження події:


ВАЖЛИВО! Кожен товар передається окремим об'єктом в масиві items. У подальших прикладах коду я буду показувати тільки один товар для зменшення довжини статті, але правило в попередньому реченні залишається актуальним і для наступних фрагментів коду.


window.dataLayer = window.dataLayer || [];
dataLayer.push({
 'event': 'view_item_list',
 'ecommerce': {
 'items': [
 {
 'item_name': 'PRO GTM',       // Name or ID is required.
 'item_id': '12345',
 'price': '500',
 'item_brand': 'Analytics Tips',
 'item_category': 'Very Good Category',
 'item_category_2': 'Very Good Category 2',
 'item_category_3': 'Very Good Category 3',
 'item_category_4': 'Very Good Category 4',
 'item_variant': 'full',
 'item_list_name': 'Hits',
 'item_list_id': 'A123',
 'index': 1,
 'quantity': '1'
 },
 {
 'item_name': 'Triblend Android T-Shirt',       // Name or ID is required.
 'item_id': '12345',
 'price': '15.25',
 'item_brand': 'Google',
 'item_category': 'Apparel',
 'item_category_2': 'Mens',
 'item_category_3': 'Shirts',
 'item_category_4': 'Tshirts',
 'item_variant': 'Gray',
 'item_list_name': 'Search Results',
 'item_list_id': 'SR123',
 'index': 1,
 'quantity': '1',
 'discount': '100',
 'coupon': 'SPRING'
 }]
 }
});

Опис параметрів, які можна передавати для події:


Приклад налаштування в GTM


ВАЖЛИВО! Змінна типу Data Layer, скріншот якої ви бачите нижче, зберігає в собі інформацію про товари не тільки для події view_item_list, але і для всіх наступних подій, тому вам не потрібно створювати її кожен раз. Досить створити на початку і просто підключати до всіх потрібних тегів.

Що стосується налаштування тегів і тригерів, то вони будуть трохи відрізнятися для кожної події, тому для кожної події будуть свої скріншоти:

Клік по товару у списку товарів


Інформацію про цей крок необхідно передавати в момент, коли користувач клікає по одному з товарів в списку.


Назва події в GA4: select_item


Приклад коду для відстеження події:

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'select_item',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category_2': 'Very Good Category 2',
       'item_category_3': 'Very Good Category 3',
       'item_category_4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

Опис параметрів, які можна передавати для події:


Приклад налаштування в GTM

Перегляд детальної інформації про товар


Інформація про цю подію зазвичай передається при перегляді картки товару в момент завантаження сторінки.


Назва події в GA4: view_item


Приклад коду для відстеження події:

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'view_item',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category_2': 'Very Good Category 2',
       'item_category_3': 'Very Good Category 3',
       'item_category_4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

Опис параметрів, які можна передавати для події:

Приклад налаштування в GTM

Додавання товару в кошик


Інформацію необхідно передавати у всіх випадках, коли користувач додає товар у кошик.


Назва події в GA4: add_to_cart


Приклад коду для відстеження події:

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'add_to_cart',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category_2': 'Very Good Category 2',
       'item_category_3': 'Very Good Category 3',
       'item_category_4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

Опис параметрів, які можна передавати для події:


Приклад налаштування в GTM

Видалення товару з кошика


Передаємо дані при видаленні користувачем товарів з кошика.


Назва події в GA4: remove_from_cart


Приклад коду для відстеження події:

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'remove_from_cart',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category_2': 'Very Good Category 2',
       'item_category_3': 'Very Good Category 3',
       'item_category_4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

Опис параметрів, які можна передавати для події:


Приклад налаштування в GTM


Початок оформлення покупки


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


Назва події в GA4: begin_checkout


Приклад коду для відстеження події:

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'begin_checkout',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category_2': 'Very Good Category 2',
       'item_category_3': 'Very Good Category 3',
       'item_category_4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

Опис параметрів, які можна передавати для події:


Приклад налаштування в GTM

Вибір способу доставки


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


Назва події в GA4: add_shipping_info


Приклад коду для відстеження події:

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'add_shipping_info',
  'ecommerce': {
    'shipping_tier': 'google',
    'value': 23.07,
    'currency': 'USD',
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category_2': 'Very Good Category 2',
       'item_category_3': 'Very Good Category 3',
       'item_category_4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

Опис параметрів, які можна передавати для події:


Приклад налаштування в GTM

Вибір способу оплати


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


Назва події в GA4: add_payment_info


Приклад коду для відстеження події:

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'add_payment_info',
  'ecommerce': {
    'payment_type': 'google_pay',
    'value': 23.07,
    'currency': 'USD',
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category_2': 'Very Good Category 2',
       'item_category_3': 'Very Good Category 3',
       'item_category_4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

Опис параметрів, які можна передавати для події:


Приклад налаштування в GTM

Транзакція


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


Назва події в GA4: purchase


Приклад коду для відстеження події:

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
  'transaction_id':24T’,
  'value': 510,
  'currency': 'USD',
  'tax': 10,
  'shipping': 0,
  'coupon': 'free_shipping',
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category_2': 'Very Good Category 2',
       'item_category_3': 'Very Good Category 3',
       'item_category_4': 'Very Good Category 4',
       'item_variant': 'full',
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

Опис параметрів, які можна передавати для події:


Приклад налаштування в GTM


Оскільки я не знайшла на поточний момент офіційної інформації про те, як необхідно передавати додаткові дані про транзакції, нижче моя інтерпретація. Надалі інформація в цьому пункті може помінятися.