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 -
Now set trigger to all pages
- 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.
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>
- Publish your container tag and start to track your event.
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.
Note: Only a member of this blog may post a comment.