Opret en tilpasset pixel til Google Tag Manager

Du kan bruge Google Tag Manager (GTM) som en tilpasset pixel til at administrere dine tredjepartspixels.

Når du er klar til at teste din tilpassede GTM-pixel, skal du bruge Shopify Pixel Helper til at sikre, at alle de hændelser, du vil spore, føjes til sandkassen uden fejl.

Du kan også bruge udvidelsen Google Tag Assistant til at teste, hvilke Google-tags der indlæses på siden. Funktionen Troubleshoot tag i Google Tag Assistant er dog ikke kompatibel med tilpassede pixels og registrerer hverken Google-tags i en tilpasset pixel eller andre pixels, der indlæses af GTM.

På denne side

Forberedelser til at oprette en tilpasset pixel

Inden du opretter en tilpasset pixel ved hjælp af Google Tag Manager, skal du gennemgå følgende oplysninger for at sikre, at du forstår, hvordan du konfigurerer din pixel:

Opret eller åbn en Google Tag Manager-konto, og hent dit GTM Container-id.
Af sikkerhedshensyn har tag-managers, der indlæses i vores sandkasse, de samme begrænsninger som alle andre pixels. Få mere at vide om begrænsninger for sandkassen til pixels.

Opret en tilpasset pixel til Google Tag Manager

Du kan oprette en tilpasset pixel til Google Tag Manager for at administrere dine tredjepartspixels.

Fremgangsmåde:

Åbn din Google Tag Manager-konto, og vælg den konto, du vil oprette en tilpasset pixel med.
Klik på Administrator, og klik derefter på Installer Google Tag Manager for at åbne installationskoden.
Kopiér den kodeblok, der hører til i head-afsnittet på en side.
Fjern HTML-tagsene fra kodeblokken. F.eks. <script></script>.
Indsæt den resterende kode i en ny Shopify Custom Pixel.
Abonner på kundehændelser, og send dem til GTM's dataLayer.
Hvis du vil se, hvordan koden skal vises, kan du se eksemplet på en tilpasset pixel til Google Tag Manager.
Konfigurer Google Tag Manager til at acceptere hændelser fra din tilpassede pixel.
Valgfrit: Hvis du har eksisterende dataLayer.push(event)-kald i din checkout.liquid-fil, skal du erstatte dem med analytics.publish().

Abonner på kundehændelser, og send dem til GTM's datalag

Du kan abonnere på kundehændelser ved hjælp af GTM's dataLayer i koden til din tilpassede pixel.

Som standard findes der et sæt standardhændelser, du kan abonnere på. Men hvis du vil spore kundehændelser, der ikke er en del af standardhændelserne, kan du udgive dine egne tilpassede hændelser fra Liquid-skabelonfiler.

Nedenfor er et eksempel på, hvordan du abonnerer på standardhændelsen “product_viewed”, der angiver, hvornår nogen ser et produkt. Når hændelsen udløses, sendes den til dataLayer.

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

I dette eksempel videregives produkttitlen i hændelsens payload. Du kan bruge en variabel i Google Tag Manager til at hente produkttitlen fra hændelsens payload i det tag, du vælger.

Eksempel på tilpasset pixel til Google Tag Manager

Eksemplet nedenfor er en forenklet version af en tilpasset pixel til Google Tag Manager, der viser, hvordan du sender data til Google Tag Manager. Hvis du vil sende flere hændelser til din dataLayer, kan du abonnere på flere standardhændelser og tilpassede 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,
  });
});

Konfigurer Google Tag Manager til at acceptere hændelser fra din tilpassede pixel

Når du har oprettet din tilpassede pixel, skal du konfigurere Google Tag Manager til at acceptere hændelser fra din tilpassede pixel. Til dette skal du bruge et tag, en udløser og dataLayer-variabler i Google Tag Manager.

Nogle eksempler på udvalgte standardkundehændelser og deres modstykker i Google Tag Manager er angivet i følgende tabel:

Liste over Shopify-standardkundehændelser til brug med pixels, sammenlignet med deres tilsvarende kundehændelser i Google Tag Manager samt den udløser, der kræves for, at hændelserne aktiveres.
Shopify-hændelse	Udløser	GTM-hændelse
payment_info_submitted	Indsendelse af betalingsoplysninger	add_payment_info
checkout_address_info_submitted	Indsendelse af forsendelsesoplysninger	add_shipping_info
product_added_to_cart	Tilføjelse af en vare til indkøbskurven	add_to_cart
checkout_started	Start af betaling	begin_checkout
checkout_completed	Gennemførelse af betaling	purchase
product_removed_from_cart	Fjernelse af vare fra indkøbskurv	remove_from_cart
cart_viewed	Visning af indkøbskurv	view_cart
product_viewed	Visning af side med produktoplysninger	view_item
collection_viewed	Visning af en liste over varer	view_item_list

Hændelsesparametrene for GTM-tags skal matche de forventede navngivningskonventioner, for at dataLayer-hændelserne i din tilpassede pixel kan behandles.

