Opret en tilpasset Google Tag Manager-pixel

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 GTM-tilpassede 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 sideudvidelsen Google Tag Assistant til at teste, hvilke Google-tags der indlæses på siden. Google Tag Assistant-funktionen Troubleshoot tag er dog ikke kompatibel med tilpassede pixels og registrerer ikke nogen Google-tags i en tilpasset pixel eller andre pixels, der indlæses af GTM.

På denne side

Sådan forbereder du dig på at oprette en tilpasset pixel

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

Opret eller åbn en Google Tag Manager-konto, og hent GTM-container-id'et.
Af sikkerhedsmæssige hensyn har tagmanager-værktøjer, der indlæses i vores sandkasse, de samme begrænsninger som alle andre pixels. Få mere at vide om begrænsninger for pixelsandkassen.

Opret en tilpasset Google Tag Manager-pixel

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

Trin:

Åbn din Google Tag Manager-konto, og vælg den konto, du vil opsætte 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 hjemme i hovedafsnittet på en side.
Fjern HTML-tags fra kodeblokken. For eksempel <script></script>.
Indsæt den resterende kode i en ny tilpasset Shopify-pixel.
Abonner på tilpassede hændelser, og skub til GTM's dataLayer
Du kan se, hvordan kodens skal se ud, i eksemplet på den tilpassede Google Tag Manager-pixel.
Konfigurer Google Tag Manager for at acceptere hændelser fra din Custom Pixel.
Valgfrit: Hvis du har eksisterende dataLayer.push(event)-kald i din checkout.liquid-fil, skal du erstatte den med analytics.publish().

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

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

Som standard er der et sæt standardhændelser, som du kan abonnere på. Hvis du imidlertid vil spore kundehændelser, der ikke er en del af de standardhændelser, der tilbydes, kan du udgive dine egne tilpassede hændelser ud fra Liquid-skabelonfiler.

Herunder kan du se et eksempel på abonnement af den standardiserede “product_viewed”-hændelse, som indikerer, at nogen har set et produkt. Når hændelsen udløses, skubber det hændelsen til dataLayer.

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

I dette eksempel overføres produkttitlen i nyttedataene fra hændelsen. Du kan bruge en Google Tag Manager-variabel til at registrere produkttitlen fra nyttedataene fra hændelsen i dit foretrukne tag.

Eksempel på tilpasset Google Tag Manager-pixel

Nedenstående eksempel er en forenklet version af en tilpasset Google Tag Manager-pixel, der viser, hvordan der skal sendes data til Google Tag Manager. Du kan abonnere på flere standardhændelser og tilpassede hændelser for at skubbe flere hændelser til dit dataLayer.

// 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. Hvis du vil gøre dette, skal du bruge et tag, en udløser og dataLayer-variabler i Google Tag Manager.

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

Liste over almindelige Shopify-kundehændelser, der skal bruges med pixels, sammenlignet med tilsvarende kundehændelser i Google Tag Manager samt den udløser, der er påkrævet for, at hændelser kan udløses.
Shopify-hændelse	Udløser	GTM-hændelse
payment_info_submitted	Send betalingsoplysninger	add_payment_info
checkout_address_info_submitted	Send leveringsoplysninger	add_shipping_info
product_added_to_cart	Føj en vare til indkøbskurven	add_to_cart
checkout_started	Start betaling	begin_checkout
checkout_completed	Gennemfør betalingsprocessen	køb
product_removed_from_cart	Fjern vare fra indkøbskurven	remove_from_cart
cart_viewed	Se indkøbskurv	view_cart
product_viewed	Se side med produktoplysninger	view_item
collection_viewed	Se en liste over varer	view_item_list

Parametrene for GTM-taghændelsen skal matche den forventede navngivningsmetode, hvis dine tilpassede dataLayer-pixelhændelser skal behandles.

Nogle eksempler på udvalgte egenskaber for tilpassede dataLayer-pixelhændelser og deres tilsvarende Google Analytics 4 (GA4)-hændelsesparametre er som følger:

