Настройка электронной коммерции для Shopify

Пошаговое руководство по настройке электронной коммерции Google Analytics 4, функции User ID и динамического ремаркетинга для Shopify.

Содержание

Настройка электронной торговли

Создайте аккаунт в Google Analytics 4. Зайдите в Shopify и введите в поисковую строку Google & YouTube:

Поиск приложения

Приложение бесплатное:

Google & YouTube

Далее заходите в приложение и нажимаете подключить аккаунт. Откроется окно аккаунтов Google. Выбираете аккаунт, где находится ваш счетчик Google Analytics 4:

Подключение аккаунта Google

Нажмите на Get started:

Get started

Перейдите на страницу и выберите свой аккаунт GA4. Нажмите Connect и Get Started на следующем шаге:

Подключение к Google Analytics 4

На этом все. Процесс полностью автоматизирован. Теперь все события электронной торговли поступают в Google Analytics 4.

Настройка User ID

В Shopify нет такого понятия как User ID, вместо этого есть Customer ID. Для отправки User ID нам понадобится специальный код, который преобразует Customer ID в User ID, и сам Google Tag Manager.

Дополнительные материалы по идентификатору пользователя:

Переходим в настройки сайта Shopify.

Настройки сайта

Откройте редактор кода – Edit code:

Edit code

В навигации найдите главный файл с вашей темой (пример – /theme.liquid):

Главный файл с вашей темой

Сразу после тега <head> вставьте нижеприведенный код:

{% if customer %}
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event':'userId',
'user_id':'{{ customer.id }}'
});
</script>
{% endif %}

И после кода сразу вставьте первую часть кода Google Tag Manager:

Первая часть кода Google Tag Manager

Вторую часть вставьте сразу после тега <body>:

Вторая часть кода Google Tag Manager

Для проверки корректности работы кода перейдите в предварительный просмотр (режиме отладки) GTM и пройдите регистрацию на своем сайте, если ранее этого не делали. На шкале событий должно появится событие userId, а внутри dataLayer отображаться ваш идентификатор:

Событие userId и идентификатор пользователя (User ID)

Для того чтобы отправить данные в аналитику, создайте пользовательскую переменную уровня данных с именем user_id:

Переменная уровня данных user_id

Сохраните переменную и вернитесь в предварительный просмотр Google Tag Manager, чтобы проверить корректность ее работы. После авторизации, выбрав на шкале событий userId, в разделе Переменные вы должны увидеть вашу переменную со значением идентификатора:

Переменная user_id

Чтобы передать значение идентификатора пользователя в Google Analytics 4, перейдите в теги и откройте тег Google Analytics 4. В параметрах конфигурации задайте параметр user_id, а значением укажите переменную уровня данных, созданную на предыдущем шаге.

Тег Google с параметром конфигурации user_id

Сохраните тег. Перейдя в режим предварительный просмотр, выберите тег Google. В дополнительных сведениях о теге вы должны увидеть значение User ID:

Детальные сведения о теге

Через некоторые время в интерфейсе Google Analytics 4 в Исследовании Статистика пользователей вы должны увидеть переопределенный идентификатор пользователя (он же User ID):

Идентификатор пользователя (User ID) в Исследовании GA4

Динамический ремаркетинг

Для динамического ремаркетинга я использовал готовое решение, приложение Google Dynamic Remarketing WDS. Оно платное, но помогает быстро настроить передачу данных.

Установите приложение, как в случае с электронной коммерцией. Затем выберите аккаунт, где есть аккаунт Google Рекламы, и далее все данные автоматически будут передаваться в ваш аккаунт.

Приложение “Google Dynamic Remarketing WDS” для Shopify

Если вы не желаете использовать платное решение, тогда воспользуйтесь готовым скриптом gtm-datalayer-for-shopify от Md Hasanuzzaman. Он размещен на GitHub, к нему приложена подробная инструкция, по которой вы самостоятельно сможете реализовать события динамического ремаркетинга.

Краткая инструкция:

перейдите в раздел редактирования вашей темы и вставьте код отслеживания GTM сразу после тега <head> в файле theme.liquid
внутри папки snippets создайте новый файл с именем ultimate-datalayer. Скопируйте весь код из ultimate-datalayer.liquid репозитория в файл ultimate-datalayer.liquid
в файле theme.liquid после кода отслеживания GTM включите файл ultimate-datalayer.liquid через {% render ‘ultimate-datalayer’ %}
из панели администратора Shopify перейдите в Settings >> Checkout (Scroll Down) >> Additional scripts. Скопируйте весь код из checkout.liquid репозитория в поле Additional scripts. Измените пример идентификатора отслеживания GTM 000-00000 на свой собственный

В зависимости от вашей темы Shopify вам, возможно, придется внести некоторые изменения. Подробное видео по использованию Ultimate Shopify DataLayer от автора доступно на YouTube: