Реалізація відстеження електронної комерції в Shopify GA4

Вступ

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

У цьому покроковому посібнику ми пояснимо, як налаштувати GA4 відстеження електронної комерції у магазині Shopify з тарифним планом Plus.

Існує два типи тарифів для магазинів Shopify — базовий, так званий Non-Plus, і версія Plus. Впровадження Google Analytics 4 відстеження електронної комерції залежить від версії вашого інтернет-магазину. Якщо у вас стандартна версія Non-Plus, ви можете встановити Google Analytics на всі сторінки магазину (крім сторінок оформлення замовлення), тоді як Shopify Plus дозволяє розмістити код відстеження (або Google Tag Manager) на всіх сторінках вашого магазину.

На момент написання цього гайда в налаштуваннях Shopify немає вбудованого рішення, яке б інтегрувало магазин Shopify з GA4 подібно до того, як це реалізовано для Universal Analytics. У випадку з Universal Analytics ви могли просто одним кліком увімкнути розширене відстеження електронної комерції, і всі дані електронної комерції автоматично надсилалися до вашого ресурсу Universal Analytics.

З GA4 процес стає трохи складнішим.

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

Встановлення GTM для вашого магазину

На початку налаштування GA4 вам потрібно вирішити, яким способом ви додасте код відстеження GA4 до свого магазину Shopify. Є 2 способи налаштування: додати код відстеження за допомогою методу Global site tag (gtag.js) або через Google Tag Manager. Ми надаємо перевагу використанню Google Tag Manager, оскільки він дозволяє просто й зручно налаштувати відстеження, замість того щоб вручну додавати громіздкі коди gtag.js на ваш сайт. До того ж, вам може знадобитися допомога розробника, тоді як у GTM ви могли б зробити це самостійно.

Тут — це офіційна документація Google щодо всіх подій електронної комерції, їхніх параметрів і прикладів використання під час передавання даних до GA через gtag.js.

Коли ви вирішуєте налаштувати відстеження електронної комерції за допомогою GTM (припускаючи, що контейнер GTM уже створено), потрібно встановити його в коді магазину Shopify. Для цього перейдіть до свого облікового запису GTM — «Адміністратор» — «Встановити Google Tag Manager»:

Потім скопіюйте перший фрагмент коду та вставте його у файли theme.liquid і checkout.liquid якомога вище після тега <head> у налаштуваннях онлайн-магазин – Редагувати код поточної теми:

Другий фрагмент GTM потрібно встановити як у файлі theme.liquid, так і у файлі checkout.liquid, але після тега <body>:

Тепер, коли GTM успішно встановлено у вашому магазині, наступний крок — створити шар даних з усіма необхідними подіями та параметрами, щоб GA4 за допомогою GTM міг отримувати потрібну інформацію.

Створення коду шар даних

Коротко кажучи, шар даних — це віртуальний шар, а також масив, на вебсайті, де розробники або інші інструменти можуть зберігати дані (наприклад, інформацію про користувача чи контент). Використовуючи цю інформацію, Google Tag Manager застосовує тригери, теги та змінні, щоб надсилати дані до інших інструментів, зокрема Google Analytics, Google Ads, Facebook Pixel тощо.

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

Зараз доступно багато відкритим кодом рішень із готовим кодом шар даних для електронній комерції-подій у Shopify (порада – використовуйте GitHub ресурсу).

На наступному етапі впровадження ми створюємо фрагмент коду під назвою «dataLayer-allPages» і вставляємо туди весь код нашого рішення разом із рівнем даних.

Приклад коду dataLayer, який надсилає подію електронної комерціїview_item:

Зверніть увагу, що для отримання числа з плаваючою комою для таких параметрів, як «price», «discount» або «value», потрібно застосувати оператор «divided_by: 100.0». Це забезпечить коректне значення навіть для різних валют або форматів.

Як додаткові активності ми також налаштовуємо блог і 404 події. Кожна сторінка блогу запускає блог подія з інформацією про автора публікації, дату створення публікації та заголовок публікації, якщо у вас є відповідний розділ сайту.

404 подія спрацьовує, якщо відвідано неіснуючий файл/сторінку, передаючи інформацію про шлях URL.

Додавши вимір «розташування сторінки» до своїх звітів Дослідження у GA4, ви зможете проаналізувати, скільки разів користувачі відвідали такі сторінки:

На наступному етапі для магазину Shopify Plus потрібно розмістити фрагмент «dataLayer-allPages» у вашому файлі Liquid. Додайте код {% include ‘dataLayer-allPages’ %} безпосередньо перед закривальними тегами </head> у макетах theme.liquid і checkout.liquid:

Як ми вже згадували вище, Shopify не дозволяє магазинам на тарифах, відмінних від Plus, вносити зміни до коду сторінок оформлення замовлення, і для таких магазинів немає доступу до файлу checkout.liquid. Саме тому в них немає можливості отримувати події етапу оформлення замовлення (begin_checkout, add_shipping_info, add_payment_info).

