Google tag manager

​

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){...},!t.bInitialized){...}}();
    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.