Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Data layer is one of the key concepts in the world of Google Tag Manager. Trust me. It ensures maximum flexibility, portability, and ease of implementation. Remember, GTM works best when deployed alongside a data layer. At first, Google Tag Manager Data Layer might seem like one of those mysterious concepts that no one really understands (by saying “no one” I mean non-developers, like you and me). But it’s not nearly as complicated as it sounds. Understanding and leveraging the data layer is the key to unlocking GTM’s potential.

Of course, it takes a while to understand how everything works, but once you get the idea, you’ll start putting puzzle pieces together. The purpose of this blog post (and entire analyticsmania.com) is to educate non-developers, how they can master GTM, have (almost) full control of Google Analytics or Adwords implementation. And don’t limit yourself only to those two tools. You can connect GTM with A LOT of other online tools (but we’ll talk about that in future blog posts). So let’s get back to the main topic – Data Layer.

 

How does Google tag manager Data Layer work?

Technically speaking, a data layer is JavaScript object or variable that stores and sends information from your site to Google Tag Manager (later that data is transferred to other tools, like Google Analytics). In other words – it’s like a virtual layer of your website which contains various data points (Get it? That’s why it’s call data layer.). P.S. Google Tag Manager can also push data into Data Layer and then read it from there. Here’s how GTM and Data Layer work in a nutshell:

How data layer works - scheme

Once you place GTM container’s JavaScript Snippet in your website’s source code (after <body> tag), Data Layer is automatically created. You don’t need to add anything additionally. Here’s an example of GTM’s container snippet.

Google Tag Manager Data Layer can contain various information. For example, you can put static information, such as the page category, or transaction value into the Data Layer. You (or your developers) can send this information to the data layer instantaneously using a push command.

Data Layer snippet vs dataLayer.push event

There are two ways, how data can be pushed to Data Layer:

  1. By adding dataLayer snippet above the GTM container snippet.
  2. Or by pushing data with dataLayer.push API call. What’s the difference, you ask?

The first method is can be implemented only if you have access to your website’s source code AND you’ve got some coding skills. For a non-developer this option might be too difficult. Anyway, this option is really useful if you want to push any custom data right after the page loads. Example – transaction or product data. Let’s say, you want to implement Google Analytics Ecommerce Tracking. In this case your developers should add a dataLayer snippet above GTM tracking container with the following parameters: transactionID, transactionTotal, etc. (you can read the full guide here). Once this informtion is added to dataLayer, Google Tag Manager can fetch it and transfer to Google Analytics.

 

The second method (dataLayer.push) lets you push additional data when certain events occur on your website. Here are few examples:

  1. You have a newsletter signup form (which cannot be easily tracked with automatic GTM’s form listeners). You should ask your website developer to push a dataLayer event once a new subscriber has entered his/her email on your website. The code of this event should look like this:

    If you wish you can ask your developer for additional information (for example, form location (because you might have more than one form on the same page)).
  2. When a visitor adds product to his/her cart, a dataLayer event (containing product’s information) could be fired.

 

How GTM tags use DATALAYER’S information/content?

Tags use the information (stored in the data layer) in two ways:

  1. To gather certain kinds of data;
  2. To evaluate more advanced firing rules (you can use dataLayer events as triggers).

The first way comes in handy when tags need something more than static information – such as your account ID – which never changes (during the entire user session). Other tags, however, might require dynamic data, such as a purchase total or item number. This kind of information changes accordingly to user’s behavior on that page.

Secondly, tags can use the data layer’s information to decide whether to fire. Remember my previous example where dataLayer event is pushed when a new subscribers enters his/her email address? That’s a great trigger that can fire a Google Analytics event tag.

 

How CAN I FETCH the information from dataLayer and PUSH it to other analytics tools?

Let’s imagine that I have a website and all registered users are split into two groups:

  • Paying customers.
  • Users with Free plan.

