Skapa en anpassad pixel för Google Tag Manager

På denna sida finns instruktioner om hur du använder Google Tag Manager (GTM) som en anpassad pixel för att hantera dina tredjepartspixlar.

Observera

Vi rekommenderar att du kontrollerar tillgängliga appar innan du skapar anpassade pixlar för förbättrad stabilitet, säkerhet och prestanda. Om det inte finns en app som uppfyller dina behov kan du dock bestämma dig för att använda Google Tag Manager som en anpassad pixel.

Förbereder för att skapa en anpassad pixel

Granska följande information innan du skapar en anpassad pixel med Google Tag Manager för att se till att du förstår hur du konfigurerar din pixel:

• Skapa eller öppna ett Google Tag Manager-konto och få GTM Container-ID.
• Av säkerhetsskäl har tagghanterare som laddas i vår sandbox samma begränsningar som alla andra pixlar. Läs mer om begränsningar hos sandbox-pixlar.

Skapa en anpassad pixel för Google Tag Manager

Observera

Detta är en avancerad handledning och den stöds inte av Shopify. Om du behöver hjälp med att lägga till anpassade pixlar kan du anlita en Shopify-expert.

Steg

1. Öppna ditt Google Tag Manager-konto och välj det konto du vill konfigurera en anpassad pixel med.
2. Klicka på Admin och sedan på Installera Google Tag Manager för att öppna installationskoden.
3. Kopiera kodblocket som tillhör huvud-avsnittet på en sida.
4. Ta bort HTML-taggarna från det här kodblocket.
5. Sätt in den återstående koden i en ny Shopify Custom Pixel.
6. Initialisera ditt dataLayer-objekt med window.dataLayer = window.dataLayer || [];.

Din anpassade pixelkod ska se ut ungefär så här, och GTM-XXXXXXX ska matcha ditt eget GTM-container-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 || [];

Prenumerera på kundhändelser och pushmeddelanden till GTM:s dataLayer

Istället för att lägga till dataLayer.push() samtal till dina Liquid-mallfiler, kommer du att göra allt ditt GTM-dataLayer-arbete i din anpassade pixelkod.

Som standard finns det en uppsättning färdigutvecklade standardanpassade händelser som du kan prenumerera på och som är klara att använda, men du kan även publicera dina egna anpassade händelser från liquid-mallfiler.

Nedan följer ett exempel på att prenumerera på standardhändelsen "product_viewed", vilket indikerar när någon tittar på en produkt. När händelsen utlöses, pushar den händelsen till dataLayer.

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

I det här exemplet skickas data om produktens namn, som med hjälp av Google Tag Manager-variabler kan vidarebefordras till andra taggar.

Ersätter gamla dataLayer.push(event) samtal med analytics.publish()

Om du tidigare har ställt in Google Tag Manager förut måste du ersätta dina dataLayer.push-samtal med Shopify.analytics.publish() samtal.

Nedan följer ett förenklat exempel där en anpassad händelse för registrering av e-post spåras med hjälp av dataLayer.

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

Shopify-motsvarigheten ser ut så här, vilket pushar data till din anpassade pixel.

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

I din anpassade pixelkod lägger du sedan till något liknande detta.

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

Byt ut gammal dataLayer.push(data)

Google Tag Manager har en funktion som låter dig pusha ett tillståndsfullt datalagerobjekt i varje händelse. Shopifys sandbox-pixel inkluderar inte en motsvarighet, men du kan uppnå samma resultat genom att skapa ditt eget dataobjekt och skicka det till anpassade händelser.

Definiera till exempel ett "customData"-objekt innan någon av dina anpassade händelser publiceras.

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

När du sedan vill inkludera dina anpassade data, skicka den vidare till din publiceringsmetod.

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

Observera

Shopify stöder inte att lägga till anpassad data till standardhändelser för tillfället. Om det här är något du behöver kan du publicera dina egna anpassade händelser för att ersätta standardhändelser.

Exempel på anpassad pixel för Google Tag Manager

Exemplet nedan är en förenklad version av en anpassad pixel för Google Tag Manager som visar hur du skickar data till GTM. För att pusha fler händelser till din dataLayer kan du prenumerera på fler standard- och anpassade händelser.

(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 för att konfigurera Google Analytics 4

Överväg följande tips för att konfigurera Google Analytics 4 (GA4) när du använder Google Tag Manager som en anpassad pixel.

URL:er för renare sida

När GA4 körs i en sandbox kanske du märker att sidans URL:er innehåller information om den sandbox som den används i. Om du vill ta bort sandbox-informationen från dessa URL:er kan du stänga av GA4:s automatiska sidspårning och istället implementera din egen genom att använda standardhändelsen 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 publicerat din egen händelse till dataLayer kan du skapa en GA4-page_view-tagg som utlöser page_viewed-händelsen. Vanligast kan du använda Google Analytics: GA4 Event-taggtyp och ställa in event-namnet till page_view. När du har ställt in taggtypen och händelsenamnet ska du lägga till en parameter för page_location och ställa in värdet till samma värde som du har vidarebefordrat till din dataLayer från din kundpixel.

Förbättrad mätning

När du laddar GA4 i Shopifys pixel-sandbox måste vissa händelser som vanligtvis automatiskt anförs ställas in manuellt. Till exempel kan utgående länkklick, som en del av GA4 måttinställning, inte utlösas automatiskt av säkerhetsskäl när du använder anpassade pixlar. Det är dock möjligt att själv implementera GA4:s förbättrade mäthändelser som anpassade händelser.

Koden som tillhandahålls nedan innehåller ett förenklat exempel på att spåra utgående länkklick.

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

Slutligen, i GTM , skapa en GA4-tagg som skickar länkklicket till GA4, genom att försäkra dig om att event-namnet är klick, för att matcha GA4:s förbättrade händelse-namngivning.

Du kan uppnå samma spårning för något av Googles förbättrade mätvärden.

Testning och felsökning

Observera

Google taggning companion fungerar inte med anpassade pixlar. Om du använder Google Analytics Debug webbläsartillägg skickas felsökningssignaler till GA4 så att dina händelser visas i applikationen.

1. Öppna din Shopify-butik i en Chrome-webbläsare.
2. Öppna nätverksfliken i din webbläsare och leta reda på en begäran som kallas collect?..., som kommer att innehålla ditt mät-ID för GA4 om data skickas till GA4 från din Google Tag Manager.
3. Klicka på Admin i ditt Google Analytics-konto och klicka sedan på Felsökningsvy.
4. Se till att du har lagt till GA Debug Google Extension till din Chrome-webbläsare:
   • Slå på GA Debug.
   • Öppna din Shopify-butik i en separat flik.
   • Gå tillbaka till GA4 i felsökningsvyn och granska page_viewed-händelser.