@snowplow/browser-tracker

What is @snowplow/browser-tracker?

@snowplow/browser-tracker is a JavaScript library for tracking user interactions and events on web pages. It is part of the Snowplow Analytics platform, which provides a comprehensive solution for collecting and analyzing event data. The browser tracker allows you to capture a wide range of events, including page views, clicks, form submissions, and custom events, and send them to a Snowplow collector for further processing and analysis.

What are @snowplow/browser-tracker's main functionalities?

Track Page Views

This feature allows you to track page views on your website. The `newTracker` function initializes a new tracker instance, and the `trackPageView` function sends a page view event to the Snowplow collector.

const { newTracker, trackPageView } = require('@snowplow/browser-tracker');
newTracker('sp1', 'collector.example.com');
trackPageView();

Track Custom Events

This feature allows you to track custom events. The `trackSelfDescribingEvent` function sends a custom event with a specified schema and data to the Snowplow collector.

const { trackSelfDescribingEvent } = require('@snowplow/browser-tracker');
trackSelfDescribingEvent({
  schema: 'iglu:com.example_company/save-game/jsonschema/1-0-0',
  data: {
    saveId: '4321',
    level: 23,
    difficulty: 'HARD'
  }
});

Track Form Submissions

This feature allows you to track form submissions. The `trackFormSubmission` function sends an event when a form with the specified ID, classes, or name is submitted.

const { trackFormSubmission } = require('@snowplow/browser-tracker');
trackFormSubmission({
  formId: 'signup-form',
  formClasses: ['form-class'],
  formName: 'Signup Form'
});

Track Link Clicks

This feature allows you to track link clicks. The `trackLinkClick` function sends an event when a link with the specified ID, classes, or name is clicked.

const { trackLinkClick } = require('@snowplow/browser-tracker');
trackLinkClick({
  linkId: 'example-link',
  linkClasses: ['link-class'],
  linkName: 'Example Link'
});

Other packages similar to @snowplow/browser-tracker

mixpanel-browser

Mixpanel is an advanced analytics platform that helps you track user interactions with web and mobile applications. The `mixpanel-browser` package provides functionalities similar to @snowplow/browser-tracker, including tracking events, page views, and user properties. Mixpanel also offers powerful segmentation and analysis tools, but it is a hosted service with a subscription-based pricing model.

README

Snowplow Browser Tracker

Add Snowplow Tracking to your Web Application with @snowplow/browser-tracker.

Maintainer quick start

Part of the Snowplow JavaScript Tracker monorepo.
Build with Node.js (18 - 20) and Rush.

Setup repository

npm install -g @microsoft/rush 
git clone https://github.com/snowplow/snowplow-javascript-tracker.git
rush update

Package Installation

With npm:

npm install @snowplow/browser-tracker

Usage

Initialize your tracker with your desired configuration and optional plugins:

import { newTracker } from '@snowplow/browser-tracker';
import { SiteTrackingPlugin } from '@snowplow/browser-plugin-site-tracking';
import { PerformanceTimingPlugin } from '@snowplow/browser-plugin-performance-timing';
import { ClientHintsPlugin } from '@snowplow/browser-plugin-client-hints';
import { FormTrackingPlugin, enableFormTracking } from '@snowplow/browser-plugin-form-tracking';

newTracker('sp1', '{{collector}}', { plugins: [ PerformanceTimingPlugin(), SiteTrackingPlugin(), ClientHintsPlugin(), FormTrackingPlugin() ] }); // Also stores reference at module level
newTracker('sp2', '{{collector}}', { plugins: [ PerformanceTimingPlugin(), SiteTrackingPlugin() ] }); // You can have multiple trackers with different configs!

enableFormTracking() // Switch on form tracking

Then use the trackX functions from this package and your plugins to track to all trackers which have been initialized, or select just some trackers:

import { trackPageView } from '@snowplow/browser-tracker';
import { trackSocialInteraction } from '@snowplow/browser-plugin-site-tracking';

trackPageView({}, ['sp1']); // Just to `sp1`

// OR to all trackers with some extra context!
trackPageView({
  title: 'My Title',
  context: [
    {
      schema: 'iglu:org.schema/WebPage/jsonschema/1-0-0',
      data: {
        keywords: ['tester'],
      },
    },
  ],
});

// Use your plugin track methods too
trackSocialInteraction({
  action: 'retweet',
  network: 'twitter',
  target: '1234',
});

Copyright and license

Licensed and distributed under the BSD 3-Clause License (An OSI Approved License).

Copyright (c) 2022 Snowplow Analytics Ltd, 2010 Anthon Pang.

All rights reserved.