Opret en tilpasset Google Tag Manager-pixel

Denne side blev udskrevet kl. Dec 10, 2023. Besøg https://help.shopify.com/da/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial for at se den aktuelle version.

Denne side indeholder oplysninger om, hvordan du kan bruge Google Tag Manager (GTM) som en tilpasset pixel for at administrere dine tredjepartspixels.

På denne side

Sådan forbereder du dig på at oprette en tilpasset pixel
Opret en tilpasset Google Tag Manager-pixel

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

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
Se, hvordan koden 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)-kaldi din checkout.liquid-fil, skal du erstatte den med analytics.publish().

Abonner på tilpassede hændelser, og skub til GTM's dataLayer

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 standardkundehæ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.

//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');

//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 et datalag i Google Tag Manager.

Brug af følgende checkout_completed-hændelse:

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    order_id: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
  });
});

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.

order_id og currency er de variabler, som du bruger i Google Tag Manager til at hente dataene fra hændelsen. De kan knyttes til en datalagsvariabel i Google Tag Manager. Alle hændelsesvariabler kræver sin egen datalagsvariabel. 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 order_id og currency blive opsat som datalagsvariabler. Hver gang tagget udløses, registrerer det order_id og currency 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 Checkout Extensibility, skal du bruge en udvidelse i brugergrænsefladen til at afsende 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 ser således ud 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 datalagsobjekt 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 og tricks til opsætningen 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 en parameter for page_location og angive værdien til den samme værdi, som du har videregivet til dit datalag 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 fejlfinding

Åbn din Shopify-butik i en Chrome-browser.
Føj den gamle Chrome-udvidelse til Google Tag Assistant til din browser.
Klik på udvidelsesikonet, og klik derefter på Aktivér.
Naviger til dit website, og udløs derefter de hændelser, du vil teste.
Klik på tagget Google Tag Manager i udvidelsen. Afsnittet Datalag bør vise nyttedata for den hændelse, der blev udløst.
Alle andre tags, der indlæses af Google Tag Manager, er også angivet i udvidelsen. Du kan klikke på disse tags for at gennemgå de data, der er sendt til dem.

Opret en tilpasset Google Tag Manager-pixel

På denne side

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

Opret en tilpasset Google Tag Manager-pixel

Trin

Abonner på tilpassede hændelser, og skub til GTM's dataLayer

Eksempel på tilpasset Google Tag Manager-pixel

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

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

Erstat gamle dataLayer.push(data)

Tips og tricks til opsætningen af Google Analytics 4

Renere webadresser til websider

Forbedret måling

Test og fejlfinding

Er du klar til at begynde at sælge med Shopify?