Say hello
Let us know a little bit about you and your business, and we’ll get back to you.
Or contact us now on
If you’ve spent time looking into Google Tag Manager and Google Analytics, you’ve likely come across the term Data Layer. And maybe at some point, you’ve probably then thought to yourself “Wow, I should get a Data Layer for my website” as well and then you’ve gone to look for instructions and suddenly been swamped with a bunch of code and technicals and given up. Unfortunately, the data layer is an inherently technical topic that requires some understanding of browsers and JavaScript, but we’re here to try get you up to speed.
What is the data layer?
The data layer is essentially a container that temporarily holds all the analytics data and information that your website intends to send to other applications or analytics platforms. That data can then be accessed by various analytics platforms or tag management systems (such as Google Tag Manager, Tealium or Adobe Tag Manager).
On a technical level, the data layer is a JavaScript object that works similarly to a FIFO or a Pipe. If you’re using Google Tag Manager, the data layer will automatically be installed and initialised as part of the GTM embed code.
Having a dedicated container for all this information provides a few benefits:
Separation of concerns: A programming design principle, it refers to separating a program into distinct sections and thereby compartmentalising that section. A properly implemented data layer is separate from the application layer and the presentation layer. In doing so, the data layer separates the data exchange concerns from other layers, so that if changes are made to one, they don’t necessarily impact the other. This is ideal because often times web developers may make changes to a website’s design without realising that it is compromising the analytics tracking, so having a dedicated “space” for analytics information makes the data more robust and reliable.
Easier tracking setup: Similar to above, by having all the analytics data in a centralised place makes it easier to set up tracking. By having the data layer, you reduce the need to scrape HTML for data or transform data within a tag manager.
Tracking user interactions: Rather than triggering analytics events off of Page Loads, utilising the data layer’s events allows you to track user interactions on your website.
Data management/governance: A data layer implementation makes managing data easier because it centralises the data into one container. Similarly, the data placed into the data layer is done so with the explicit purpose of sharing with other services, so by placing it within the data layer, it becomes explicit it’s meant to be shared.
How does it work?
A data layer exists on a web page, within the browser. It is usually installed and initialised alongside the Google Analytics (with the gtag.js) and the Google Tag Manager snippets. Because of this, the data layer only temporarily holds data and is refreshed every time a new web page is loaded.
The data layer revolves around “events”, also known as a “push” (not to be confused with events in Google Analytics). Each event should have it’s own event name to correspond to what “triggered” it (such as “buttonClick” for a button click) and can also come with data associated with that event in the form of “variables”.
The data layer processes events in the order that they arrive in, updating the data layer’s variables to the latest version and then allowing GTM or the gtag.js to process any tags that need to be fired.
How do I use the data layer with Google Tag Manager and Google Analytics?
To implement a data layer on a website will require some understanding of coding, in particular JavaScript. But configuring Google Tag Manager to utilise the data layer is a lot of simpler. Below, we’ll go over both of these:
Setting up and implementing a data layer
To properly utilise the data layer, you’ll need to have some coding knowledge, particularly in JavaScript. To start using the data layer, you’ll need to initialise it. We suggest doing this by using Google Tag Manager, as it’s automatically initialised by the install snippet.
Once initialised, to send an event to the data layer you’ll need to call the “push” function like below:
window.dataLayer.push({‘event’: ‘test_event’});
This code will need to be added either to the website’s code itself or added through a tool like Google Tag Manager (you can use custom HTML tags to do so). When the code executes, it will send an event to the dataLayer and the dataLayer will process the event and update. Once processed, you’ll be able to see the event within Google’s Tag Assist.
If you need to send more parameters with your event, you need to add them as extra key-value pairs in your data layer push:
window.dataLayer.push({‘event’: ‘test_event’, ‘variable_1’: ‘abcd’});
To use these parameters with GTM, you need to create a “variable” within GTM that uses the parameter name.
Once you’ve made the variable within GTM, you’ll be able to see it within Tag Assist and then use the variable in tags (use the {{}} notation, e.g {{DLV – variable_1}}).
Some tips for the using the Data Layer:
Always add an event name: With every data layer push, make sure to name the event (‘event’: ‘event_name’). This helps to differentiate that push from others and helps with triggering tags (or not trigger tags) with GTM.
Be consistent with names: You must use the exact same name to address a variable or event. If you name a variable “form_name”, then to access it you must also use “form_name” and not “form name” or “formName”. In fact, sticking to a consistent naming convention would be the best way to utilise the data layer.
Accessing nested variables: If you’re using Google Tag Manager and trying to access a nested variable (a variable within another variable), you can use the dot notation (form.id). Accessing arrays is harder though. You can use a standard [] notation to address a specific address in an array, but if you need to access an array in a more dynamic method, then you may need to create a JavaScript variable within GTM or restructure the way the data gets added into the data layer.
Don’t instantiate the data layer more than once: In general, you’ll rarely (if ever) need to instantiate your own data layer. You’ll usually let the gtag.js or GTM snippets handle
Like this blog post? Sign up to our email newsletter – Lab Report – and never miss a new one. Or, get it sent straight to your Messenger!