How to read custom site data from the GTM dataLayer

Google Tag Manager(GTM) has some pretty good documentation about how to implement it with Google Analytics and other Google products. However, I wanted to pass some custom site variables directly into GTM and then to feed that data into a custom HTML tag that’s sitting inside the GTM container. I figured I’d outline the solution here in simple terms for all to see.

The Data Flow

Data flow
The data flow as I envisaged it.

GTM offers a simple way to pass custom site data into its container. This is done through the dataLayer object.

The dataLayer is an array that GTM asynchronously reads. Basically, it’s a table with your data as pairs of values.

For example, you want to pass your page category and the type of visitor that’s on the site in to your dataLayer.

page category would be named something like pageCategory and given a value and same with type of visitor.

So what you want to do first is create the dataLayer, which will contain your variable, and place that dataLayer object above the GTM tag on the site.

dataLayer = [{
 'pageCategory': 'blog',
 'visitorType': 'repeatCustomer'
 }];
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WASDKH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WTLZKH');</script>
<!-- End Google Tag Manager -->

The dataLayer object goes first so that the dataLayer is there already when the gtm tag loads and calls it, as web pages load sequentially for the most part.

If you do not specify a dataLayer object first, gtm will create one for you by default, but if you want to read site variables through it in that case you’ll have to push them manually to gtm, using:

dataLayer.push();

In some cases, pushing data to the dataLayer is the only way to go, for example when you want to send data after an event, such a click or a selection. However, this isn’t part of the scope of this post today though so for simplicity’s sake we’ll use the easy approach, and if you have a question about this bit drop it in the comments section.

Your dataLayer code will look different from the one I’ve written above, obviously, depending on the data that you want to pass on to the GTM tag. The GTM tag will also be your GTM tag not the one that’s in the snippet above. Don’t go pasting my tag on your site now (it won’t work).

Setting up a dataLayer variable in GTM

So then, next step is to create variables in GTM which will carry the variables that you have in your dataLayer. Although it is technically possible to access your dataLayer variable directly in your custom code by just calling the JS array in there, you’ll want to set up a variable so that if that variable name changes on the site you wouldn’t have to go and amend a dozen custom codes.

So go to variables-> create new variable-> select dataLayer variable.

the data Layer variable name should match the name of the variable on your site. It is case-sensitive.

After that, give your variable a name and you click create variable.

The custom HTML

Next up you can go into your custom HTML tag and call this variable. To call a variable, you need to surround its name with a two brackets. It’s the variable name as you named it in its title in GTM, not the name as it is on the site, so in our example it is {{Category}} and NOT {{pageCategory}}


<script>

alert({{pageCategory}});

</script>

And that’s basically it, really. Quite simple. In our example here, the data in the dataLayer is static and loaded in the header. You can obviously populate that data with a server-side language like php, python, node, and the like and pass data into your tags dynamically.

You can also push data to the dataLayer on events and the like but that bit is documented quite well on other blogs so I won’t rehash it here.

Leave a Reply

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