Opprett en egendefinert Google Tag Manager-piksel

Denne siden inneholder instruksjoner om hvordan du bruker Google Tag Manager (GTM) som en egendefinert piksel for å administrere tredjepartspiksler.

Merk

For økt stabilitet, sikkerhet og ytelse anbefaler vi at du ser etter tilgjengelige apper før du oppretter egendefinerte piksler. Hvis det ikke finnes en app som oppfyller dine behov, vil du kanskje ønske å bruke Google Tag Manager som en egendefinert piksel.

Forberedelser til å opprette en egendefinert piksel

Før du oppretter en egendefinert piksel med Google Tag Manager må du gå gjennom følgende informasjon for å sikre at du forstår hvordan du konfigurerer en piksel:

• Opprett eller åpne en Google Tag Manager-konto og hent en GTM-beholder-ID.
• Av sikkerhetshensyn har taggbehandlere som lastes inn i sandkassen vår de samme begrensningene som alle andre piksler. Finn ut mer om sandkassegrenser for piksler.

Opprett en egendefinert Google Tag Manager-piksel

Merk

Dette er en avansert veiledning, som ikke støttes av Shopify. Hvis du trenger hjelp med å legge til en egendefinert piksel kan du leie inn en Shopify-ekspert.

Steg

1. Åpne Google Tag Manager-kontoen, og velg kontoen du vil konfigurere en egendefinert piksel for.
2. Klikk på Administrator, og installer Google Tag Manager for å åpne installasjonskoden.
3. Kopier kodeblokken som skal legges i head-delen av en side.
4. Fjern HTML-taggene fra denne kodeblokken.
5. Sett inn den gjenværende koden i en ny egendefinert Shopify-piksel.
6. Initialiser dataLayer-objektet med window.dataLayer = window.dataLayer || [];.

Den egendefinerte pikselkoden bør se omtrent slik ut, og GTM-XXXXXXX må samsvare med din egen GTM-beholder-ID.

(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');

window.dataLayer = window.dataLayer || [];

Abonner på kundehendelser og anrop til GTMs dataLayer

I stedet for å legge til anrop til dataLayer.push() i Liquid-malfilene, vil du gjøre alt knyttet til GTM-dataLayer i den egendefinerte pikselkoden.

Som standard er det et sett standard egendefinerte hendelser du kan abonnere på, men du kan også publisere dine egne egendefinerte hendelser fra Liquid-malfiler.

Nedenfor ser du et eksempel på abonnement på standardhendelsen «product_viewed», som indikerer når noen har sett på et produkt. Når hendelsen utløses sender den hendelsen til dataLayer.

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

I dette eksempelet sendes data om produktets tittel, som ved hjelp av Google Tag Manager-variabler kan sendes videre til andre tagger.

Bytte ut gamle anrop til dataLayer.push(event) med analytics.publish()

Hvis du har konfigurert Google Tag Manager tidligere, må du bytte ut anrop til dataLayer.push med anrop til Shopify.analytics.publish() .

Nedenfor ser du et forenklet eksempel på en egendefinert hendelse for e-postregistrering som spores med dataLayer.

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

Den tilsvarende Shopify-hendelsen ser slik ut, og sender data til den egendefinerte pikselen.

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

Deretter legger du til noe som dette i den egendefinerte pikselkoden.

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

Bytt ut gamle anrop til dataLayer.push(data)

Google Tag Manager har en funksjon som lar deg sende et tilstandsfullt datalagobjekt i hver hendelse. Selv om Shopifys pikselsandkasse ikke inneholder en tilsvarende funksjon, kan du oppnå det samme utfallet ved å opprette ditt eget dataobjekt og sende det til egendefinerte hendelser.

Du kan for eksempel definere objektet «customData», før noen av de egendefinerte hendelsene publiseres.

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

Når du så vil legge ved egendefinerte data, kan du sende dem til publiseringsmetoden.

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

Merk

Shopify støtter ikke inkludering av egendefinerte data i standardhendelser for øyeblikket. Hvis dette er noe du har behov for, kan du publisere egendefinerte hendelser som erstatter standardhendelser.

Eksempel på en egendefinert Google Tag Manager-piksel

Eksempelet nedenfor er en forenklet versjon av en egendefinert Google Tag Manager-piksel som viser hvordan du sender data til GTM. For å sende flere hendelser til dataLayer kan du abonnere på flere standard og egendefinerte hendelser.

(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');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

Tips og råd for konfigurering av Google Analytics 4

Se gjennom følgende tips for konfigurering av Google Analytics 4 (GA4) når du bruker Google Tag Manager som en egendefinert piksel.

Renere URL-adresser til sider

Når GA4 kjører i en sandkasse, vil du kanskje oppleve at URL-adresser til sider inneholder informasjon om sandkassen de kjører i. Hvis du vil fjerne informasjon om sandkasser fra URL-adressene, kan du deaktivere GA4s automatiske sidesporing og i stedet implementere din egen, ved bruk av standardhendelsen 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,
  });
});

Når du har publisert din egen hendelse i dataLayer kan du opprette GA4-taggen page_view som utløses ved hendelsen page_viewed. Det vanligste er å bruke taggtypen Google Analytics: GA4 Event og angi hendelsesnavnet til page_view. Når du har angitt taggtype og hendelsesnavn, må du legge til et parameter for page_location og angi verdien til den samme verdien som du har sendt til datalaget fra den egendefinerte pikselen.

Forbedret måling

Ved innlasting av GA4 i Shopifys pikselsandkasse må noen hendelser som vanligvis utledes automatisk konfigureres manuelt. Klikk på utgående koblinger, som er en del av GA4s forbedrede målingsinnstilling, kan for eksempel ikke utløses automatisk av sikkerhetsårsaker når du bruker egendefinerte piksler. Det er imidlertid mulig å implementere GA4s forbedrede målingshendelser selv, som egendefinerte hendelser.

Koden som er oppgitt nedenfor inneholder et forenklet eksempel på sporing av klikk på utgående koblinger.

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

Til slutt oppretter du en GA4-tagg i GTM som sender klikk på koblingen til GA4, ved å sikre at hendelsesnavnet er click, slik at det samsvarer med navngivningen i GA4s forbedrede hendelser.

Du kan oppnå samme sporing for alle Googles forbedrede målingsberegninger.

Testing og feilsøking

Merk

Googles taggeverktøy fungerer ikke med egendefinerte piksler. Ved å bruke nettleserutvidelsen Google Analytics Debug sendes feilsøkingssignalet til GA4, slik at hendelsene dine vises i programmet.

1. Åpne Shopify-butikken i en Chrome-nettleser.
2. Åpne nettverksfanen i nettleseren, og finn forespørselen med navnet collect?…, som inneholder GA4-målings-ID-en hvis det sendes data fra Google Tag Manager til GA4.
3. Klikk på Administrator i Google Analytics-kontoen, og klikk deretter på Feilsøkingsvisning.
4. Kontroller at du har lagt til GA Debug Google-utvidelsen i Chrome-nettleseren:
   • Aktiver GA Debug.
   • Åpne Shopify-butikken i en separat fane.
   • Gå tilbake til GA4 i feilsøkingsvisningen, og se gjennom hendelsene page_viewed.