Izradite prilagođeni piksel za Google Tag Manager

Možete upotrebljavati Google Tag Manager (GTM) kao prilagođeni piksel za upravljanje pikselima trećih strana.

Kada ste spremni za testiranje svojeg prilagođenog piksela za GTM, upotrijebite alat Shopify Pixel Helper kako biste osigurali da se svi događaji koje želite pratiti dodaju u izolirano okruženje bez pogrešaka.

Također možete upotrijebiti proširenje stranice Google Tag Assistant za testiranje učitanih Google oznaka na stranici. Međutim, značajka Troubleshoot tag alata Google Tag Assistant nije kompatibilna s prilagođenim pikselima te ne prepoznaje nikakve Google oznake unutar prilagođenog piksela kao ni druge piksele koje učitava GTM.

Na ovoj stranici

Priprema za izradu prilagođenog piksela

Prije izrade prilagođenog piksela s pomoću alata Google Tag Manager, pregledajte sljedeće informacije kako biste bili sigurni da razumijete kako konfigurirati piksel:

Izradite ili otvorite račun za Google Tag Manager i nabavite ID spremnika za GTM.
Zbog sigurnosti, upravitelji oznaka učitani u našem izoliranom okruženju imaju ista ograničenja kao i bilo koji drugi pikseli. Saznajte više o ograničenjima izoliranog okruženja za piksele.

Izradite prilagođeni piksel za Google Tag Manager

Možete izraditi prilagođeni piksel za Google Tag Manager za upravljanje pikselima trećih strana.

Koraci:

Otvorite svoj račun za Google Tag Manager i odaberite račun za koji želite postaviti prilagođeni piksel.
Kliknite Administrator, a zatim kliknite Instaliraj Google Tag Manager kako biste otvorili instalacijski kod.
Kopirajte blok koda koji pripada u odjeljak head na stranici.
Uklonite HTML oznake iz bloka koda. Na primjer, <script></script>.
Umetnite preostali kod u novi Shopifyjev prilagođeni piksel.
Pretplatite se na korisnikove događaje i pošaljite ih u dataLayer GTM-a.
Kako biste pregledali kako bi se kod trebao prikazivati, pogledajte primjer prilagođenog piksela za Google Tag Manager.
Konfigurirajte Google Tag Manager tako da prihvaća događaje iz vašeg prilagođenog piksela.
Neobavezno: ako imate postojeće pozive dataLayer.push(event) u svojoj datoteci checkout.liquid, zamijenite ih pomoću funkcije analytics.publish().

Pretplatite se na korisnikove događaje i pošaljite ih u dataLayer GTM-a

Možete se pretplatiti na korisnikove događaje s pomoću dataLayer GTM-a u kodu svojeg prilagođenog piksela.

Prema zadanim postavkama, postoji skup standardnih događaja na koje se možete pretplatiti. Međutim, ako želite pratiti korisnikove događaje koji nisu dio standardne ponude događaja, možete objaviti vlastite prilagođene događaje iz datoteka predloška za Liquid.

U nastavku je prikazan primjer pretplate na standardni događaj „product_viewed”, koji označava kada netko pregleda proizvod. Kada se događaj pokrene, on prosljeđuje događaj u dataLayer.

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

U ovom se primjeru naziv proizvoda prosljeđuje u korisnom teretu događaja. Možete upotrijebiti varijablu za Google Tag Manager kako biste zabilježili naziv proizvoda iz korisnog tereta događaja u odabranoj oznaci.

Primjer prilagođenog piksela za Google Tag Manager

Primjer u nastavku pojednostavljena je verzija prilagođenog piksela za Google Tag Manager koja prikazuje kako slati podatke u Google Tag Manager. Kako biste poslali više događaja u svoj dataLayer, možete se pretplatiti na više standardnih i prilagođenih događaja.

// 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 prihvaćanje događaja iz vašeg prilagođenog piksela

Nakon što izradite prilagođeni piksel, trebate konfigurirati Google Tag Manager da prihvaća događaje iz njega. Za to su vam potrebni oznaka, pokretač i varijable dataLayer u Google Tag Manageru.

Neki primjeri odabranih standardnih korisnikovih događaja i njihovih ekvivalenata u Google Tag Manageru navedeni su u sljedećoj tablici:

Popis standardnih korisnikovih događaja na platformi Shopify za upotrebu s pikselima, u usporedbi s njihovim ekvivalentnim korisnikovim događajima u Google Tag Manageru, uz pokretač potreban za okidanje događaja.
Shopify događaj	Pokretač	GTM događaj
payment_info_submitted	Slanje podataka o plaćanju	add_payment_info
checkout_address_info_submitted	Slanje informacija o dostavi	add_shipping_info
product_added_to_cart	Dodavanje stavke u sigurnu košaricu	add_to_cart
checkout_started	Početak plaćanja	begin_checkout
checkout_completed	Dovršetak plaćanja	purchase
product_removed_from_cart	Uklanjanje stavke iz košarice	remove_from_cart
cart_viewed	Prikaz sigurne košarice	view_cart
product_viewed	Prikaz stranice s informacijama o proizvodu	view_item
collection_viewed	Prikaz popisa stavki	view_item_list

Parametri događaja GTM oznake moraju odgovarati očekivanim konvencijama imenovanja kako bi se događaji dataLayer vašeg prilagođenog piksela mogli obraditi.

Neki primjeri odabranih svojstava događaja dataLayer prilagođenog piksela i njihovih ekvivalentnih parametara događaja za Google Analytics 4 (GA4) su sljedeći:

Popis događaja `dataLayer` prilagođenog piksela koji koriste konvenciju imenovanja za GA4
Događaji `dataLayer` prilagođenog piksela	Parametri GA4 događaja
`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`

