> 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/integrations-websites/custom/custom-ecommerce-datalayer-and-backend-webhooks-setup.md). # Custom eCommerce dataLayer and backend webhooks setup ### 1. Install the tagging pixel Find the scripts that connect your GTM web container in the AdPage Tagging dashboard. Go to **Implementation** → **Install Pixel**. Set the platform to **Custom**. The installation instructions contain two steps. Install one script in your website's ``. Install the second script in its ``. These scripts replace the standard Google Tag Manager script. Remove the existing Google Tag Manager script. If you received an installation link, it already shows these steps. {% hint style="info" %} **Note:** Remove the original Google Tag Manager script before installing the AdPage scripts. Both scripts can cause duplicate tracking and inaccurate data. First, check whether the GTM IDs match. Some implementations use a new Tag Manager container. Replacing an old container disables its existing tags. {% endhint %} Repeat these steps for each domain if your website uses multiple domains. *** ### 2. Install the dataLayer AdPage follows the Google Tag Manager dataLayer standard. Learn more about event structure in the [Google documentation](https://support.google.com/analytics/answer/9267735?hl=en). The following events are important for an eCommerce website: * user\_data (installed in step 2.1) * view\_item\_list ([Google documentation](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_item_list)) * view\_item ([Google documentation](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_item)) * add\_to\_cart ([Google documentation](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#add_to_cart)) * remove\_from\_cart ([Google documentation](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#remove_from_cart)) * view\_cart ([Google documentation](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#view_cart)) * begin\_checkout ([Google documentation](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#begin_checkout)) * add\_payment\_info ([Google documentation](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#add_payment_info)) * add\_shipping\_info ([Google documentation](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#add_shipping_info)) * purchase ([Google documentation](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtm#purchase)) > **Note:** These events are a guide for eCommerce websites. Custom events or other website goals, such as lead generation, may require different events. Prefix events with `trytagging_` to avoid conflicts with existing dataLayer events. #### 2.1. The user\_data event The `user_data` event is the first event sent on your website. Add it before other dataLayer events. It acts as the Google Tag Manager start signal. Tracking data may not arrive correctly without it. {% hint style="info" %} When using webhooks, each page must override `client_id`, `session_id`, and `session_count` with Google-generated IDs. Trigger the Google tag from the dataLayer `user_data` event. Trigger every other event only after the Google tag. {% endhint %} The `user_data` event requires an additional script. Add this script to the ``: ```xml ``` {% hint style="info" %} **Note:** Find the connected domain in the installation link. You can also find it under **Implementation** → **Domain name** in the AdPage Tagging dashboard. Update the URL for each domain. {% endhint %} This script provides two JavaScript helper functions: ```javascript window.taggingHelpers.getMarketingObject(); // Marketing object window.taggingHelpers.getDeviceInfo(); // Device object ``` Then send the first `user_data` event in JavaScript: ```javascript // Run this code only after window.taggingHelpers is available. // It loads through a defer tag, so it does not block the website. window.dataLayer.push({ event: "trytagging_user_data", marketing: window.taggingHelpers.getMarketingObject(), device: window.taggingHelpers.getDeviceInfo(), }); ``` Add `marketing` to every subsequent event. This is an example `view_item` event: ```php window.dataLayer.push({ event: "trytagging_view_item", ecommerce: { currency: "EUR", value: 100, items: [ { item_id: "123456", item_name: "Product Name", price: 100, item_category: "Product Category", }, ], }, marketing: window.taggingHelpers.getMarketingObject(), }); ``` #### 2.2 Wait for the user\_data script We recommend loading the `user_data` script with `defer`. This prioritizes other critical page elements. It also means the script may not be immediately available. The `user_data` script sends a custom JavaScript event when its functionality becomes available. Use that event as follows: ```javascript document.addEventListener("trytagging_user_data_ready", (event) => { const marketingData = window.taggingHelpers.getMarketingObject(); console.log("Marketing Data:", marketingData); }); ``` *** ### 3. Install webhooks Backend [webhooks](https://www.adpage.io/post/webhooks) provide more accurate measurement. In eCommerce, send a webhook when an order is created. This is the primary conversion. Webhooks require additional website configuration. Test the implementation thoroughly. Send webhooks to the following URL: `https://domain-name.com/order_created` #### 3.1 The webhook payload Use the following payload for an eCommerce website. Send it in JSON format. Do not deviate from this example. Changes can negatively affect tracking. ```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": "Province", "customer_country": "Netherlands", "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": { // Front-end marketing data and the following field: "ip": "visitor_ip_address" } } ``` #### 3.2 The marketing object The marketing object comes from the front-end tracking script. Send this data object in the backend webhook payload. {% hint style="info" %} The following function is only an example. Do not copy it directly. {% 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/integrations-websites/custom/custom-ecommerce-datalayer-and-backend-webhooks-setup.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.