Data Layer, from business to technical scope – Part I
pujoljulia March 18, 2016

There is a general consensus about how Digital Analytics structures have to be deployed, which can be summarize in four steps: Goals definition, Data processing, Technical implementation and Data Analysis. What marketers are looking forward and normally care much about is for the last one, for example they want to know how many times the form has been sent, how many products in average have been pushed to the cart, what is the order in which users are using web functionalities… but they cannot reach out the last step, and so answer those questions, without go through to the others steps.

 

1.Goals definition

The definition of the goals is from my point of view the most important step and frequently not treated as it deserves, at least in my experience, so let me be clear: before to think about which Analytics tools you have to count with, or which tag manager you’ve to use or whatever technical decision, is mandatory to know the business requirements.

That sounds logical, isn’t it? Sure, but what happens when you ask about goals? The 80% of answers you gonna get will contain the two magical and blurry words: ‘sell more’ (which can be replaced as well by ‘get more leads’, ‘show more impressions’…). Okay, fantastic! That’s why we are here, to help they to know what kind of data want to visualize and for your health (and for the data healths as well) I recommend that you do a simple exercise: Take the people who’s take care of business, give to them an empty sheet and propose to write the top 20 things (only the most important and only have to be 20, not less not more) they want to know about users behaviour.

The result will be your Bible (obviously you can help them to take the right direction if something is mislead or could be improved based in your experience) so keep it very close because that paper will show you how big the implementation is gonna be, what data has to be collected and how it has to be structured, which basically means, how the technical implementation is going to be.

 

2.Data processing

Each analytics tool processes the data collected in a different way and provides its own variables with its own peculiarities, that’s why you should understand the Data collection and Variables relation as well as the variable differences between Google Analytics and Adobe Analytics, to know how convert the business requirements to analytics variables. I strongly recommend to read the previous links before to go ahead, they will enable to keep these concepts clear before reach the implementation step.

 

3.Technical implementation (I)

Once digital goals are clear as well as their translation to analytics tools (to Custom Dimensions/Conversion Variables and other stuffs we will talk about soon) the next step is technical implementation which takes three steps: Developing a Data Layer that fits to the web/application, set up a Tag Manager solution and establish the connection between them. In this post I’ll focus to the Data Layer development, the other steps will be covered on the next post.

If you googling the ‘Data Layer’ keyword you will find a lot of information and as every thing someone is facing, I recommend you to read as much information as you can, so it will enrich your knowledge and therefore build your own opinion; my recommend lectures before to proceed to read this post are:

W3C - Customer Experience Digital Data Layer 1.0

Customer Experience Digital Data Layer 1.0 : These are the basis of datalayer, read it is a must. That document has been built for some reputations experts and through it you can get the idea about what Data layer serves for.

Data Layer Doctor Blog - Data Layer Overview

Introduction to the Data Layer for Digital Marketers : Really good post to truly understand the Data Layer concept.

Simo Ahava's Blog - GTM Data Layer

The Data Layer : Here another obligate post, Simo Ahava’s describe how he understands Data Layers putting focus on the GTM one.

Jan Exner's Blog - DTM Data Layer

Data Layer posts series: Here a serie of data Layer posts by using DTM.

Adobe Digital Marketing Blog - DTM Data Layer

Analytics and Data Layers: A Look Under the Hood : Jeff Chasin explains pros and cons about using DOM scraping or Data Layer structure on DTM.

Data Layers: From Buzzword to Best Practice : Adam Klintworth explains Data Layer best practices.

Getting Started without a Data Layer Rudi Shumpert and his ‘Let’s be pragmatic’ ;P

Tealium - Data Layer white paper

Data Layer white paper : Difference between Object Oriented and Flat Pair Values Data Layer structures.

At this point, if you’ve read above links (I hope you did) you’ve already realized how the important is to know the business goals and translate them to a technical language for pick up and send them to analytics/vendor tools whenever be necessary.

That ‘translation’ is reduced to a JSON structure which contains all data we need on the right page at the precise moment. JSON is a nomenclature used in javaScript to build objects, which can contain variables with assigned values, and methods which retrieve, load or change those variable’s values.

If you’re unfamiliar with JSON or even with javaScript language, try to start with some course on CodecAdemy and take a look on that to have the necessary background to continue reading.

