Tracking
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
- Navigate to ‘Tags’ in Google Tag Manager.
- 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.
- Important: Update the
Set triggers for the script to fire on all pages and save the tag.
Setting Up the Order Tag
- 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.