An introduction to the data layer

A data layer (also referred to as the dataLayer or data object) is a method of efficiently collecting additional analytics data from your website. The idea of the data layer is paired closely with the concept of tag management — something which many online marketers will already be familiar with. A tag management system allows marketers to add scripts through a visual interface to websites without the need for developer input every time. In larger organisations, this saves a lot of time. Most commonly, these tools are used for integrating with website analytics packages, such as Google Analytics, and advertising platforms, however, they can be used for a number of solutions. This allows you to gain better insight into what your visitors are doing on your website and which channels are or are not working for your site.

The data layer is a small block of code, written in JavaScript within the HTML of your website. Depending on the data you need, your data layer can be as simple as a singular variable or highly complex with multiple variables to measure specific data sets.

In this guide, we will be focusing on implementing the data layer using Google Tag Manager. There are alternative tag management platforms available out there to use, including Qubit, Tealium and Adobe Tag Manager, but as the technicalities differ too much, we’ve decided to focus here on the most popular setup.

 

How complex is the data layer?

For marketers looking to set up a data layer from scratch, there will be some planning and developer’s time involved. However, as the variables are all defined in JavaScript which is a very flexible programming language, this will be well within most developers’ capabilities.

The data layer will contain attributes about the page which is being viewed, and potentially also some information on the user of the website at that time, especially if they are logged in. Once implemented, for average website users, running a campaign utilising the data layer will be simple.

https://gist.github.com/aarondicks/cb68718a7ac0cac1846d6fbea6018dc7

 

One of the biggest data layer implementation mistakes is confusing strings for numbers or vice versa. To indicate a value in the data layer, you must enclose the string (an alternative way to name a piece of text) in quotation marks. However if the value is a number you do not need the quotation marks as this can result in inaccurate data being tracked.

If anything, the data layer removes the various complexities of managing multiple vendor tags on your website, and allows you to retain the dynamic nature of them through using the variable names you post through to the tag manager. Scripts within the container (Google Analytics, Facebook, Twitter, etc) can simply consume the data via variable names within the editor’s interface.

 

What are the benefits of implementing the data layer?

The data layer allows enhanced tracking of user activity on your website. The purpose of using tag managers is to reduce the burden on web design teams and puts marketing teams in control once the data object is programmed into the site.

  • Reporting can be highly granular and is an effective way for websites and ecommerce stores to measure their success of individual pages, products and categories.
  • Implementing a data layer ensures that consistent and accurate data is sent to all of your analytics tools and applications. It also speeds up the deployment of marketing tags.
  • Using a data layer doesn’t slow down page rendering

 

Adding the data layer to your site

The container layer found within a tag management system, such as Google Tag Manager, pulls the information present in the data layer and sends it to the marketing tag, in tools such as Google Analytics, where the data is presented.  

  1. Set up the variables on the web page

This should be completed for each web page. Variables (previously referred to as ‘Macros’ in the Tag Manager interface) are the criteria the data needs to fall into to be collected by the tag. These need to be hard coded onto each page of your site. Your website most likely uses templates, so in actual fact the task is to render this code in your templates – not to individually edit every single page you’ve ever created. Most websites have fewer than ten templates, as a rule of thumb.

Examples of a data layer object:

https://gist.github.com/aarondicks/7d0c62c9dbdb8235d70d4b3c39c8dd6c

 

Much like any other variable, the data layer object can be organised how you please. To illustrate just how large and more complex an object could get, consider the below example of a logged in user browsing a product;

https://gist.github.com/aarondicks/962bb471cc87629495be205d7bf9cd05

 

  1. Include the Google Tag Manager script on the page

Use the script that Google Tag Manager provides you with to track the variables in the data layer. It’s crucial that the data layer JavaScript object is defined before the GTM script is called. The tag manager script should be inserted immediately after the opening <body> tag.

https://gist.github.com/aarondicks/c84e4ce8578e926ca58394e7c1eb3c5a

 

  1. Move all tracking scripts into the Google Tag Manager container

All tracking scripts for Google Analytics, Facebook conversion, Twitter, and any others you have, need to be placed in the Google Tag Manager container.

data-layer-example-1

 

  1. Pull through the data layer variables into Google Tag Manager and send the data to your marketing tags

From the Tag Manager container dashboard, create a new user-defined variable and choose the ‘Data Layer Variable’ option. It’s recommended to name the variable by its variable type. For topics where two variables need to be used such as testID and testName, two separate variables will need to be created.

data-layer-example-2Screen Shot 2016-05-17 at 13.49.21

 

  1. Set up custom dimensions in Google Analytics