From a technical point of view, the Data Layer is a javaScript data type variable that contains the necessary structure to send information to the Analytics or others 3th party tools. Nowadays people are more comfortable with Array Data Type for Data Layer because it’s which Google Tag Manager uses, which means the type of ‘structure’ in which the ‘Data Layer’ variable has been constructed is an ‘Array’. This array is easy to find on whatever page GTM has been deployed just by typing in the browser’s console (press F12 on windows, alt+cmd+i on macintosh) ‘dataLayer’ and see the result.

chrome consol dataLayer GTM

Array Data type is one of the most used objects and serves as a chain of values; let’s build our own Array Data Layer:

And… what if we want to add another value on that chain? Simply we use the ‘push’ method:

dataLayer push text GTM

That’s basically what GTM does when a new hit is triggered, simply adds a new ‘value’ to the chain, but instead of only one value, it adds a set of them grouped by an object. Next question should be: What is an object? Well, it’s pretty much the same than an array, but more structured and flexible, let’s put an example:

Easy! Simple a pair variable/values so, what GTM does is put this object into an array bucket:

dataLayer push object GTM

If we take a look on GTM dataLayer object from whatever page where GTM is:

chrome consol dataLayer GTM

We realize that there is always an event parameter attached on every Object, that is because GTM always need one to trigger a tag, Simo Ahava better explains it on this post and I recommend you to read it entirely, you will find there some tricks to get a better GTM Data Layer understanding. Well, now we are able to define how Data Layer Array works on GTM:

· Object Data information is pushed to Data Layer when something happens (page load or whatever event happens on page) along with an event parameter.

· GTM is listening and waiting for these ‘events’, once received/pushed to Data Layer the ‘triggers’ are activated.

· The triggers allow to fire the Tags along with the Data Layer information.

If you’re using Google Tag Manager, you must take in account the next to points:

· Only the last Data Layer Array value can be pushed, that means a developer sometimes will have to send back information that has been sent yet, at least you access to array by index number, but since this Data Layer is dynamically builded on each pages/actions, it could be pretty dangerous.

· There is no possibility to define a handler/helper methods (create cookie, cross domain local/session storage, array to object, real time on page….) to create extra functionalities that make our job as Digital Analytics easier, unless we use ‘Custom HTML Tags’, but from my point of view, this isn’t precisely the best place to add them.

Obviously if you use GTM there is no other way, you have to follow its own rules unless you add an intermediate layer that acts as a truly Data Layer, I mean a robust structure layer well-defined, able to save data across pages and able to provide gorgeous functionalities. Is for that reason that I love DTM (Dynamic Tag Manager) since there are no predefined Data Layer model, it just provides Data Elements (like Variables on GTM language) and let the imagination flows through you to construct a Data Layer that really fits with your business needs.

The Data Layer that I will show you is much more loyal to W3C document (which was created with aim to establish a standard object) than GTM Data Layer, and most important, it’s something every Tag Manager could use, not just one.

Let’s start with the general structure and… what if I tell you that the Data Layer will be a function? Function in programming language slang is a piece of code which receive something and returns something different. Take a function as a ‘mixer machine’, we put the oranges and carrots inside and it returns a tasty carrot-orange juice. In terms of JavaScript:

We’ve already defined what the mixer does, but we still need to press ‘SWITCH ON’ button, in JavaScript it’s known as ‘Call the function’:

And that’s it! Here it is the result shown by browser’s console:

Function Data Layer

Now imagine that the same machine has a functionality that filters juice (we don’t like too much the pulp!), then in terms of javascript:

And prepare the proper call:

function javaScript

Well, we have two functions, but what really make sense is to attach them into a Mixer machine since this two functionalities belongs to it, isn’t it? Right, let’s take back the Object concept defined some lines above, where you realized that an Object is a pair name/value structure:

And in a more readable way:

Note that parameters in that case are defining page characteristics, coming back to our mixer machine example, its parameters could define for instance the color of machine, price, power, weight,…

But don’t forget our purpose! We want to add those two functionalities to the machine. JavaScript allows to do it by just adding another simple parameter:

When a function is declared inside an object, in JavaScript slang is called ‘method’ but in fact is still a function like the first one I showed you.

