gtagmanager
Google Tag Manager the easy way
Availabililty
Status for master
Usage
Use TypeScript for best in class instellisense.
Once imported, this package will add a dataLayer to the window object. A dataLayer is a simple array. You can push data to this array using the array prototype method .push():
gtm // will add a standard dataLayer to the window objectwindowdataLayer // continues in next code block
Now that you have a dataLayer it is time to set up the Google Tag Manager
// continued from last codeblock let myGTM = 'someGTMid'// Note:// constructor accepts an optional dataLayer array as second parameter// will use window.dataLayer by default as dataLayer myGTMstart // starts the GTM instancemyGTM // allows pushing to the GTM instance's dataLayer in case it defers from window.dataLayer
Writing to data layer from different parts of your website
In some setups it may be desireable to build the dataLayer in the frontend when components are loaded together that didn't exist together before in the serving stack chain.
You can do so from any part of the website by referring to window.dataLayer.push({ /* your key:value things here */ })
Making sure Google Tag Manager delivers data under all circumstances
Google Tag Manager is basically a Java Script Injection engine, that runs async. So there is always a risk of a user navigating away before GTM finishes execution The only more or less stable way to avoid most scenarios is to use something more persistent like Service Worker for gathering data and caching important scripts at the user's location
Support for older browsers
By default gtagmanager compiles TypeScript to ES6 as most modern browsers support it by now. In order to maximise browser compatibility there is a ES5 transpiled version available:
var gtm = require('gtagmanager/es5/index')
Bundle it for performance
We recommend bundling this module for production using browserify, jspm.io or webpack