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. Tracker Setup
  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","{{URL to sp.js}}","snowplow")); </script>
Code language: HTML, XML (xml)

Note: We recommend self hosting sp.js by following our Self hosting snowplow JS guides here. The latest versions are currently available at GitHub.

We also recommend renaming sp.js as this file name is commonly blocked by adblockers. Renaming to a random string will help ensure the Snowplow JavaScript is loaded as expected.

Important note regarding testing: The URL to sp.js should be protocol-relative i.e. begin with // when fetching 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://.../sp.js" when testing locally.

As well as loading Snowplow, this tag creates a global function called “snowplow” which you use to access the Tracker. You can replace the string “snowplow” 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”.

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

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

For example, the method trackStructEvent has this signature:

function trackStructEvent(category, action, label, property, value, context)
Code language: JavaScript (javascript)

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

snowplow('trackStructEvent', 'Mixes', 'Play', '', '', 20);
Code language: JavaScript (javascript)

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.