Как настроить отслеживание электронной коммерции GA4 на Shopify? Пошаговое руководство

Опубликовано: 2022-09-13
  • Как установить Диспетчер тегов Google (GTM) на Shopify?
    • Фаза 1. Добавьте код контейнера GTM и сценарий сведений о клиенте в файл theme.liquid в разделе <head>.
    • Второй этап: добавьте код контейнера GTM и скрипт сведений о клиенте на страницу оформления заказа.
  • Создайте переменную уровня данных в GTM
  • Создайте тег просмотра страницы GA4 в GTM
  • Отслеживайте view_item и покупку как событие и передайте сведения о пользователе и продукте в GA4.
    • Фаза первая: добавьте уровень данных view_item в Shopify.
    • Второй этап: создайте триггер GTM для событий view_item и Purchase.
    • Третий этап: создание тега GTM.
  • Скачать рецепт GTM

Как установить Диспетчер тегов Google (GTM) на Shopify?

Фаза 1. Добавьте код контейнера GTM и сценарий сведений о клиенте в файл theme.liquid в разделе <head>.

  1. Войдите в свою учетную запись Gmail.
  2. Перейдите в Диспетчер тегов Google.
  3. Выберите правильный аккаунт GTM.
  4. Щелкните идентификатор контейнера GTM .
  5. Скопируйте первый скрипт кода контейнера GTM , содержащий инструкции по вставке кода в раздел <head>.
  6. Войдите в свой магазин Shopify и нажмите «Темы» в разделе «Интернет-магазин » в левой части панели навигации.
  7. Нажмите « Изменить код» в раскрывающемся списке « Действия ».
  8. Нажмите на theme.liquid в разделе «Макет».
  9. Вставьте скопированный код контейнера GTM (на шаге 5) как можно выше в <head> страницы.
  10. Скопируйте приведенный ниже скрипт сведений о клиенте и вставьте его в раздел <head> над кодом контейнера GTM .
  11. Нажмите «Сохранить » на файле theme.liquid в правом верхнем углу.

Шаг 1: Войдите в свою учетную запись Gmail.

Шаг 2. Перейдите в Диспетчер тегов Google по этой ссылке: https://tagmanager.google.com/

Шаг 3. Выберите правильный аккаунт GTM.

Select the correct GTM account

Шаг 4. Нажмите на идентификатор контейнера GTM.

GTM - click on the container id

Шаг 5. Скопируйте первый скрипт кода контейнера GTM, содержащий инструкции по вставке кода в раздел <head> .

copy the GTM container code

Шаг 6: Теперь войдите в свой магазин Shopify и нажмите «Темы» в разделе «Интернет-магазин » на левой панели навигации.

select themes under online store

Шаг 7: Нажмите « Изменить код» в раскрывающемся списке « Действия ».

Click on Edit code under Actions drop down

Шаг 8: Нажмите на theme.liquid в разделе «Макет».

Click on theme.liquid

Шаг 9: Вставьте скопированный код контейнера GTM (на шаге 5) как можно выше в <head> страницы.

Шаг 10: Скопируйте следующий сценарий сведений о клиенте. Теперь вставьте его в раздел <head> над кодом контейнера GTM, как показано на изображении ниже. Этот сценарий поможет передать данные с областью действия ПОЛЬЗОВАТЕЛЯ в GA4.

Копировать

 <скрипт>
window.dataLayer = окно.dataLayer || [];
window.dataLayer.push({
{% если клиент %}
тип пользователя: "член",
покупатель: {
идентификатор: {{customer.id}},
lastOrder: "{{ customer.orders.first.created_at | дата: '%B %d, %Y %I:%M%p' }}",
orderCount: {{клиент.orders.size}},
totalSpent: {% if customer %}{% assign total_spent = 0 %}{% для товара в customer.orders %}{% assign total_spent = total_spent | плюс: item.total_net_amount %}{% endfor %}{{ total_spent | деньги_без_валюты | удалить:"," }}{% else %}""{% endif %},
теги: {{- customer.tags | json-}}
},
{% еще %}
тип пользователя: "посетитель",
покупатель: {
я бы: "",
последний заказ: "",
количество заказов: "",
Всего потрачено: "",
тэги: ""
},
{% конец%}
});
</скрипт>

User data script above the GTM code

