Помощь
Войти

Создание пользовательского пикселя Google Tag Manager

Вы можете использовать Google Tag Manager (GTM) в качестве пользовательского пикселя для управления сторонними пикселями.

Когда вы будете готовы протестировать свой пользовательский пиксель GTM, используйте Shopify Pixel Helper, чтобы убедиться, что все события, которые вы хотите отслеживать, добавляются в песочницу без ошибок.

Вы также можете использовать расширение для страниц Google Tag Assistant, чтобы проверить, какие теги Google загружаются на странице. Однако функция Troubleshoot tag в Google Tag Assistant несовместима с пользовательскими пикселями и не обнаруживает теги Google в пользовательском пикселе или другие пиксели, загружаемые через GTM.

На этой странице

Подготовка к созданию пользовательского пикселя

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

Создание пользовательского пикселя Google Tag Manager

Вы можете создать пользовательский пиксель Google Tag Manager для управления вашими сторонними пикселями.

Шаги:

  1. Откройте свой аккаунт Google Tag Manager и выберите аккаунт, для которого вы хотите настроить пользовательский пиксель.
  2. Нажмите Администратор, а затем — Установить Google Tag Manager, чтобы открыть код установки.
  3. Скопируйте блок кода, относящийся к разделу head страницы.
  4. Удалите HTML-теги из блока кода. Например, <script></script>.
  5. Вставьте оставшийся код в новый пользовательский пиксель Shopify.
  6. Подпишитесь на события клиентов и отправляйте их в dataLayer GTM.
  7. Чтобы посмотреть, как должен выглядеть код, ознакомьтесь с примером пользовательского пикселя Google Tag Manager.
  8. Настройте Google Tag Manager на прием событий от вашего пользовательского пикселя.
  9. Необязательно: если в вашем файле checkout.liquid уже есть вызовы dataLayer.push(event), замените их на analytics.publish().

Подписка на события клиентов и их отправка в уровень данных GTM

Вы можете подписаться на события клиентов с помощью dataLayer GTM в коде вашего пользовательского пикселя.

По умолчанию существует набор стандартных событий, на которые можно подписаться. Однако, если вы хотите отслеживать события клиентов, не входящие в стандартный набор, вы можете публиковать собственные пользовательские события из файлов шаблонов Liquid.

Ниже приведен пример подписки на стандартное событие «product_viewed», которое указывает, когда кто-то просматривает товар. Когда срабатывает событие, оно отправляется в dataLayer.

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    product_title: event.data?.productVariant?.title,
  });
});

В этом примере в полезной нагрузке события передается название товара. Вы можете использовать переменную Google Tag Manager для извлечения названия товара из полезной нагрузки события в выбранном вами теге.

Пример пользовательского пикселя Google Tag Manager

Приведенный ниже пример — это упрощенная версия пользовательского пикселя Google Tag Manager, которая показывает, как отправлять данные в Google Tag Manager. Чтобы передавать больше событий в ваш dataLayer, вы можете подписаться на дополнительные стандартные и пользовательские события.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_shipping_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

Настройка Google Tag Manager для приема событий от пользовательского пикселя

После создания пользовательского пикселя необходимо настроить Google Tag Manager для приема от него событий. Для этого вам понадобятся тег, триггер и переменные dataLayer в Google Tag Manager.

В следующей таблице приведены примеры некоторых стандартных событий клиентов и их эквиваленты в Google Tag Manager:

Список стандартных событий клиентов Shopify для использования с пикселями в сравнении с их эквивалентами в Google Tag Manager, а также триггер, необходимый для срабатывания событий.
Событие ShopifyТриггерСобытие GTM
payment_info_submittedОтправка платежной информацииadd_payment_info
checkout_address_info_submittedОтправка информации о доставкеadd_shipping_info
product_added_to_cartДобавление предмета в корзину покупокadd_to_cart
checkout_startedНачало оформления заказаbegin_checkout
checkout_completedЗавершение оформления заказаpurchase
product_removed_from_cartУдаление предмета из корзиныremove_from_cart
cart_viewedПросмотр корзины покупокview_cart
product_viewedПросмотр страницы сведений о товареview_item
collection_viewedПросмотр списка предметовview_item_list

Параметры событий тегов GTM должны соответствовать ожидаемым соглашениям об именовании, чтобы события dataLayer вашего пользовательского пикселя могли быть обработаны.

Ниже приведены примеры некоторых свойств событий dataLayer пользовательского пикселя и их эквивалентных параметров событий Google Analytics 4 (GA4):

