Collecting data with Trackers and Webhooks

  1. Home
  2. Docs
  3. Collecting data with Trackers and Webhooks
  4. Trackers – collecting data from your own applications
  5. JavaScript Trackers (Web and Node.js)
  6. JavaScript Tracker
  7. Google Tag Manager Custom Template
  8. Template for JavaScript Tracker v3
  9. Tag Guide

Tag Guide

This template implements the Snowplow Analytics JavaScript tracker v3. The template supports all the features of the tracker, with a few exceptions due to the limitations of custom templates’ sandboxed JavaScript.

Install the template

To install the template, browse to Templates in the Google Tag Manager user interface.

Under Tag Templates, click Search Gallery, and type snowplow analytics v3 into the gallery overlay search bar.

Click the Snowplow Analytics v3 template name, and then click Add to Workspace in the next screen. Review the permissions and click Add to finalize the import.

After importing the template, you can follow the normal process of creating a new tag in Google Tag Manager, and the Snowplow Analytics v3 template will be listed among the Custom tag types you can choose from.

Caveats

To begin with, some of the caveats of using the Custom Template.

  • Any methods that require the parsing of HTML elements (e.g. link tracking filter functions, cross domain linking) will not work and are thus disabled.
  • Automatic error tracking does not work due to lack of support for the ErrorEvent API.
  • There is no implementation for the standard ecommerce events. Users are encouraged to implement the enhanced ecommerce setup instead.

Instructions

Here are basic instructions for how to instrument the JavaScript tracker v3. You are encouraged to consult the technical documentation for more information on each individual feature.

In general, when the tag fires, it first checks if the Snowplow JavaScript library has been loaded from the self-hosted URL provided in the template settings (more on this below). Then, the tag checks whether a tracker with the given Tracker Name has already been initialized. If not, it proceeds to initialize the new tracker.

Finally, the tag bundles a command from the settings in the tag, and sends it to the given Collector Endpoint.

Settings Configuration

The Tag template requires a Settings Variable template to be configured which can be referenced within the Tag. This settings template contains the information required for the Tag to appropriate initialize the tracker.

Once a settings variable has been configured, it can be attached to the Tag in the Tracker Initialisation section.

You can also choose to override some of the parameters specifically for this tag if you wish to, such as sending the creating a new tracker by overriding the Tracker Name and a new Collector Endpoint.

Self Hosted JavaScript Tracker

If you have the Snowplow library self-hosted, and have configured it as such in your Settings variable, you need to update the Injects Scripts permission to reflect the new location, by editing the Snowplow Analytics v3 Tag template. Delete the content of the Allowed URL Match Patterns field, and type the full URL to the library there. Again, it must match what you input into the tag itself when creating it.

Unfortunately, modifying permissions breaks the gallery link and you will no longer be notified about updates to the template. Being able to modify permissions without having the link break is a feature request I hope will get solved very soon.

Tag Type

Under Tag Type, you can choose what type of command is compiled and sent to the endpoint. The tag types are split here into three groups: commands that utilize a common parameters object, commands that have special conditions, and custom commands.

Tags with a parameter object

Tags that can derive their parameters from a Google Tag Manager variable are:

  • Ad Tracking
  • Cart Tracking
  • Error Tracking
  • Consent
  • Self-describing Event
  • Site Search
  • Social Interaction
  • Structured Event
  • Timing

You can set the Retrieve Parameters From Variable setting to a Google Tag Manager variable. This parameter must return an object. In the object, the key-value pairs should reflect the named parameters in the event documentation. For example, to have the variable populate an Error event, you could use a Custom JavaScript variable like this:

function() { return { message: 'Some Error Happened', filename: 'somefile.js', lineno: 5, colno: 236, error: null } }
Code language: JavaScript (javascript)

Alternatively, you can set the drop-down to the value No, and add the parameters manually instead:

Some tag types will add additional selections to this section. Follow the official tracker documentation for more information about what each option does.

Special tags

Some tag types have special conditions and have been separated into their own configurations.

Enhanced Ecommerce

When you select Enhanced Ecommerce, you are left with two options: Use Data Layer or Choose Variable. The way it works is very similar to Enhanced Ecommerce in Google Analytics.

If you choose the first, the template will look into the dataLayer structure for the most recently pushed Enhanced Ecommerce object, and map this object to the request to Snowplow Analytics.

If you selected Choose Variable, you need to provide a GTM variable that returns an object in the correct, expected format.

Form Tracking

Form tracking has just two options, because filters and transformations won’t work with the custom template (due to lack of support for processing HTML elements). The options are to set form and/or field blacklists and whitelists.

Blacklists and whitelists for forms are a list of comma-separated HTML class names. If blacklisted, then any form element with a listed class will not trigger the form event. If whitelisted, then only form elements with a listed classname will be tracked.

For fields, blacklists and whitelists work similarly, except they use the name attribute rather than the class.

The Track Link Click event is similar to regular parameter-based events, as it lets you add parameters and track a link click as a manually encoded hit.

The Enable Automatic Link Click Tracking adds listeners to the page, which will track clicks on links permitting they adhere to the blacklisted/whitelisted class names you can optionally provide.

The Fix Middle-click Tracking adds a fix for some browsers where middle-clicks were not tracked properly.

If you check Track HTML Content Of Clicked Link, then the full text content of the link element will be sent to Snowplow as well.

Page View

You can provide a Custom Page Title if you wish, and you can add a custom context function to the request.

If you enable Page Activity Tracking, the tag will setup a heartbeat tracker, and send page pings to Snowplow at intervals that you can specify.

The Callback Function is something you can set to a JavaScript function. If you set the callback, then instead of sending the page ping to Snowplow, the function gets invoked instead.

Custom Commands

For any other commands which are supported by the Snowplow JavaScript Tracker v3, you can select the [Custom Command] option. Once select, you can enter any function name and the associated parameter for that function. The parameter can either be a simple string, in examples such as setUserId:

Or it can be set to a Custom JavaScript Variable in the instances where an Object should be passed to the function, such as with enableAnonymousTracking:

And then use this variable as your Command Argument:

Additional Tracking Parameters

You can choose a Google Tag Manager variable from the drop-down titled Add Custom Contexts. This lets you add custom contexts to the current hit. The variable must return an array of valid context objects.

You can also choose to override the device timestamp with the Set Custom Timestamp field. The format must be UNIX time in milliseconds.

Acknowledgements

Thanks to Simo Ahava for building the intial release of this template.

If you’d like to learn more about Snowplow BDP you can book a demo with our team, or if you’d prefer, you can try Snowplow technology for yourself quickly and easily.