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 anpassade GTM-pixel kan du använda 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 även använda webbläsartillägget Google Tag Assistant för att testa vilka Google-taggar som laddas på sidan. Funktionen Troubleshoot tag i Google Tag Assistant är dock inte kompatibel med anpassade pixlar och upptäcker inga Google-taggar i en anpassad pixel eller andra pixlar som laddas av GTM.

På den här sidan

Förberedelser för att skapa en anpassad pixel

Innan du skapar en anpassad pixel med Google Tag Manager bör du granska följande information för att säkerställa att du förstår hur du konfigurerar din pixel:

Skapa eller öppna ett Google Tag Manager-konto och hämta GTM Container-ID:t.
Av säkerhetsskäl har tagghanterare som läses in i vår sandlåda samma begränsningar som alla andra pixlar. Mer information om begränsningar för pixelsandlådan.

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 som du vill konfigurera en anpassad pixel med.
Klicka på Admin och klicka sedan på Install Google Tag Manager för att öppna installationskoden.
Kopiera kodblocket som hör hemma i head-avsnittet på en sida.
Ta bort HTML-taggarna från kodblocket. Till exempel <script></script>.
Infoga den återstående koden i en ny anpassad Shopify-pixel.
Prenumerera på kundhändelser och pusha till GTM:s dataLayer.
Om du vill granska hur koden ska visas, se exemplet på en anpassad Google Tag Manager-pixel.
Konfigurera Google Tag Manager för att ta emot händelser från din anpassade pixel.
Valfritt: Om du har befintliga dataLayer.push(event)-anrop i din checkout.liquid-fil, ersätt det med analytics.publish().

Prenumerera på kundhändelser och pusha till GTM:s datalager

Du kan prenumerera på kundhändelser med hjälp av GTM:s dataLayer i din anpassade pixelkod.

Som standard finns det en uppsättning standardhändelser som du kan prenumerera på. Men om du vill spåra kundhändelser som inte är en del av utbudet av standardhändelser kan du publicera dina egna anpassade händelser från Liquid-mallfiler.

Nedan följer ett exempel på prenumeration på standardhändelsen ”product_viewed”, som 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 med i händelsens data. Du kan använda en Google Tag Manager-variabel för att hämta produktnamnet från händelsens data i den tagg du väljer.

Exempel på anpassad Google Tag Manager-pixel

Exemplet nedan är en förenklad version av en anpassad Google Tag Manager-pixel som visar hur du skickar data till Google Tag Manager. För att pusha fler händelser till din 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 ta emot händelser från din anpassade pixel

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

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

Lista över standardkundhändelser från Shopify att använda med pixlar, jämfört med deras motsvarande kundhändelser i Google Tag Manager, samt den utlösare som krävs för att händelserna ska aktiveras.
Shopify-händelse	Utlösare	GTM-händelse
payment_info_submitted	Skicka in betalningsinformation	add_payment_info
checkout_address_info_submitted	Skicka in fraktinformation	add_shipping_info
product_added_to_cart	Lägg en artikel i varukorgen	add_to_cart
checkout_started	Påbörja kassan	begin_checkout
checkout_completed	Slutför kassan	purchase
product_removed_from_cart	Ta bort artikel från varukorgen	remove_from_cart
cart_viewed	Visa varukorg	view_cart
product_viewed	Visa produktinformationssida	view_item
collection_viewed	Visar en lista över artiklar	view_item_list

Händelseparametrar för GTM-taggar måste matcha förväntade namngivningskonventioner för att dina dataLayer-händelser för anpassad pixel ska kunna behandlas.

Några exempel på utvalda egenskaper för dataLayer-händelser för anpassad pixel och deras motsvarande händelseparametrar i Google Analytics 4 (GA4) är följande:

Lista över `dataLayer`-händelser för anpassad pixel som använder GA4:s namngivningskonvention
`dataLayer`-händelser för anpassad pixel	GA4-händelseparametrar
`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`	`skatt`
`event.data?.checkout?.lineItems`	`items`

