The Data Flow<\/h2>\n![\"Data](\"https:\/\/hannahourani.com\/writer\/wp-content\/uploads\/2016\/03\/Data-flow-184x300.jpg\")
<\/a>The data flow as I envisaged it.<\/figcaption><\/figure>\nGTM offers a simple way to pass custom site data into its container. This is done through the dataLayer object.<\/p>\n
The dataLayer is an array that GTM asynchronously reads. Basically, it’s a table with your data as pairs of values.<\/p>\n
For example, you want to pass\u00a0your page category and the type of visitor that’s on the site\u00a0in to your dataLayer.<\/p>\n
page category would\u00a0be named something like pageCategory and given a value and same with type of visitor.<\/p>\n
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.<\/p>\n
[code language=”javascript” title=”An example dataLayer which goes first on the page”]
\ndataLayer = [{
\n ‘pageCategory’: ‘blog’,
\n ‘visitorType’: ‘repeatCustomer’
\n }];
\n[\/code]<\/p>\n
[code language=”javascript” title=”The GTM tag, which goes second on the page”]
\n<!– Google Tag Manager –>
\n<noscript><iframe src="\/\/www.googletagmanager.com\/ns.html?id=GTM-WASDKH"
\nheight="0" width="0" style="display:none;visibility:hidden"><\/iframe><\/noscript>
\n<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
\nnew Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
\nj=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
\n‘\/\/www.googletagmanager.com\/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
\n})(window,document,’script’,’dataLayer’,’GTM-WTLZKH’);<\/script>
\n<!– End Google Tag Manager –>
\n[\/code]<\/p>\n
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.<\/p>\n
If you do not specify a dataLayer object first, gtm will create one for you by default, but if you want to read\u00a0site variables through it in that case you’ll have to push them manually to gtm, using:<\/p>\n
dataLayer<\/span>.<\/span>push<\/span>(<\/span>);<\/span><\/pre>\nIn 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\u00a0today though so for simplicity’s sake we’ll use the easy approach, and if you have a\u00a0question about this bit drop it in the comments section.<\/p>\n
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).<\/p>\n
Setting up a dataLayer variable in GTM<\/h2>\n
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.<\/p>\n
<\/a>GTM offers a simple way to pass custom site data into its container. This is done through the dataLayer object.<\/p>\n
The dataLayer is an array that GTM asynchronously reads. Basically, it’s a table with your data as pairs of values.<\/p>\n
For example, you want to pass\u00a0your page category and the type of visitor that’s on the site\u00a0in to your dataLayer.<\/p>\n
page category would\u00a0be named something like pageCategory and given a value and same with type of visitor.<\/p>\n
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.<\/p>\n
[code language=”javascript” title=”An example dataLayer which goes first on the page”]
\ndataLayer = [{
\n ‘pageCategory’: ‘blog’,
\n ‘visitorType’: ‘repeatCustomer’
\n }];
\n[\/code]<\/p>\n
[code language=”javascript” title=”The GTM tag, which goes second on the page”]
\n<!– Google Tag Manager –>
\n<noscript><iframe src="\/\/www.googletagmanager.com\/ns.html?id=GTM-WASDKH"
\nheight="0" width="0" style="display:none;visibility:hidden"><\/iframe><\/noscript>
\n<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
\nnew Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
\nj=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
\n‘\/\/www.googletagmanager.com\/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
\n})(window,document,’script’,’dataLayer’,’GTM-WTLZKH’);<\/script>
\n<!– End Google Tag Manager –>
\n[\/code]<\/p>\n
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.<\/p>\n
If you do not specify a dataLayer object first, gtm will create one for you by default, but if you want to read\u00a0site variables through it in that case you’ll have to push them manually to gtm, using:<\/p>\n
dataLayer<\/span>.<\/span>push<\/span>(<\/span>);<\/span><\/pre>\nIn 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\u00a0today though so for simplicity’s sake we’ll use the easy approach, and if you have a\u00a0question about this bit drop it in the comments section.<\/p>\n
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).<\/p>\n
Setting up a dataLayer variable in GTM<\/h2>\n
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.<\/p>\n
![\"\"](\"https:\/\/hannahourani.com\/writer\/wp-content\/uploads\/2016\/03\/variable.jpg\")
<\/a>