Sunday, July 22, 2018

phpMyPassion

How To Set Custom Variables With DataLayer in GoogleTag manager (GTM) ?


Google Tag Manager DataLayer || PhpMyPassion

The most common problem for GTM is to setting up custom variables with dataLayer and make that dynamic for your JavaScrip tag.

So here I am gonna explain it with an article. follow whole process for setting up custom variables for your custom JavaScript tag.

I have already explained about GTM or its overview in my one of article. You can read that overview of google tag manager here

Setting Up Custom Variable With DataLayer :


To setting up custom variables with dataLayer, developers has to pass the variables from their code.

for an example :

just suppose your JS-SDK required data like eventName & jsonPayload and other parameters as below. 

<script>
var _pmp = _pmp || [];
var cb = Math.random()*10000000000000000;
!function(m,d,e,v,n,t,s)
{if(m.pmp)return;n=m.pmp=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!m._pmp)m._pmp=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=d.createElement(e);t.async=!0;
t.src=v;s=d.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'js/trackmyscript.js?cb='+cb);
_pmp.push(['init','PMP-XXX']);
_pmp.push(['dataTrack', 0, 'event-NAME', {jsonPayload}]); //parameters to e pass
</script>

You can set the datalayer to pass these variables from your code as below-

if your conversion event is of SignUp, then you have to setup dataLayer from your server side script as below-

Conversion Event : dataTrack_cnv

<script>dataLayer.push("event":"dataTrack_cnv", "eventName":"Buying", "jsonPayload":"{"md_prid":"p1234", "md_prname":"myProduct", "cur":"usd"}")</script>

You can also set this dataLayer on Ajax Response & on button click.
make sure you have initialise dataLayer object before the GTM-Tag as below - 
<head>
<!-- Google Tag Manager -->
<script>
var dataLayer = [];
(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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');
</script>
<!-- End Google Tag Manager -->
</head>

Now its time to create dataLayer variable by that we can pass it to our JS-SDK-TAG. 

Process to use dataLayer variables in your custom JS-SDK gtm tag :-

To use these variables you have to create variables in GTM as below -

Setting up DataLayer variable in gtm || PhpMyPassion

  • First give a name to your variable like - eventName, jsonPayload etc.
  • Now choose variable type to "Data Layer Variable" because we are already set dataLayer variables from code.
It will looks like below screen after choosing Data Layer variable -


Here eventName below DataLyer variable is the already above set DataLayer variabel name.
  • Now click to save and use your variable into your created JS-SDK tag in gtm -

<script>
var _pmp = _pmp || [];
var cb = Math.random()*10000000000000000;
!function(m,d,e,v,n,t,s)
{if(m.pmp)return;n=m.pmp=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!m._pmp)m._pmp=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=d.createElement(e);t.async=!0;
t.src=v;s=d.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'js/trackmyscript.js?cb='+cb);
_pmp.push(['init','PMP-XXX']);
_pmp.push(['dataTrack', 0, {{eventName}}, {jsonPayload}]); //parameters to e pass
</script>








  • Now set trigger to all pages



      • Publish your container tag and start to track your event.
      So using the whole process developers can set dataLayer variable in their website code and pass to GTM JS-SDK-TAG accordingly. Google Tag Manager makes it more easy to track event with a little bit changes in your website.

      If anybody found the issue in setting up dataLayer variables from their website or in passing to GTM, can comment here. I will always here for helping you. 


      More About Google Tag Manager (GTM):



      About Author -

      Hi, I am Anil.

      Welcome to my eponymous blog! I am passionate about PHP programming. Here you will find a hug of information on web development, web design, PHP and Latest technology.

      Subscribe to this Blog via Email :