Här är ett exempel som använder följande händelse 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,
  });
});

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 nyckeln event i din anpassade pixel.

orderId och currency är de variabler som du använder i Google Tag Manager för att samla in data från händelsen. De kan mappas till en dataLayer-variabel i Google Tag Manager. Varje händelsevariabel kräver en egen dataLayer-variabel. Ställ in utlösaren så att den aktiveras för alla anpassade händelser.

Skapa en tagg som använder den utlösare som du just skapade. Lägg till de variabler du vill samla in under händelseparametrar. I exemplet ovan skulle orderId, currency, price, shippingLine och totalTax konfigureras som dataLayer-variabler. Varje gång taggen aktiveras samlar den in dessa dataLayer-variabler med händelsen.

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

Ersätta gamla dataLayer.push(event)-anrop med analytics.publish()

Om du tidigare har konfigurerat Google Tag Manager måste du ersätta dina dataLayer.push-anrop med Shopify.analytics.publish()-anrop. Du hittar dina dataLayer.push-anrop i dina theme.liquid-filer, i avsnittet Layout i din temaredigerare.

Du måste även ersätta dataLayer.push-anropen i checkout.liquid. Eftersom checkout.liquid inte är kompatibelt med Shopify Extensions måste du dock använda ett UI-tillägg för att skicka data till webbpixlar.

Nedan följer ett förenklat exempel på en anpassad händelse för e-postregistrering som spåras med dataLayer i theme.liquid-filer:

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

Motsvarigheten i Shopify visas på det här sättet, vilket skickar data till din anpassade pixel:

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

Sedan, i din kod för anpassad pixel, lägger du till något i stil med det här:

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

Ersätta gamla dataLayer.push(data)

Google Tag Manager har en funktion som låter dig skicka ett tillståndskänsligt dataLayer-objekt vid varje händelse. Även om Shopifys pixelsandlåda inte har en motsvarande funktion kan du uppnå samma resultat genom att skapa ett eget dataobjekt och skicka med det i anpassade händelser.

Definiera till exempel ett ”customData”-objekt innan några av dina anpassade händelser publiceras:

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

När du sedan vill inkludera dina anpassade data skickar du med dem i din publiceringsmetod:

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

Tips för att konfigurera Google Analytics 4

Tänk på följande tips för att konfigurera Google Analytics 4 (GA4) när du använder Google Tag Manager som en anpassad pixel.

Renare sid-URL:er

När GA4 körs i en sandlåda kanske du märker att sid-URL:erna innehåller information om sandlådan den körs i. Om du vill ta bort sandlådeinformationen från dessa URL:er kan du inaktivera GA4:s automatiska sidspårning och istället implementera din egen med hjälp av 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-tagg för page_view som utlöses av händelsen page_viewed. Vanligtvis kan du använda taggtypen Google Analytics: GA4-händelse och ställa in Händelsenamn till page_view. När du har ställt in taggtyp och händelsenamn bör du lägga till en parameter för page_location och ange samma värde som du har skickat till din dataLayer från din anpassade pixel.

Förbättrad mätning

När GA4 läses in i Shopifys pixelsandlåda måste vissa händelser som normalt härleds automatiskt konfigureras manuellt. Utgående länkklick, som en del av GA4:s inställning för Förbättrad mätning, kan till exempel inte utlösas automatiskt av säkerhetsskäl när anpassade pixlar används. Det är dock möjligt att själv implementera GA4:s händelser för förbättrad mätning som anpassade händelser.

Koden nedan innehåller ett förenklat exempel på spårning av 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>

Skapa slutligen en GA4-tagg i GTM som skickar länkklicket till GA4, genom att se till att händelsenamnet är click, för att matcha GA4:s namngivning för förbättrade händelser.

Du kan uppnå samma spårning för alla Googles mätvärden för förbättrad mätning.

Testa och felsök din anpassade pixel

När du är redo att testa din anpassade GTM-pixel kan du använda 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.