Skapa en anpassad pixel för Google Tag Manager

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 GTM-anpassade pixel använder du Shopify Pixel Helper för att säkerställa att alla händelser du vill spåra läggs till i sandlådan utan fel.

Du kan också använda sidtillägget Google Tag Assistant för att testa vilka Google-taggar som läses in på sidan. Google Tag Assistants Troubleshoot tag -funktion är dock inte kompatibel med anpassade pixlar och upptäcker inga Google-taggar i en anpassad pixel eller annan pixel som läses in av GTM.

Observera

Innan du skapar en anpassad pixel så bör du granska tillgängliga appar för förbättrad stabilitet, säkerhet och prestanda. Om det inte finns någon app som uppfyller dina behov så kan du dock 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

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

Få din verksamhet att växa

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

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 kodblocket. Till exempel <script></script>.
5. Infoga den återstående koden i en ny Shopify Custom Pixel.
6. Prenumerera på kundhändelser och pushmeddelanden till GTM:s dataLayer.
7. Se exemplet med den anpassade pixeln Google Tag Manager för att granska hur koden ska visas.
8. Konfigurera Google Tag Manager för att godkänna händelser från anpassad pixel.
9. 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.

Observera

Det här pixelexemplet innehåller också exempelinställningar som återspeglar Google Consent Mode v2, vilket är ett läge som tillåter en pixel att respektera en besökares val gällande samtycke för cookies för trafik inklusive Europeiska ekonomiska samarbetsområdet (EEA). Du kan läsa mer information om samtyckesläget i Google Ads-hjälpen.

Dessa exempelinställningar kanske inte matchar vad som krävs för din butik baserat på din regions lagstiftning gällande integritet. Om du behöver hjälp med att lägga till eller anpassa samtyckesinställningar i din anpassade pixel, läs Googles guide för att konfigurera samtyckesläget för webbplatser eller anlita en Shopify-partner.

// 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 standardhändelser för Shopify-kunder som ska användas med pixlar, jämfört med deras motsvarande kundhändelser i Google Tag Manager, plus utlösaren som krävs för att händelserna ska utlösas.

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

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 Shopify Extensions 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 visas på detta sätt, vilket pushar data till din anpassade pixel.

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

I din anpassade pixelkod kunde du sedan lägga till något som 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>

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.

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.

Testa och felsöka din anpassade pixel

När du är redo att testa din GTM-anpassade pixel använder du Shopify Pixel Helper för att säkerställa att alla händelser du vill spåra läggs till i sandlådan utan fel.

Du kan också använda sidtillägget Google Tag Assistant för att testa vilka Google-taggar som läses in på sidan. Google Tag Assistants Troubleshoot tag -funktion är dock inte kompatibel med anpassade pixlar och upptäcker inga Google-taggar i en anpassad pixel eller annan pixel som läses in av GTM.