Her er nogle eksempler på udvalgte egenskaber for dataLayer-hændelser i tilpassede pixels og deres tilsvarende hændelsesparametre i Google Analytics 4 (GA4):

Liste over `dataLayer`-hændelser i tilpassede pixels, der bruger GA4-navngivningskonventionen
`dataLayer`-hændelser i tilpassede pixels	GA4-hændelsesparametre
`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`	`tax`
`event.data?.checkout?.lineItems`	`items`

Her er et eksempel, der bruger følgende 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,
  });
});

Udløseren i Google Tag Manager er en tilpasset hændelsestype med hændelsesnavnet checkout_completed. Feltet Event name i udløseren skal matche nøglen event i din tilpassede pixel.

orderId og currency er de variabler, du bruger i Google Tag Manager til at registrere dataene fra hændelsen. De kan knyttes til en dataLayer-variabel i Google Tag Manager. Hver hændelsesvariabel kræver sin egen dataLayer-variabel. Indstil udløseren til at aktiveres ved alle tilpassede hændelser.

Opret et tag, der bruger den udløser, du lige har oprettet. Tilføj de variabler, du vil registrere, under hændelsesparametre. I eksemplet ovenfor ville orderId, currency, price, shippingLine og totalTax blive konfigureret som dataLayer-variabler. Hver gang tagget aktiveres, registreres disse dataLayer-variabler sammen med hændelsen.

Bemærk, at der skal konfigureres mindst ét tag og én udløser i Google Tag Manager, for at dataoverførsel kan finde sted.

Erstatning af gamle dataLayer.push(event)-kald med analytics.publish()

Hvis du tidligere har konfigureret Google Tag Manager, skal du erstatte dine dataLayer.push-kald med Shopify.analytics.publish()-kald. Du kan finde dine dataLayer.push-kald i dine theme.liquid-filer i afsnittet Layout i din temaeditor.

Du skal også erstatte dataLayer.push-kaldene i checkout.liquid. Men da checkout.liquid ikke er kompatibel med Shopify Extensions, skal du bruge en udvidelse til brugergrænsefladen til at overføre data til webpixels.

Nedenfor er et forenklet eksempel på en tilpasset hændelse for tilmelding til mail, der spores ved hjælp af dataLayer i theme.liquid-filer:

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

Den tilsvarende Shopify-version vises på denne måde, som sender dataene til din tilpassede pixel:

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

Derefter skal du tilføje noget i stil med dette i din custom pixel-kode:

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

Erstat gamle dataLayer.push(data)

Google Tag Manager har en funktion, der lader dig overføre et tilstandsfuldt dataLayer-objekt ved hver hændelse. Selvom Shopifys pixel-sandbox ikke indeholder en tilsvarende funktion, kan du opnå det samme resultat ved at oprette dit eget dataobjekt og videregive det til tilpassede hændelser.

Definer f.eks. et “customData”-objekt, før nogen af dine tilpassede hændelser udgives:

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

Når du så vil inkludere dine tilpassede data, skal du videregive dem til din udgivelsesmetode:

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

Tips til opsætning af Google Analytics 4

Overvej følgende tips til opsætning af Google Analytics 4 (GA4), når du bruger Google Tag Manager som en tilpasset pixel.

Renere webadresser til sider

Når GA4 kører i en sandbox, vil du måske bemærke, at sidens webadresser indeholder oplysninger om den sandbox, den kører i. Hvis du vil fjerne sandbox-oplysningerne fra disse webadresser, kan du deaktivere GA4's automatiske sidesporing og i stedet implementere din egen ved at bruge 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 udgivet din egen hændelse til dataLayer, kan du oprette et GA4 page_view-tag, der udløses af hændelsen page_viewed. Oftest kan du bruge tagtypen Google Analytics: GA4 Event og angive Event Name til page_view. Når du har angivet tagtype og hændelsesnavn, skal du tilføje en parameter for page_location og angive værdien til den samme værdi, som du har videregivet til din dataLayer fra din tilpassede pixel.

Udvidet måling

Når GA4 indlæses i Shopifys pixel-sandbox, skal nogle hændelser, der normalt udledes automatisk, konfigureres manuelt. F.eks. kan klik på udgående links, som er en del af GA4's indstilling for udvidet måling, ikke udløses automatisk af sikkerhedsmæssige årsager, når du bruger tilpassede pixels. Det er dog muligt selv at implementere GA4's hændelser for udvidet måling som tilpassede hændelser.

Koden nedenfor indeholder et forenklet eksempel på sporing af klik på udgående links:

<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 sidst skal du i GTM oprette et GA4-tag, der sender linkklikket til GA4, ved at sikre, at hændelsesnavnet er click, så det matcher GA4's navngivning af udvidede hændelser.

Du kan opnå den samme sporing for enhver af Googles metrikværdier for udvidet måling.

Test og fejlfind din tilpassede pixel

Når du er klar til at teste din tilpassede GTM-pixel, skal du bruge Shopify Pixel Helper til at sikre, at alle de hændelser, du vil spore, føjes til sandkassen uden fejl.