Vytvorenie vlastného pixelu Google Tag Manager

Nástroj Google Tag Manager (GTM) môžete použiť ako vlastný pixel na správu svojich pixelov od tretích strán.

Keď budete pripravení otestovať svoj vlastný pixel GTM, použite rozšírenie Shopify Pixel Helper, aby ste sa uistili, že všetky udalosti, ktoré chcete sledovať, sa do sandboxu pridávajú bez chýb.

Na otestovanie, ktoré značky Google sa na stránke načítavajú, môžete použiť aj rozšírenie stránky Google Tag Assistant. Funkcia Troubleshoot tag v rozšírení Google Tag Assistant však nie je kompatibilná s vlastnými pixelmi a nedeteguje žiadne značky Google vo vlastnom pixeli, ani iné pixely, ktoré načíta GTM.

Na tejto stránke

Príprava na vytvorenie vlastného pixelu

Pred vytvorením vlastného pixelu pomocou nástroja Google Tag Manager si prečítajte nasledujúce informácie, aby ste sa uistili, že rozumiete tomu, ako svoj pixel nakonfigurovať:

Vytvorte si alebo otvorte účet Google Tag Manager a získajte ID kontajnera GTM.
Z bezpečnostných dôvodov majú správcovia značiek načítaní v našom sandboxe rovnaké obmedzenia ako všetky ostatné pixely. Prečítajte si ďalšie informácie o obmedzeniach sandboxu pre pixely.

Vytvorenie vlastného pixelu Google Tag Manager

Môžete si vytvoriť vlastný pixel Google Tag Manager na správu svojich pixelov od tretích strán.

Kroky:

Otvorte si účet Google Tag Manager a vyberte účet, v ktorom chcete nastaviť vlastný pixel.
Kliknite na položku Správca a potom kliknutím na položku Inštalovať Správcu značiek Google otvorte inštalačný kód.
Skopírujte blok kódu, ktorý patrí do sekcie head na stránke.
Odstráňte značky HTML z bloku kódu. Napríklad <script></script>.
Vložte zvyšný kód do nového vlastného pixelu Shopify.
Prihláste sa na odber udalostí zákazníkov a odošlite ich do dátovej vrstvy (dataLayer) GTM.
Ak si chcete pozrieť, ako by sa mal kód zobrazovať, pozrite si príklad vlastného pixelu Google Tag Manager.
Nakonfigurujte nástroj Google Tag Manager na prijímanie udalostí z vášho vlastného pixelu.
Voliteľné: Ak máte v súbore checkout.liquid existujúce volania dataLayer.push(event), nahraďte ich volaniami analytics.publish().

Prihlásenie na odber udalostí zákazníkov a odoslanie do dátovej vrstvy GTM

Na odber udalostí zákazníkov sa môžete prihlásiť pomocou objektu dataLayer nástroja GTM v kóde vlastného pixelu.

K dispozícii je predvolená skupina štandardných udalostí, na ktorých odber sa môžete prihlásiť. Ak však chcete sledovať udalosti zákazníkov, ktoré nie sú súčasťou ponuky štandardných udalostí, môžete publikovať vlastné udalosti zo súborov šablón Liquid.

Nižšie nájdete príklad prihlásenia sa na odber štandardnej udalosti „product_viewed“, ktorá indikuje, keď si niekto pozrie produkt. Keď sa udalosť spustí, odošle sa do objektu dataLayer.

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

V tomto príklade sa v užitočnom zaťažení udalosti (payload) odovzdáva názov produktu. Na zachytenie názvu produktu z užitočného zaťaženia udalosti vo vybranej značke môžete použiť premennú nástroja Google Tag Manager.

Príklad vlastného pixelu Google Tag Manager

Príklad nižšie je zjednodušená verzia vlastného pixelu pre Google Tag Manager, ktorá ukazuje, ako odosielať údaje do služby Google Tag Manager. Ak chcete do vrstvy dataLayer odosielať viac udalostí, môžete odoberať ďalšie štandardné a vlastné udalosti.

// 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,
  });
});

Nakonfigurujte Google Tag Manager na prijímanie udalostí z vlastného pixelu