So far so good, let’s now apply it to a web example and let’s say we want to retrieve product information just when a user adds it to the cart, to eventually send it along with ‘add to cart’ event. Thanks to that our lovely marketer will see how many and what products have been added to the cart.

As this is just an example, let’s focus only to track ‘add to cart’ action, so to do that we need the product information and since the page is tracked both Google and Adobe Analytics we should make some research in order to know what kind of information these tools allow.

Notice that there are differences between the tools in terms of parameters, but as you are a really big fan of this blog you know about the existence of Custom Dimensions Product scope and Merchandising eVars and, since all information cannot be added by default parameters, the extra ones will be added through those custom variables. Let’s build the object!

Looks good! but… wait a moment, how the tools will know what are the users doing with this product? We need some way to tell to the Data Layer that the users are adding a product but… make sense to mix behaviour information with product information? I don’t think so (as long as we want to define a good data structure). It’s now when ‘Data Layer’ concept gets prominence since we’re going to start to divide information in buckets under our layer of data.

Now that we’ve created a ‘behavior bucket’ we should ask ourselves: do the events came alone? actually not, the events use to be informed along with other information that defines the event itself. Let’s say that before some user adds a product into the cart, he/she can watch a video, resize a product’s image or maybe add the product to the wishlist; as an analysts, we also want to track this actions and, what do we need? Yes! extra parameters:

Also we’ve remembered that our friendly marketer is working with a behavioural tool and wants to trigger a pop up under some events combination, therefore an array of them has to be made.

Now let’s imagine a user has watched the video and the web developer fills the Data Layer with a piece of code like this:

Then the user clicks over a product to add it to the cart:

You quickly realize that there are things the web developer should does in order to fill the parameters with the right information. First, he/she has to check if array is empty, if so he adds the first’s event value on the page to eventArray, otherwise he/she has to make a push to that array. That is at least three calls to Data Layer and, if we think about big implementations for big companies/brands, we quickly agree that more data buckets will come up which means, more complications.

Also use to be more than one application as well as more than one person (analytics agency, media agency, lovely marketer, IT department…) apt to send and retrieve information from Data Layer, since a lot of websites use third party tools which also store and pick up information from Data Layer.

That should make us to think about a way to control data sent and assures their coherence. Is evident we cannot let direct access to the Data Layer to those stakeholders, therefore digitalData variable must be ‘local’. In JavaScript slang, a local variable is that one which is defined inside a function, therefore it’s only accessible from function inward. Following our example, would be something like that:

By doing that we’re protecting our data structure, but maybe we’re protecting it too much since now no one is able to access to that data! Technically, we have put digitalData variable into a function (assigned to dataLayer variable) with no return statement, which basically means we cannot do anything! That is not good at all :S… let’s fix it!

As I said, without return statement there is nothing we can do with the data, therefore let’s explore that resource. ‘return’ is the sentence that serves for get something from the function either a text, a number, an array, an object… That feature allows to return an Object which can contains several functions, through them we’ll able to GET and SET values to digitalData local variable with a controlled way.

There are some stuff to comment here, first of all note I’ve added two kind of methods, GET ones to fill digitalData variable and SET ones to retrieve digitalData information. Taking back our example, if the user clicks on the video and then adds a product into the cart, the developer only has to make to calls:

debugs Data Layer

It’s also important to take in account how dataLayer function ends ( ‘()’ ). That kind of ends indicates the function is self-invoking, which means there is no need to call the function to be executed. Without this ending, each time a page loads, dataLayer function should be invoked manually, for this reason is important to add those parentheses.

With that Data Layer all you’ve to expect from web developers it’s just to send the data to the Data Layer, since all intelligence about how relocate it, save it and take it is completely up to you! Let’s be honest, web developers don’t know about analytics neither care about it, so as much the things be easy for them, more quickly the implementation will be done.

At this point you may be wondering why the developers have to push data instead of do it by ourselves through TMS? From my experience I strongly advise to you to NO scraping DOM at pages you have no control, which means none apart of your blog! Detecting events from TMS is a fiction that will put your implementation in jeopardy.

At the second part of this post I’ll show you how connect this Data Layer with TMSs such Google Tag Manager or Dynamic Tag Manager to successfully send data to Google Analytics, Adobe Analytics or whatever kind of tool.

Are you able now to construct your own Data Layer?

Your comment

Your email address will not be published. Required fields are marked *