Liste med tilpassede `dataLayer`-pixelhændelser, der følger GA4-navngivningsmetoden
Tilpassede `dataLayer`-pixelhændelser	GA4-hændelsesparametre
`event.data?.checkout?.currencyCode`	`valuta`
`event.data?.checkout?.totalPrice?.amount`	`værdi`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`kupon`
`event.data?.checkout?.shippingLine?.price?.amount`	`levering`
`event.data?.checkout?.totalTax`	`tax`
`event.data?.checkout?.lineItems`	`varer`

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

Google Tag Manager-udløseren er en tilpasset hændelsestype, som har navnet på checkout_completed. Feltet Navn på hændelse i udløseren skal matche hændelsesnøglen i din tilpassede pixel.

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

Opret et tag, der bruger den udløser, du lige har oprettet. Tilføj de variabler, som du vil registrere, under hændelsesparametre. I ovenstående eksempel vil orderId, currency, price, shippingLine og totalTax blive opsat som dataLayer-variabler. Hver gang tagget udløses, vil det registrere disse dataLayer-variabler med hændelsen.

Bemærk: Mindst ét tag og én udløser skal opsættes i Google Tag Manager, for at der kan overføres data.

Erstatter gammelt dataLayer.push(event)-kald med analytics.publish()

Hvis du har opsat Google Tag Manager før, 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-kald i checkout.liquid. Da checkout.liquid ikke er kompatibel med Shopify Extensions, skal du bruge en udvidelse i brugerfladen til at sende data til webpixels.

Herunder kan du finde et forenklet eksempel på en tilpasset hændelse for mailtilmelding, der spores ved hjælp af dataLayer i theme.liquid-filer.

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

Den tilsvarende Shopify-hændelse vises således og skubber dataene til din tilpassede pixel.

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

Du vil derefter tilføje noget som dette i din tilpassede pixelkode.

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 giver dig mulighed for at skubbe et dataLayer-objekt med høj sikkerhed til alle hændelser. Selv om Shopifys pixelsandkasse ikke har en tilsvarende funktion, kan du opnå samme resultat ved at oprette dit eget dataobjekt og videregive det til tilpassede hændelser.

Du kan f.eks. definere et “customData”-objekt, inden dine tilpassede hændelser udgives.

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

Når du vil inkludere dine tilpassede data, skal du videregive det til din udgivelsesmetode.

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

Tips til konfiguration af Google Analytics 4

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

Renere webadresser til websider

Når Google Analytics 4 kører i en sandkasse, vil du muligvis opdage, at sidens webadresser indeholder oplysninger om den sandkasse, den opererer i. Hvis du vil fjerne sandkasseoplysningerne fra disse webadresser, kan du deaktivere automatisk sidesporing i Google Analytics 4 og i stedet implementere din egen funktion ved hjælp af den standardiserede page_viewed-hændelse.

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 udgiver din egen hændelse til dataLayer, kan du oprette et Google Analytics 4 page_view-tag, der udløser hændelsen page_viewed. Du kan anvende tagtypen Google Analytics: GA4 Event, og angive hændelsesnavnet til page_view. Når du har angivet tagtypen og hændelsesnavnet, skal du tilføje et parameter for page_location og angive værdien til den samme værdi, som du har videregivet til dit dataLayer fra din tilpassede pixel.

Forbedret måling

Når du indlæser Google Analytics 4 i Shopifys pixelsandkasse, skal nogle af de hændelser, der normalt udledes automatisk, opsættes manuelt. Udgående klik på links kan af sikkerhedsmæssige årsager ikke udløses automatisk ved brug af tilpassede pixels. Dette er en del af Google Analytics 4 Forbedret måling-indstillingen. Du kan dog selv implementere hændelser for forbedret måling fra Google Analytics 4 som tilpassede hændelser.

Nedenstående kode indeholder et forenklet eksempel på sporing af udgående klik på 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>

Afslutningsvist skal du oprette et Google Analytics 4-tag i Google Tag Manager, som sender linkklikket til Google Analytics 4 ved at sikre, at hændelsesnavnet er klik (dette matcher den forbedrede hændelsesnavngivning for Google Analytics 4.

Du kan opnå samme sporing for alle Googles forbedrede målingsmetrics.

Test og foretag fejlretning i din tilpassede pixel

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