Ustvarjanje piksla po meri za Google Tag Manager

Orodje Google Tag Manager (GTM) lahko uporabite kot piksel po meri za upravljanje pikslov zunanjih izvajalcev.

Ko ste pripravljeni preizkusiti piksel GTM po meri, uporabite Shopify Pixel Helper, da zagotovite, da se v peskovnik brez napak dodajo vsi dogodki, ki jim želite slediti.

Uporabite lahko tudi razširitev strani Google Tag Assistant, da preverite, katere Googlove oznake se nalagajo na strani. Vendar pa funkcija Troubleshoot tag v orodju Google Tag Assistant ni združljiva s piksli po meri in ne zazna nobenih Googlovih oznak v pikslih po meri ali drugih pikslih, ki jih nalaga GTM.

Na tej strani

Priprava na ustvarjanje piksla po meri

Preden z orodjem Google Tag Manager ustvarite piksel po meri, preglejte naslednje informacije, da se prepričate, ali razumete, kako konfigurirati piksel:

Ustvarite ali odprite račun Google Tag Manager in pridobite ID kontejnerja GTM.
Zaradi varnosti imajo upravitelji oznak, naloženi v našem peskovniku, enake omejitve kot kateri koli drugi piksli. Preberite več informacij o omejitvah pikslov v peskovniku.

Ustvarjanje piksla po meri za Google Tag Manager

Če želite upravljati piksle zunanjih izvajalcev, lahko ustvarite piksel po meri za Google Tag Manager.

Koraki:

Odprite račun Google Tag Manager in izberite račun, za katerega želite nastaviti piksel po meri.
Kliknite Skrbnik (Admin) in nato Namesti Google Tag Manager, da odprete namestitveno kodo.
Kopirajte blok kode, ki spada v razdelek head na strani.
Iz bloka kode odstranite oznake HTML. Na primer <script></script>.
Preostalo kodo vstavite v nov Shopifyjev piksel po meri.
Naročite se na dogodke strank in jih potisnite v GTM-jev dataLayer.
Če želite preveriti, kako bi se morala koda prikazovati, si oglejte primer piksla po meri za Google Tag Manager.
Konfigurirajte Google Tag Manager za sprejemanje dogodkov iz piksla po meri.
Izbirno: Če imate v datoteki checkout.liquid obstoječe klice dataLayer.push(event), jih zamenjajte z analytics.publish().

Naročite se na dogodke strank in jih potisnite v podatkovni sloj (dataLayer) storitve GTM

Na dogodke strank se lahko naročite z elementom dataLayer storitve GTM v kodi piksla po meri.

Privzeto je na voljo nabor standardnih dogodkov, na katere se lahko naročite. Če pa želite slediti dogodkom strank, ki niso del ponudbe standardnih dogodkov, lahko objavite svoje dogodke po meri iz datotek s predlogami Liquid.

Spodaj je primer naročanja na standardni dogodek »product_viewed«, ki označuje, kdaj nekdo pogleda izdelek. Ko se dogodek sproži, potisne dogodek v dataLayer.

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

V tem primeru se ime izdelka posreduje v podatkih dogodka. Z uporabo spremenljivke za Google Tag Manager lahko iz podatkov dogodka v izbrani oznaki zajamete ime izdelka.

Primer piksla po meri za Google Tag Manager

Spodnji primer je poenostavljena različica piksla po meri za Google Tag Manager, ki prikazuje, kako pošiljati podatke v storitev Google Tag Manager. Če želite v svoj dataLayer potisniti več dogodkov, se lahko naročite na dodatne standardne dogodke in dogodke po meri.

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

Konfigurirajte Google Tag Manager za sprejemanje dogodkov iz piksla po meri

Ko ustvarite piksel po meri, morate konfigurirati storitev Google Tag Manager, da bo sprejemala dogodke iz vašega piksla po meri. Za to v storitvi Google Tag Manager potrebujete oznako, sprožilec in spremenljivke za dataLayer.

Nekateri primeri izbranih standardnih dogodkov strank in njihovih ustreznikov v storitvi Google Tag Manager so navedeni v naslednji tabeli:

Seznam standardnih Shopifyjevih dogodkov strank za uporabo s piksli, primerjanih z njihovimi ustreznimi dogodki strank v storitvi Google Tag Manager, ter potrebnih sprožilcev za proženje dogodkov.
Shopifyjev dogodek	Sprožilec	Dogodek v GTM
payment_info_submitted	Predložitev podatkov o plačilu	add_payment_info
checkout_address_info_submitted	Predložitev podatkov za dostavo	add_shipping_info
product_added_to_cart	Dodajanje kosa v nakupovalno košarico	add_to_cart
checkout_started	Začetek zaključka nakupa	begin_checkout
checkout_completed	Dokončanje zaključka nakupa	purchase
product_removed_from_cart	Odstranitev kosa iz košarice	remove_from_cart
cart_viewed	Ogled nakupovalne košarice	view_cart
product_viewed	Ogled strani s podrobnostmi o izdelku	view_item
collection_viewed	Ogled seznama kosov	view_item_list

Parametri dogodka za oznako GTM se morajo ujemati s pričakovanimi dogovori o poimenovanju, da se bodo vaši dogodki piksla po meri za dataLayer lahko obdelali.

Sledijo nekateri primeri izbranih lastnosti dogodkov za dataLayer iz piksla po meri in njihovih ustreznikov med parametri dogodkov v storitvi Google Analytics 4 (GA4):

