Opret en tilpasset Google Tag Manager-pixel

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

Bemærk

Vi anbefaler, at du søger efter tilgængelige apps, inden du opretter tilpassede pixels, da dette giver større stabilitet, sikkerhed og ydeevne. Hvis der ikke findes en app, som opfylder dine behov, kan du vælge at bruge Google Tag Manager som en tilpasset 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

Bemærk

Dette er en avanceret vejledning, som ikke understøttes af Shopify. Hvis du har brug for hjælp til at tilføje en tilpasset pixel, kan du ansætte en Shopify Expert.

Trin

1. Åbn din Google Tag Manager-konto, og vælg den konto, du vil opsætte en tilpasset pixel med.
2. Klik på Administrator, og klik derefter på Installer Google Tag Manager for at åbne installationskoden.
3. Kopiér den kodeblok, der hører hjemme i hovedafsnittet på en side.
4. Fjern HTML-tags fra denne kodeblok.
5. Indsæt den resterende kode i en ny tilpasset Shopify-pixel.
6. Initialiser dit dataLayer-objekt med window.dataLayer = window.dataLayer || [];.

Din tilpassede pixelkode bør se nogenlunde således ud, og GTM-XXXXXXX bør matche dit GMT-container-id.

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

window.dataLayer = window.dataLayer || [];

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

I stedet for at føje dataLayer.push()-kald til dine Liquid-skabelonfiler vil du udføre alt dit GTM dataLayer-arbejde i din tilpassede pixelkode.

Der er som standard et sæt med standardiserede tilpassede hændelser, du kan abonnere på med det samme. Du kan dog også udgive dine egne tilpassede hændelser 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 data om produktets titel, som kan videresendes til andre tags ved hjælp af Google Tag Manager-variabler.

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 .

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

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

Bemærk

Shopify understøtter ikke tilføjelsen af tilpassede data til standardhændelser på nuværende tidspunkt. Hvis du har brug for dette, kan du udgive dine egne tilpassede hændelser for at erstatte standardhændelserne.

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 GTM. Du kan abonnere på flere standardhændelser og tilpassede hændelser for at skubbe flere hændelser til dit dataLayer.

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

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

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

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

Bemærk

Googles tagmanager-værktøj fungerer ikke med tilpassede pixels. Hvis du bruger browserudvidelsen Google Analytics Debugger, sender det et fejlretningssignal til Google Analytics 4, så dine hændelser vises i applikationen.

1. Åbn din Shopify-butik i en Chrome-browser.
2. Åbn netværksfanen i din browser, og find anmodningen collect?..., som indeholder dit Google Analytics 4-målings-id, hvis der sendes data til Google Analytics 4 fra Google Tag Manager.
3. Klik på Administrator på din Google Analytics-konto, og klik derefter på Fejlretningsvisning.
4. Kontrollér, at du har føjet udvidelsen Google Analytics Debugger til din Chrome-browser:
   • Slå Google Analytics Debugger til.
   • Åbn din Shopify-butik i en separat fane.
   • Gå tilbage til Google Analytics 4 i fejlretningsvisningen, og gennemgå page_viewed-hændelserne.