Back to the webshop
  
Guides and articles » Miscellaneous features and options » dataLayer in your website/web shop

dataLayer in your website/web shop


dataLayer is a javascript object that typically contains information about the current page a visitor is viewing.

If you want to use dataLayer in your website/webshop at ideal.shop, all you need to do is define the object.

<script>
window.dataLayer = window.dataLayer || [];
</script>
If you want to insert relevant data into the variable, you can do so via _saas_site_event. Here is an example that you can copy and paste into <head>, which will store a wide range of data and events in the dataLayer object:

<script>
window.dataLayer = window.dataLayer || [];

window.addEventListener('_saas_site_event', function(event){
	var detail = event.detail;
	if(detail.type === 'page_view')
	{
		dataLayer.push({
			'event': 'Pageview',
			'pagePath': window.location,
			'pageTitle': document.title,
			'visitorType': 'customer'
		});
	}
	else if(detail.type === 'view_content' && !detail.has_variants)
	{
		// Item page
		dataLayer.push({
			'event': 'ViewContent',
			'product_id': detail.id_for_stats,
			'value': detail.value,
			'content_name': detail.title_full,
			'currency': detail.currency,
			'language': (document.querySelector('meta[property="og:locale"]') ? document.querySelector('meta[property="og:locale"]').content : '')
		});
	}
	else if(detail.type === 'search')
	{
		// Search
		dataLayer.push({
			'event': 'Search',
			'query': detail.search_string,
			'language': (document.querySelector('meta[property="og:locale"]') ? document.querySelector('meta[property="og:locale"]').content : '')
		});
	}
	else if(detail.type === 'add_to_basket')
	{
		// Add to basket
		dataLayer.push({
			'event': 'AddToCart',
			'product_ids': [detail.id_for_stats],
			'content_name': detail.title_full,
			'value': detail.value,
			'quantity': detail.quantity,
			'currency': detail.currency,
			'language': (document.querySelector('meta[property="og:locale"]') ? document.querySelector('meta[property="og:locale"]').content : '')
		});
	}
	else if(detail.type === 'checkout-customer-info')
	{
		// First page of basket checkout
		var item_ids = [];
		for(let i=0; i<detail.basket_data.items.length;i++)
		{
			item_ids.push(detail.basket_data.items[i].id_for_stats);
		}
		dataLayer.push({
			'event': 'InitiateCheckout',
			'product_ids': item_ids,
			'price_items': detail.basket_data.sums.items_price_total_after_discount_with_vat,
			'price_order': detail.basket_data.sums.price_total_with_vat,
			'quantity': detail.basket_data.sums.items_total,
			'currency': detail.basket_data.currency,
			'language': (document.querySelector('meta[property="og:locale"]') ? document.querySelector('meta[property="og:locale"]').content : '')
		});
	}
	else if(detail.type === 'order_complete')
	{
		// Order complete/paid
		var item_ids = [];
		var items_quantity = 0;
		for(let i=0; i<detail.items.length;i++)
		{
			item_ids.push(detail.items[i].id_for_stats);
			items_quantity += detail.items[i].quantity;
		}
		dataLayer.push({
			'event': 'Purchase',
			'product_ids': item_ids,
			'price_items': detail.total_for_items_with_vat,
			'price_order': detail.total_with_vat,
			'quantity': items_quantity,
			'customer_email': detail.customer.email,
			'customer_email_sha256': detail.customer.email_sha256,
			'customer_phone': detail.customer.phone,
			'customer_data': detail.customer,
			'delivery_data': detail.receiver,
			'currency': detail.currency,
			'language': (document.querySelector('meta[property="og:locale"]') ? document.querySelector('meta[property="og:locale"]').content : '')
		});
	}
});
</script>
It is recommended to paste the above javascript codes into the <head>. To do this, search for "javascript" and go to "Insert your own HTML/CSS/JS code".


Copyright © 2022 ideal.shop. All Rights Reserved.