Налаштовуємо Google Analytics 4 на Shopify
Впродовж останніх років ми бачимо тенденцію росту популярності створення проєктів на платформі Shopify. Вона створена та оптимізована під задачі електронної комерції. Тут є шаблони для розробки сайтів, і ви можете без специфічних знань створити і запустити в роботу власний онлайн-магазин. Звісно, ми маємо аналізувати та відстежувати дії користувачів та їх взаємодію із сайтом. Зовсім скоро власники всіх веб-сайтів перейдуть на нову версію аналітики, а отже і для власників на платформі Shopify необхідно замислюватись над встановленням та налаштуванням GA4. А тому сьогодні розглянемо покрокову інструкцію по об’єднанню GA4 із Shopify.
Налаштування із використанням gtag
Перед початком роботи вам потрібно створити ідентифікатор відстеження облікового запису четвертої аналітики. Ваші кроки для налаштування:
1. Авторизуйтесь в обліковому записі Google Analytics 4.
2. З лівої сторони внизу заходимо в розділ «Адміністратор».
3. Знаходимо розділ «Ресурс» та обираємо «Потоки даних».
4. Тиснемо «Додати потік».
5. Тепер обираємо «Веб» у випадаючому меню «Додати потік».
6. Вводимо назву потоку та сайту.
7. Далі ви побачите вікно із введеними даними якщо налаштування були вірними.
Тепер ви можете додати код до коду Shopify. Як це зробити:
1. Вам потрібно спуститися трохи нижче. Далі стане доступним меню «Тег Google». Обираємо «Переглянути вказівки щодо тегу».
2. Тепер перед вами з’явиться вікно, де ви зможете встановити самостійно вручну код або ж через платформу. Обираємо розділ «Установити вручну».
3. Копіюємо код та йдемо в обліковий запис Shopify.
4. Ви побачите зліва розділ «Online Store», в ньому оберіть «Themes».
5. Тепер перед вами відкривається меню для налаштування теми магазину. Тисніть ліворуч від «Customize» і оберіть «Edit code».
6. Далі необхідно вставити код після меню і натиснути «Save» для збереження змін.
Для того, щоб впевнитись у правильності виконаних дій і коректній передачі даних виконайте наступні кроки:
1. Заходимо в Гугл Аналітику.
2. Зліва у меню обираємо «Звіти» – «У реальному часі».
3. У звіті ми побачимо, що відбувається реєстрація – а значить ми все виконали вірно.
Коли ви будете переходити на різні сторінки вашого сайту, то побачите що статистика змінюється, дані передаються.
Наступним кроком стане налаштування ecommerce події для відстеження даних про покупки та власне покупок.
Переходимо до налаштувань
1. Щоб відслідковувати транзакції потрібно встановити додатковий код на веб-сторінку, де відбувається підтвердження покупки.
2. В обліковому записі Shopify заходимо в «Settings», далі переходимо в «Checkout».
3. Опускаємося вниз до розділу «Order status page», в цьому місці вставляємо код на веб-сторінку, де відбувається підтвердження замовлення.
4. Далі необхідно додати код відслідковування, що буде вмикати подію купівлі в аналітиці. Також він буде передавати дані про:
- вартість замовлення;
- номер транзакції;
- податки та валюту і таке інше.
Далі ви побачите текст, що виділений червоним кольором, замість нього необхідно додати код, знаходиться він в деталях про веб-потік, який ви створили на перших етапах.
<!-- Global site tag (gtag.js) — Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-EXAMPLE"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-EXAMPLE'); {% if first_time_accessed %} gtag("event", "purchase", { transaction_id: "{{ order.order_number }}", value: {{ total_price | times: 0.01 }}, tax: {{ tax_price | times: 0.01 }}, shipping: {{ shipping_price | times: 0.01 }}, currency: "{{ order.currency }}", items: [ {% for line_item in line_items %} { item_id: "{{ line_item.product_id }}", item_name: "{{ line_item.title | remove: "'" | remove: '"' }}", currency: "{{ order.currency }}", price: {{ line_item.original_price | times: 0.01 }}, quantity: {{ line_item.quantity }} }, {% endfor %} ] }); {% endif %} </script>
5. Після того, як буде доданий код натискайте «Зберегти».
Як перевірити виконані дії
Щоб провести тестування щодо передачі даних про замовлення скористайтеся інструментом «Попередній перегляд» від GTM.
1. Переходимо в обліковий запис і натискаємо «Попередній перегляд».
2. Вводимо сайт і тиснемо «Connect».
3. Далі вам потрібно побувати в ролі покупця та оформити замовлення.
4. Зайдіть на вкладку попереднього перегляду. На веб-сторінці «Thank you for your purchase» ви побачите, що тег передався в Google Analytics. Тег має містити усі дані про замовлення: суму, товар, валюту та інші.
5. Перейдіть в аналітику та переконайтеся в тому, що там також відображається транзакція. Це можна зробити зайшовши у звіт «В реальному часі».
Нативна інтеграція від Shopify
Щоб додати Google Channel до акаунту Шопіфай:
1. Переходимо сюди: https://apps.shopify.com/google та тиснемо «Додати застосунок».
2. Заходимо в акаунт Шопіфай. Потім зліва відкриваємо меню «Онлайн-магазин» і обираємо налаштування у списку.
3. Далі рухаємося в розділ «Обліковий запис Google Analytics» – «Керувати пікселем».
4. Приєднуємо програму до акаунту Google, що поєднаний із аналітикою.
5. Обираємо ідентифікатор тегу із випадного списку і далі – «Підключити ресурс Google Analytics 4».
Далі ви отримаєте повідомлення про успішне підключення Google Analytics. Перейдіть в GA4 щоб перевірити передачу даних про транзакції. Далі зробіть тестову покупку і у режимі «Звіту в реальному часі» перевірте відображення.
Як налаштувати GA4 в Shopify за допомогою GTM
Рівень даних допомагає збирати інформацію про покупки і передавати їх в менеджер тегів від Google. Це один із найзручніших методів відслідковування та аналітики даних. В електронній комерції на звичайних сайтах частіше за все встановлюється код рівнів даних. Але в Shopify немає рівнів даних та змінних, які міг би використати GTM. Тому краще додати блок коду з рівнями даних, який буде отримувати інформацію із веб-сторінки подяки за замовлення і передавати її в Google Tag Manager.
Порядок дій
Встановлюємо Google Tag Manager на Shopify
1. Входимо в обліковий запис GTM і тиснемо на код GTM у верхній панелі та копіюємо його.
2. Переходимо на платформу та відкриваємо редакцію коду – Online Store — Themes — Edit code.
3. Далі встановлюємо код після тегуі натискаємо «Save».
4. Тепер нам потрібно цей код встановити на сторінку подяки за замовлення. Ваші дії:
- заходимо в «Settings» — «Checkout»;
- переходимо донизу;
- в полі «Order status page» вводимо код і зберігаємо.
Для перевірки правильності встановлення коду в обліковому записі менеджеру тегів обираємо «Попередній перегляд» і вводимо адресу сторінки сайту, вона може бути абсолютно будь-якою. Далі переходьте по веб-сторінкам – ви побачите що вони будуть відображатися у попередньому перегляді.
Встановлюємо код рівня даних на Шопіфай
1. Копіюємо код, що ви побачите нижче, він від Analyzify.
{% comment %} Purchase data layer v2.1 — part of «Shopify GA4 Kit» by Analyzify
Visit https://analyzify.app/shopify-google-analytics/ga4 for complete tutorial
{% endcomment %}
{% assign template_name = template.name %}
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
window.appStart = function(){
window.allPageHandle = function(){
window.dataLayer.push({
event: "ga4kit_info",
contentGroup: "{{ template_name }}",
{% if customer %}
userType: "member",
customer: {
id: "{{- checkout.customer.id | json -}}",
lastOrder: "{{- customer.last_order.created_at | date: '%B %d, %Y %I:%M%p' -}}",
orderCount: "{{- checkout.customer.orders_count | json -}}",
totalSpent: "{{- checkout.customer.total_spent | times: 0.01 | json -}}",
tags: {{- checkout.customer.tags | json -}}
}
{% else %}
userType: "visitor",
{% endif %}
});
};
allPageHandle();
{% if first_time_accessed and post_purchase_page_accessed != true %}
var shippingPrice = "{{shipping_price | money_without_currency }}".replace(",", ".");
var totalPrice = "{{checkout.total_price | money_without_currency }}".replace(",", ".");
var taxPrice = "{{tax_price | money_without_currency }}".replace(",", ".");
var orderItemsName = [];
var orderItemsId = [];
var orderItemsCategory = [];
var orderItemsBrand = [];
var orderItemsType = [];
var orderItemsPrice = [];
var orderItemsSku = [];
var orderItemsvariantId = [];
var orderItemsQuantity = [];
var orderItemsvariantTitle = [];
var totalQuantity = 0;
{% for line_item in checkout.line_items %}
orderItemsName.push("{{ line_item.product.title | remove: "'" | remove: '"'}}");
orderItemsId.push("{{ line_item.product_id }}");
orderItemsPrice.push("{{ line_item.price | times: 0.01 }}");
orderItemsSku.push("{{ line_item.sku | remove: "'" | remove: '"' }}");
orderItemsQuantity.push("{{ line_item.quantity }}");
orderItemsvariantId.push("{{ line_item.variant_id }}");
orderItemsvariantTitle.push("{{ line_item.variant.title }}");
orderItemsCategory.push("{{ line_item.product.collections.last.title | remove: "'" | remove: '"' }}");
orderItemsBrand.push("{{ line_item.vendor | remove: "'" | remove: '"' }}");
orderItemsType.push("{{ line_item.product.type | remove: "'" | remove: '"' }}");
totalQuantity += {{ line_item.quantity }};
{% endfor %}
window.dataLayer.push({
page_type: "purchase",
event: "analyzify_purchase",
currency: "{{ shop.currency }}",
totalValue: totalPrice,
totalValueStatic: totalPrice,
currencyRate: window.Shopify.currency.rate,
shipping: shippingPrice,
tax: taxPrice,
payment_type: "{{order.transactions[0].gateway}}",
{% if order.name %}
transaction_id: "{{order.name | remove: "'" | remove: '"'}}",
{% else %}
transaction_id: "{{checkout.id | remove: "'" | remove: '"'}}",
{% endif %}
productName: orderItemsName,
productId: orderItemsId,
productBrand: orderItemsBrand,
productCategory: orderItemsCategory,
productVariantId: orderItemsvariantId,
productVariantTitle: orderItemsvariantTitle,
productSku: orderItemsSku,
productType: orderItemsSku,
productPrice: orderItemsPrice,
productQuantity: orderItemsQuantity,
});
{% endif %}
}
appStart();
</script>2. Повертаємося до другого вікна, в якому щойно встановлювали другий код Google Tag Manager: «Settings — Checkout» — і рухаємося вниз до «Order status page».
Додайте даний код одразу після коду менеджеру тегів і натисніть «Зберегти».
3. Тепер переходимо до налаштувань змінних та тегів в Google Tag Manager. Щоб було зручніше -використайте файл від Analyzify. Завантажте файл, який побачите нижче:
https://analyzify.app/ga4-kit/shopify-ga4-gtm.json
4. В менеджері тегів заходимо в розділ «Адміністратор» і обираємо «Імпортувати контейнер».
5. Далі «Обрати файл контейнера» і додаємо файл. Далі ви побачите два варіанти імпорту:
- «Перезаписати» – якщо у вас немає наявних тегів;
- «Об’єднати» – якщо є теги, які вам потрібно залишити.
6. Тепер вам потрібно додати код GA4 серед імпортованих змінних. Та, в яку потрібно додати називається «***UpdateMe*** GA4 Measurement ID (G-)» – в неї додавайте код GA4 з аналітики «Деталі про вебпотік». Тепер можна зберігати змінну.
Переходимо до етапу перевірки. Відкриваємо режим попереднього перегляду в менеджері тегів. Робимо тестове замовлення з оплатою, повертаємося на вкладку попереднього перегляду. Далі бачимо що тег працює. Для того, щоб внесені зміни відображались в Google Analytics 4 їх потрібно опублікувати. Вам необхідно натиснути на кнопку «Надіслати» у верхній панелі. Завершальною стане перевірка передачі інформації про покупку в Google Analytics 4. Заходимо у звіт «У реальному часі», там ми бачимо, що транзакція, що була здійснена відображається.
Трохи рекомендацій під час здійснення налаштувань
1. Під час додавання кодів в процесі налаштування є ймовірність того, що ви вставите зайві елементи. Щоб не перевіряти – видаліть старий та вставте новий код.
2. Код GA4 повинен бути доданий у найвищому місці у коді Шопіфай одразу після розкриваючого тегу, слідкуйте за цим.
3. Ситуації бувають різні і всі можуть помилятися. Для того, щоб убезпечити себе зробіть резервне копіювання коду сайту Shopify, у випадку помилки ви зможете повернутися до початкового вигляду. Щоб зробити backup йдіть по цій ланці: Online Store > Themes > Actions та натисніть Duplicate.
4. Перевіряйте який ідентифікатор аналітики стоїть в коді.
5. За потреби ви можете повернутися до попередньої версії Google Tag Manager та скасувати усі внесені зміни. Щоб це зробити виконайте такі кроки: переходимо у меню «Версії», тиснемо на ту, що потрібна та обираємо «Встановити як найновішу версію».
Підводимо підсумки
Ми розглянули з вами декілька способів налаштування четвертої аналітики в Шопіфай, як саме це робити – обирати вам. Ось короткий перелік кроків по кожному з методів.
Щоб налаштувати вручну:
1. Створюємо ідентифікатор відстеження в четвертій аналітиці ручним методом.
2. Додаємо ідентифікатор до коду сайту Шопіфай.
3. Далі слідує перевірка за допомогою звіту «У реальному часі» в Google Analytics 4.
4. Додаємо код електронної комерції на Shopify.
5. Проводимо тестову транзакцію та перевіряємо передачу даних в аналітиці.
Налаштуванння за допомогою нативної інтеграції:
1. До облікового запису додаємо Google Channel.
2. В Шопіфай приєднуємо обліковий запис Гугл та GA4.
3. Проводимо тестову транзакцію та перевіряємо в аналітиці.
Налаштування GA4 через менеджер тегів
1. Встановлюємо Google Tag Manager на веб-сайт.
2. Проводимо перевірку коду, що вставили через режим попереднього перегляду в менеджері тегів.
3. Встановлюємо код рівня даних Shopify.
4. Через Google Tag Manager робимо перевірку роботи коду.
5. Проводимо тестову транзакцію та перевіряємо, чи передаються дані в аналітику.
