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.

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:

Een aangepaste Google Tag Manager-pixel aanmaken

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 uit het codeblok. Bijvoorbeeld <script></script>.
  5. Plaats de resterende code in een nieuwe aangepaste pixel van Shopify.
  6. Neem een abonnement op aangepaste gebeurtenissen en push naar de GTM-dataLayer.
  7. In het voorbeeld van de aangepaste pixel van Google Tag Manager kun je zien hoe de code zou moeten worden weergegeven.
  8. Configureer Google Tag Manager om gebeurtenissen van je aangepaste pixel te accepteren.
  9. Optioneel: Als je bestaande dataLayer.push(gebeurtenis)-aanroepen hebt in het checkout.liquid-bestand, vervang je dit door analytics.publish().

Abonneren op klantgebeurtenissen en pushen naar de GTM-datalayer

Je kunt je abonneren op klantgebeurtenissen met behulp van de GTM-dataLayer in je aangepaste pixelcode.

Standaard is er een reeks standaard klantgebeurtenissen waar je je op kunt abonneren. Als je echter klantgebeurtenissen wilt volgen die geen deel uitmaken van het standaard gebeurtenisaanbod, kun je 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 geactiveerd, 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 wordt de producttitel doorgegeven in de payload van de gebeurtenis. Met een Google Tag Manager-variabele leg je de producttitel van de gebeurtenispayload vast in de gekozen tag.

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 Google Tag Manager. Als je meer gebeurtenissen naar de dataLayer wil pushen, kun je je abonneren op meer standaard- en aangepaste gebeurtenissen.

// 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,
  });
});

Google Tag Manager configureren om gebeurtenissen van je aangepaste pixel te accepteren

Nadat je je aangepaste pixel hebt aangemaakt, configureer je Google Tag Manager om gebeurtenissen van je aangepaste pixel te accepteren. Hiervoor heb je een tag, een trigger en dataLayer-variabelen in Google Tag Manager nodig.

Enkele voorbeelden van standaard klantgebeurtenissen en hun Google Tag Manager-equivalenten worden vermeld in de volgende tabel:

Lijst met standaard Shopify-klantgebeurtenissen en hun equivalenten in GTM
Shopify-gebeurtenis Activeren GTM-gebeurtenis
payment_info_submitted Betalingsgegevens indienen add_payment_info
checkout_address_info_submitted Verzendgegevens indienen add_shipping_info
product_added_to_cart Een artikel aan winkelwagen toevoegen add_to_cart
checkout_started Checkout starten begin_checkout
checkout_completed Checkout voltooien koop
product_removed_from_cart Artikel uit winkelwagen verwijderen remove_from_cart
cart_viewed Winkelwagen bekijken view_cart
product_viewed Pagina met productgegevens bekijken view_item
collection_viewed Een lijst met artikelen bekijken view_item_list

Parameters van een tag-gebeurtenis in GTM moeten overeenkomen met verwachte benamingsconventies, anders worden de dataLayer-gebeurtenissen van je aangepaste pixel niet verwerkt.

Hier volgen enkele voorbeelden van eigenschappen van dataLayer-gebeurtenissen van aangepaste pixels en de equivalente gebeurtenisparameters in Google Analytics 4 (GA4):

Lijst met enkele dataLayer-gebeurtenissen van aangepaste pixels volgens de benamingsconventie van GA4
dataLayer-gebeurtenissen van aangepaste pixels Parameters van GA4-gebeurtenissen
event.data?.checkout?.currencyCode valuta;
event.data?.checkout?.totalPrice?.amount waarde
event.data?.checkout?.order?.id transaction_id
event.data?.checkout?.discountAllocations coupon
event.data?.checkout?.shippingLine?.price?.amount verzending
event.data?.checkout?.totalTax belasting
event.data?.checkout?.lineItems artikelen

Hier is een voorbeeld met de volgende checkout_completed-gebeurtenis:

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,
  });
});

De Google Tag Manager-trigger is een aangepast gebeurtenistype met de naam checkout_completed. Zorg dat het veld Gebeurtenisnaam in de trigger overeenkomt met de gebeurtenissleutel in de aangepaste pixel.

orderId en valuta zijn de variabelen waarmee je in Google Tag Manager de gegevens van de gebeurtenis vastlegt. Je kunt deze toewijzen aan een dataLayer-variabele in Google Tag Manager. Voor elke gebeurtenisvariabele is een aparte dataLayer-variabele vereist. Stel de trigger in zodat deze wordt geactiveerd bij alle aangepaste gebeurtenissen.

Maak een tag aan die de trigger gebruikt die je net hebt gemaakt. Voeg onder gebeurtenisparameters de variabelen toe die je wil vastleggen. In het bovenstaande voorbeeld worden orderId, currency, price, shippingLine en totalTax als dataLayer-variabelen ingesteld. Elke keer dat de tag actief wordt, legt deze de dataLayer-variabelen met de gebeurtenis vast.

Houd er rekening mee dat de gegevensoverdracht alleen plaatsvindt als ten minste een tag en trigger zijn ingesteld in Google Tag Manager.

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. Je kunt je dataLayer.push-aanroepen vinden in je theme.liquid-bestanden in de sectie Opmaak van de themabewerker.

Vervang ook de dataLayer.push-aanroepen in checkout.liquid. Maar omdat checkout.liquid niet compatibel is met Checkout Extensibility, moet je een UI-extensie gebruiken om gegevens naar webpixels te pushen.

Hieronder zie je een vereenvoudigd voorbeeld van een aangepaste e-mailaanmeldingsgebeurtenis die wordt gevolgd met behulp van dataLayer in theme.liquid-bestanden.

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

Tips 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 bij 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 de 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 metingen van GA4, kunnen bijvoorbeeld uitgaande linkklikken om veiligheidsredenen niet automatisch worden geactiveerd bij het gebruik van aangepaste pixels. Maar je kunt wel zelf de verbeterde meetgebeurtenissen van GA4 als aangepaste gebeurtenissen 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 fouten opsporen

  1. Open je Shopify-winkel in een Chrome-browser.
  2. Voeg de Chrome-extensie Google Tag Assistant Legacy toe aan je browser.
  3. Klik op het extensiepictogram en daarna op Inschakelen.
  4. Navigeer naar je site en trigger vervolgens de gebeurtenissen die je wilt testen.
  5. Klik in de extensie op de tag Google Tag Manager. Normaal wordt in de sectie Gegevenslaag de payload van de getriggerde gebeurtenis weergegeven.
  6. Alle andere tags die zijn geladen door Google Tag Manager worden ook vermeld in de extensie. Je kunt op deze tags klikken om de gegevens te bekijken die ernaartoe zijn verzonden.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis