Skip to main content

​
Supported data types

Pageviews

Product page visits

Orders

Purchase transactions

​
Prerequisites

  • Google Tag Manager must be installed and running on your website
  • Data layer populated with product ID on PDPs and order information for purchases
  • The product ID must match the one in your e-commerce system
  • Your unique Dema ID, formatted as DV-XXXXXXXXXXXXXXXXXXXXXXXX
Ensure the data layer is correctly populated with the product ID on Product Detail Pages (PDP) for the page view script and that a purchase event triggers the order script.

​
Setting up the scripts

​
Variables setup

Ensure you have the following variables set up in GTM:

​
For the page view script:

  • productId (used in both page view and order scripts) - Represents the product ID.

​
For the order script:

  • orderId - The order number.
  • total - The total amount paid.
  • shipping - Total shipping costs.
  • currency - Currency of the payment.
  • tax - Total tax amount.
  • voucher - Voucher code used, if any.
  • customerId - Customer’s email address.
  • orderItems:
    • id - Unique variant ID for specific color/size.
    • productId - Product ID (matches the page view script).
    • name - Product description.
    • price - Product price.
    • quantity - Number of products.

​
Setting up the page view tag

  1. Navigate to ‘Tags’ in Google Tag Manager.
  2. Create a new ‘Custom HTML’ tag and insert the page view script in the HTML field.
    • Important: Update the dema.init with your unique Dema ID.
Set triggers for the script to fire on all pages and save the tag.

​
Setting up the order tag

  1. In GTM, create a new ‘Custom HTML’ tag and insert the order script in the HTML field.
    • Important: Update all bold variables as required before saving.
Enable ‘Tag Sequencing’ to ensure ‘Dema - Page view’ triggers before ‘Dema - Order’. Set a purchase event as the trigger for the order tag and save it.

​
Page view script code

<script type="text/javascript">
    var productDetails = {{DLV - e-commerce.detail.products.0}};
    var productId = productDetails ? productDetails.id : "";
    var pageViewData = {
      productId: productId
    };
    !function(){var t=window.dema=window.dema||[];if(t.DV_VERSION="1.0.0",t.init=function(e){if(!t.bInitialized){var i=document.createElement("script");i.setAttribute("type","text/javascript"),i.setAttribute("async",!0),i.setAttribute("src","https://tag.dema.ai/tag.js?id="+e);var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(i,n)}},!t.bInitialized){t.functions=["customer","pageview","cartAdd","cartRemove","cartUpdated","orderPlaced","nlSubscribed","dv"];for(var e=0;e<t.functions.length;e++){var i=t.functions[e];t[i]=function(e){return function(){return Array.prototype.unshift.call(arguments,e),t.push(arguments),t}}(i)}}}();
    dema.init("DV-XXXXXXXXXXXXXXXXXXXXXXXX")
    dema.pageview(pageViewData);
</script>

​
Order script code

<script type="text/javascript">
    var orderData = {
        order: {
            orderId: {{transactionId}},
            total: {{transactionTotal}},
            shipping: {{transactionShipping}},
            currency: {{transactionCurrency}},
            tax: {{transactionTax}},
            voucher: {{transactionDiscount}},
            // optional, if available
            voucherDiscount: {{transactionDiscountCode}},
            products: [],
            customer: {
                idFields: {
                    customerId: {{transactionCustomerId}}
                    // optional, if available
                }
            }
            shippingProvider: {{transactionShippingProvider}},
            // optional, if available
            paymentProvider: {{transactionPaymentProvider}}'
            // optional, if available
        }
    };
    var orderItems = {{transactionProducts}} || [];
    for (var i = 0; i < orderItems.length; i++) {
        var orderItem = orderItems[i];

        orderData.order.products.push({
            id: orderItem.variant,
            productId: orderItem.id,
            name: orderItem.name,
            category: orderItem.category,
            price: orderItem.price,
            quantity: orderItem.quantity
        });
    }

    dema.orderPlaced(orderData);
</script>
Note: You must update the placeholders and variables to match your data layer configuration.