gtagmanager v1.0.6

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():

import * as gtm from 'gtagmanager'
gtm.standardDataLayerInit() // will add a standard dataLayer to the window object
window.dataLayer.push({
    "someKey": "someValue",
    "anotherKey": "anotherValue"
})

// 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 = new gtm.GTagManager('someGTMid')
// Note:
// constructor accepts an optional dataLayer array as second parameter
// will use window.dataLayer by default as dataLayer

myGTM.start() // starts the GTM instance
myGTM.pushToDataLayer({ "myKey": "myValue" }) // 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