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 Tracker
  6. General Parameters
  7. Loading the Snowplow tag

Loading the Snowplow tag

Use the following tag to your page to load Snowplow.js:

<script type="text/javascript" async=1> ;(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.10.2/sp.js","snowplow_name_here")); </script>

Note: The above snippet references a Snowplow Analytics hosted version of the Snowplow JavaScript tracker v2.10.2 (//d1fc8wv8zag5ca.cloudfront.net/2.10.2/sp.js). Snowplow Analytics no longer hosts the latest versions of the Snowplow JavaScript tracker. We recommend self hosting sp.js by following our Self hosting snowplow js guide here. The latest versions are currently available at GitHub.

Important note regarding testing: "//d1fc8wv8zag5ca.cloudfront.net/2.10.2/sp.js" is the protocol-relative URL used to fetch sp.js. It will work if the your web page is using the “http” or “https” protocol. But if you are testing locally and loading your page from your filesystem using the “file” protocol (so its URI looks something like “file:///home/joe/snowplow_test.html”), the protocol-relative URL will also use that protocol, preventing the script from loading. To avoid this, change the URL to "http://d1fc8wv8zag5ca.cloudfront.net/2.10.2/sp.js" when testing locally.

As well as loading Snowplow, this tag creates a global function called “snowplow_name_here” which you use to access the Tracker. You can replace the string “snowplow_name_here” with the function name of your choice. This is encouraged: if there are two Snowplow users on the same page, there won’t be any conflict between them as long as they have chosen different function names. The rest of the documentation will assume that the function is called “snowplow_name_here”.

Once the function snowplow_name_here is created, the syntax for using Snowplow methods is as follows:

snowplow_name_here({{"methodName"}}, {{first method argument}}, {{second method argument}}, ...);

For example, the method trackStructEvent has this signature:

function trackStructEvent(category, action, label, property, value, context)

where only the first two arguments are required. You would use it like this:

snowplow_name_here('trackStructEvent', 'Mixes', 'Play', '', '', 20);

Empty strings are provided for the label and property arguments to pad them out. (Null would also work.) They won’t be added to the event. Neither will the context argument, which isn’t provided at all.