Po vytvorení vlastného pixelu musíte nakonfigurovať Google Tag Manager tak, aby prijímal udalosti z tohto vlastného pixelu. Na to potrebujete značku, spúšťač a premenné vrstvy dataLayer v nástroji Google Tag Manager.

V nasledujúcej tabuľke nájdete príklady vybraných štandardných udalostí zákazníkov a ich ekvivalentov v nástroji Google Tag Manager:

Zoznam štandardných udalostí zákazníkov služby Shopify určených na použitie s pixelmi, v porovnaní s ich ekvivalentnými udalosťami zákazníkov v nástroji Google Tag Manager, spolu so spúšťačom potrebným na spustenie daných udalostí.
Udalosť Shopify	Spúšťač	Udalosť GTM
payment_info_submitted	Odoslať platobné údaje	add_payment_info
checkout_address_info_submitted	Odoslať údaje o doprave	add_shipping_info
product_added_to_cart	Pridať položku do nákupného košíka	add_to_cart
checkout_started	Prejsť do pokladne	begin_checkout
checkout_completed	Dokončiť nákup v pokladni	purchase
product_removed_from_cart	Odstrániť položku z košíka	remove_from_cart
cart_viewed	Zobraziť nákupný košík	view_cart
product_viewed	Zobraziť stránku s detailmi produktu	view_item
collection_viewed	Zobraziť zoznam položiek	view_item_list

Parametre udalosti značky GTM sa musia zhodovať s očakávanými konvenciami pomenovania, aby bolo možné spracovať udalosti vrstvy dataLayer vášho vlastného pixelu.

Nasledujú príklady vybraných vlastností udalostí vrstvy dataLayer z vlastného pixelu a ich ekvivalentov v parametroch udalostí služby Google Analytics 4 (GA4):

Zoznam udalostí vrstvy `dataLayer` vlastného pixelu s použitím konvencie pomenovania služby GA4
Udalosti vrstvy `dataLayer` vlastného pixelu	Parametre udalostí GA4
`event.data?.checkout?.currencyCode`	`currency`
`event.data?.checkout?.totalPrice?.amount`	`value`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`coupon`
`event.data?.checkout?.shippingLine?.price?.amount`	`shipping`
`event.data?.checkout?.totalTax`	`tax`
`event.data?.checkout?.lineItems`	`items`

Tu je príklad s použitím nasledujúcej udalosti 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,
  });
});

Spúšťač nástroja Google Tag Manager je typ vlastnej udalosti s názvom udalosti checkout_completed. Pole Názov udalosti v spúšťači sa musí zhodovať s kľúčom event vo vlastnom pixeli.

orderId a currency sú premenné, ktoré sa používajú v nástroji Google Tag Manager na zachytenie údajov z udalosti. Možno ich namapovať na premennú vrstvy dataLayer v nástroji Google Tag Manager. Každá premenná udalosti vyžaduje vlastnú premennú vrstvy dataLayer. Nastavte spúšťač tak, aby sa spúšťal pri všetkých vlastných udalostiach.

Vytvorte značku, ktorá používa spúšťač, ktorý ste práve vytvorili. V sekcii parametrov udalosti pridajte premenné, ktoré chcete zachytávať. V príklade vyššie by sa ako premenné vrstvy dataLayer nastavili orderId, currency, price, shippingLine a totalTax. Pri každom spustení značky sa s udalosťou zachytia aj tieto premenné vrstvy dataLayer.

Aby sa údaje mohli preniesť, v nástroji Google Tag Manager musí byť nastavená aspoň jedna značka a spúšťač.

Nahradenie starých volaní dataLayer.push(event) za volania analytics.publish()

Ak ste už v minulosti nastavili nástroj Google Tag Manager, musíte nahradiť volania dataLayer.push volaniami Shopify.analytics.publish(). Volania dataLayer.push nájdete v súboroch theme.liquid v sekcii Rozloženie v editore tém.

Volania dataLayer.push musíte nahradiť aj v súbore checkout.liquid. Keďže však súbor checkout.liquid nie je kompatibilný s riešením Shopify Extensions, na odosielanie údajov do webových pixelov musíte použiť rozšírenie používateľského rozhrania.

