Настраиваем 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. Заходим в Google Аналитику.
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. В Шопифай присоединяем аккаунт Google и GA4.
3. Проводим тестовую транзакцию и проверяем в аналитике.
Настройка GA4 через менеджер тегов
1. Устанавливаем Google Tag Manager на веб-сайт.
2. Проводим проверку кода, вставившегося через режим предварительного просмотра в менеджере тегов.
3. Устанавливаем код уровня данных Shopify.
4. Через Google Tag Manager производим проверку работы кода.
5. Проводим тестовую транзакцию и проверяем, передаются ли данные в аналитику.
