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

Налаштування Ecommerce GA4 через Google Tag Manager. Детальна інструкція

Минула стаття на цьому блозі вийшла майже рік тому – 30 липня. Не те щоб мені не було про що написати, але якось “руки не доходили” до цього. При цьому бажання ділитися знаннями накопичувалося весь цей час, і на початку квітня я таки сів писати статтю. Вона все ще у чернетках. Вона може зачекати. А ось тема сьогоднішньої статті чекати не може. На мою думку, всім час розібратися в ній, оскільки, за цим майбутнє аналітики. Мова звичайно ж про нову версію Google Analytics 4 (раніше App + Web) та налаштування Ecommerce. На цьому ліричний вступ варто закінчувати та приступати до суті.

    1. Що таке Ecommerce у Google Analytics
    2. Як виглядають звіти Ecommerce в інтерфейсі GA4 (раніше App+Web)
    3. Налаштування Ecommerce GA4 (раніше App + Web) за допомогою Google Tag Manager
    4. Самостійне налаштування Ecommerce GA4 (раніше App + Web) на основі даних Enhanced Ecommerce Google Analytics

 

Що таке Ecommerce у Google Analytics

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

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

  • Product/Item List Views/Impressions – Перегляд товару в лістингу (детальніше кожен крок я розписую в блоці Налаштування Ecommerce GA4 (раніше App + Web) за допомогою 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 (раніше App+Web)

А ось це вже цікавіше. Тут на нас чекає щось нове. Давайте подивимося:Візуалізація даних електронної торгівлі в інтерфейсі GA4 (App+Web)

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

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

 

Налаштування Ecommerce GA4 (раніше App + Web) за допомогою GTM

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

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

  1. Написати ТЗ розробнику для передачі даних у dataLayer
  2. Перевірити коректність установки кодів розробником (Цей етап найдовший і може повторюватися кілька разів. Хто хоч раз впроваджував Enhanced Ecommerce, зрозуміє мене)
  3. Налаштування необхідних тегів у GTM
  4. Налаштування в Google Analytics (так, нас позбавили можливості увімкнути самостійно кілька галочок. Ех. Але тепер і забути їх включити теж не вийде)

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

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

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

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

Написання ТЗ на відстеження взаємодій із товарами

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

Під цією подією мають на увазі перегляд товару у списках на сайті. Наприклад, у списку “Кращі цінові пропозиції”:Приклад списку Найкращі цінові пропозиції

Або у списку “Спеціально для вас”:Приклад списку Спеціально для вас

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

Назва події в GA4 (раніше App+Web):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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': '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_category2': 'Mens',

       'item_category3': 'Shirts',

       'item_category4': 'Tshirts',

       'item_variant': 'Gray',

       'item_list_name': 'Search Results',

       'item_list_id': 'SR123',

       'index': 1,

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event view_item_list Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назва товару, який користувач побачив у списку. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, який побачив користувач у списку.
price 500 Ціна 1 одиниці товару, який користувач побачив у списку.
item_brand Analytics Tips Бренд товару зі списку.
item_category Very Good Category Найвища категорія для товару зі списку. Для Enhanced Ecommerce категорія передавалася у вигляді Very Good Category/Very Good Category 5/кожний рівень ієрархії поділявся символом “/”. При налаштуванні Ecommerce для GA4 варто враховувати, що під кожний рівень є власний параметр.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії товару зі списку.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії товару зі списку.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії товару зі списку.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії товару зі списку.
item_variant full Варіант товару із списку. У цей параметр можна надсилати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу і т.д.
item_list_name Hits Назву списку, в якому користувач побачив товар. Вище я наводив кілька прикладів.
item_list_id A123 Ідентифікатор списку, де користувач побачив товар.
index 1 Порядковий номер товару у списку. Нумерація рахується зліва направо та зверху вниз. Вище на скріншоті я показав порядок нумерації.
quantity 1 Кількість товару, яку побачив користувач. Найчастіше користувач бачить іконку товару і мається на увазі, що це 1 товар. У цьому випадку цей параметр можна упустити.
discount 100 Розмір знижки на товар, який побачив користувач у списку.
coupon SPRING У цей параметр можна передавати код купона товару зі списку. Хоча мені поки що і незрозуміло практичне застосування купона на цьому етапі – така можливість є.

 

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

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

 

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

 

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

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

Назва події в GA4 (раніше App+Web): 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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'item_list_name': 'Hits',

       'item_list_id': 'A123',

       'index': 1,

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event select_item Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назва товару, по якому користувач здійснив клік у списку. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, яким користувач здійснив клік у списку.
price 500 Ціна 1 одиниці товару, по якому користувач клікнув у списку.
item_brand Analytics Tips Бренд товару, по якому був клік зі списку.
item_category Very Good Category Найвища категорія для товару, по якому був клік зі списку.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії для товару, по якому був клік зі списку.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії для товару, по якому був клік зі списку.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії для товару, по якому був клік зі списку.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії для товару, по якому був клік зі списку.
item_variant full Варіант товару, по якому був клік зі списку. У цей параметр можна надсилати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу і т.д.
item_list_name Hits Назва списку, в якому користувач здійснив клік по товару.
item_list_id A123 Ідентифікатор списку, в якому користувач здійснив клік по товару.
index 1 Порядковий номер товару у списку. Нумерація рахується зліва направо та зверху вниз. Важливо, нумерація в момент показу товару у списку та в момент кліку має бути аналогічною.
quantity 1 Параметр, у якому фіксується кількість товару. У разі події кліку по товару в списку можна не передавати.
discount 100 Розмір знижки на товар, по якому користувач зробив клік.
coupon SPRING У цей параметр можна передавати код купона для товару, по якому був клік.

 

Приклад налаштування в GTMКонфігурація тега для налаштування події select_item Тригер для налаштування події select_item

 

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

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

Назва події в GA4 (раніше App+Web): 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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'item_list_name': 'Hits',

       'item_list_id': 'A123',

       'index': 1,

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event view_item Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назву товару, картку якого користувач переглядає. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, картку якого проглядає користувач.
price 500 Ціна 1 одиниці товару, картку якого користувач переглядає.
item_brand Analytics Tips Бренд товару, картку якого користувач переглядає.
item_category Very Good Category Найвища категорія товару, картку якого переглядає користувач.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії товару, картку якого переглядає користувач.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії товару, картку якого переглядає користувач.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії товару, картку якого переглядає користувач.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії товару, картку якого переглядає користувач.
item_variant full Варіант товару, картку якого переглядає користувач.
item_list_name Hits Назва списку, де користувач знайшов товар, картку якого він переглядає.
item_list_id A123 Ідентифікатор списку, де користувач знайшов товар, картку якого він переглядає.
index 1 Порядковий номер товару у списку. Нумерація рахується зліва направо та зверху вниз. Важливо, нумерація в момент показу товару у списку та в момент перегляду картки товару має бути аналогічною.
quantity 1 Параметр, у якому фіксується кількість товару. У разі події перегляду картки товару можна не передавати.
discount 100 Розмір знижки товару, картку якого переглядає користувач.
coupon SPRING В цей параметр можна передавати код купона для товару.

 

Приклад налаштування в GTMКонфігурація тега для налаштування події view_item Тригер для налаштування події view_item

 

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

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

Назва події в GA4 (раніше App+Web): 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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'item_list_name': 'Hits',

       'item_list_id': 'A123',

       'index': 1,

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event add_to_cart Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назву товару, який додали до кошика. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, який додали до кошика.
price 500 Ціна 1 одиниці товару, який додали до кошика.
item_brand Analytics Tips Бренд товару, який додали до кошика.
item_category Very Good Category Найвища категорія для товару, який додали до кошика.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії для товару, який додали до кошика.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії для товару, який додали до кошика.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії для товару, який додали до кошика.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії для товару, який додали до кошика.
item_variant full Варіант товару, який додали до кошика. У цей параметр можна надсилати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу і т.д.
item_list_name Hits Назва списку, в якому користувач здійснив додавання товару до кошика.
item_list_id A123 Ідентифікатор списку, в якому користувач здійснив додавання товару до кошика.
index 1 Порядковий номер товару у списку. Нумерація рахується зліва направо та зверху вниз. Важливо, нумерація в момент показу товару у списку та в момент кліка має бути аналогічною.
quantity 1 Параметр, в якому фіксується кількість товару, яку користувач додав до кошика. Якщо користувач додає товар, який вже є в кошику, передаємо тільки кількість з останньої ітерації.
discount 100 Розмір знижки на товар, який користувач додав до кошика.
coupon SPRING У цей параметр можна передавати код купона для товару, який додав користувач до кошика.

 

Приклад налаштування в GTMКонфігурація тега для налаштування події add_to_cart Тригер для налаштування події add_to_cart

 

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

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

Назва події в GA4 (раніше App+Web): 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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'item_list_name': 'Hits',

       'item_list_id': 'A123',

       'index': 1,

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event remove_from_cart Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назву товару, який користувач видалив із кошика. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, який користувач вилучив із кошика.
price 500 Ціна 1 одиниці товару, який користувач вилучив із кошика.
item_brand Analytics Tips Бренд товару, який користувач видалив із кошика.
item_category Very Good Category Найвища категорія для товару, який користувач вилучив із кошика.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії для товару, який користувач вилучив із кошика.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії для товару, який користувач вилучив із кошика.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії для товару, який користувач вилучив із кошика.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії для товару, який вилучив користувач з кошика.
item_variant full Варіант товару, який користувач вилучив із кошика. У цей параметр можна надсилати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу і т.д.
item_list_name Hits Назва списку, в якому користувач здійснив видалення товару з кошика.
item_list_id A123 Ідентифікатор списку, в якому користувач здійснив видалення товару з кошика.
index 1 Порядковий номер товару у списку. Нумерація рахується зліва направо та зверху вниз. Важливо, нумерація в момент показу товару у списку та в момент кліка має бути аналогічною.
quantity 1 Параметр, у якому фіксується кількість товару. Передаємо не загальну кількість товару, а лише ту кількість, яку користувач вилучив із кошика.
discount 100 Розмір знижки на товар, який користувач видалив із кошика.
coupon SPRING У цей параметр можна передавати код купона для товару, який вилучив користувач з кошика.

 

Приклад налаштування в GTMКонфігурація тега для налаштування події remove_from_cart Тригер для налаштування події remove_from_cart

 

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

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

Назва події в GA4 (раніше App+Web):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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'item_list_name': 'Hits',

       'item_list_id': 'A123',

       'index': 1,

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event begin_checkout Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назва товару, який був у користувача у кошику на момент перегляду сторінки оформлення. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID, ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, який був у користувача в кошику, на момент перегляду сторінки оформлення.
price 500 Ціна 1 одиниці товару, який був у користувача у кошику на момент перегляду сторінки оформлення.
item_brand Analytics Tips Бренд товару, який був у користувача у кошику на момент перегляду сторінки оформлення.
item_category Very Good Category Найвища категорія для товару, який був у користувача у кошику на момент перегляду сторінки оформлення.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії для товару, який був у користувача у кошику на момент перегляду сторінки оформлення.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії для товару, який був у користувача у кошику на момент перегляду сторінки оформлення.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії для товару, який був у користувача у кошику, на момент перегляду сторінки оформлення.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії для товару, який був у користувача у кошику, на момент перегляду сторінки оформлення.
item_variant full Варіант товару, який був у користувача в кошику, на момент перегляду сторінки оформлення. У цей параметр можна надсилати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу і т.д.
item_list_name Hits Назву списку, в якому користувач додав товар до кошика. Насправді ще не зрозуміло, як працюватиме атрибуція списків в інтерфейсі GA4, але для любителів BigQuery доведеться або рахувати її самостійно, або передавати відразу в події. Мені більше до вподоби перший варіант.
item_list_id A123 Ідентифікатор списку, де користувач додав товар у кошик.
index 1 Порядковий номер товару в списку. Нумерація рахується зліва направо та зверху вниз. Важливо, нумерація в момент показу товару в списку та в момент кліку має бути аналогічною.
quantity 1 Параметр, у якому фіксується кількість товару.
discount 100 Розмір знижки на товар, який був у користувача в кошику, на момент перегляду сторінки оформлення.
coupon SPRING У цей параметр можна передавати код купона для товару, який був у користувача в кошику, на момент перегляду сторінки оформлення.

 

Приклад налаштування в GTMКонфігурація тега для налаштування події begin_checkout Тригер для налаштування події begin_checkout

 

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

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

Назва події в GA4 (раніше App+Web):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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'item_list_name': 'Hits',

       'item_list_id': 'A123',

       'index': 1,

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event add_shipping_info Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назва товару, який був у користувача в кошику на момент вибору способу доставки. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, який був у користувача у кошику, на момент вибору способу доставки.
price 500 Ціна 1 одиниці товару, який був у користувача в кошику, на момент вибору способу доставки.
item_brand Analytics Tips Бренд товару, який був у користувача в кошику на момент вибору способу доставки.
item_category Very Good Category Найвища категорія для товару, який був у користувача в кошику на момент вибору способу доставки.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент вибору способу доставки.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент вибору способу доставки.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент вибору способу доставки.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент вибору способу доставки.
item_variant full Варіант товару, який був у користувача у кошику на момент вибору способу доставки. У цей параметр можна передавати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу тощо.
item_list_name Hits Назва списку, в якому користувач здійснив додавання товару до кошика.
item_list_id A123 Ідентифікатор списку, в якому користувач здійснив додавання товару до кошика.
index 1 Порядковий номер товару у списку. Нумерація рахується зліва направо та зверху вниз. Важливо, нумерація в момент показу товару у списку та в момент кліка має бути аналогічною.
quantity 1 Параметр, в якому фіксується кількість товару на момент вибору способу доставки.
discount 100 Розмір знижки на товар, який був у користувача в кошику на момент вибору способу доставки.
coupon SPRING У цей параметр можна передавати код купона для товару, який був у користувача в кошику на момент вибору способу доставки.
shipping_tier google Вибраний користувачем спосіб доставки.
value 23.07 Загальна сума кошика на момент надсилання події.
currency USD код валюти.

 

Приклад налаштування в GTMКонфігурація тега для налаштування події add_shipping_info Тригер для налаштування події add_shipping_info

 

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

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

Назва події в GA4 (раніше App+Web):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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'item_list_name': 'Hits',

       'item_list_id': 'A123',

       'index': 1,

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event add_payment_info Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назва товару, який був у користувача в кошику на момент вибору способу оплати. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, який був у користувача у кошику на момент вибору способу оплати.
price 500 Ціна 1 одиниці товару, який був у користувача в кошику на момент вибору способу оплати.
item_brand Analytics Tips Бренд товару, який був у користувача в кошику на момент вибору способу оплати.
item_category Very Good Category Найвища категорія для товару, який був у користувача в кошику на момент вибору способу оплати.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент вибору способу оплати.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент вибору способу оплати.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент вибору способу оплати.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент вибору способу оплати.
item_variant full Варіант товару, який був у користувача у кошику на момент вибору способу оплати. У цей параметр можна передавати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу тощо.
item_list_name Hits Назва списку, в якому користувач здійснив додавання товару до кошика.
item_list_id A123 Ідентифікатор списку, в якому користувач здійснив додавання товару до кошика.
index 1 Порядковий номер товару у списку. Нумерація рахується зліва направо та зверху вниз. Важливо, нумерація в момент показу товару у списку та в момент кліка має бути аналогічною.
quantity 1 Параметр, у якому фіксується кількість товару на момент вибору способу оплати.
discount 100 Розмір знижки на товар, який був у користувача в кошику на момент вибору способу оплати.
coupon SPRING У цей параметр можна передавати код купона для товару, який був у користувача в кошику на момент вибору способу оплати.
payment_type google_pay Вибраний користувачем спосіб оплати.
value 23.07 Загальна сума кошика на момент надсилання події.
currency USD код валюти.

 

Приклад налаштування в GTMКонфігурація тега для налаштування події add_payment_info Тригер для налаштування події add_payment_info

 

Транзакція

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

Назва події в GA4 (раніше App+Web):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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event purchase Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назву товару, який придбав користувач. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, який придбав користувач.
price 500 Ціна 1 одиниці товару, який придбав користувач.
item_brand Analytics Tips Бренд товару, який придбав користувач.
item_category Very Good Category Найвища категорія для товару, який придбав користувач.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії для товару, який придбав користувач.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії для товару, який придбав користувач.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії товару, який придбав користувач.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії для товару, який придбав користувач.
item_variant full Варіант товару, який придбав користувач. У цей параметр можна надсилати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу і т.д.
item_list_name Hits Назва списку, в якому користувач здійснив клік по товару.
quantity 1 Параметр, у якому фіксується кількість товару. У разі події кліку по товару в списку можна не передавати.
coupon free_shipping У цей параметр можна передавати код купона для товару, який придбав користувач.
discount 100 Розмір знижки на товар, який придбав користувач.
transaction_id 24T Ідентифікатор транзакції.
value 510 Загальна сума кошика на момент надсилання події.
currency USD код валюти.
tax 10 Сума податку.
shipping 0 Вартість доставки.

 

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

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

 

Вище ми розібрали основні події воронки, які були доступні й у старій версії аналітики. Але існують ще три події:

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

– відстеження додавання товару до вибраного (нова стандартна подія для Google Analytics)

– Перегляд сторінки кошика (нова стандартна подія для Google Analytics)

 

Повернення товару

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

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

Назва події в GA4 (раніше App+Web): refund

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

window.dataLayer = window.dataLayer || [];

dataLayer.push({

  'event': 'refund',

  '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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event refund Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назва товару, яким користувач робить повернення. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, по якому користувач робить повернення.
price 500 Ціна 1 одиниці товару, по якому користувач робить повернення.
item_brand Analytics Tips Бренд товару, по якому користувач робить повернення.
item_category Very Good Category Найвища категорія для товару,по якому користувач робить повернення.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії для товару, по якому користувач робить повернення.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії для товару, по якому користувач робить повернення.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії для товару, по якому користувач робить повернення.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії для товару, по якому користувач робить повернення.
item_variant full Варіант товару, по якому користувач робить повернення. У цей параметр можна надсилати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу і т.д.
quantity 1 Параметр, у якому фіксується кількість товару, придбаного користувачем.
discount 100 Розмір знижки на товар, який придбав користувач.
coupon SPRING У цей параметр можна передавати код купона товару, який придбав користувач.
transaction_id 24T Ідентифікатор транзакції.
value 510 Загальна сума кошика на момент надсилання події.
currency USD код валюти.
tax 10 Сума податку.
shipping 0 Вартість доставки.

 

Додавання товару у обране

Це нова стандартна подія. У Enhanced Ecommerce його не було і раніше його відстежували звичайною подією. Зараз є можливість передати значно більше інформації. Відправляємо її звичайно ж у момент, коли користувач додає товар в обране.

Назва події в GA4 (раніше App+Web): add_to_wishlist

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

window.dataLayer = window.dataLayer || [];

dataLayer.push({

  'event': 'add_to_wishlist',

  '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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'item_list_name': 'Hits',

       'item_list_id': 'A123',

       'index': 1,

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event add_to_wishlist Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назва товару, який був доданий до обраного. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, який було додано в обране.
price 500 Ціна 1 одиниці товару, який був доданий до обраного.
item_brand Analytics Tips Бренд товару, який був доданий до обраного.
item_category Very Good Category Найвища категорія для товару, який було додано до обраного.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії для товару, який було додано до вибраного.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії для товару, який було додано до обраного.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії для товару, який було додано до обраного.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії для товару, який було додано до обраного.
item_variant full Варіант товару, який було додано до обраного. У цей параметр можна надсилати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу і т.д.
item_list_name Hits Назва списку, в якому користувач додав товар в обране.
item_list_id A123 Ідентифікатор списку, в якому користувач додав товар в обране.
index 1 Порядковий номер товару у списку. Нумерація рахується зліва направо та зверху вниз. Важливо, нумерація в момент показу товару у списку та в момент кліка має бути аналогічною.
quantity 1 Параметр, у якому фіксується кількість товару. У разі події додавання товару до обраного можна не передавати.

 

Приклад налаштування в GTMКонфігурація тега для налаштування події add_to_wishlist Тригер для налаштування події add_to_wishlist

 

Перегляд сторінки кошика

Оскільки перегляд сторінки кошика на багатьох сайтах не є обов’язковим кроком в Enhanced Ecommerce доводилося навмисно опускати цю подію, щоб не псувати візуальний вигляд воронки оформлення замовлення. Дуже круто, що хлопці з Google наразі виділили під нього окрему подію.

Назва події в GA4 (раніше App+Web):view_cart .

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

window.dataLayer = window.dataLayer || [];

dataLayer.push({

  'event': 'view_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_category2': 'Very Good Category 2',

       'item_category3': 'Very Good Category 3',

       'item_category4': 'Very Good Category 4',

       'item_variant': 'full',

       'item_list_name': 'Hits',

       'item_list_id': 'A123',

       'index': 1,

       'quantity': '1',

       'discount': '100',

       'coupon': 'SPRING'

     }]

  }

});

 

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

Параметр Приклад даних Опис
event view_cart Назва події. Саме на нього ми налаштовуватимемо тригер в GTM. Значення у прикладі краще не змінювати.
item_name PRO GTM Назва товару, який був у користувача у кошику на момент перегляду сторінки кошика. Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id 12345 Ідентифікатор товару, який був у користувача в кошику, на момент перегляду сторінки кошика.
price 500 Ціна 1 одиниці товару, який був у користувача в кошику на момент перегляду сторінки кошика.
item_brand Analytics Tips Бренд товару, який був у користувача в кошику на момент перегляду сторінки корзини.
item_category Very Good Category Найвища категорія для товару, який був у користувача в кошику на момент перегляду сторінки кошика.
item_category2 Very Good Category 2 Другий найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент перегляду сторінки кошика.
item_category3 Very Good Category 3 Третій найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент перегляду сторінки кошика.
item_category4 Very Good Category 4 Четвертий найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент перегляду сторінки кошика.
item_category5 Very Good Category 5 П’ятий найвищий рівень ієрархії категорії для товару, який був у користувача в кошику на момент перегляду сторінки кошика.
item_variant full Варіант товару, який був у користувача в кошику, на момент перегляду сторінки кошика. У цей параметр можна передавати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу тощо.
item_list_name Hits Назва списку, в якому користувач здійснив додавання товару до кошика.
item_list_id A123 Ідентифікатор списку, в якому користувач здійснив додавання товару до кошика.
index 1 Порядковий номер товару у списку. Нумерація рахується зліва направо та зверху вниз. Важливо, нумерація в момент показу товару у списку та в момент кліка має бути аналогічною.
quantity 1 Параметр, в якому фіксується кількість товару, який був у користувача у кошику на момент перегляду сторінки кошика.
discount 100 Розмір знижки на товар, який був у користувача у кошику на момент перегляду сторінки кошика.
coupon SPRING У цей параметр можна передавати код купона для товару, який був у користувача в кошику на момент перегляду сторінки кошика.

 

Приклад налаштування в GTMКонфігурація тега для налаштування події view_cart Тригер для налаштування події view_cart

Перевірка коректності встановлення кодів розробником

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

Налаштування необхідних тегів у Google Tag Manager

Звичайно ж, без цього нікуди. Якщо ви прийшли сюди за цим, то дивіться розділ Написання ТЗ розробнику передачі даних у dataLayer цієї статті. Щоб не заплутувати вас, я описав налаштування GTM для кожної події в цьому блоці. Не забудьте опублікувати версію після всіх змін.

Самостійне налаштування Ecommerce GA4 (раніше App + Web) на основі даних Enhanced Ecommerce Google Analytics

Звичайно ж написати ТЗ, чекати на його впровадження і тільки потім приступати до налаштування та збору даних, стратегія хороша та робоча, але що робити, якщо ви хочете почати отримувати перші дані вже зараз?

Насамперед перевірте, чи встановлений у вас на сайті Enhanced Ecommerce. І чи зроблено це налаштування через GTM. Якщо так, то дуже пощастило, адже налаштування Ecommerce для Google Analytics 4 (раніше App + Web) на основі цих даних займе всього кілька хвилин. Давайте приступимо.

Попередньо має бути встановлений базовий тег Google Analytics: конфігурація GA4:Встановлення базового тега Google Analytics: конфігурація GA4

 

Для налаштування нам знадобляться:

  1. Змінна для зберігання даних Enhanced Ecommerce
  2. Змінна для визначення події електронної торгівлі Google Analytics 4 (раніше App+Web) на основі даних Enhanced Ecommerce
  3. Змінна, яка перетворюватиме дані на новий формат GA4 (раніше App+Web)
  4. Тег та тригери для передачі даних про основні події Ecommerce у нову аналітику
  5. Тег та тригери для передачі інформації про транзакцію в GA4 (раніше App+Web)
  6. Декілька змінних для зберігання та передачі додаткових даних про транзакцію

 

Повний перелік того, що потрібно створити, можна побачити на скрині:Перелік необхідних налаштувань у GTM для Ecommerce Google Analytics 4

 

  • Створюємо змінну для зберігання даних Enhanced Ecommerce

 

Тут усе просто: нічого нового. Нам знадобиться змінна типу Data Layer з наступними налаштуваннями:Змінна для зберігання даних dataLayer ecommerce

Зверніть увагу, що у полі версія Data Layer необхідно вибрати значення Version 1.

 

  • Змінна для визначення події електронної торгівлі Google Analytics 4 (раніше App+Web) на основі даних Enhanced Ecommerce

 

У цій змінній вже відбувається трохи магії: на основі даних у dataLayer скрипт визначає, яку подію ми передаватимемо в Ecommerce GA4 (раніше App+Web).Змінна Custom JavaScript для визначення події Ecommerce G4

Використовуємо змінну типу Спеціальний сценарій JavaScript з наступним кодом:

function() {

  var event;

  var ecom = {{DL - ecommerce}};

  var keys = Object.keys(ecom);

  action = keys[0];



  switch(true) {



    case "detail" in ecom:

        event = "view_item";

        break;

    case "add" in ecom:

        event = "add_to_cart";

        break;

    case "remove" in ecom:

        event = "remove_from_cart";

        break;

    case "checkout" in ecom && ecom.checkout.actionField.step == 1:

        event = "begin_checkout";

        break;

    case "purchase" in ecom:

        event = "purchase";

        break;

    default:

        event = false;

  }

  return event;

}

 

ВАЖЛИВО! Якщо ви вирішили змінити назву змінної з пункту 1, доведеться в коді замість {{DL – ecommerce}} вказати вашу назву змінної.

 

  • Змінна, яка перетворює дані на новий формат GA4 (раніше App+Web)

 

Основна магія звичайно ж відбувається у цій змінній. Саме вона перетворює дані зі старого формату на новий. І знову нам знадобиться змінна типу Спеціальний сценарій JavaScript та код, який розміщений нижче.Змінна для створення інформації про товар для налаштування електронної торгівлі в Google Analytics

 

function() {

  var items = [];

  

  var ecom = {{DL - ecommerce}};

  var keys = Object.keys(ecom);

  var action = keys[0];



  

  prod_tr = function(products, list) {

    awProduct = []

products.forEach(function(item, i, products) {

            o = {};

            o.item_name = item.name;

            o.item_id = item.id;

            o.price = item.price;

            o.item_brand = item.brand;

            o.item_category = item.category.split("/")[0];

o.item_category2 = item.category.split("/")[1];

o.item_category3 = item.category.split("/")[2];

o.item_category4 = item.category.split("/")[3];

o.item_category5 = item.category.split("/")[4];

o.item_variant = item.variant;

o.item_list_name = list;

o.quantity = item.quantity;



            awProduct[i] = o;

return awProduct;

        });

return awProduct

  }



  switch(true) {



    case "detail" in ecom:

        list = ecom.detail.actionField ? ecom.detail.actionField.list : "";

        prod = ecom.detail.products;

        items = prod_tr(prod, list);

        break;

    case "add" in ecom:

        list = ecom.add.actionField ? ecom.add.actionField.list : "";

        prod = ecom.add.products;

        items = prod_tr(prod, list);

        break;

    case "remove" in ecom:

        list = ecom.remove.actionField ? ecom.remove.actionField.list : "";

        prod = ecom.remove.products;

        items = prod_tr(prod, list);

        break;

    case "checkout" in ecom && ecom.checkout.actionField.step == 1:

        prod = ecom.checkout.products;

        items = prod_tr(prod);

        break;

    case "purchase" in ecom:

        prod = ecom.purchase.products;

        items = prod_tr(prod);

        break;

  }

  return items;

}

Якщо ви змінили назву змінної в пункті 1, не забудьте знову змінити її у коді вище.

 

  • Тег та тригери для передачі даних про основні події Ecommerce у нову аналітику

 

Цей тег дозволить нам передати інформацію про такі події як перегляд інформації про товар, додавання та видалення товару з кошика, а також перехід на етап оформлення замовлення.Конфігурація тега для налаштування події Ecommerce га4 на основі розширеної торгівлі

ВАЖЛИВО! Швидше за все, вам доведеться трохи підправити тригери для цього тега, так як налаштування Enhanced Ecommerce може відрізнятися на різних сайтах. Потрібно буде вказати всі тригери, в момент яких відбувається передача наступної інформації в dataLayer: перегляд картки товару, додавання/видалення товару з кошика, початок оформлення замовлення.

У моєму випадку додавання та видалення товару з кошика відбувається в момент передачі подій addToCart і removeFromCart, тому тригери для них такі:Тригер для налаштування події додавання товару до кошикаТригер в диспетчері тегів для видалення товару з кошика

Щодо перегляду картки товару та сторінки оформлення, то вони в моєму випадку передаються в dataLayer при завантаженні сторінки. У зв’язку з цим використовую наступний тригер:Тригер перегляду картки товару у google tag manager

Не забудьте прописати додаткову умову як на скрині для тега перегляду сторінки, інакше у вас будуть надсилатися невизначені події під час перегляду інших сторінок, окрім карток товару та чекауту.Приклад помилкової події для Google Analytics GA4

Не менш важливо! У моєму налаштуванні є додатковий параметр debug_mode. Вам не обов’язково використовувати його. Він призначений для перевірки коректності надсилання даних. При увімкненому режимі дебагу ви зможете бачити свої події на вкладці DebugView.DebugView в інтерфейсі Google аналітик веб і додаток

 

  • Тег та тригери для передачі інформації про транзакцію в GA4 (раніше App+Web)

У зв’язку з тим, що з транзакції потрібно буде передавати додаткові дані, краще створити окремий тег.Тег для відправки події покупки електронної торгівлі

Знову ж таки, можливо, вам знадобиться трохи відредагувати тригери для свого сайту. Я використовую такі:Тригер для вимірювання покупки в один клікТригер для відстеження транзакції в Google Analytics

 

Попередньо вам також потрібно буде створити такі змінні типу Data Layer:

  • для передачі інформації про ідентифікатор транзакціїЗмінна типу dataLayer для отримання id транзакції
  • для передачі інформації про прибутокЗмінна дата лаєр для зберігання інформації про прибуток
  • для передачі інформації про філію компаніїЗмінна для отримання значення affiliation у Google Tag Manager

 

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

Ось і все, на цьому налаштування закінчено. Залишилося лише опублікувати зміни.

 

Перевірка коректності налаштування

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

Другий метод – це заглянути на вкладку Network вашого браузера і знайти там потрібний запит. Шукати можете за входженням collect. Далі вибирайте запити із другою версією протоколу вимірювань (v=2).Приклад даних електронної торгівлі, надісланих до Google Analytics GA4

 

Перетворити дані на читабельний вигляд можна за допомогою будь-якого онлайн декодера, наприклад тут .

 

ЗАМІСТЬ ВИСНОВКУ

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