Nižšie je zjednodušený príklad vlastnej udalosti registrácie e‑mailom, ktorá sa sleduje pomocou objektu dataLayer v súboroch theme.liquid:

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

Ekvivalent v službe Shopify sa zobrazuje takto, čím sa údaje odosielajú do vlastného pixelu:

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

Potom do kódu vlastného pixelu pridáte napríklad toto:

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

Nahraďte starý zápis dataLayer.push(data)

Nástroj Google Tag Manager má funkciu, ktorá umožňuje odoslať stavový objekt dataLayer pri každej udalosti. Hoci prostredie sandboxu pixelov Shopify neobsahuje ekvivalentnú funkciu, rovnaký výsledok môžete dosiahnuť vytvorením vlastného dátového objektu a jeho odovzdaním do vlastných udalostí.

Definujte napríklad objekt „customData“ pred publikovaním akýchkoľvek vlastných udalostí:

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

Následne kedykoľvek, keď chcete zahrnúť vlastné údaje, odovzdajte ich do metódy publikovania:

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

Tipy na nastavenie služby Google Analytics 4

Pri používaní nástroja Google Tag Manager ako vlastného pixelu zvážte nasledujúce tipy na nastavenie služby Google Analytics 4 (GA4).

Čistejšie adresy URL stránok

Keď je služba GA4 spustená v prostredí sandboxu, môžete si všimnúť, že adresy URL stránok obsahujú informácie o sandboxe, v ktorom funguje. Ak chcete tieto informácie o sandboxe z adries URL odstrániť, môžete vypnúť automatické sledovanie stránok v GA4 a namiesto toho implementovať vlastné pomocou štandardnej udalosti 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,
  });
});

Po publikovaní vlastnej udalosti do objektu dataLayer môžete vytvoriť značku page_view pre GA4, ktorá sa spustí pri udalosti page_viewed. Najčastejšie môžete použiť typ značky Google Analytics: GA4 Event a nastaviť Názov udalosti na page_view. Po nastavení typu značky a názvu udalosti by ste mali pridať parameter page_location a jeho hodnotu nastaviť na rovnakú hodnotu, akú ste odovzdali do objektu dataLayer z vlastného pixelu.

Rozšírené meranie

Pri načítaní GA4 v sandboxe pixelov Shopify je potrebné niektoré udalosti, ktoré sa zvyčajne odvodzujú automaticky, nastaviť manuálne. Napríklad kliknutia na odchádzajúce odkazy ako súčasť nastavenia rozšíreného merania v GA4 sa z bezpečnostných dôvodov pri použití vlastných pixelov nemôžu spúšťať automaticky. Udalosti rozšíreného merania služby GA4 je však možné implementovať aj ako vlastné udalosti.

Nižšie uvedený kód obsahuje zjednodušený príklad sledovania kliknutí na odchádzajúce odkazy:

<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>

Nakoniec v GTM vytvorte značku GA4, ktorá odošle kliknutie na odkaz do GA4. Uistite sa, že názov udalosti je click, aby zodpovedal názvosloviu udalostí rozšíreného merania v GA4.

Rovnaké sledovanie môžete dosiahnuť pri ktorejkoľvek z metrík rozšíreného merania od Googlu.

Vytvorenie vlastného pixelu Google Tag Manager

Na tejto stránke

Príprava na vytvorenie vlastného pixelu

Vytvorenie vlastného pixelu Google Tag Manager

Kroky:

Prihlásenie na odber udalostí zákazníkov a odoslanie do dátovej vrstvy GTM

Príklad vlastného pixelu Google Tag Manager

Nakonfigurujte Google Tag Manager na prijímanie udalostí z vlastného pixelu

Nahradenie starých volaní dataLayer.push(event) za volania analytics.publish()

Nahraďte starý zápis dataLayer.push(data)

Tipy na nastavenie služby Google Analytics 4

Čistejšie adresy URL stránok

Rozšírené meranie

Testovanie a ladenie vlastného pixelu