​
Requirements to Run the Dema Scripts

Before integrating Dema scripts into your website, ensure the following prerequisites are met:

  • Google Tag Manager (GTM) Setup: GTM must be installed and running on your website.
  • Data Layer Configuration:
    • The data layer must populate with the product ID on product detail pages.
    • Order information must be included for purchases.
  • Ecommerce System Matching: The product ID should match the one in your ecommerce system.
  • Dema ID: You need your unique Dema ID, formatted as DV-XXXXXXXXXXXXXXXXXXXXXXXX.

Note: 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 - ecommerce.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.