Шаг 11: Нажмите «Сохранить » в файле theme.liquid в правом верхнем углу.

Click save on theme.liquid

Отличная работа !!

Вы завершили первый этап добавления кода контейнера GTM в Shopify. Затем вам нужно будет добавить код контейнера GTM , сценарий сведений о клиенте и уровень данных о покупке на странице оформления заказа.

Второй этап: добавьте код контейнера GTM и скрипт сведений о клиенте и уровень данных о покупке на странице оформления заказа.

  1. В администраторе магазина Shopify нажмите «Настройки» в левом нижнем углу.
  2. Нажмите «Оформить заказ и учетные записи».
  3. Прокрутите вниз и найдите Дополнительные сценарии под порядком в блоке состояния.
  4. Сначала вставьте код контейнера GTM. Теперь скопируйте следующий сценарий сведений о клиенте и вставьте его над кодом контейнера GTM.
  5. Скопируйте и вставьте следующий слой данных о покупке между сценарием сведений о клиенте и кодом контейнера GTM.

Шаг 1: В админке магазина Shopify нажмите «Настройки» в левом нижнем углу.

On Shopify admin click on Settings towards the laft hand side bottom corner

Шаг 2: Нажмите «Оформить заказ и учетные записи».

Click on Checkout and accounts

Шаг 3. Прокрутите вниз и найдите Дополнительные сценарии под порядком в блоке состояния.

Scroll Down and below Order Status block look for the Additional Scripts

Шаг 4: Сначала вставьте код контейнера GTM. Теперь скопируйте следующий сценарий сведений о клиенте и вставьте его над кодом контейнера GTM.

Paste the GTM container code first and above the GTM container code paste the customer details script

Шаг 5: Скопируйте и вставьте следующий слой данных о покупке между сценарием сведений о клиенте и кодом контейнера GTM.

Копировать

 <script>{% if first_time_accessed %}
window.dataLayer.push({
'page_type': 'покупка',
'event': 'покупка', /* создать пользовательское событие в GTM */
'transaction_id': '{{ order.name || заказ.номер_заказа }}',
'totalValue': {{ total_price | деньги_без_валюты | remove:',' }}, // Включая налоги и стоимость доставки
'subtotalValue': {{ subtotal_price | деньги_без_валюты | удалять:',' }},
'налог': {{ tax_price | деньги_без_валюты | удалять:',' }},
'доставка': {{ shipping_price | деньги_без_валюты | удалять:',' }},
'валюта': '{{ shop.currency }}',
'payment_type': '{{ order.transactions[0].gateway }}', // необязательный параметр
'электронная торговля': {
'checkout_currency': '{{ checkout.currency }}', 
'значение': '{{ checkout.total_price | деньги_без_валюты | remove:',' }}', // сумма заказа (цена всех товаров + доставка)
'налог': '{{ checkout.tax_price | деньги_без_валюты | удалить:',' }}', // налог
'доставка':'{{ checkout.shipping_price | деньги_без_валюты | remove:',' }}', // стоимость доставки
'transaction_id': '{{ transaction[0].id }}', // идентификатор транзакции
'Предметы': [
{% для line_item в line_items %}
{
'item_name': '{{ line_item.product.title | заменить: "'","##@@[email protected]@##" }}'.replace("##@@[email protected]@##", "'"), 
'item_id': '{{ line_item.sku || line_item.product.id }}',
'цена': {{ line_item.final_price | деньги_без_валюты | удалять:',' }},
'item_brand': '{{line_item.vendor }}',
'количество': {{ line_item.quantity }},
'item_variant': '{{line_item.variant.title }}'
},
{% конец для %}
]
}
});
{% конец%}
</скрипт>

Шаг 6: Нажмите «Сохранить» в правом нижнем углу.

Поздравляем! Вы успешно добавили код контейнера GTM в Shopify. Теперь мы продолжим и создадим переменные уровня данных в GTM, прежде чем создавать тег просмотра страницы GA4. Когда тег просмотра страницы загружается, эти переменные позволяют нам собирать и передавать пользовательские данные в GA4.

Создайте переменные уровня данных в GTM

  1. Нажмите « Переменные » на левой панели навигации в GTM.
  2. Нажмите « Создать » в разделе «Определяемые пользователем переменные».
  3. Нажмите в любом месте на Variable configuration .
  4. Выберите Переменная уровня данных в разделе Переменные страницы.
  5. Присвоить имя переменной уровня данных .
  6. Переименуйте переменную и нажмите Сохранить.

