Минула стаття на цьому блозі вийшла майже рік тому – 30 липня. Не те, щоб мені не було про що написати, але якось “руки не доходили” до цього. При цьому бажання ділитися знаннями накопичувалося весь цей час, і на початку квітня я таки сів писати статтю. Вона все ще у чернетках. Вона може зачекати. А ось тема сьогоднішньої статті чекати не може. На мою думку, всім час розібратися в ній, оскільки, за цим майбутнє аналітики. Мова звичайно ж про нову версію Google Analytics 4 (раніше App + Web) та налаштування Ecommerce. На цьому ліричний вступ варто закінчувати та приступати до суті.
-
- Що таке Ecommerce у Google Analytics
- Як виглядають звіти Ecommerce в інтерфейсі GA4 (раніше App+Web)
- Налаштування Ecommerce GA4 (раніше App + Web) за допомогою Google Tag Manager
- Написання ТЗ розробнику
- Перегляд товару в списку товарів
- Клік по товару в списку товарів
- Перегляд детальної інформації про товар
- Додавання товару до кошика
- Видалення товару з кошика
- Початок оформлення замовлення
- Вибір способу доставки
- Вибір способу оплати
- Транзакція
- Повернення товару
- Додавання товару до обраного
- Перегляд сторінки кошика
- Налаштування необхідних тегів у GTM
- Написання ТЗ розробнику
- Самостійне налаштування Ecommerce GA4 (раніше App + Web) на основі даних Enhanced Ecommerce Google Analytics
- Змінна для зберігання даних Enhanced Ecommerce
- Змінна для визначення події електронної торгівлі Google Analytics 4 (раніше App+Web)
- Змінна для перетворення даних у формат GA4 (раніше App+Web)
- Тег та тригери для передачі даних про основні події Ecommerce у нову аналітику
- Тег та тригери для передачі інформації про транзакцію в GA4 (раніше App+Web)
- Перевірка коректності налаштування
Що таке 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)
А ось це вже цікавіше. Тут на нас чекає щось нове. Давайте подивимося:
Так, вам не здалося. На поточний момент це все що вам пропонує Google в своїй новій аналітиці. А якщо бути повністю точним, то в інтерфейсі ми бачимо лише інформацію про факт здійснення транзакції і прибутку з неї. На цьому все. Принаймні на поточному етапі розвитку нової аналітики. В подальшому я буду оновлювати інформацію в цій статті.
Але Google Analytics 4 (раніше App+Web) крутий не інтерфейсом, а тим, що дозволяє нам “за копійки” скласти зібрану інформацію в BigQuery і далі самостійно на основі сирих даних побудувати потрібні звіти. І ось ця функція вже працює. Під дані Ecommerce у схемі BigQuery відведено дуже багато полів. На скріншоті нижчі всі навіть не помістилися.
Налаштування Ecommerce GA4 (раніше App + Web) за допомогою GTM
Тепер, коли ви вже ознайомилися з величезною кількістю даних, які можна зібрати, розберемо детальніше процес налаштування.
В цілому, налаштування Ecommerce для Google Analytics 4 (раніше App + Web) за допомогою Google Tag Manager нічим не відрізняється від налаштування Enhanced Ecommerce для Google Analytics. Етапи ті ж:
- Написати ТЗ розробнику для передачі даних у dataLayer
- Перевірити коректність установки кодів розробником (Цей етап найдовший і може повторюватися кілька разів. Хто хоч раз впроваджував Enhanced Ecommerce, зрозуміє мене)
- Налаштування необхідних тегів у GTM
Налаштування в 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, але і для всіх наступних подій, тому вам не потрібно створювати її щоразу. Достатньо створити на початку та просто підключати до потрібних тегів.
Що стосується налаштування тегів і тригерів, то вони трохи відрізнятимуться для кожної події, тому для кожної події будуть свої скріншоти:
Клік по товару в списку товарів
Інформацію про цей крок необхідно передавати в момент, коли користувач клікає по одному із товарів у списку.
Назва події в 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
Перегляд детальної інформації про товар
Інформація про цю подію зазвичай передається під час перегляду картки товару у момент завантаження сторінки.
Назва події в 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
Додавання товару до кошика
Інформацію необхідно передавати у всіх випадках, коли користувач додає товар у кошик.
Назва події в 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
Видалення товару з кошика
Передаємо дані при видаленні користувачем товарів із кошика.
Назва події в 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
Початок оформлення покупки
Найкраще цю подію передавати в момент завантаження сторінки оформлення, що символізуватиме саме початок оформлення замовлення.
Назва події в 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
Вибір способу доставки
Як відомо з назви, передаємо дані у момент, коли користувач визначився з варіантом доставки.
Назва події в 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 | Вибраний користувачем спосіб доставки. | |
| value | 23.07 | Загальна сума кошика на момент надсилання події. |
| currency | USD | Код валюти. |
Приклад налаштування в GTM
Вибір способу оплати
Аналогічно пункту вище, тільки дані передаємо, коли користувач визначився зі способом оплати.
Назва події в 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
Транзакція
Передаємо у момент здійснення транзакції на сайті. Найчастіше інформацію передають на сторінці подяки. Не забувайте, що за наявності онлайн оплати та переходу на сторінку еквайєра у вас може перевизначатися джерело трафіку.
Назва події в 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
Оскільки я не знайшов на даний момент офіційної інформації про те, як необхідно передавати додаткові дані про транзакцію нижче моя інтерпретація. Надалі інформація у цьому пункті може бути змінена.
Вище ми розібрали основні події воронки, які були доступні й у старій версії аналітики. Але існують ще три події:
– для відстеження повернень – подію не розбирав в блоці вище, тому що зазвичай повернення рідко відбуваються на сайті і передаються з бекенда
– відстеження додавання товару до вибраного (нова стандартна подія для 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
Перегляд сторінки кошика
Оскільки перегляд сторінки кошика на багатьох сайтах не є обов’язковим кроком в 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
Перевірка коректності встановлення кодів розробником
У попередньому блоці ми максимально детально розписали кожну подію і це має допомогти звести кількість помилок при реалізації ТЗ до мінімуму, але, на жаль, мій досвід показує, що звести їх до нуля не вийде. Тож уважно перевіряйте кожну подію після впровадження ТЗ розробниками. Оскільки ця стаття і так виходить великою, якщо вам цікаво дізнатися, як можна ефективно проводити перевірку, пишіть про це у коментарях і я напишу на цю тему статтю.
Налаштування необхідних тегів у 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:
Для налаштування нам знадобляться:
- Змінна для зберігання даних Enhanced Ecommerce
- Змінна для визначення події електронної торгівлі Google Analytics 4 (раніше App+Web) на основі даних Enhanced Ecommerce
- Змінна, яка перетворюватиме дані на новий формат GA4 (раніше App+Web)
- Тег та тригери для передачі даних про основні події Ecommerce у нову аналітику
- Тег та тригери для передачі інформації про транзакцію в GA4 (раніше App+Web)
- Декілька змінних для зберігання та передачі додаткових даних про транзакцію
Повний перелік того, що потрібно створити, можна побачити на скрині:
- Створюємо змінну для зберігання даних Enhanced Ecommerce
Тут усе просто: нічого нового. Нам знадобиться змінна типу Data Layer з наступними налаштуваннями:
Зверніть увагу, що у полі версія Data Layer необхідно вибрати значення Version 1.
- Змінна для визначення події електронної торгівлі Google Analytics 4 (раніше App+Web) на основі даних Enhanced Ecommerce
У цій змінній вже відбувається трохи магії: на основі даних у dataLayer скрипт визначає, яку подію ми передаватимемо в Ecommerce GA4 (раніше App+Web).
Використовуємо змінну типу Спеціальний сценарій 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 та код, який розміщений нижче.
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 у нову аналітику
Цей тег дозволить нам передати інформацію про такі події як перегляд інформації про товар, додавання та видалення товару з кошика, а також перехід на етап оформлення замовлення.
ВАЖЛИВО! Швидше за все, вам доведеться трохи підправити тригери для цього тега, так як налаштування Enhanced Ecommerce може відрізнятися на різних сайтах. Потрібно буде вказати всі тригери, в момент яких відбувається передача наступної інформації в dataLayer: перегляд картки товару, додавання/видалення товару з кошика, початок оформлення замовлення.
У моєму випадку додавання та видалення товару з кошика відбувається в момент передачі подій addToCart і removeFromCart, тому тригери для них такі:
Щодо перегляду картки товару та сторінки оформлення, то вони в моєму випадку передаються в dataLayer при завантаженні сторінки. У зв’язку з цим використовую наступний тригер:
Не забудьте прописати додаткову умову як на скрині для тега перегляду сторінки, інакше у вас будуть надсилатися невизначені події під час перегляду інших сторінок, окрім карток товару та чекауту.
Не менш важливо! У моєму налаштуванні є додатковий параметр debug_mode. Вам не обов’язково використовувати його. Він призначений для перевірки коректності надсилання даних. При увімкненому режимі дебагу ви зможете бачити свої події на вкладці DebugView.
- Тег та тригери для передачі інформації про транзакцію в GA4 (раніше App+Web)
У зв’язку з тим, що з транзакції потрібно буде передавати додаткові дані, краще створити окремий тег.
Знову ж таки, можливо, вам знадобиться трохи відредагувати тригери для свого сайту. Я використовую такі:
Попередньо вам також потрібно буде створити такі змінні типу Data Layer:
- для передачі інформації про ідентифікатор транзакції
- для передачі інформації про прибуток
- для передачі інформації про affiliation компанії
ВАЖЛИВО! На момент написання статті я так і не знайшов офіційної інформації про те, в які параметри необхідно передавати id, revenue та affiliation. У поточній реалізації вони йдуть до параметрів події, які мені здаються найбільш логічними. З появою повної інформації цей пункт може бути змінено.
Ось і все, на цьому налаштування закінчено. Залишилося лише опублікувати зміни.
Перевірка коректності налаштування
Як я писав вище, щоб перевірити коректність налаштування, ви можете скористатися режимом DebugView, але в ньому зможете побачити лише факт події, без будь-якої додаткової інформації, наприклад, про товари.
Другий метод – це заглянути на вкладку Network вашого браузера і знайти там потрібний запит. Шукати можете за входженням collect. Далі вибирайте запити із другою версією протоколу вимірювань (v=2).
Перетворити дані на читабельний вигляд можна за допомогою будь-якого онлайн декодера, наприклад тут .
ЗАМІСТЬ ВИСНОВКУ
Google Analytics 4 (раніше App+Web) чудовий інструмент, а з появою офіційної підтримки Ecommerce, а не костильних рішень, як було раніше, він набуде ще більшої популярності. Залишайте свої питання щодо цього інструменту, а також ідеї про те, як можна покращити цю інструкцію у коментарях.