Evo primjera upotrebe sljedećeg događaja 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,
  });
});

Pokretač u Google Tag Manageru jest prilagođena vrsta događaja s nazivom događaja checkout_completed. Polje Naziv događaja u pokretaču mora odgovarati ključu event u vašem prilagođenom pikselu.

orderId i currency varijable su koje koristite u Google Tag Manageru za bilježenje podataka iz događaja. Mogu se mapirati u varijablu dataLayer u Google Tag Manageru. Svaka varijabla događaja zahtijeva vlastitu varijablu dataLayer. Postavite pokretač da se okida na sve prilagođene događaje.

Izradite oznaku koja koristi pokretač koji ste upravo izradili. Pod parametrima događaja dodajte varijable koje želite zabilježiti. U gornjem primjeru orderId, currency, price, shippingLine i totalTax postavile bi se kao varijable dataLayer. Svaki put kad se oznaka okine, zabilježit će te varijable dataLayer zajedno s događajem.

Imajte na umu da u Google Tag Manageru moraju biti postavljeni barem jedna oznaka i jedan pokretač kako bi došlo do prijenosa podataka.

Zamjena starih poziva dataLayer.push(event) pozivima analytics.publish()

Ako ste prethodno postavili Google Tag Manager, tada trebate zamijeniti svoje pozive dataLayer.push pozivima Shopify.analytics.publish(). Pozive dataLayer.push možete pronaći u datotekama theme.liquid, u odjeljku Izgled u alatu za uređivanje tema.

Također trebate zamijeniti pozive dataLayer.push u datoteci checkout.liquid. Međutim, budući da datoteka checkout.liquid nije kompatibilna s proširenjima Shopify Extensions, trebate upotrijebiti proširenje UI-ja za slanje podataka u web-piksele.

U nastavku je pojednostavnjeni primjer prilagođenog događaja prijave putem e-pošte koji se prati pomoću elementa dataLayer u datotekama theme.liquid:

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

Ekvivalent platforme Shopify prikazuje se na sljedeći način, što prosljeđuje podatke u vaš prilagođeni piksel:

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

Zatim biste u svoj kôd prilagođenog piksela dodali nešto poput ovoga:

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

Zamijenite stari kôd dataLayer.push(data)

Google Tag Manager ima značajku koja vam omogućuje prosljeđivanje objekta dataLayer sa stanjem pri svakom događaju. Iako okruženje za testiranje piksela platforme Shopify ne uključuje ekvivalentnu značajku, isti rezultat možete postići izradom vlastitog podatkovnog objekta i njegovim prosljeđivanjem u prilagođene događaje.

Na primjer, definirajte objekt „customData” prije objave bilo kojeg prilagođenog događaja:

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

Zatim, kad god želite uključiti svoje prilagođene podatke, proslijedite ih u metodu objave:

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

Savjeti za postavljanje alata Google Analytics 4

Razmotrite sljedeće savjete za postavljanje alata Google Analytics 4 (GA4) kada upotrebljavate Google Tag Manager kao prilagođeni piksel.

Čistiji URL-ovi stranica

Kada je GA4 pokrenut u okruženju za testiranje, možda ćete primijetiti da URL-ovi stranica uključuju informacije o okruženju u kojem rade. Ako želite ukloniti te informacije o okruženju za testiranje iz tih URL-ova, možete isključiti automatsko praćenje stranica alata GA4 i umjesto toga implementirati vlastito upotrebom standardnog događaja 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,
  });
});

Nakon što objavite vlastiti događaj u element dataLayer, možete izraditi GA4 oznaku page_view koja se pokreće na događaju page_viewed. Najčešće možete upotrijebiti vrstu oznake Google Analytics: GA4 Event i postaviti naziv događaja na page_view. Nakon što postavite vrstu oznake i naziv događaja, trebate dodati parametar za page_location i postaviti njegovu vrijednost na istu vrijednost koju ste proslijedili u dataLayer iz prilagođenog piksela.

Poboljšano mjerenje

Pri učitavanju alata GA4 unutar okruženja za testiranje piksela platforme Shopify, neki događaji koji se obično automatski izvode morat će se ručno postaviti. Na primjer, klikovi na odlazne poveznice u sklopu postavke za poboljšano mjerenje alata GA4 ne mogu se automatski pokrenuti iz sigurnosnih razloga pri upotrebi prilagođenih piksela. Međutim, možete sami implementirati događaje poboljšanog mjerenja alata GA4 kao prilagođene događaje.

Kôd naveden u nastavku uključuje pojednostavnjeni primjer praćenja klikova na odlazne poveznice:

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

Konačno, u alatu GTM izradite GA4 oznaku koja šalje klik na poveznicu u GA4. Provjerite je li naziv događaja click kako bi se podudarao s poboljšanim imenovanjem događaja alata GA4.

Isto praćenje možete postići za bilo koji od Googleovih mjernih podataka za poboljšano mjerenje.

Izradite prilagođeni piksel za Google Tag Manager

Na ovoj stranici

Priprema za izradu prilagođenog piksela

Izradite prilagođeni piksel za Google Tag Manager

Koraci:

Pretplatite se na korisnikove događaje i pošaljite ih u dataLayer GTM-a

Primjer prilagođenog piksela za Google Tag Manager

Konfigurirajte Google Tag Manager za prihvaćanje događaja iz vašeg prilagođenog piksela

Zamjena starih poziva dataLayer.push(event) pozivima analytics.publish()

Zamijenite stari kôd dataLayer.push(data)

Savjeti za postavljanje alata Google Analytics 4

Čistiji URL-ovi stranica

Poboljšano mjerenje

Testiranje i otklanjanje programskih pogrešaka na prilagođenom pikselu