admin:online-platform-cms:google-tag-manager [Aardvark Technologies Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== Adding Google Tag Manager via cms ======

When adding custom GTM script via CMS (Online Betting > Layout > Custom Script) section, we need to make sure that script does not break our app's Google Analytics functionality. GTM provides code snippet similar to this example:

<code>
window.dataLayer = [{
  'gtm.start': new Date().getTime(),
  event:'gtm.js'
}];
gtm = document.createElement('script');
gtm.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-KBP43GK';
gtm.async = true;
document.head.appendChild(gtm);
</code> 

However GA in our app uses the same **window.dataLayer** object. If we simply paste this script and save in CMS section, this custom script will try to override our app's GA functionality which will result in GA and GTM not working correctly. To avoid such a pitfall, reformat the snippet from the above code snippet to:

<code>
window.dataLayer = window.dataLayer || []; 
window.dataLayer.push({
  'gtm.start': new Date().getTime(),
  event:'gtm.js',
}); 
gtm = document.createElement('script');
gtm.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-KBP43GK';
gtm.async = true;
document.head.appendChild(gtm);
</code>

What happens in our newly formatted code snippet:
  - In **if** statement, we check if the **dataLayer** object exists. If yes, we use **.push** method to add additional entry to this object.
  - In **else** statement, if the **dataLayer** object does not exist, we simply define it
  - After if and else statements, we paste the rest of the code snippet