11478 Avenue Brooklyn, New York
+445 4110 547

What is Data Layer?

  • Posted by Tavneet Walia
  • On December 26, 2017


What is data layer?

Data layer is a JavaScript array (a data structure containing multiple elements) of a single object which contains data in key-value pairs. Eeeeeewwwwww. I feel criminal to sound so complex and technical! I take it back and we start afresh. Now before discussing what a data layer is, let’s see how and why it came into existence.

When it comes to running a website or an app, we all need some information about our users to enhance their experience at our website (or app). For this purpose, we use analytics and tag management tools, which collect this information in the form of actionable data.

While using a Tag Manager, this data is obtained directly from the HTML of a website, with the help of JavaScript. For example, when a user visits a website, HTML records his activities such as page views, button clicks, log in/out, purchases, downloads, etc. Do you realize that in order to collect data at so many points of action, we need to write separate JavaScript snippets for each?

That’s not the only bugbear here. What if the HTML of our website undergoes some changes? For example, let’s say the button ID of a button accidentally got altered by the developer. Lol what a stupid developer! But shit happens and to err is only human.

Now, thanks to this developer, we have a brand new button ID and our JavaScript snippet has no idea about it. What happens? It stops working! We’ll now have to make appropriate changes in our JavaScript to keep obtaining data from that button.

So, Problem Number 1 – Multiple JavaScript codes. Problem Number 2 – a constant sync must be maintained between the HTML and the JavaScript that accesses it.

The solution? Data Layer, duh.

To solve the problems mentioned above, some cool technical creatures came up with the concept of a Data Layer. It is a layer between the HTML and the Tag Management System (or any data collecting tool) which collects data from the HTML, and passes it to the Tag Management System or other data collection tools. It holds all the data we want to pass from our website to our linked applications.

In technical terms, HTML is called the Experience Layer and the Tag Manager resides at the Application Layer. So the flow of data is from Experience Layer to Data Layer to Application Layer.

To be honest, I also feel criminal to make a very important tool like data layer look like it’s nothing. Or am I cool? Cool or criminal? Maybe I’m angelic to help you understand it easily. O:)

Let’s keep it simple and see what data layer looks like in the real world. In implementation, data layer is a set of codes. Codes that hold data required by applications such as Tag Managers or Analytics tools. Requirements specified by the Analytics/Marketing team are converted into a JavaScript snippet by the developer, and this snippet is inserted into the website.

And what I took back in the start of this article, is what a data layer actually is. It is a JavaScript array of a single object which contains data in key-value pairs.

An array is a data structure containing multiple elements. To define, for example, an array named A, we follow either of the following syntaxes –

var A = new Array();
A = [];

Here ‘A’ is an empty array. So the JavaScript snippet to create an empty data layer would be –

datalayer = [];

So our data layer has been created. Here ‘datalayer’ is just a name. You can give any name to your data layer, even though there are some default names specified by different Tag Management Systems, and it’s recommended that you go with the defaults. Google Tag manager calls it dataLayer, Tagman uses tm_params, Tealium calls it utag_data and Qubit calls it universal_variable.

Inside the data layer, is a single object. And since we include objects within a pair of curly braces, this is how the structure of a data layer looks –

datalayer = [

Everything included within these curly braces forms a single object. Here is an example structure of a data layer.

How does a Data Layer help

I – Specific and refined data

A data layer only holds the data needed and specified by a business or an application. For this reason, it is also considered to be a refined list of business requirements.

II – Data layer speeds up the process of deployment of tags.

Now since data layer creates a direct passageway for data to flow from the website to the Tag Management System, without running multiple JavaScript snippets, the whole process becomes faster and smoother.

III – Data layer helps you get the most out of a Tag Management System

The Data layer is one of the key concepts in the world of Tag Managers. The tools work best when deployed using the data layer, as it ensures maximum flexibility, portability, and ease of implementation.

IV- Data layer allows the Analytics and Digital Marketing team to conveniently make changes on the website.

Since the mess of numerous JavaScript codes gets cleared, the constant dependency on developers for making changes to data tracking codes and resolving issues is greatly reduced. It also relieves the web developers equally, leaving them to get on with implementing new features and fixing bugs.

Best Practices in Data Layer’s Implementation

  • Business Objective Document

Writing down the requirements and objectives of an organisation is the first step in creating a data layer. This practice gives a vision and a clearer understanding of what information the data layer must collect and how.

  • Multiple Data Layers

Each team within an organisation has its own set of goals to achieve, which collectively help the organisation to achieve its basic goal. Since every goal requires distinct data, distinct data layers must be created. Each data layer will collect data that is specific to a particular goal. Hence, we recommend separate data layers for Analytics, Marketing and other tools.

  • Consistent Naming

Keep the names of your data layer and variables simple and readable. One way to do this is by using lowercase and underscores instead of camel casing. For example, use ‘page_id’ instead of ‘pageID’. The names must also be relevant and descriptive.

Example Data Layer

Suppose an online store comprising thousands of women’s bags, needs to know their most popular products. So the goal here – To find out the type of products being loved the most.

The ‘type’ here could be dark colored handbags under 1499 bucks, or luxury wallets that cost over 2999 bucks. Hence, our data layer must record some crucial attributes such as product category, price range, physical attributes, along with the product name of course.

A data layer for the same (holding some values) must look like –

datalayer = [
'product_name' : 'Black Fringed Wallet'
'product_category' : 'Wallets'
'color' : 'Black'
'price' : 899

Notice that the goal is fully met by making sure that only the data specific to the company’s requirements is collected. Insights formed on the basis of this data will help the company understand the preferences of its customers. If most of the visitors viewed bags which are dark colored backpacks priced between 1399 and 1899 bucks, the company can come to conclusion on what’s trending the most.

Also notice that the names of variables are simple and fully understandable.

Similarly, another data layer for the same company could track purchase-related data, in order to know which type of products are bought the most. Multiple data layers can be (and must be) created to achieve the various goals of the company.

How we can help

To sum up, data layer is a technical thing. And it is the key to get the most out of a Tag Management System. Even though you don’t need a lot of JavaScript knowledge to deploy tag management tools like Google Tag Manager, you definitely need it (or a JavaScript expert) to write a data layer. And that’s what we are here for. We are a crazy team of Google and Adobe Certified Analytics Experts who eat, breathe, sleep and dream Analytics. And we’ve made it our purpose and passion to electrify your business’s potential through Analytics.

Contact us here.

Found it informative? Leave a comment! You can also give us a thumbs up by sharing it with your community. Also did you know that you can light up our day by subscribing to our blog? Subscribe here –


Leave Reply

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