SnowPlow Tracker Setup React Guide v1.0
SnowPlow Tracker Setup React Guide v1.0
SnowPlow
Web Tracker
Setup Guide
SkillCamper
Version History:
Import the browser tracker into tracker.js with the below snippet:
Create the tracker in tracker.js with the with the following arguments. This creates an
instance of a basic tracker without any additional context.
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.
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
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,
});
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.
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
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:
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
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.
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.