Seznam dogodkov piksla po meri za `dataLayer`, ki uporabljajo pravila poimenovanja za GA4
Dogodki piksla po meri za `dataLayer`	Parametri dogodka za 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`

Tukaj je primer z uporabo naslednjega dogodka 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,
  });
});

Sprožilec Google Tag Manager je vrsta dogodka po meri z imenom dogodka checkout_completed. Polje Event name (Ime dogodka) v sprožilcu se mora ujemati s ključem event v vašem pikslu po meri.

orderId in currency sta spremenljivki, ki ju uporabljate v rešitvi Google Tag Manager za zajemanje podatkov iz dogodka. Lahko sta preslikani v spremenljivko dataLayer v rešitvi Google Tag Manager. Vsaka spremenljivka dogodka zahteva svojo spremenljivko dataLayer. Sprožilec nastavite tako, da se sproži pri vseh dogodkih po meri.

Ustvarite oznako, ki uporablja pravkar ustvarjen sprožilec. Pod parametri dogodka dodajte spremenljivke, ki jih želite zajeti. V zgornjem primeru bi bile orderId, currency, price, shippingLine in totalTax nastavljene kot spremenljivke dataLayer. Ob vsakem sproženju oznake se bodo s tem dogodkom zajele te spremenljivke dataLayer.

Upoštevajte, da morata biti v rešitvi Google Tag Manager nastavljena vsaj ena oznaka in en sprožilec, da se lahko izvede prenos podatkov.

Zamenjava starih klicev dataLayer.push(event) z analytics.publish()

Če ste predhodno nastavili Google Tag Manager, morate klice dataLayer.push zamenjati s klici Shopify.analytics.publish(). Klice dataLayer.push lahko najdete v datotekah theme.liquid v razdelku Postavitev v urejevalniku tem.

Klice dataLayer.push morate zamenjati tudi v datoteki checkout.liquid. Ker pa datoteka checkout.liquid ni združljiva z razširitvami Shopify Extensions, morate za potiskanje podatkov v spletne piksle uporabiti razširitev uporabniškega vmesnika.

Spodaj je poenostavljen primer dogodka prijave na e-pošto po meri, ki se mu sledi s kodo dataLayer v datotekah theme.liquid:

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

Ustreznik platforme Shopify je prikazan na naslednji način in potisne podatke v vaš piksel po meri:

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

Nato v kodo piksla po meri dodajte nekaj takšnega:

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

Zamenjava stare kode dataLayer.push(data)

Google Tag Manager ima funkcijo, ki omogoča potiskanje stanjskega predmeta dataLayer pri vsakem dogodku. Čeprav peskovnik za piksle platforme Shopify ne vključuje enakovredne funkcije, lahko enak rezultat dosežete tako, da ustvarite lasten podatkovni predmet in ga posredujete v dogodke po meri.

Preden objavite katerega od svojih dogodkov po meri, na primer definirajte predmet »customData«:

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

Nato vsakič, ko želite vključiti svoje podatke po meri, te posredujte v svojo metodo za objavo (publish):

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

Nasveti za nastavitev storitve Google Analytics 4

Pri uporabi rešitve Google Tag Manager kot piksla po meri upoštevajte naslednje nasvete za nastavitev storitve Google Analytics 4 (GA4).

Čistejši URL-naslovi strani

Ko se GA4 izvaja v peskovniku, boste morda opazili, da URL-naslovi strani vključujejo informacije o peskovniku, v katerem delujejo. Če želite odstraniti informacije o peskovniku iz teh URL-naslovov, lahko izklopite samodejno sledenje stranem v GA4 in z uporabo standardnega dogodka page_viewed namesto tega implementirate lastno sledenje.

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

Ko objavite lasten dogodek v predmetu dataLayer, lahko ustvarite oznako GA4 page_view, ki se sproži pri dogodku page_viewed. Najpogosteje lahko uporabite vrsto oznake Google Analytics: GA4 Event in ime dogodka nastavite na page_view. Po nastavitvi vrste oznake in imena dogodka dodajte parameter za page_location in njegovo vrednost nastavite na tisto, ki ste jo posredovali v dataLayer iz svojega piksla po meri.

Izboljšano merjenje

Pri nalaganju storitve GA4 znotraj peskovnika za piksle platforme Shopify bo treba nekatere dogodke, ki se običajno sklepajo samodejno, nastaviti ročno. Kliki izhodnih povezav v okviru nastavitve izboljšanega merjenja GA4 se na primer iz varnostnih razlogov pri uporabi pikslov po meri ne morejo sprožiti samodejno. Vseeno pa lahko sami implementirate dogodke izboljšanega merjenja GA4 kot dogodke po meri.

Spodnja koda vključuje poenostavljen primer sledenja klikom na izhodne povezave:

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

Na koncu v rešitvi GTM ustvarite oznako GA4, ki klik na povezavo pošlje v GA4, pri čemer poskrbite, da je ime dogodka click, s čimer se bo ujemalo z izboljšanim poimenovanjem dogodkov v GA4.

Enako sledenje lahko dosežete za katero koli Googlovo metriko izboljšanega merjenja.

Preizkušanje piksla po meri in odpravljanje napak v njem

Ko ste pripravljeni preizkusiti piksel GTM po meri, uporabite Shopify Pixel Helper, da zagotovite, da se v peskovnik brez napak dodajo vsi dogodki, ki jim želite slediti.