Quick start guide for the web trackers

Follow these instructions to quickly implement a Snowplow web tracker with default configuration, and track a page view.

JavaScript (tag)
Browser (npm)

Getting started with sending events using the JavaScript tracker is very similar to other web analytics vendors like Google Analytics, Adobe Analytics, etc.

The process involves the following high level steps:

Download the latest version of the Snowplow JavaScript tracker file, sp.js, which can be found here.
If you are already hosting static files somewhere on your own domain, it should just be a matter of downloading and adding the sp.js file. Otherwise you can follow our guides for self hosting, use another method of your choice, or leverage a Third Party CDN (useful for evaluation or testing).
Once you have a JS tracker available, you can add the tag snippet to your site. There are also alternative options described below for adding the tracker to your website.
If manually inserting the tag into your website or tag management solution: Snowplow CDI customers can generate a tag snippet in Snowplow Console here. Other users can use and edit the standard tag here.

javascript
 ;(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"));

Once you’ve generated your tag add it to all the pages you’d like to track:
- Place the tag directly into your codebase. Typically this will be placed into the <head> element of your page or in a similar, suitable, location if using a Single Page Application framework.
  - The tag loads asynchronously to avoid slowing down page load times. Tracking calls made before the script loads are automatically queued and processed once the tracker initializes.
- Load the tag using a Tag Management solution such as Google Tag Manager, usually triggered on page load.
Configure an instance of the tracker by calling newTracker with your desired properties.

javascript
window.snowplow('newTracker', 'sp1', '{{collector_url}}', {
  appId: 'my-app-id'
})

Then you can use the track methods to send some events. You can send a Page View event to all initialised trackers with just:

javascript
window.snowplow('trackPageView');

Rather than adding the tag snippet directly, you may wish to use an alternative option for loading the JavaScript Tracker.

Users of Google Tag Manager can use the Snowplow Analytics Custom Template.
Use the Snowplow Plugin in the analytics npm package.

Getting started with sending events using the Browser Tracker will be familiar for anyone who is used to installing npm packages into their web apps and is designed to work with frameworks such as React, Angular and Vue.

The process involves the following high level steps:

Install the @snowplow/browser-tracker package using your preferred package manager
- npm install @snowplow/browser-tracker
- yarn add @snowplow/browser-tracker
- pnpm add @snowplow/browser-tracker
You can then import this library into your application

javascript
import { newTracker, trackPageView } from "@snowplow/browser-tracker";

Configure an instance of the tracker by calling newTracker(...) with your desired properties. This will create a module level instance of your tracker. You don't need to keep a reference to it.

javascript
newTracker('sp1', '{{collector_url}}', {
  appId: 'my-app-id',
  plugins: [ ],
})

Then you can use the track methods to send some events. You can send a Page View event to all initialised trackers with just:

javascript
trackPageView();

What's tracked with the default configuration?

Using just the initialization snippets above won't result in any events, unless trackPageView is called.

However, we recommend that activity tracking (page pings) is enabled immediately following initialization.

JavaScript (tag)
Browser (npm)

javascript
<!-- Snowplow starts plowing -->
<script type="text/javascript">
;(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"));

snowplow('newTracker', 'sp', '{{collector_url_here}}', {
    appId: 'my-app-id',
});

snowplow('enableActivityTracking', {
  minimumVisitLength: 30,
  heartbeatDelay: 10
});

// snowplow('trackPageView') can then be called

</script>
<!-- Snowplow stops plowing -->

javascript
import {
  newTracker,
  trackPageView
} from '@snowplow/browser-tracker';

newTracker('sp', '{{collector_url_here}}', {
    appId: 'my-app-id',
});

enableActivityTracking({
  minimumVisitLength: 30,
  heartbeatDelay: 10
});

// trackPageView() can then be called

Adding this code to your site will cause page ping events to be automatically tracked and sent via POST.

The events will all have the webPage entity attached, containing the page view ID.

What's tracked with the default configuration?​

Want to see a custom demo?

What's tracked with the default configuration?