Для магазину Plus ви матимете покупкаПередавання подій у рівні даних у коді checkout.liquid, а для магазину без Plus потрібно вставити спеціальний скрипт на сторінку підтвердження замовлення. Для цього знайдіть розділ «Сторінка статусу замовлення - Додаткові скрипти» у «Налаштуваннях - Оформленні замовлення» та вставте туди скрипт:

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

Ось і все – ваш шар даних готовий, і наступний крок — налаштувати змінні, тригери та теги в GTM, щоб передавати інформацію з цього шар даних до GA4.

Налаштування тегів GTM

Є кілька способів налаштувати GTM для передавання даних про електронну комерцію в GA4. Один із них — імпортувати готовий контейнер GTM з усіма необхідними тегами, тригерами та змінними. Інший — створити теги самостійно. Ми скористаємося готовим контейнером GTM і імпортуємо його в обліковий запис GTM. Відкрийте розділ «Адміністратор» в обліковому записі GTM, виберіть «Імпортувати контейнер», оберіть JSON-файл із контейнером GTM, а потім — робочу область і параметр «Перезаписати» або «Об’єднати».

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

Після цього у вашому робочому просторі з’являться всі наявні теги з подіями електронної комерції, змінними та тригерами.

Розгляньмо приклад змінних рівня даних і тригера, які ми використовуємо в Data Layer для створення тегу, що передає view_item подія.

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

Наша змінна називається Products, але під час роботи з іншими користувачами в GTM також корисно дотримуватися угоди про іменування й називати її, наприклад, «dlv-products», щоб подавати інформацію у зрозумілому вигляді.

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

Після цього ви можете створити тригер типу: власна подія і ввести назву події точно таку саму, як у вашому dataLayer.push:

Тепер усе готово до налаштування тега.

Введіть назву параметра Товари у параметрах події, які будуть надіслані до GA4 як view_item параметр події та його значенням буде змінна шар даних, створена раніше. Що стосується тега Configuration, вам потрібно вибрати ваш загальний тег GA4 з ідентифікатором вимірювання вашого GA4 потік даних.

Натисніть «Зберегти» — і вітаємо! Тепер ваш view_item подія налаштована. Точно так само ви налаштуєте всі інші події електронної комерції. Це приклад покупка тег події:

Час налагодити все та зробити кілька тестових покупок.

Тестування та налагодження налаштування

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

Перевірмо шар даних у Tag Assistant, відкривши сторінку товару

Це означає, що шар даних отримує всю інформацію, яку надає ваш магазин Shopify. Потім вона має передати її в GA4 через налаштовані теги GTM.

Відкривши DebugView у розділі Configure вашого ресурсу GA4, ви можете налагоджувати всі події, що з’являються в GA4. У нашому випадку:

І коли ви здійсните тестову покупку в розділі Realtime стандартних звітів, а також у DebugView, ви зможете спостерігати покупка подія зі списком параметрів події, які ви налаштували в Менеджер тегів:

Корисні поради

У межах впровадження GA4, електронній комерції-трекінг для вашого сайту на Shopify передбачає надсилання в Google Analytics даних про електронній комерції-події, зокрема про покупки. Тому вам завжди слід уникати надсилання будь-якої Персонально Ідентифікованої Інформації (PII) до Google Analytics. Пам’ятайте про це, коли створюєте свої події, особливо ті, що відстежуються на сторінці оформлення замовлення, де клієнти вводять свої імена, адреси, email — усі ці дані Google вважає PII. Хоча ви можете зберігати їх у шар даних, не дозволяйте Google Analytics отримувати їх через GTM. Інакше ваш обліковий запис Google Analytics може бути заблокований.

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

Тест, тест, тест.

Завжди тестуйте свою конфігурацію, ідеально — перевіряти її на кожному етапі. Додали тег конфігурації, але немає переглядів сторінок? Можливо, ви вказали неправильний ідентифікатор вимірювання свого GA4 потік даних. Перевірте й протестуйте це.

Подія передається в GA4, ви її бачите, але з нею немає жодних параметрів події? Можливо, ви вказали неправильну назву змінної дані шар як значення параметра події в GTM. Змініть її та протестуйте.

У Data Layer немає значень? Можливо, ви припустилися помилки в назвах об’єктів Shopify liquid або їхніх властивостей у коді Data Layer. Запитайте розробника, зверніться до спільноти Shopify або перегляньте офіційний Шпаргалка з Shopify. Потім виправте це й протестуйте ще раз.

Висновок

Відстеження електронної комерції в GA4 відкриває чудові можливості для аналізу продажів у Shopify з різних джерел трафіку. Воно дає змогу створити звіт дослідження воронки, щоб вимірювати коефіцієнт конверсії між різними етапами воронки покупки (view_item, add_to_cart тощо).

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

У цьому посібнику ми детально описали, як налаштувати це відстеження для магазинів Shopify із тарифом Plus. Вважається, що налаштувати відстеження електронної комерції в GA4 для магазинів без Plus значно складніше, оскільки в них немає доступу до сторінки оформлення замовлення, і потрібно розробити скрипт для рівня даних про покупку. Якщо вам потрібна допомога з другим варіантом, звертайтеся до нас. Ми написали власний скрипт для налаштування відстеження GA4 для магазинів без Plus.

Поділитися: