admin:online-platform-cms:google-tag-manager

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:

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);

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:

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);

What happens in our newly formatted code snippet:

  1. In if statement, we check if the dataLayer object exists. If yes, we use .push method to add additional entry to this object.
  2. In else statement, if the dataLayer object does not exist, we simply define it
  3. After if and else statements, we paste the rest of the code snippet
  • admin/online-platform-cms/google-tag-manager.txt
  • Last modified: 2023/02/21 11:04
  • by edvinas-bazevicius