This will allow you to view the segmented data that has been collected using the information given from the data layer. Variables defined in the dataLayer object aren’t inserted into your marketing tags by default; they must first be defined in the Tag Manager container. For many other tags, they must also then be inserted into the tag scripts, however for Google Analytics this extra step is not necessary. Read how to define your custom dataLayer variables here.

 

Adding a Google Analytics custom dimension with Google Tag Manager

  1. Create a Custom Dimension in Analytics. This can be found by navigating to: Admin > Custom Definitions > Custom Dimensions.
    You’ll want to name your Custom Dimension. For example, if you wanted to track whether someone visited your site whilst logged in, you could call this UserType.
  • The ‘Scope’ of the Custom Dimension can be selected as either ‘Hit, ‘Session’, ‘User’ or ‘Product’. This will depend on your use-case, however if it’s page-view based, you’d want to choose ‘Hit’. Google Analytics already ties together sessions for you anyway.
  • The ‘Active’ check box needs to be selected for it to work
  1. Once you have created a custom dimension, you’ll receive an example code for Javascript only, Android SDK and iOS SDK. It is important to remember the dimension number e.g. ‘dimension1’ as this will be required for the ‘Index’ input later in Google Tag Manager.
  1. Create a user-defined variable in Google Tag Manager.
  • Choose ‘URL’ as the type. There’s a choice of 16 variables. If URL is selected as the variable type, you must select a component type, options include Full URL, Protocol, Host Name, Fragment.
  1. Create ‘Look Up’ table in GTM. This is found under user-defined variable. Select the previous user-defined variable you created in the list of ‘Input Variables’ on the Look Up table tab.
  1. Enable the Custom Dimension in your Universal Analytics tag in Google Tag Manager.

 

The Data Layer and Enhanced eCommerce

Using the data layer can help you measure enhanced e-commerce activities, including:

  • Product impressions
  • Product clicks
  • Product detail impressions
  • Add/remove from cart
  • Promotion impressions
  • Promotion Clicks
  • Checkout
  • Purchases
  • Refunds

Enhanced eCommerce is not limited to dataLayer & Tag Manager users, however depending on your setup, using the data layer can make this easier.

There are 4 core steps to enhanced eCommerce tracking set up in Google Tag Manager:

  1. Identify which variables you want to track
  2. Source data points for enhanced eCommerce tracking – identify all web pages, elements such as ‘Add to cart’ buttons, product thumbnails etc. that will be involved in collecting the data. You will need to add the data layer code to these features.
  3. Create and add various data layer variables – depending on the size and purpose of your website, you may end up creating several. Data layer event code is then added to various web page elements like ‘Checkout’ button via event tracking. You need to ask your developer to write a server side script to enable you to retrieve eCommerce data from your shopping cart software and populate various fields, however, many off-site platforms post data back to your thankyou page anyway, so this shouldn’t be an issue. NOTE: Make sure that the data layer snippet is always placed above the GTM container code.
  4. Once all data layers have been added, add the GTM container code to the website and then create tags, triggers (tag firing rules) and variables in Google Tag Manager.
  5. Preview/test and debug using Google Tag Manager.

 

Is there already a data layer plugin for your CMS?

WordPress, Magento and other popular content management systems have plugins available to simplify the data layer and tag management process.

DuracellTomi’s Google Tag Manager for WordPress makes it easier to tag information on the page, including page/post title, page/post author and page/post type

The Qubit Universal Variables plugin for Magento provides a standardised structure for tagging data on each page of your site.

 

Further reading

If you’re still reading, congratulations! A full implementation of a data layer can be quite a lengthy topic to discuss but if you want to read more about the benefits of using a data layer and get some extra tips for implementing it to your site, I would highly recommend the resources below.

Before you go ahead and make sudden changes to your website, you may still want to get a developer to lend a hand so that your data layer features the information you want to include.

Alternatively, you’re more than welcome to give us a call or pop in to discuss analytics with our Analytics certified team over a game of ping pong! Get in touch here.

Georgia Goodman

Digital Marketing Assistant at Impression. When I’m not working with the SEO team to improve my client’s online presence, I’m either snowboarding or drinking excessive amounts of tea. Nicknames include (but aren’t limited to) G, G-Money, G-Wagon, Warren G.

4 thoughts on “The Data Layer Guide for Digital Marketers

  1. Pingback: Ecommercial Conference: Getting the Most from Enhanced Ecommerce Reporting #Ecommercial16 | Impression
  2. Pingback: Ecommercial Conference 2016: Session Write Ups #Ecommercial16
  3. Pingback: Top Blog Posts of 2016 | Impression
  4. Pingback: WordPress Contact Form 7 Event Listeners and Google Tag Manager | Impression

Leave a Reply

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