Skapa en anpassad pixel för Google Tag Manager

Den här sidan skrevs ut den Jul 26, 2024. Besök https://help.shopify.com/sv/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial för den aktuella versionen.

Du kan använda Google Tag Manager (GTM) som en anpassad pixel för att hantera dina tredjepartspixlar.

När du är redo att testa din anpassade pixel kan du använda Google Tag Assistant Legacy Chrome-tillägg för att testa dina anpassade pixlar. Google Tag Assistant fungerar inte med anpassade pixlar.

På den här sidan

Förbereder för att skapa en anpassad pixel
Skapa en anpassad pixel för Google Tag Manager

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

Du kan skapa en anpassad pixel för Google Tag Manager för att hantera dina tredjepartspixlar.

Steg:

Öppna ditt Google Tag Manager-konto och välj det konto du vill konfigurera en anpassad pixel med.
Klicka på Admin och sedan på Installera Google Tag Manager för att öppna installationskoden.
Kopiera kodblocket som tillhör huvud-avsnittet på en sida.
Ta bort HTML-taggarna från kodblocket. Till exempel <script></script>.
Infoga den återstående koden i en ny Shopify Custom Pixel.
Prenumerera på kundhändelser och pushmeddelanden till GTM:s dataLayer.
Se exemplet med den anpassade pixeln Google Tag Manager för att granska hur koden ska visas.
Konfigurera Google Tag Manager för att godkänna händelser från anpassad pixel.
Valfritt: Om du har befintliga dataLager.push(event) anrop i din checkout.liquid-fil så ersätter du den med analytics.publish().

Registrera dig för kundhändelser och pusha till GTM:s dataLayer

Du kan registrera dig för kundhändelser med hjälp av GTM dataLayer i din anpassade pixelkod.

Som standard finns det en uppsättning standardhändelser som du kan prenumerera på. Om du däremot vill spåra kundhändelser som inte ingår i standardhändelserna som erbjuds kan du 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 produktnamnet i händelsens nyttolast. Du kan använda en Google Tag Manager-variabel för att hämta produktnamnet från händelsens nyttolast i den tagg du väljer.

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 Google Tag Manager. Om du vill pusha fler händelser till dataLayer kan du prenumerera på fler standardhändelser och anpassade händelser.

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

Konfigurera Google Tag Manager för att acceptera händelser från din anpassade pixel

När du har skapat din anpassade pixel måste du konfigurera Google Tag Manager så att du accepterar händelser från din anpassade pixel. Du behöver en tagg, en utlösare och dataLayer-variabler i Google Tag Manager för att göra detta.

Några exempel på utvalda standardkundhändelser och deras motsvarigheter för Google Tag Manager listas i följande tabell:

Lista över standard-Shopify-kundhändelser och deras motsvarande händelser i GTM
Shopify-händelser	Utlösare	GTM-händelser
payment_info_submitted	Skicka betalningsinformation	add_payment_info
checkout_address_info_submitted	Skicka leveransinformation	add_shipping_info
product_added_to_cart	Lägg till en artikel i varukorgen	add_to_cart
checkout_started	Påbörja betalning	begin_checkout
checkout_completed	Slutför betalning	inköp
product_removed_from_cart	Ta bort artikel från varukorg	remove_from_cart
cart_viewed	Visa varukorg	view_cart
product_viewed	Visa produktinformationssidan	view_item
collection_viewed	Visar en lista med artiklar	view_item_list

Parametrar för GTM-tagghändelser måste matcha förväntad namngivningskonvention för att dina anpassade pixel-dataLayer-händelser ska kunna behandlas.

Här följer några exempel på utvalda anpassade egenskaper för pixel-dataLayer-händelser och deras motsvarande Google Analytics 4-händelseparametrar (4):

Välj Lista över anpassade pixel-`dataLayer`-händelser med hjälp av GA4-namngivningskonvention
Anpassade pixel-`dataLayer`-händelser	GA4-händelseparametrar
`event.data?.checkout?.currencyCode`	`valuta`
`event.data?.checkout?.totalPrice?.amount`	`värde`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`kupong`
`event.data?.checkout?.shippingLine?.price?.amount`	`leverans`
`event.data?.checkout?.totalTax`	`skatt`
`event.data?.checkout?.lineItems`	`artiklar`

Här är ett exempel på hur du använder checkout_completed-händelse:

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

Utlösaren för Google Tag Manager är en anpassad händelsetyp med händelsenamnet checkout_completed. Fältet Händelsenamn i utlösaren måste matcha händelsenyckeln i din anpassade pixel.

orderId och valuta är de variabler som du använder i Google Tag Manager för att hämta in data från händelsen. De kan mappas till en dataLayer-variabel i Google Tag Manager. Varje händelsevariabel kräver sin egen dataLayer-variabel. Konfigurera utlösaren till att lösa ut för alla anpassade händelser.

Skapa en tagg som använder den utlösare du just skapat. Under händelseparametrar lägger du till de variabler som du vill ta del av. I exemplet ovan ställs orderId, valuta, pris, shippingLine och totalTax in som dataLayer-variabler. Varje gång taggen avfyras, kommer den att hämta in dessa dataLayer-variabler med händelsen.

Observera att minst en tagg och utlösare måste ställas in i Google Tag Manager för att dataöverföring ska ske.

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

Om du tidigare har konfigurerat Google Tag Manager så måste du ersätta dina dataLayer.push-anrop med Shopify.analytics.publish()-anrop. Du kan hitta dina dataLayer.push-anrop i dina theme.liquid-filer i temaredigerarens Layout-avsnitt.

Du måste också byta ut dataLayer.push-anrop i checkout.liquid. Eftersom checkout.liquidinte är kompatibel med kassatillägg så kan du dock behöva använda ett UI-tillägg för att pusha data till webbpixlar.

Nedan följer ett förenklat exempel på en anpassad händelse för registrering av e-post som spåras med hjälp av dataLayer i theme.liquid-filer.

<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åndskänsligt dataLayer-objekt i varje händelse. Shopifys sandbox-pixel inkluderar inte en motsvarig funktion, 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>

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. Oftast kan du använda taggtypen Google Analytics: GA4 Event och ställa in händelsenamnet 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 dataLayer från din anpassade pixel.

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 klickningar på utgående länkar, som en del av GA4 förbättrade måttinställning, av säkerhetsskäl inte utlösas automatiskt 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

Öppna din Shopify-butik i en Chrome-webbläsare.
Lägg till Google Tag Assistant Legacy Chrome-tillägg till din webbläsare.
Klicka på tilläggsikonen och sedan på Aktivera.
Navigera till din webbplats och utlös sedan de händelser som du vill testa.
Klicka på Google Tag Manager-taggen i tillägget. Datalageravsnittet ska visa nyttolasten för händelsen som utlöstes.
Alla andra taggar som laddas av Google Tag Manager listas också i tillägget. Du kan klicka på dessa taggar för att granska data som skickades till dem.

Skapa en anpassad pixel för Google Tag Manager

På den här sidan

Förbereder för att skapa en anpassad pixel

Skapa en anpassad pixel för Google Tag Manager

Steg:

Registrera dig för kundhändelser och pusha till GTM:s dataLayer

Exempel på anpassad pixel för Google Tag Manager

Konfigurera Google Tag Manager för att acceptera händelser från din anpassade pixel

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

Byt ut gammal dataLayer.push(data)

Tips för att konfigurera Google Analytics 4

URL:er för renare sida

Förbättrad mätning

Testning och felsökning

Är du redo att börja sälja med Shopify?