Installing the tracker from npm

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.

• 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

import { newTracker, trackPageView } from '@snowplow/browser-tracker';
Code language: JavaScript (javascript)

• 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: [ ],
});
Code language: JavaScript (javascript)

• 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();

Using Plugins

• You can extend the tracker by installing plugins. Lets say you wanted to use the Form Tracking plugin, you first need to install the package:
  • npm install @snowplow/browser-plugin-form-tracking
  • yarn add @snowplow/browser-plugin-form-tracking
  • pnpm add @snowplow/browser-plugin-form-tracking

• You can then import the form tracking library:

import { FormTrackingPlugin, enableFormTracking } from '@snowplow/browser-plugin-form-tracking';
Code language: JavaScript (javascript)

• Update your tracker initialization code so the tracker knows this plugin exists:

newTracker('sp1', '{{collector_url}}', { 
  appId: 'my-app-id', 
  plugins: [ FormTrackingPlugin() ],
});
Code language: JavaScript (javascript)

• And then use the new functions which this plugin includes:

enableFormTracking();

There are lots of plugins already available! You can find them all here and also search for them on npmjs.com.