We’re pleased to announce the Beta release of the Snowplow JavaScript Tracker v3! We’re looking for feedback and testers before the final release (currently scheduled for 30th March).
Webinar - March 18th
We’re hosting a product office hours and meetup on Thursday where I’ll be running through the new tracker, the changes and a quick demo of using it in a react app. If that isn’t exciting enough, during the meetup we’ll have a special guest who is a shark scientist! Actual sharks! You can register here: Product Office Hours | Snowplow
Snowplow JavaScript Tracker v3 Beta
Highlights
- Available on NPM as
@snowplow/browser-tracker. Install withnpm install @snowplow/browser-tracker@nextfor the latest beta release. - Now with configurable (and extendable) plugin architecture.
- Plugins also published on NPM (e.g.
@snowplow/browser-plugin-ad-tracking,@snowplow/browser-plugin-consentand many more). - New debug mode which you enable as a plugin, see NPM.
-
(BREAKING CHANGE) New tracking API, pass objects rather than parameter lists (e.g.
window.snowplow('trackPageView', { title: 'My Website', contexts: [ ... ] });) -
Published as traditional
sp.js(69 KB - 22 KB gzipped) and newsp.lite.js(37 KB - 13 KB gzipped).sp.lite.jshas Page View, Self Describing and Structured Events as well as Activity Tracking and Anonymous Tracking. -
sp.jsandsp.lite.jsare available on jsDelivr and unpkg (and cdnjs following release). Plugins are also available on jsDelivr and unpkg. - Plugins can be used with
sp.js. See below for examples. - Build your own
sp.jsby following the setup instructions in the README and editing/trackers/javascript-tracker/tracker.config.js. - This repo is now a fancy
@microsoft/rushmonorepo. - No more lodash!
- Completely rewritten in TypeScript, shipped with full type support.
- Still supports IE9 and Safari 8
- Removed
f_feature fields, Optimizely Classic and Parrable tracking from default sp.js (still available as plugins).
Quick start
To test the new @snowplow/browser-tracker along with tracking some events, heres a couple of lines of code that should get you started:
import { newTracker, trackPageView } from "@snowplow/browser-tracker";
import { AdTrackingPlugin, trackAdClick } from "@snowplow/browser-plugin-ad-tracking";
import { PerformanceTimingPlugin } from "@snowplow/browser-plugin-performance-timing";
newTracker('sp1', '{{collector_url}}', {
appId: 'my-app-id',
plugins: [ PerformanceTimingPlugin(), AdTrackingPlugin() ],
eventMethod: 'post'
})
trackPageView();
function trackAnEvent() {
trackAdClick({targetUrl: 'https://www.snowplowanalytics.com', advertiserId: '1234-5678'});
}
If you’re looking to test out the classic sp.js then you’ll find it in the usual Github Releases section, tagged as a pre-release. There is a big breaking change between this version and v2, and that is all functions now accept an object rather than a list of parameters. I’ve put a couple of examples below:
window.snowplow('trackPageView');
window.snowplow('trackPageView', {
title: 'My Title',
context: [
{
schema: 'iglu:org.schema/WebPage/jsonschema/1-0-0',
data: {
keywords: ['tester'],
},
},
],
});
window.snowplow('trackSelfDescribingEvent', {
event: {
schema: 'iglu:com.snowplowanalytics.snowplow/ad_impression/jsonschema/1-0-0',
data: {
bannerId: 'ASO01043',
},
},
context: [],
timestamp: { type: 'ttm', value: 1477401868 },
});
window.snowplow('enableActivityTracking', { minimumVisitLength: 15, heartbeatDelay: 15 });
Using Plugins with sp.js and sp.lite.js
You initialise your tracker as normal:
window.snowplow('newTracker', 'sp1', 'https://cdn.jsdelivr.net/npm/@snowplow/javascript-tracker@3.0.0-beta.1/dist/sp.lite.js', {
appId: 'simple-test-1',
eventMethod: 'post'
});
You can then dynamically load an external script plugin:
window.snowplow('addPlugin', ['snowplowPerformanceTiming', 'PerformanceTimingPlugin'], 'https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-performance-timing@3.0.0-beta.1/dist/index.umd.min.js');
window.snowplow('addPlugin:sp1', ['snowplowAdTracking', 'AdTrackingPlugin'], 'https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-ad-tracking@3.0.0-beta.1/dist/index.umd.min.js');
Or you can inject a Plugin object in:
window.snowplow('addPlugin:sp1', 'SimpleContextPlugin', {
SimpleContextPlugin: function() {
return {
contexts: function() {
return [
{
schema: 'iglu:com.acme/my_custom_context/jsonschema/1-0-0',
data: {
id: '1234'
},
},
];
}
}
}
});
When using @snowplow/browser-tracker, you can simply add plugins whenever you like:
import { newTracker, addPlugin } from "@snowplow/browser-tracker";
import { AdTrackingPlugin } from "@snowplow/browser-plugin-ad-tracking";
newTracker('sp1', '{{collector_url}}', {
appId: 'my-app',
plugins: [ ]
});
addPlugin({plugin: AdTrackingPlugin()});
Additional Documentation
Further documentation will be available before the final release on docs.snowplowanalytics.com.