Шаг 1: Нажмите « Переменные » на левой панели навигации в GTM.

Click on Variables on the left hand navigation panel

Шаг 2: Нажмите «Создать» в разделе «Определяемые пользователем переменные».

Click New under User Defined Variables

Шаг 3: Щелкните в любом месте конфигурации переменной.

Click anywhere on Variable configuration

Шаг 4: Выберите переменную уровня данных в разделе «Переменные страницы».

Select Data Layer variable under page variables

Шаг 5: Назначьте имя переменной уровня данных .

Data Layer Variable Name

Шаг 6: Переименуйте переменную и нажмите « Сохранить» .

Rename the variable and click save

Следуя вышеупомянутым шагам, создайте указанные ниже переменные уровня данных.

Имя переменной уровня данных: Переименуйте переменную
ID пользователя «dlv — клиент — идентификатор — переменная»
клиент.lastOrder «dlv — клиент — lastOrder — переменная»
клиент.orderCount «dlv — клиент — orderCount — переменная»
клиент.теги «dlv — клиент — теги — переменная»
клиент.totalSpent «dlv — клиент — totalSpent — переменная»
клиент.userType «dlv — клиент — тип пользователя — переменная»
мероприятие «dlv — событие — переменная»

Создайте тег просмотра страницы GA4 в GTM

  1. Перейдите в Google Analytics и выберите свойство GA4. https://analytics.google.com/
  2. Нажмите на значок шестеренки внизу слева.
  3. Нажмите на поток данных на уровне свойства.
  4. Выберите веб-поток и щелкните стрелку (>).
  5. Скопируйте идентификатор измерения GA4.
  6. Перейдите в Диспетчер тегов Google. https://tagmanager.google.com/
  7. Нажмите «Добавить новый тег».
  8. Щелкните в любом месте конфигурации тега.
  9. Выберите Google Analytics: Конфигурация GA4.
  10. Вставьте ранее скопированный идентификатор измерения GA4 в поле «Идентификатор измерения».
  11. В разделе «Поля для настройки» щелкните строку добавления, затем добавьте имя поля и его значение.
  12. В разделе «Свойства пользователя» добавьте следующее в качестве «Имя свойства» и «Значение».
  13. Щелкните в любом месте элемента Trigging.
  14. Выберите «Все страницы» в качестве триггера.
  15. Переименуйте тег и нажмите «Сохранить».

Шаг 1. Перейдите в Google Analytics и выберите ресурс GA4. https://analytics.google.com/

Шаг 2: Нажмите на значок шестеренки внизу слева.

Click on the Gear Icon bottom left hand

Шаг 3: Нажмите «Потоки данных» на уровне свойства.

Click on the Data Stream under property level

Шаг 4. Выберите веб-поток и щелкните стрелку (>).

Select the Web Stream and click click the arrow (>)

Шаг 5. Скопируйте идентификатор показателя GA4.

Copy the GA4 Measurement ID

Шаг 6: Перейдите в Диспетчер тегов Google. https://tagmanager.google.com/

Шаг 7: Нажмите «Добавить новый тег».

Click On Add a new tag

Шаг 8: Щелкните в любом месте конфигурации тега.

Click anywhere on the tag configuration

Шаг 9: Выберите Google Analytics: Конфигурация GA4.

Select Google Analytics: GA4 Configuration

Шаг 10. Вставьте ранее скопированный идентификатор измерения GA4 в поле «Идентификатор измерения».

Paste the previously copied GA4 Measurement ID under the "Measurement ID" Box.

Шаг 11: В разделе «Поля для настройки» нажмите строку «Добавить», затем добавьте имя поля и его значение, как указано ниже:

Имя поля: user_id

Значение: {{dlv – клиент – идентификатор – переменная}}

5 добавьте идентификатор пользователя в поля для установки

Шаг 12: В разделе «Свойства пользователя» добавьте имя свойства и значение, как указано ниже.

Имя свойства Ценность
Пользовательский ИД {{dlv – клиент – идентификатор – переменная}}
последний заказ {{dlv – клиент – последний заказ – переменная}}
количество_заказов {{dlv – клиент – количество заказов – переменная}}
Всего потрачено {{dlv – клиент – общая сумма расходов – переменная}}
user_type {{dlv – клиент – тип пользователя – переменная}}