I want to segment these users and all their events/pageviews in Google analytics by their pricing plan. I have already asked my developers to add static information to dataLayer when the page loads. The dataLayer snippet looks like this:

The code (between <script> and </script> tags) is our static Data Layer information. We’ll use it later.

It’s very important that dataLayer snippet is placed above Google Tag Manager’s container code in your website’s code. First, you need to send data to dataLayer, then this data is fetched by Google Tag Manager. If the snippet is placed after GTM container code, dataLayer’s data won’t be fetched by GTM.

 

1. Create a dataLayer variable in Google Tag Manager

First, you need to create a dataLayer variable in GTM’s account. This way Tag Manager will recognize the parameter. Open Variables > Scroll down to User-defined variables and click New.

create datalayer variable

  • All my Google Tag Manager Data Layer variables titles start with “dlv” (it’s easier to keep everything in order. Read this useful blog post by Lunametrics how you should name all your tags, triggers and variables)
  • Choose a type – Data Layer Variable
  • Set pricingPlan as Data Layer variable name, because this variable was added to dataLayer’s snippet by your developer.
  • Click Save.

 

2. Go to Preview and Debug mode in Google Tag Manager

Let’s check if Google Tag Manager catches pricingPlan variable.

  • In your GTM panel, enter Preview and Debug mode (click Preview button)
    enter preview and debug mode
  • When Debug mode is enabled, you should see an orange message. Something like this:
    enabled preview and debug mode
  • Now go to your website (or refresh a page if you’re already on it).
  • A GTM debug console should appear at the bottom of the screen.
    preview and debug console
  • Click on Variables on look for pricingPlan.  Check its value. If is undefined, you should double-check whether you have entered a correct Data Layer Variable name in GTM’s admin panel. In my case pricingPlan variable is defined correctly, because I get the value Free.

 

3. Create a custom dimension in Google Analytics

pricingPlan is a custom parameter that was defined by you (or your developer) so Google Analytics will not catch it by default. You need to create a custom dimension pricingPlan in order to inform Google Analytics about this new parameter.

  • Login to your Google Analytics account
  • Open your website’s account and then click Admin. You should see something like this
    google analytics admin
  • Scroll down and in Property section click on Custom definitions > Customer dimensions
    analytics custom dimensions
  • Click Create custom dimension
  • Enter name pricingPlan, choose User as scope and click Create. User scope will apply this custom dimension to all further events of this particular user.
    pricingPlan custom dimension
  • When custom dimension is created, you’ll see a short Examples Codes.
    google analytics custom dimension code
    Take a closer look at the second line of code and you’ll see dimension3. Number 3 is index of pricingPlan custom dimension. Keep this in mind.

 

4. Push pricingPlan Data Layer Variable to Google Analytics

  • Go back to your Google Tag Manager account.
  • Open your Google Analytics Pageview tag. If you don’t have one, let’s create one.
  • Go to Tags and click New
    create new tag
  • Enter name for the tag – GA pageview (actually, you can name it whatever you want)
  • Click Tag Configuration box.
    tag configuration bo
    Choose a tag type – Universal Analytics
    tag type universal analytics
    If you don’t know which version of Google Analytics you are using, ask your developer. Usually it’s Universal Analytics.
  • Now it’s time to configure tag. Enter Google Tracking ID (UA-xxxxxxx). I don’t recommend entering the actual ID here. It would be better if you created a variable with type Constant (read more).
  • Track type – Pageview
  • Click More settings > Custom dimensions
  • Enter 3 in Index field (that’s the index that you got in step 3)
  • Enter {{dlv – pricingPlan}} dataLayer variable in Dimension value field
    GA tag custom dimensions
  • In Triggering section choose All pages.
  • This way with every page view you’ll also send the value of pricingPlan variable as custom dimension No. 3.

That’s how you can transfer additional data from Google Tag Manager Data Layer to Google Analytics.

Using Data Layer data as triggers

