Since Google Tag Manager has rolled out Custom Templates. I have been trying to create some examples for the general use case. In this post, we will learn how to create a standard pageview snowplow pixel. I have tried to keep it as simple as possible.
If you want to have a quick recap at what are custom templates. Please have a read here: Custom Templates : Google Tag Manager
Below is the snippet we have the standard snowplow pageview pixel. This pixel includes some important variables that we will create them as inputs from the user while creating the tag.
// Snowplow starts plowing
(function(p, l, o, w, i, n, g) {
if (!p[i]) {
p.GlobalSnowplowNamespace = p.GlobalSnowplowNamespace || [];
p.GlobalSnowplowNamespace.push(i);
p[i] = function() {
(p[i].q = p[i].q || []).push(arguments)
};
p[i].q = p[i].q || [];
n = l.createElement(o);
g = l.getElementsByTagName(o)[0];
n.async = 1;
n.src = w;
g.parentNode.insertBefore(n, g)
}
}(window, document, "script", "//d1fc8wv8zag5ca.cloudfront.net/2.6.2/sp.js", "snowplow"));
window.snowplow('newTracker', 'cf', '{{MY-COLLECTOR-URI}}',
{ // Initialise a tracker
appId: '{{MY-SITE-ID}}',
cookieDomain: '{{MY-COOKIE-DOMAIN}}'
});
window.snowplow('trackPageView')
// Snowplsow stops plowing
This is an unofficial version of snowplow pageview template created just for common use. We will use the name and description to make sure it serves the purpose. The details that we used are in the below image.
This is how it will look like in the tags tab
We will define important variables as fields required to be entered by the users to create the tag. The list of the fields are as below
This is the tricky part. Let's understand each line step by step. We need to break the standard Javascript snippet into the sandboxed JavaScript.
Since templates in Google Tag Manager uses sandboxed JavaScript, we have to import the utilities using a global require function. The Custom Templates API is documented with their usage
// Create constants to use utilities //
/*logToConsole: To log and debug values*/
const log = require('logToConsole');
/*createQueue:- Creates an array in the window (if it doesn't already exist) and returns a function that will push values onto that array.*/
const createQueue = require('createQueue');
/*callInWindow:- Allows you to call functions from a path off the window object*/
const callInWindow = require('callInWindow');
/*copyFromWindow:- Copies a variable from the window object*/
const copyFromWindow = require('copyFromWindow');
/*setInWindow:- Sets the given value in the window at the given key*/
const setInWindow = require('setInWindow');
/*injectScript:- Adds a script tag to the page to load the given URL asynchronously*/
const injectScript = require('injectScript');
/*callLater:- Schedules a call a function to occur asynchronously*/
const cl = require('callLater');
- First, we create a function that will return the global snowplow object.
const getSpq = () => {}
- Then we define the GlobalSnowplowNamespace array and insert snowplow as key
let gp = createQueue('GlobalSnowplowNamespace');
gp("snowplow");
- After this, we define the global window snowplow object. If it is available then we return the same
// Generate snowplow (if available retun)
let snowplow = copyFromWindow('snowplow');
if (snowplow) {
return snowplow;
}
- Then we initialize the snowplow.q.push global method. Create the snowplow.q and finally return snowplow object
// Initialize the 'snowplow.q.push' global method
setInWindow('snowplow', function() {
callInWindow('snowplow.q.push', arguments);
});
// Create the snowplow.q
createQueue('snowplow.q');
// Return the global 'snowplow' method, created above
return copyFromWindow('snowplow');
- At last we define the options object from the input fields and trigger the pageview
const sp = getSpq();
const options = {
appId: data.appId,
platform: data.platformType,
post: data.requestType,
contexts: {
webPage: true,
performanceTiming: true
}
};
sp('newTracker', data.trackerName, data.endpoint, options);
//track Pageview
sp('trackPageView');
- We will use injectScript to inject sp.js. We also have to delay our pageview function call using callLater(pageView) so that we get the inject script and snowplow function becomes active.
// Delay the function call to snowplow so that teh script injects the object
injectScript(data.loc, callLater(pageView), data.gtmOnFailure, 'snowplow');
data.gtmOnSuccess();
For each key used for accessing global variables, we need to specify the permissions as what that key can do. read , write or execute.CONFIGURATION
We also need to specify the pattern for the Cloudfront sp.js injection. If you are changing the hosting of sp.js, you need to change the inject scripts pattern
To import a template file into your Google Tag Manager container, follow these steps:
Importing a template file like this will overwrites any work you might have done in the underlying template. Always try to import to a newly created template.