0% found this document useful (0 votes)

32 views9 pages

SnowPlow Tracker Setup React Guide v1.0

This document provides a step-by-step guide to configure the SnowPlow web tracker for a React application, including installation, setup, and tracking events such as page views and link clicks. Key steps include installing the browser-tracker package, configuring the tracker, enabling activity tracking, and adding context for events. Additionally, it covers optional tracking features and testing the implementation using the Snowplow Chrome Extension.

Uploaded by

bee

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

32 views9 pages

SnowPlow Tracker Setup React Guide v1.0

Uploaded by

bee

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 9

This document aims to provide the step by

step guide to configure web tracker for a

react application.

SnowPlow
Web Tracker
Setup Guide
SkillCamper

For a React Application

Contents
Setup your tracking in a React App ......................................................................................................... 2
Step 1: Install browser-tracker package .............................................................................................. 2
Step 2: Import the tracker package .................................................................................................... 2
Step 3: Configure the tracker .............................................................................................................. 2
Tracking Events ........................................................................................................................................ 3
Pageviews and Page Pings ................................................................................................................... 3
Step 1: Enable Activity Tracking ...................................................................................................... 3
Step 2: Enable Pageview Tracking ................................................................................................... 3
Step 3: Add Tracking to App ............................................................................................................ 4
Optional Tracking ................................................................................................................................ 4
Step 1: Install Plugins ...................................................................................................................... 4
Step 2: Import Plugins ..................................................................................................................... 5
Step 3: Enable Tracking ................................................................................................................... 5
Adding Context........................................................................................................................................ 5
Step 1: Enable predefined entities...................................................................................................... 6
Testing ..................................................................................................................................................... 6
Step 1: Installation .............................................................................................................................. 6
Step 2: Check your data ...................................................................................................................... 6

Version History:

• Version: V1.0, Dated: 20-08-2024

Setup your tracking in a React App

❗❗NOTE: react-router-dom is required to implement tracking in a react app

Step 1: Install browser-tracker package

Install the @snowplow/browser-tracker via npm by running:

npm install @snowplow/browser-tracker

Step 2: Import the tracker package

In your src folder, create a file called tracker.js.

Import the browser tracker into tracker.js with the below snippet:

import React from 'react';

import { newTracker, trackPageView, enableActivityTracking } from "@snowplow/browser-
tracker";

Step 3: Configure the tracker

Create the tracker in tracker.js with the with the following arguments. This creates an
instance of a basic tracker without any additional context.

• Tracker Name: 'sp'

• Collector Url: '{{Url for Collector}}'

let tracker = newTracker('sp', '{{Url for Collector}}')

In addition to the basic tracker, add the below optional arguments to the tracker to make
use of some of Snowplow’s more advanced features.

• appId: Identify events that occur on different applications

• platform: Identify the platform the event occurred on, in this case web
• cookieSameSite: Protects cookies from being accessed by third party domains

let tracker = newTracker('sp', '{{Url for Collector}}', {

appId: 'appId',
platform: 'web',
cookieSameSite: 'Lax',
});
Tracking Events
The trackers create data on user actions at a specific point in time. For example:

• Loading a web page

• Clicking a link
• Submitting a form

A number of tracking events are available out of the box. These include, but aren’t limited
to:

• Page views
• Heartbeats (Page Pings)
• Link clicks
• HTML form actions

Pageviews and Page Pings

In this section, we will implement page views and page pings.

Step 1: Enable Activity Tracking

First we will enable activity tracking to collect page ping events. This will allow us to monitor
engagement and record how a user digests content on the page over time.

• minimumVisitLength : The number of seconds from page load before the first page
ping occurs
• heartbeatDelay: The number of seconds between page pings

Add the snippet to your tracker.js file below the tracker instance.

enableActivityTracking({
minimumVisitLength: 5,
heartbeatDelay: 10,
});

Step 2: Enable Pageview Tracking

To track page views, we will first define a function called useLocationChange(). This will take
advantage of useEffect, the useLocation hook from react-router-dom and
the trackPageView function from browser-tracker.

• useLocation(): returns an object, location, describing the current page

• useEffect: Exececutes a function whenever location changes. In this
case trackPageView()
• trackPageView(): Sends a Snowplow page view event to the collector URL

Add the below snippet to tracker.js.

const useLocationChange = () => {

const location = useLocation();
React.useEffect(() => {
trackPageView();
}, [location]);
};

export { tracker, useLocationChange };

Step 3: Add Tracking to App

Import useLocationChange to your App.js file.

import { useLocationChange } from './tracker';

Add the useLocationChange() method to your App() function in App.js.

function App() {
useLocationChange();
...
}
export default App;

Optional Tracking

In addition to page pings and pageviews, you can enable link and form tracking. This won’t
be used in the model in later steps but can be used in your own analysis.

• Link Tracking - Captures the link’s href by default as well as the id, class and target of
the link
• Form Tracking - Tracks an event when a user focuses, changes or submits a form

JavascriptReactAngularGTM
Step 1: Install Plugins

First install the plugins via npm:

npm install @snowplow/browser-plugin-link-click-tracking

npm install @snowplow/browser-plugin-form-tracking
Step 2: Import Plugins

Next import the plugins to your tracker.js file.

import { LinkClickTrackingPlugin, enableLinkClickTracking } from '@snowplow/browser-plugin-

link-click-tracking';
import { FormTrackingPlugin, enableFormTracking } from '@snowplow/browser-plugin-form-
tracking';

Add the two plugins to your tracker instance.

let tracker = newTracker('sp', '{{Url for Collector}}', {

plugins: [LinkClickTrackingPlugin(), FormTrackingPlugin()],
});

Step 3: Enable Tracking

Add the enableLinkClickTracking() and enableFormTracking() methods to the useEffect hook

in tracker.js.

const useLocationChange = () => {

const location = useLocation();
React.useEffect(() => {
enableLinkClickTracking() // Enable link click tracking here
enableFormTracking() // Enable form tracking here
trackPageView();
}, [location]);
};

Adding Context
Whilst the tracking set-up provides event data on user actions at a specific point in
time, context describes the setting in which an event takes place. To describe the context of
an event, we need to define and capture individual entities. For example:

• The user performing an action

• The web page the action occurred on
• A product that has been interacted with

Together, these entities make up the context of an event.

Similar to the predefined events, a number of entities are available to implement out of the
box including:
• webPage Entity - Adds the Pageview ID
• session Entity - Information about the user session
• performanceTiming Entity - Calculate page performance metrics
• geolocation Entity - Information on the users location

Step 1: Enable predefined entities

The webPage entity is enabled by default in the JavaScript tracker. This is required for
modeling your data using the dbt-web-model.

Enable the context by including the below context options in your tracker creation.

let tracker = newTracker('sp', '{{Url for Collector}}', {

...
contexts: {
webPage: true
}
...
});

Each event sent with this tracker will now contain the data from each of these entities.

Testing
The Snowplow Chrome Extension can be used to ensure the event was emitted correctly but the
browser extension does not check that the event was processed correctly.

Step 1: Installation
Install the Snowplow Chrome Extension, you may need to restart your browser.

Step 2: Check your data

Open up devtools (F12) and navigate to the Snowplow extension. You should see a list of Pageview
and Page Ping events start to form as you interact with your site.
Click on an event to get a breakdown of the data being captured.