Data Layer is a known concept for most in digital analytics. As the name suggests it is all about data residing in the layer of the pages. Data can be about useful information of your properties when the user interacts using which analytics and marketing folks understand the likes and wants of users to create an enriching experience for the users.
Capturing the data useful for your properties is the foundation to begin knowing anything about your users preferences to provide compelling user experiences that flourish your business. Designing a robust data layer should the number one priority to take the right path to success.
Most of us have heard about Customer Experience Digital Data Layer layer by W3C and would have worked on designing data layer to collect data footprints of the users.
- One of the main challenges in tracking in SPA / regular pages is users moving to next page or bouncing off the pages.
- Tracking Interactions happening on a page without the need to refresh the page needs a well thought data layer strategy
Triggering bulk of data layer objects at once while waiting the page to load completely can be tricky.. what if the users moves in or out of the domain quickly before the data layer trigger :-( This situation can lead to definite loss of users path and valuable information that could be associated with the user (anonymous/known).
These type of tracking favors building an EDDL strategy for your RWD property and have the same event specification across all your digital properties.
How can we track users in this situation - the answer is asynchronous way of getting the data layer implemented unlike the regular synchronous way of getting the data objects implemented.
Below is a JS object data layer named as digitalData. It has got one object and two attributes. This is a traditional data layer methodology where the data layer is triggered when all of these values are available essentially when the page is completely rendered. Users moving out of the page before it is is completely loaded means data layer is not invoked and data is not available about the users.
<script>
digitalData = {
page:{
pageName: "electronics: product page",
section: "electronics"
productName: "television"
productId:"31443"
}};
</script>
We have a chance to collect the data about the users as and when it is available. Suppose, lets say if two of the attributes (pageName and section) is available when the page is beginning to load, then lets make that data available in the data layer. Whatever is not available is not available, we can't do much when page itself is half loaded and content is still not available. In this situation, we could load the available data asynchronously with a proper event driven data layer design. We can do the same thing when users interact with the page contents. Asynchronous data layer push is the answer. I would suggest 3 ways to get this done.
(1)ACDL extension in AA (you would need to work on the DL strategy and get the developers deploy the DL code)
(2)GTM inbuilt data layer (you would need to work on the DL strategy and get the developers deploy the DL code)
(3)Creation your own data layer managing engine (you would need to work on the DL strategy and get the developers create the DL engine and deploy the DL code)
(1)In Adobe Analytics, we can use ACDL extension for creation of EDDL. Give the below code to the developers:
//trigger on page load(DOM ready) when the data is available
adobeDataLayer.push({
event:"pageData",
page:{
"pageName":"[value]",
"siteSubSection":"[value]"
}});
//trigger on page load(DOM ready) when the data is available
adobeDataLayer.push({
event:"ProductData",
product:{
"productName":"[value]",
"productId":"[value]"
}});
These two data layer triggers are made as two different calls. Doing this, if the users move off before when the page is partially loaded, we at least get the attributes pertaining to first push which can be made instantly available on the page. Now, for users staying fully on the page load, we have data points from (1) and (2) which can be combined to get all the data points at once and can be sent to AA/GA by getting it mapped to right variables or to any end point.
(2)GTM has EDDL inbuilt. Give the below code to the developers:
//trigger on page load(DOM ready) when the data is available
dataLayer.push({
page: [{
pageName:"[value]",
siteSection:"[value]"
}]});
//trigger on page load(DOM ready) when the data is available
dataLayer.push({
product: [{
productName:"[value]",
productId:"[value]"
}]});
These two data layer triggers are made as two different calls. Doing this, if the users move off before when the page is partially loaded, we at least get the attributes pertaining to first push which can be made instantly available on the page. Now, for users staying fully on the page load, we have data points from (1) and (2) which can be combined to get all the data points at once and can be sent to AA/GA by getting it mapped to right variables or to any end point.
(3)Creation your own data layer managing engine (you would need to work on the DL strategy and get the developers create the DL engine and deploy the DL code)
If you are planning to take this route, would suggest look at the way ACDL and GTM data layer works. And then go forward!