As it was mentioned before, you can also use Data Layer for more advanced tag-firing rules. For example, you can fire an Adwords remarketing tag only when user is on Free plan. Let’s take a closer look at this example.

  • Open GTM admin panel.
  • Go to Tags and click New.
    create new tag
  • Enter name, i.e. Adwords remarketing tag
  • Choose Tag Type – Adwords Remarketing
  • Enter Conversion ID and Conversion Label
  • Leave all other settings as default and click Continue
  • In Triggering section Click Plus icon create tag in triggers listin top right corner and enter name – I’d suggest “Pageview – Users with free plan”. Choose trigger type –” Pageview”. Why? It’s because this trigger is checked every time the page is loaded.
  • You don’t want this tag to fire on every page. In This Trigger Fires on section click Some Page Views and enter the following rule: dlv – pricingPlan equals Free. This means that Adwords remarketing tag will fire only when pricingPlan Data Layer variable is exactly Free. Premium users will not trigger this rule.
    trigger configuration

 

Using Data Layer events as triggers

Another common example of Data-layer-based triggers is using events. Remember that dataLayer.push examples mentioned in the beginning of this post? Here’s a quick reminder:

Parameter event indicates that this Data Layer event. All Data Layer events can be viewed in Preview and Debug mode. When Data Layer event fires, you’ll see it in the Preview and debug console.

new subscriber event

Now let’s set this event as a trigger for Google Analytics Event Tag.

  • Go to Triggers and click New
  • Enter name. I’d suggest naming it Custom – new email subscriber
  • Choose event – Custom event (all Data Layer events are treated as custom events in GTM).
  • Fire on – new_subscriber. You need to enter the exact title of the event that you see in Preview and Debug console.
  • Let’s get back to our dataLayer.push event example. Here’s the code:

  • Wouldn’t it be nice if we also passed the formLocation data to Google Analytics as well? GTM will not catch this parameter by default, so we need to create another variable. Go to Variables > User-defined variables and click New.
  • I’d suggest naming it dlv – formPosition.
  • Choose type – Data Layer Variable. Variable Name – formPosition (that’s exactly how the parameter is called in previous code example. Leave all other settings as is and click Create Variable.

Let’s create a Google Analytics Event tag when a new subscribers submits his/her email address.

  • Go to Tags and click New
  • Choose product – Google Analytics
  • Choose Tag Type – Universal or Classic Analytics (depending on your currently installed version of GA).
  • Set Tracking ID parameter
  • Track type – Event
  • Category – Form Submit (this means that all events (related to this trigger) will have the same Category
  • Action – New subscriber
  • Label – {{dlv – formPosition}}. That’s the variable that we have just created. The value of this parameter might change depending on the position of your form. If you have 3 different forms on the same page, and they all fire the same new_subscriber Data Layer event but with different formPosition value, Google Tag Manager will pass this value as GA event’s label. This is extremely useful if you want to understand which forms are performing better.
  • Click Continue
  • Fire On – Click More and choose Data-layer-based trigger Custom – new email subscriber.
  • Click Create Tag

The following (and final) steps are:

  • Check all new tags in GTM Preview and Debug console (if they fire correctly) and then leave Preview and Debug mode.
  • Check your Real time reporst in Google Analytics account (whether new_subscriber events is working properly).
  • Install Google Tag Assistant (in Chrome Browser) to check if your remarketing tag fires correctly.

Conclusion

If you read the entire article well done! If you skipped to the summary without reading the entire thing, then I suggest you bookmark this page so you can come back later.

Google Tag Manager Data Layer is incredibly helpful when it comes to custom data and triggers. But it’s pretty difficult concept to master (for beginners). I suggest starting with few events and then scale up. You’ll become better with time.

If you enjoyed this article and found it useful, please share it.

 

Further reading:

 

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Julius Fedorovicius

Product manager at Soundest. I am highly interested in Google Tag Manager, Google Analytics, Adwords, Email marketing, Email Deliverability, Digital Marketing in general. You can follow me on Twitter.