Getting Started

! This library is currently still using a temporary package @q4/snowplow.

• create .npmrc file containing the following

registry=https://registry.npmjs.org/
scope=q4
@q4:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=<NPM TOKEN>

• add "@q4/snowplow": "X.X.X" to the package.json as a dependency

How to contribute?

Contributions welcome! This is how you can contribute and test the package:

1. Make the updates in the local package q4mobile/snowplow. Run npm link to prepare the package to run locally.
2. Open the repository q4mobile/snowplow-schemas/demo and link to the local package with npm link q4mobile/snowplow

Changelog

View changes here

Default usage of the package:

import { Q4Snowplow } from '@q4/snowplow';

Q4Snowplow.init(config.snowplow.trackerId, config.snowplow.trackerUrl);

// Add product info
Q4Snowplow.setProductContext({ productId: 'EP', productDomain: 'attendee', productVersion: 'v4.10.0' });

// Add a user info
Q4Snowplow.setUserEmail('[email protected]');

// Create and update a custom context (persistent data sent with all events)
Q4Snowplow.createActiveContext('iglu:com.q4inc/event-entity/jsonschema/1-0-2');
Q4Snowplow.setActiveContext({ meetingId: '654321', eventStatus: 'started' });

// Track a pageview
Q4Snowplow.trackPageView();

// Dispatch an event
Q4Snowplow.trackEvent('iglu:com.q4inc/event-registration-success/jsonschema/1-0-0', { registrationType: 'attendee' });

How to add a new event?

1. Create a new Schema URL.
2. Call the event with: Q4Snowplow.trackEvent('{new schema url}', {registrationType: 'attendee'});

How to update the ProductContext, UserContext or ActiveContext? (Entity that is persistent across all events)

1. Create a new Schema URL.
2. Call the event with: Q4Snowplow.createActiveContext('{new schema url}');
3. Add context data with: Q4Snowplow.setActiveContext({ meetingId: '654321', eventStatus: 'started' });

How to add a Plugin?

Snowplow has a large list of Plugins. Which allow you to automatically collect a large amount of data (+130 possible data points).

Below is an example of the Media Tracking plugin

Plugin details at: Media Tracking.

Install with:

npm install @snowplow/browser-plugin-form-tracking

Add the following code to the file with the tracker:

import { MediaTrackingPlugin, enableMediaTracking } from '@snowplow/browser-plugin-media-tracking';

Q4Snowplow.addPlugin({ plugin: MediaTrackingPlugin() });
enableMediaTracking({ id: 'q4-ep-react-player' });

// Automatically track video control events, such as play, pause, volume, playback speed, etc.
<ReactPlayer id="q4-ep-react-player" url="... video url..." controls />;