How to Leverage Data Layer with Google Analytics

Data layer is an object that carries all the information that you want to pass from a website to other applications. Data layer ensures flexibility, portability and ease of implementation.

Technically, a data layer is a JavaScript variable that stores and delivers information from your website to Google Tag Manager (GTM).

A data layer is also used to describe information that isn’t available as part of DOM (Document Object Model) or any other JavaScript variables. Data layer can be used for custom Google Analytics tracking. Below, we’ll discuss some examples and use cases to understand how it’s done.

• User ID Tracking

Your user ID works as your persistent ID and helps extract information across various devices (you’ve logged in from) through data layer. So, data layer facilitates tracking and analyzing the behavior of known users with the help of their user IDs.

To set up user ID tracking in Google analytics, you need to implement data layer to enable user ID settings in GTM.

This Data Layer will push user ID data to your GTM container, which will look like this:  

<script>dataLayer = [{‘userID’: ‘12483’}];</script>

• Custom Dimensions

Custom dimensions enable you to record additional, non-standard data in Google Analytics and allows you to perform analytics that you can not with standard dimensions. Creating custom dimensions is possible with data layer. Any data that can be pulled into a data layer can be converted into a custom dimension and merged into your Google Analytics reports.

Setting Up Custom Dimensions using Data Layer

You can set up custom dimensions in GA using data layer following the below 3 steps:

Step 1- Add data layer to the website
First, you need to add a data layer on the website. It allows you to pass any information from the page to your scripts without any hassle.
For instance, you can create secondary dimension for an author of your blog post, timestamp, user ID etc. by using a code.
dataLayer = [{
‘AuthorName’: ‘James’,
}];

Step 2 – Declare data layer as a variable in GTM
Next, log in to Google Tag Manager to set up the required user-defined variables and create a variable that will inform GTM when to start collecting information.
In the Universal Analytics Tag, expand the ‘Custom Dimensions’ menu and click ‘Add Custom Dimension.’Step 3 – Enable data layer in Google Analytics

Then, you’ll want to set up Google Analytics for a new Custom Dimension. For that, log in to your Google Analytics account, and under ‘Admin’ search for the ‘Custom Definitions’ section under the property menu. Then select ‘Custom Dimensions’ and click to add a new e-dimension.

• Event Tracking

Event tracking helps you track users’ interaction with website elements like click on link/button, video play/pause etc.
GTM provides a special data layer variable called event that initiates tag firing as and when a user interacts with website elements.

where event_name is a string indicating what the given event or element is.

• Form Submission

One of the most important elements of tracking is to keep a record of the number of form submissions. There are instances where we don’t have a standard ‘thank you’ page, so we need to work upon custom solutions to make that happen.

In an ideal situation like this, we can implement custom solutions by using a custom dataLayer.push() into a callback function that leads to a successful submission.

The coding here could be something like this:

Things that should be taken care of while using data layer:

1. The data layer object name is case-sensitive.

For instance, if you want to push an event or a variable without any proper casing, the push will not work successfully.

So, let’s take a look at an example:

2. The name of a variable must be enclosed in quotes.

For variable names quotes are not required particularly. The quotes can be letters, numbers and underscores, but they can not be reserved words like function, export, native etc.

Therefore, to avoid any issues, it is suggested that all variable names must be enclosed in quotes.

Let’s take a look at an example:

3. The name of a variable must be consistent across pages.
By using different variable names for the same variable on different pages, GTM will not be able to fire tags at all desired locations.
Let’s look at an example:

4. Any information needed to fire tags on a page load must be declared in the data layer above the container snippet.

To understand this better, let’s look at an example:

In order to fire tags on a page load matching some condition (e.g. on pages marked as having a pageCategory of sports), the pageCategory must be defined in the data layer above the container snippet (e.g. ‘pageCategory’: ‘sports’). Variables pushed to the data layer (i.e. using dataLayer.push()) after the container snippet will not be able to fire tags on page loads with a matching condition.

Want to measure and improve the performance of your website?