Skip to content

Integrating Javascript tags onto your website

Jump to bottom Edit New page
Alexander Dean edited this page Aug 4, 2013 · 18 revisions

HOME > SNOWPLOW SETUP GUIDE > Step 2: setup a Tracker > Javascript tracker

This guide takes you through the process for integrating Snowplow's JavaScript tracker into your website or web app.

Before you get started...

The following guide covers the process for integrating Snowplow tracking tags directly onto your website. We recommend integrating Snowplow via a Tag Management solution. If you wish to integrate Snowplow tags using a tag management platform, we have provided separate guides for:

We recommend using the Snowplow asynchronous tags. Doing so means that the loading of the Snowplow tags will not cause site content to load more slowly, thereby providing a better experience for your users.

Table of Contents

  1. Setting up Snowplow pageview tracking
  2. Tracking more than Pageviews. (Event tracking, ecommerce tracking, social tracking...)
  3. Next steps
## 1. Setting up Snowplow pageview tracking

1.1 Asyncronous integration

In general, we recommend Snowplow users to install the asyncronous version of the Snowplow tags. These enable web pages to load faster, by only firing Snowplow tracking events after page load is complete.

1.1.1 Installing the header script

To use snowplow.js in an 'async' manner, first add the following script into your website template's <head> section:

<!-- Snowplow starts plowing -->
<script type="text/javascript">
var _snaq = _snaq || [];

_snaq.push(['setCollectorCf', '{{CLOUDFRONT-DOMAIN}}']);
_snaq.push(['setAppId', '{{SITE-ID}}']);
_snaq.push(['setCookieDomain', '{{COOKIE-DOMAIN}}']);
_snaq.push(['trackPageView']);

(function() {
var sp = document.createElement('script'); sp.type = 'text/javascript'; sp.async = true; sp.defer = true;
sp.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://d1fc8wv8zag5ca.cloudfront.net/0.12.0/sp.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sp, s);
})();
</script>
<!-- Snowplow stops plowing -->

1.1.2 Configuring the header script: setting the Collector endpoint

You need to set the collector endpoint in the header script: this ensures that any data generated by the Javascript Tracker is sent to the Collector your setup as part of the previous stage in the setup process.

If you are using the [Cloudfront Collector](Setting up the Cloudfront Collector), you do so using the following line:

_snaq.push(['setCollectorCf', '{{CLOUDFRONT DOMAIN}}']);

Simply substitude your Cloudfront domain in for the {{CLOUDFROUNT DOMAIN}} e.g.

_snaq.push(['setCollectorCf', 'd1x5tduoxffdr7']);

If you are using another Collector type (e.g. the Clojure Collector) you will need to use an alternative setCollectorUrl function rather than the setCollectorCf to set the Collector endpoint:

_snaq.push(['setCollectorUrl', '{{COLLECTOR ENDPOINT HERE}}']);

For example, if your collector is at c.snplow.com then your tag would contain the line:

_snaq.push(['setCollectorUrl', 'c.snplow.com']);

1.3 Configuring the header script: application ID and cookie domain

Setting the collector endpoint is essential for Snowplow to work. Setting the application ID and cookie domain are optional. For details on setting these, see the (Javascript technicla documentation guide)[Javascript-Tracker.]

### 1.2 Synchronous integration

1.2.1 Installing the header script

To use snowplow.js in a 'sync' manner, first add the following script into your website template's <head> section:

<!-- Snowplow starts plowing -->
<script type="text/javascript">
var spSrc = ('https:' == document.location.protocol ? 'https' : 'http') + '://d1fc8wv8zag5ca.cloudfront.net/0.12.0/sp.js';
document.write(unescape("%3Cscript src='" + spSrc + "' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var snowplowTracker = Snowplow.getTrackerCf('{{CLOUDFRONT DOMAIN}}');
snowplowTracker.trackPageView();
snowplowTracker.enableLinkTracking();
} catch ( err ) {}
</script>
<!-- Snowplow stops plowing -->

1.2.2 Configuring the header script: setting your collector endpoint

You need to set the collector endpoint in the header script: this ensures that any data generated by the Javascript Tracker is sent to the Collector your setup as part of the previous stage in the setup process.

If you are using the Cloudfront Collector) you will need to do so using the following line:

var snowplowTracker = Snowplow.getTrackerCf('{{CLOUDFRONT DOMAIN}}');

Simply substitude your Cloudfront domain in for the {{CLOUDFROUNT DOMAIN}} e.g.

var snowplowTracker = Snowplow.getTrackerCf('d1x5tduoxffdr7');

If you are using another Collector type (e.g. the Clojure Collector) you will need to use an alternative setCollectorUrl function rather than the setCollectorCf to set the Collector endpoint:

var snowplowTracker = Snowplow.getTrackerUrl('{{COLLECTOR URL}}');

For example, if your collector is at c.snplow.com then your tag would contain the line:

var snowplowTracker = Snowplow.getTrackerUrl('c.snplow.com');
## 2. Tracking more than just page views: event tracking, ecommerce tracking etc.

Snowplow has been built to track more than simply page views. We believe, as far as possible, that every every that can happen on a user journey should be captured in Snowplow, and that includes every in-page events that might not result in a new page load. (Which are the only events that are captured as by the page view tracking already implemented.) The Javascript tracker incorporates a number of functions to capture a wealth of events including:

  1. Custom structured events. A general purpose event tracking tag that can be used to track events like add-to-baskets, video-plays amongst others. It is modelled closely on Google's Event tracking
  2. Ecommerce transactions. Use this to track orders placed on your site
  3. [Page pings] (2-Specific-event-tracking-with-the-Javascript-tracker#wiki-pagepings). Use this to track how long visitors dwell on each page on your site, and how they scroll of pages over time.

Detailed documentation on how to capture the complete range of events possible with Snowplow can be found in the Javascript Tracker section of the [Technical Documentation] (snowplow-technical-documentation).

Note: once you have finished setting up the additional Snowplow events (as documented in the Technical Documentation section), we recommend returning to the setup guide to complete your Snowplow installation.

## 3. Next steps

Once you have integrated Snowplow tracking tags on your site, you can [test that the tags fire] (testing the javascript tracker is firing).

Return to setup guide.

Home | About | Project | Setup Guide | Technical Docs | Copyright © 2012-2013 Snowplow Analytics Ltd

HOME > SNOWPLOW SETUP GUIDE > Step 2: Setup a Tracker > Javascript tracker setup

Setup Snowplow

Useful resources

Clone this wiki locally