Помощ
Влизане

Създаване на персонализиран пиксел с Google Tag Manager

Можете да използвате Google Tag Manager (GTM) като персонализиран пиксел, за да управлявате своите пиксели от трети страни.

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

Можете също да използвате разширението за страници Google Tag Assistant, за да тествате кои тагове на Google се зареждат на страницата. Функцията Отстраняване на неизправности в тага на 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 Custom Pixel.
  6. Subscribe to customer events and push to GTM’s dataLayer.
  7. За да прегледате как трябва да се показва кодът, вижте example Google Tag Manager custom pixel.
  8. Configure Google Tag Manager to accept events from your Custom Pixel.
  9. По избор: Ако имате съществуващи извиквания на dataLayer.push(event) във Вашия файл checkout.liquid, тогава replace it with analytics.publish().

Абониране за клиентски събития и изпращане към data layer на GTM

Можете да се абонирате за клиентски събития, като използвате dataLayer на GTM във Вашия код за персонализиран пиксел.

По подразбиране има набор от standard events, за които можете да се абонирате. Въпреки това, ако искате да проследявате клиентски събития, които не са част от предлаганите стандартни събития, тогава можете да publish your own custom events from Liquid template files.

По-долу е даден пример за абониране за стандартното събитие „product_viewed“, което показва кога някой разглежда продукт. Когато събитието се задейства, то го изпраща към dataLayer.

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

В този пример наименованието на продукта се предава в полезния товар на събитието. Можете да използвате Google Tag Manager variable, за да уловите наименованието на продукта от полезния товар на събитието в избран от Вас таг.

Примерен персонализиран пиксел за 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 трябва да съответстват на expected naming conventions, за да могат да бъдат обработени събитията на 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 name в тригера трябва да съвпада с ключа 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, в секция Layout на Вашия редактор на теми.

Също така трябва да замените извикванията на 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, можете да създадете GA4 таг page_view, който се задейства от събитието page_viewed. Най-често можете да използвате типа таг Google Analytics: GA4 Event и да зададете името на събитието на 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 се зареждат на страницата. Функцията Отстраняване на неизправности в тага на Google Tag Assistant обаче не е съвместима с персонализираните пиксели и не открива никакви тагове на Google в персонализиран пиксел или други пиксели, зареждани от GTM.