Een aangepaste Google Tag Manager-pixel aanmaken

Deze pagina bevat instructies over hoe je Google Tag Manager (GTM) kunt gebruiken als een aangepaste pixel om je externe pixels te beheren.

Opmerking

We raden je aan om te controleren op beschikbare apps voordat je aangepaste pixels aanmaakt voor verbeterde stabiliteit, beveiliging en prestaties. Als er echter geen app is die aan je behoeften voldoet, kun je beslissen om Google Tag Manager als een aangepaste pixel te gebruiken.

Voorbereiden om een aangepaste pixel aan te maken

Lees de volgende informatie goed door om er zeker van te zijn dat je begrijpt hoe je je pixel configureert met behulp van Google Tag Manager voordat je een aangepaste pixel aanmaakt:

• Maak of open een Google Tag Manager-account en ontvang de container-ID van GTM.
• Voor de veiligheid hebben tag managers die in onze sandbox zijn geladen, dezelfde beperkingen als alle andere pixels. Meer informatie over sandboxbeperkingen voor pixels.

Een aangepaste Google Tag Manager-pixel aanmaken

Opmerking

Dit is een uitgebreide tutorial en wordt niet ondersteund door Shopify. Als je hulp nodig hebt bij het toevoegen van een aangepaste pixel, kun je een Shopify Expert inhuren.

Stappen

1. Open je Google Tag Manager-account en selecteer het account waarmee je een aangepaste pixel wilt instellen.
2. Klik op Beheerder en klik vervolgens op Google Tag Manager installeren om de installatiecode te openen.
3. Kopieer het codeblok dat in het kopgedeelte van een pagina hoort.
4. Verwijder de HTML-tags van dit codeblok.
5. Plaats de resterende code in een nieuwe aangepaste pixel van Shopify.
6. Initialiseer je dataLayer-object met window.dataLayer = window.dataLayer || [];.

Je aangepaste pixelcode zou er ongeveer zo uit moeten zien en de GTM-XXXXXXX moet overeenkomen met je eigen GTM-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 || [];

Abonneren op aangepaste gebeurtenissen en pushen naar de GTM-dataLayer

In plaats van dataLayer.push()- aanroepen toe te voegen aan je Liquid-templatebestanden, doe je al het werk aan je GTM-dataLayer in je aangepaste pixelcode.

Standaard is er een reeks gebruiksklare standaard aangepaste gebeurtenissen waar je je op kunt abonneren, maar je kunt ook je eigen aangepaste gebeurtenissen publiceren vanuit Liquid-templatebestanden.

Hieronder zie je een voorbeeld van het abonneren op de standaard 'product_viewed'-gebeurtenis, die aangeeft wanneer iemand een product bekijkt. Wanneer de gebeurtenis wordt getriggerd, wordt de gebeurtenis naar de dataLayer gepusht.

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

In dit voorbeeld worden gegevens doorgegeven over de producttitel, die met behulp van Google Tag Manager-variabelen kunnen worden doorgestuurd naar andere tags.

Oude dataLayer.push(event)-aanroepen vervangen door analytics.publish()

Als je eerder Google Tag Manager hebt ingesteld, vervang je je dataLayer.push-aanroepen door Shopify.analytics.publish()-aanroepen.

Hieronder zie je een vereenvoudigd voorbeeld van een aangepaste e-mailregistratie-gebeurtenis die wordt gevolgd met behulp van dataLayer.

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

Het Shopify-equivalent ziet er als volgt uit, waardoor de gegevens in je aangepaste pixel worden gepusht.

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

Voeg vervolgens in je aangepaste pixelcode iets als dit toe.

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

Oude dataLayer.push(data) vervangen

Google Tag Manager heeft een functie waarmee je bij elke gebeurtenis een stateful dataLayer-object kunt pushen. Hoewel de pixel-sandbox van Shopify geen vergelijkbare functie heeft, kun je hetzelfde resultaat bereiken door je eigen dataobject te maken en dit door te geven in aangepaste gebeurtenissen.

Definieer bijvoorbeeld een 'customData'-object voordat een van je aangepaste gebeurtenissen wordt gepubliceerd.

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