User Properties Assign Property Name and value

Шаг 13: Щелкните в любом месте элемента Trigging.

Конфигурация триггера — щелкните в любом месте

Шаг 14: Выберите все страницы в качестве триггера.

Select All Pages as a Trigger Type

Шаг 15: Переименуйте тег.

Rename as GA4 - Page View - Tag as and Click Save

Великолепно!

Вы создали тег просмотра страницы GA4.

Теперь давайте посмотрим, как отслеживать событие view_item, когда кто-то просматривает страницу продукта, и передавать необходимые данные в GA4.

Отслеживайте и передайте view_item и данные о событиях покупки в GA4.

Добавьте уровень данных view_item в Shopify.

  1. Войдите в свой магазин Shopify и нажмите «Темы» в разделе «Интернет-магазин» на левой панели навигации.
  2. Нажмите «Изменить код» в раскрывающемся списке «Действия».
  3. Нажмите на файл main-product.liquid в разделе «Разделы».
  4. Скопируйте и вставьте приведенный ниже сценарий уровня данных.
  5. Нажмите «Сохранить» на файле main-product.liquid в правом верхнем углу.

Шаг 1: Войдите в свой магазин Shopify и нажмите «Темы» в разделе «Интернет-магазин» на левой панели навигации.

select themes under online store

Раздел 2. Нажмите «Изменить код» в раскрывающемся списке «Действия».

Click on Edit code under Actions drop down

Раздел 3: Нажмите на файл main-product.liquid в разделе Разделы.

Click on the main-product.liquid under Sections.

Шаг 4: Скопируйте и вставьте приведенный ниже сценарий уровня данных.

Копировать

 <скрипт>
window.dataLayer = окно.dataLayer || [];
window.dataLayer.push({
событие: 'view_item',
электронная коммерция: {
Предметы: [{
item_name: '{{ product.title | заменить: "'","##@@[email protected]@##" }}'.replace("##@@[email protected]@##", "'"),
item_id: "{% if product.sku %}{{ product.sku }}{% else %}{{ product.id}}{% endif %}",
цена: "{{ product.price | money_without_currency | remove:',' }}",
item_brand: "{{ product.vendor | удалить: "'" | удалить: '"' }}",
{% для коллекции в product.collections %}
item_category{%, если только forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% конец для %}
item_variant: "{{ product.selected_or_first_available_variant.title | удалить: "'" | удалить: '"' }}",
количество: '1'
}]
}
});
</скрипт>

Copy and Paste the below mentioned Data Layer script on the main-product.liquid under Sections

Шаг 5: Нажмите «Сохранить» на файле main-product.liquid в правом верхнем углу.

Click save on the main-product.liquid under Sections

Создайте триггер GTM для события view_item и Purchase.

  1. Перейдите в Диспетчер тегов Google.
  2. Нажмите «Триггер» на левой панели навигации.
  3. Щелкните Создать.
  4. Щелкните в любом месте конфигурации триггера.
  5. Выберите «Пользовательское событие» в разделе «Другое».
  6. Назначьте имя события view_item.
  7. Переименуйте триггер CE — EEC — view_item — Trigger и нажмите «Сохранить».

ПРИМЕЧАНИЕ:

  1. Назначить название события как покупку
  2. Переименуйте триггер CE — EEC — Purchase — Trigger и нажмите Save.

Шаг 1. Перейдите в Диспетчер тегов Google.

Шаг 2: Нажмите «Триггер» на левой панели навигации.

Click on Trigger on the left hand navigation panel

Шаг 3: Нажмите «Создать».

Click New

Шаг 4: Щелкните в любом месте конфигурации триггера.

Click anywhere on Trigger configuration

Шаг 5: Выберите «Пользовательское событие» в разделе «Другое».

Select Custom Event under Other

Шаг 6: Назначьте имя события view_item.

Assign Event Name as view_item

Шаг 7: Переименуйте триггер CE — EEC — view_item — Trigger и нажмите «Сохранить».

Rename the Trigger - view_item

С помощью этих шагов вы создали триггер события view_item. Теперь вам нужно будет сделать триггер события покупки. Чтобы инициировать событие покупки, выполните первые 5 шагов, описанных выше.

