> For the complete documentation index, see [llms.txt](https://docs.adpage.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adpage.io/documentation/documentation-nl/website-integraties/aangepast/instelling-van-een-aangepaste-e-commerce-datalayer-en-backend-webhooks.md). # Instelling van een aangepaste e-commerce dataLayer en backend-webhooks ### 1. Installeer de tagging-pixel Vind de scripts die uw GTM-webcontainer verbinden in het AdPage Tagging-dashboard. Ga naar **Implementatie** → **Pixel installeren**. Stel het platform in op **Aangepast**. De installatie-instructies bevatten twee stappen. Installeer één script in de ``. Installeer het tweede script in de ``. Deze scripts vervangen het standaard Google Tag Manager-script. Verwijder het bestaande Google Tag Manager-script. Als u een installatielink hebt ontvangen, worden deze stappen daar al weergegeven. {% hint style="info" %} **Opmerking:** Verwijder het oorspronkelijke Google Tag Manager-script voordat u de AdPage-scripts installeert. Beide scripts kunnen dubbele tracking en onjuiste gegevens veroorzaken. Controleer eerst of de GTM-ID's overeenkomen. Sommige implementaties gebruiken een nieuwe Tag Manager-container. Het vervangen van een oude container schakelt de bestaande tags uit. {% endhint %} Herhaal deze stappen voor elk domein als uw website meerdere domeinen gebruikt. *** ### 2. Installeer de dataLayer AdPage volgt de Google Tag Manager dataLayer-standaard. Lees meer over de gebeurtenisstructuur in de [Google-documentatie](https://support.google.com/analytics/answer/9267735?hl=en). De volgende gebeurtenissen zijn belangrijk voor een e-commercewebsite: * user\_data (geïnstalleerd in stap 2.1) * view\_item\_list ([Google-documentatie](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_item_list)) * view\_item ([Google-documentatie](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_item)) * add\_to\_cart ([Google-documentatie](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#add_to_cart)) * remove\_from\_cart ([Google-documentatie](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#remove_from_cart)) * view\_cart ([Google-documentatie](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_cart)) * begin\_checkout ([Google-documentatie](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#begin_checkout)) * add\_payment\_info ([Google-documentatie](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#add_payment_info)) * add\_shipping\_info ([Google-documentatie](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#add_shipping_info)) * purchase ([Google-documentatie](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#purchase)) > **Opmerking:** Deze gebeurtenissen zijn een richtlijn voor e-commercewebsites. Aangepaste gebeurtenissen of andere website-doelen, zoals leadgeneratie, kunnen andere gebeurtenissen vereisen. Geef gebeurtenissen het voorvoegsel `trytagging_` om conflicten met bestaande dataLayer-gebeurtenissen te voorkomen. #### 2.1. De user\_data-gebeurtenis De `user_data` gebeurtenis is de eerste gebeurtenis die naar uw website wordt verzonden. Voeg deze toe vóór andere dataLayer-gebeurtenissen. Het fungeert als het startsignaal van Google Tag Manager. Trackinggegevens komen mogelijk niet correct aan zonder dit signaal. {% hint style="info" %} Wanneer u webhooks gebruikt, moet elke pagina `client_id`, `session_id`en `session_count` vervangen door door Google gegenereerde ID's. Activeer de Google-tag vanuit de dataLayer `user_data` gebeurtenis. Activeer elke andere gebeurtenis pas nadat de Google-tag is geladen. {% endhint %} De `user_data` gebeurtenis vereist een extra script. Voeg dit script toe aan de ``: ```xml ``` {% hint style="info" %} **Opmerking:** Vind het verbonden domein in de installatielink. U kunt het ook vinden onder **Implementatie** → **Domeinnaam** in het AdPage Tagging-dashboard. Werk de URL voor elk domein bij. {% endhint %} Dit script biedt twee JavaScript-hulpfuncties: ```javascript window.taggingHelpers.getMarketingObject(); // Marketingobject window.taggingHelpers.getDeviceInfo(); // Apparaatobject ``` Verzend vervolgens de eerste `user_data` gebeurtenis in JavaScript: ```javascript // Voer deze code alleen uit nadat window.taggingHelpers beschikbaar is. // Het wordt geladen via een defer-tag, dus het blokkeert de website niet. window.dataLayer.push({ event: "trytagging_user_data", marketing: window.taggingHelpers.getMarketingObject(), device: window.taggingHelpers.getDeviceInfo(), }); ``` Voeg `marketing` toe aan elke volgende gebeurtenis. Dit is een voorbeeld `view_item` gebeurtenis: ```php window.dataLayer.push({ event: "trytagging_view_item", ecommerce: { currency: "EUR", value: 100, items: [ { item_id: "123456", item_name: "Productnaam", price: 100, item_category: "Productcategorie", }, ], }, marketing: window.taggingHelpers.getMarketingObject(), }); ``` #### 2.2 Wacht op het user\_data-script We raden aan om het `user_data` script met `defer`te laden. Hierdoor krijgen andere kritieke pagina-elementen prioriteit. Het betekent ook dat het script mogelijk niet direct beschikbaar is. De `user_data` script verzendt een aangepaste JavaScript-gebeurtenis wanneer de functionaliteit beschikbaar komt. Gebruik die gebeurtenis als volgt: ```javascript document.addEventListener("trytagging_user_data_ready", (event) => { const marketingData = window.taggingHelpers.getMarketingObject(); console.log("Marketinggegevens:", marketingData); }); ``` *** ### 3. Webhooks installeren Backend [webhooks](https://www.adpage.io/post/webhooks) zorgen voor een nauwkeurigere meting. In e-commerce stuurt u een webhook wanneer een bestelling wordt aangemaakt. Dit is de primaire conversie. Webhooks vereisen extra websiteconfiguratie. Test de implementatie grondig. Stuur webhooks naar de volgende URL: `https://domain-name.com/order_created` #### 3.1 De webhook-payload Gebruik de volgende payload voor een e-commercewebsite. Verstuur deze in JSON-formaat. Wijzig hier niet van af. Aanpassingen kunnen de tracking negatief beïnvloeden. ```perl { "event": "trytagging_purchase", "ecommerce": { "transaction_id": "43", "affiliation": "", "value": 45.0, "tax": 0.0, "shipping": 0.0, "currency": "EUR", "coupon": "", "items": [ { "item_name": "copy hoodiiiee", "item_id": "23", "price": 45.0, "quantity": 1, "index": 1 } ] }, "user_data": { "customer_id": 1, "customer_email": "jeroen@adpage.io", "customer_name": "Jeroen Test", "customer_phone": "0612345678", "customer_address": "Velmolenweg 54a", "customer_zip": "5404 LD", "customer_country": "NL", "customer_city": "Uden", "customer_state": "Provincie", "customer_country": "Nederland", "billing_first_name": "Jeroen", "billing_last_name": "Test", "billing_address": "Velmolenweg 54a", "billing_postcode": "5404 LD", "billing_state": "", "billing_city": "Uden", "billing_email": "jeroen@adpage.io", "billing_phone": "0612345678", "shipping_first_name": "Jeroen", "shipping_last_name": "Test", "shipping_company": "", "shipping_address": "Velmolenweg 54a", "shipping_postcode": "5404 LD", "shipping_country": "NL", "shipping_state": "", "shipping_city": "Uden", "shipping_phone": "", "new_customer": "true" }, "marketing": { // Marketinggegevens aan de front-end en het volgende veld: "ip": "visitor_ip_address" } } ``` #### 3.2 Het marketingobject Het marketingobject komt uit het tracking-script aan de front-end. Verstuur dit gegevensobject in de webhook-payload aan de backend. {% hint style="info" %} De volgende functie is slechts een voorbeeld. Kopieer deze niet rechtstreeks. {% endhint %} ```javascript var marketingData = window.taggingHelpers.getMarketingObject(); var jsonString = JSON.stringify(marketingData); var base64Data = base64Encode(jsonString); setCookie('trytagging_user_data', base64Data, 30); ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.adpage.io/documentation/documentation-nl/website-integraties/aangepast/instelling-van-een-aangepaste-e-commerce-datalayer-en-backend-webhooks.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.