Geef deze gegevens vervolgens door in je publicatiemethode wanneer je je aangepaste gegevens wilt opnemen.

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

Opmerking

Shopify biedt momenteel geen ondersteuning voor het toevoegen van aangepaste gegevens aan standaardgebeurtenissen. Als je dit nodig hebt, kun je je eigen aangepaste gebeurtenissen publiceren om standaardgebeurtenissen te vervangen.

Voorbeeld van een aangepaste Google Tag Manager-pixel

Het onderstaande voorbeeld is een vereenvoudigde versie van een aangepaste Google Tag Manager-pixel die laat zien hoe je gegevens kunt verzenden naar GTM. Als je meer gebeurtenissen naar je dataLayer wilt pushen, kun je je abonneren op meer standaard- en aangepaste gebeurtenissen.

(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 en trucs voor het instellen van Google Analytics 4

Gebruik de volgende tips voor het instellen van Google Analytics 4 (GA4) bij het gebruik van Google Tag Manager als een aangepaste pixel.

Nettere pagina-URL's

Wanneer GA4 wordt uitgevoerd in een sandbox, zie je mogelijk dat de pagina-URL's informatie bevatten over de sandbox waarin deze wordt uitgevoerd. Als je de sandbox-gegevens uit die URL's wilt verwijderen, kun je de automatische paginatracking van GA4 uitschakelen en in plaats daarvan je eigen gegevens implementeren door de standaardgebeurtenis page_viewed te gebruiken.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

Nadat je je eigen gebeurtenis hebt gepubliceerd naar dataLayer, kun je een GA4-tag genaamd page_view aanmaken die wordt getriggerd op de gebeurtenis page_viewed. Meestal kun je het tagtype Google Analytics: GA4-gebeurtenis gebruiken en de naam van de gebeurtenis instellen op page_view. Nadat je het tagtype en de gebeurtenisnaam hebt ingesteld, voeg je een parameter voor page_location toe en stel je de waarde in op dezelfde waarde die je in de dataLayer van je aangepaste pixel hebt doorgegeven.

Verbeterde afmetingen

Wanneer je GA4 in de pixelsandbox van Shopify laadt, is het nodig dat sommige gebeurtenissen die normaal gesproken automatisch worden afgeleid, handmatig worden ingesteld. Als onderdeel van de instelling voor verbeterde afmetingen van GA4, kunnen bijvoorbeeld uitgaande linkklikken niet automatisch worden getriggerd, vanwege veiligheidsredenen bij het gebruik van aangepaste pixels. Het is echter mogelijk om zelf de gebeurtenissen met verbeterde afmetingen van GA4 als aangepaste gebeurtenissen te implementeren.

De onderstaande code bevat een vereenvoudigd voorbeeld van het volgen van uitgaande linkklikken.

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

Maak ten slotte in GTM een GA4-tag aan die de linkklik naar GA4 stuurt, door ervoor te zorgen dat de naam van de gebeurtenis click is, zodat deze overeen komt met de verbeterde naamgeving voor evenementen van GA4.

Je kunt dezelfde tracking bereiken voor een van de verbeterde meetstatistieken van Google.

Testen en debuggen

Opmerking

Google Tagging Companion werkt niet met aangepaste pixels. Als je de browserextensie Google Analytics Debugger gebruikt, wordt het debug-signaal naar GA4 gestuurd, zodat jouw gebeurtenissen worden weergegeven in de app.

1. Open je Shopify-winkel in een Chrome-browser.
2. Open het netwerktabblad in je browser en zoek de aanvraag genaamd collect?..., die je GA4-afmetings-ID bevat als gegevens vanuit je Google Tag Manager naar GA4 worden gestuurd.
3. Klik in je Google Analytics-account op Beheerder en klik vervolgens op Weergave debuggen.
4. Zorg ervoor dat je de Google Analytics Debugger-extensie aan je Chrome-browser hebt toegevoegd:
   • Schakel GA Debugger in.
   • Open je Shopify-winkel op een apart tabblad.
   • Ga terug naar GA4 in de debug-weergave en bekijk de page_viewed-gebeurtenissen.