Quick start guide
Quick start (plus modelling!)​
We recommend looking at the Advanced Analytics for Web accelerator to walk through tracking and modelling web events. It's a more in depth look at how to use Snowplow than this page.
Quick start (basic)​
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 BDP users can generate a tag snippet in the Snowplow BDP Console here. Other users can use and edit the standard tag here.
;(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 JavaScript Tracker supports both synchronous and asynchronous tags. We recommend the asynchronous tags in nearly all instances, as these do not slow down page load times.
- Load the tag using a Tag Management solution such as Google Tag Manager, usually triggered on page load.
- Place the tag directly into your codebase. Typically this will be placed into the
Configure an instance of the tracker by calling
newTracker
with your desired properties.
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:
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 managernpm install @snowplow/browser-tracker@3
yarn add @snowplow/browser-tracker@3
pnpm add @snowplow/browser-tracker@3
You can then import this library into your application
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.
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:
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)
<!-- 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 -->
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.
If using the Browser tracker, the events will all have the webPage
context entity attached, containing the page view ID. If using the JavaScript tracker, the page pings will have the webPage
as well as performanceTiming
, gaCookies
, and clientHint
entities. Read more about these entities here.