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 managernpm 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';
- 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();
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';
- Update your tracker initialization code so the tracker knows this plugin exists:
newTracker('sp1', '{{collector_url}}', {
appId: 'my-app-id',
plugins: [ FormTrackingPlugin() ],
});
- 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.