Список событий dataLayer пользовательского пикселя с использованием соглашения об именовании GA4
События dataLayer пользовательского пикселяПараметры событий GA4
event.data?.checkout?.currencyCodecurrency
event.data?.checkout?.totalPrice?.amountvalue
event.data?.checkout?.order?.idtransaction_id
event.data?.checkout?.discountAllocationscoupon
event.data?.checkout?.shippingLine?.price?.amountshipping
event.data?.checkout?.totalTaxtax
event.data?.checkout?.lineItemsitems

Вот пример использования следующего события checkout_completed:

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

Триггер Google Tag Manager — это тип пользовательского события с именем checkout_completed. Поле Имя события в триггере должно совпадать с ключом event в вашем пользовательском пикселе.

orderId и currency — это переменные, которые используются в Google Tag Manager для сбора данных из события. Они могут быть сопоставлены с переменной dataLayer в Google Tag Manager. Каждой переменной события требуется собственная переменная dataLayer. Настройте триггер на срабатывание для всех пользовательских событий.

Создайте тег, использующий только что созданный триггер. В разделе параметров события добавьте переменные, которые вы хотите собирать. В примере выше orderId, currency, price, shippingLine и totalTax будут настроены как переменные dataLayer. При каждом срабатывании тег будет фиксировать эти переменные dataLayer вместе с событием.

Обратите внимание, что для передачи данных в Google Tag Manager должен быть настроен хотя бы один тег и триггер.

Замена старых вызовов dataLayer.push(event) на analytics.publish()

Если вы уже настраивали Google Tag Manager ранее, вам необходимо заменить вызовы dataLayer.push на вызовы Shopify.analytics.publish(). Вызовы dataLayer.push можно найти в файлах theme.liquid в разделе Макет вашего редактора тем.

Также необходимо заменить вызовы dataLayer.push в checkout.liquid. Однако поскольку checkout.liquid не совместим с Shopify Extensions, для передачи данных в веб-пиксели нужно использовать расширение интерфейса.

Ниже приведен упрощенный пример отслеживания пользовательского события подписки на рассылку с использованием dataLayer в файлах theme.liquid:

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Аналог для Shopify выглядит следующим образом и передает данные в ваш пользовательский пиксель:

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Затем в код пользовательского пикселя нужно добавить следующее:

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Заменить старый dataLayer.push(data)

В Google Tag Manager есть функция, позволяющая передавать объект dataLayer с сохранением состояния при каждом событии. Хотя песочница пикселей Shopify не имеет аналогичной функции, вы можете достичь того же результата, создав собственный объект данных и передавая его в пользовательские события.

Например, определите объект «customData» перед публикацией любых ваших пользовательских событий:

<script>
  const customData = {email: customer.email}
</script>

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

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Советы по настройке Google Analytics 4

Ознакомьтесь со следующими советами по настройке Google Analytics 4 (GA4) при использовании Google Tag Manager в качестве пользовательского пикселя.

Более чистые URL-адреса страниц

Когда GA4 работает в песочнице, вы можете заметить, что URL-адреса страниц содержат информацию о песочнице, в которой они работают. Если вы хотите удалить информацию о песочнице из этих URL, вы можете отключить автоматическое отслеживание страниц в GA4 и вместо этого реализовать собственное, используя стандартное событие page_viewed.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

После публикации собственного события в dataLayer вы можете создать тег page_view для GA4, который срабатывает при событии page_viewed. Чаще всего используется тип тега Google Analytics: событие GA4 с именем события page_view. Задав тип тега и имя события, добавьте параметр page_location и установите для него то же значение, которое вы передали в dataLayer из пользовательского пикселя.

Улучшенная статистика

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

В приведенном ниже коде показан упрощенный пример отслеживания кликов по исходящим ссылкам:

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

Наконец, в GTM создайте тег GA4, который отправляет клик по ссылке в GA4. Убедитесь, что событие называется click в соответствии с расширенными правилами именования событий GA4.

Аналогичным образом можно настроить отслеживание для любых метрик улучшенной статистики Google.

Тестирование и отладка пользовательского пикселя

Когда вы будете готовы протестировать свой пользовательский пиксель GTM, используйте Shopify Pixel Helper, чтобы убедиться, что все события, которые вы хотите отслеживать, добавляются в песочницу без ошибок.

Вы также можете использовать расширение для страниц Google Tag Assistant, чтобы проверить, какие теги Google загружаются на странице. Однако функция Troubleshoot tag в Google Tag Assistant несовместима с пользовательскими пикселями и не обнаруживает теги Google в пользовательском пикселе или другие пиксели, загружаемые через GTM.