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

phpmypassion
Table of Contents
The most common challenge with Google Tag Manager (GTM) is setting up custom variables with dataLayer and making them dynamic for your JavaScript tag.

In this article, I will explain the process for setting up custom variables for your custom JavaScript tag.

I have previously covered an overview of GTM in another article. You can read it here.

Setting Up Custom Variables With dataLayer

To set up custom variables with dataLayer, developers need to pass the variables from their code.

For example, suppose your JavaScript SDK requires data such as eventName, jsonPayload, and other parameters as shown 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 pass
</script>

You can set the dataLayer to pass these variables from your code as follows:

For a conversion event like SignUp, set up the dataLayer from your server-side script as shown 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 or button click.
Ensure the dataLayer object is initialized before the GTM tag as shown 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, create dataLayer variables to pass to your JS-SDK tag.

Process to Use dataLayer Variables in Your Custom JS-SDK GTM Tag

To use these variables, create them in GTM as follows:

Setting up DataLayer variable in GTM

  • Give your variable a name, such as eventName, jsonPayload, etc.
  • Choose the variable type as “Data Layer Variable” since the dataLayer variables are already set in the code.

The configuration will look like the following screenshot after selecting “Data Layer Variable”:

Here, eventName under Data Layer Variable refers to the dataLayer variable name set earlier.

  • Click save and use the variable in 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 pass
</script>

  • Set the trigger to “All Pages”:

  • Publish your container tag to start tracking your event.

Using this process, developers can set dataLayer variables in their website code and pass them to the GTM JS-SDK tag. Google Tag Manager simplifies event tracking with minimal changes to your website.

If you encounter issues setting up dataLayer variables or passing them to GTM, feel free to comment here for assistance.


More About Google Tag Manager (GTM):

Related posts