Шаг 8: Назначьте название события в качестве покупки

custom event name purchase

Шаг 9: Переименуйте триггер в CE — EEC — Purchase — Trigger и нажмите «Сохранить».

Rename the Trigger - purchase

Если вы выполнили все шаги, вы сделали почти все, чтобы собрать view_item и данные о событиях, связанные с покупкой, в вашем магазине Shopify с данными в области пользователя. Теперь давайте посмотрим, как передать эти данные в GA4 с помощью Диспетчера тегов Google.

Создайте тег GTM для события view_item и Purchase.

  1. Нажмите «Тег» на левой панели навигации.
  2. Щелкните Новый.
  3. Щелкните в любом месте конфигурации тега.
  4. Выберите «Google Analytics: событие GA4» в разделе «Избранный тег».
  5. В теге конфигурации выберите «GA4 — Просмотр страницы — Тег» в раскрывающемся списке.
  6. Назначьте имя события. Выберите ранее созданную переменную dataLayer — {{dlv — event — variable}}
  7. Нажмите «Дополнительные настройки» и выберите «Отправить данные электронной торговли» в разделе «Электронная торговля». Выберите Уровень данных в качестве источника данных.
  8. Нажмите в любом месте на Trigging.
  9. Выберите ранее созданный триггер «CE — EEC — view_item — Trigger» для события view_item.
  10. Наведите указатель мыши на правый верхний угол раздела «Триггер» и щелкните значок карандаша.
  11. Нажмите на значок плюса сейчас.
  12. Выберите триггер события покупки с именем «CE — покупка — триггер».
  13. Переименуйте тег: «GA4 — событие EEC — тег» и нажмите «Сохранить».

Шаг 1: Нажмите «Тег» на левой панели навигации.

Click on tag on the left hand navigation panel

Шаг 2: Нажмите «Новый».

Click New

Шаг 3: Щелкните в любом месте конфигурации тега.

Tag Configuration - Click Anywhere

Шаг 4. Выберите «Google Analytics: событие GA4» в разделе «Избранный тег».

Select Google Analytics GA4 Event under Featured Tag

Шаг 5. В теге конфигурации выберите «GA4 — Просмотр страницы — Тег» в раскрывающемся списке.

Select Configuration Tag form the drop down

Шаг 6: Назначьте имя события. Выберите ранее созданную переменную уровня данных — {{dlv — event — variable}}

Event Name Select the previously made Data Layer variable

Шаг 7: Нажмите «Дополнительные настройки» и выберите « Отправить данные электронной торговли» в разделе «Электронная торговля». Выберите Уровень данных в качестве источника данных.

More Settings Send eCommerce Data select Data Layer as datasource

Шаг 8: Нажмите в любом месте на триггере.

Trigger Configuration - Click Anywhere

Шаг 9: Выберите ранее созданный триггер «CE — EEC — view_item — Trigger» для события view_item.

select view item trigger

Шаг 10: Наведите указатель мыши на правый верхний угол раздела «Триггер» и щелкните значок карандаша.

Hover over the trigger towards the right hand side top corner and click on pencil icon

Шаг 11: Нажмите на значок плюса сейчас.

Click on this plus icon

Шаг 12: Выберите триггер события покупки под названием «CE — покупка — триггер».

Select purchase event trigger

Шаг 13: Переименуйте тег: «GA4 — событие EEC — тег» и нажмите «Сохранить».

Rename the tag and click save

Поздравления

С помощью этого руководства теперь вы можете отслеживать данные о просмотрах товаров и покупках в GA4. Вы также можете просмотреть отчеты по GA4, выполнив следующие действия.

Шаг 1. Перейдите к свойству GA4.
Шаг второй: Нажмите «Отчеты» на левой панели навигации.
Шаг третий: Нажмите «Монетизация», а затем нажмите «Покупки в электронной торговле».

Если вы хотите получить готовый контейнер GTM для этого руководства, я настоятельно рекомендую вам скачать рецепт GTM.

Скачать рецепт GTM

Вывод

С помощью этого пошагового руководства я сделал все возможное, чтобы решить острую проблему всех владельцев магазинов Shopify. Отслеживание электронной торговли может иметь много нюансов, и его сложно описать в одном посте в блоге. Если у вас есть какие-либо вопросы, не стесняйтесь связаться со мной в LinkedIn и задать свои вопросы там.