Collecting data with Trackers and Webhooks

  1. Home
  2. Docs
  3. Collecting data with Trackers and Webhooks
  4. Trackers – collecting data from your own applications
  5. React Native Tracker
  6. Previous versions
  7. React Native Tracker v0 reference

React Native Tracker v0 reference

This documentation page is about a previous version of the React Native tracker. Go to the latest docs.

The Snowplow React Native Tracker is a module which imports the Native Snowplow iOS and Android trackers as native modules, available for use in React Native projects.

Getting Started

Installation

Install the tracker with:

npm install @snowplow/react-native-tracker --save
Code language: Bash (bash)

Quickstart Guide

Minimal setup – initialise the tracker and track a screen view:

import { createTracker } from '@snowplow/react-native-tracker'; const tracker = createTracker('namespace', { endpoint: 'my-endpoint.com', appId: 'my-app-id' }); tracker.trackScreenViewEvent({screenName: 'myScreenName'});
Code language: JavaScript (javascript)

Quick migration from 0.1.x

In the previous 0.1.x releases, initializing the tracker was done differently. As an example describing the API change for a quick migration to v0.2.0:

/* Previous API (v0.1.x) import Tracker from '@snowplow/react-native-tracker'; // (a) const initPromise = Tracker.initialize({ // (b) endpoint: 'my-endpoint.com', namespace: 'my-namespace', appId: 'my-app-id' }); initPromise // (c) .then(() => Tracker.trackScreenViewEvent({screenName: 'myScreenName'})); // (d) */ /* --- Vs --- */ /* Current API (v0.2.0) */ import { createTracker } from '@snowplow/react-native-tracker'; const tracker = createTracker('namespace', { endpoint: 'my-endpoint.com', appId: 'my-app-id' }); tracker.trackScreenViewEvent({screenName: 'myScreenName'});
Code language: JavaScript (javascript)

In short:

  • (a) The previous Tracker class has been removed. Instead of Tracker.initialize, use the createTracker function instead.
  • (b) The tracker namespace is now a required initialization parameter outside the tracker configuration object.
  • (c) In v0.2.0 there is no need to await tracker initialization, since async issues are now handled internally.
  • (d) The track.. methods are now properties of the tracker object instead of static class methods.

What’s next?

Automatic Tracking Features

Many of the automatic tracking options available on iOS and Android are also available in React Native – these can be enabled in the configuration passed to createTracker. For example, to set up tracking of lifecycle events, with the mobile context and session context enabled:

import { createTracker } from '@snowplow/react-native-tracker'; const tracker = createTracker('my-namespace', { endpoint: 'my-endpoint.com', appId: 'my-app-id', lifecycleEvents: true, platformContext: true, sessionContext: true });
Code language: JavaScript (javascript)

See the configuration section below for a full list of options.

Examples

Tracking custom events

Custom events may be tracked using the trackSelfDescribingEvent() method:

tracker.trackSelfDescribingEvent({ schema: 'iglu:com.acme/example/jsonschema/1-0-0', data: {someExampleField: 'Hello World'} });
Code language: JavaScript (javascript)

See Custom Event Tracking Section below for more detail.

Attaching Entities to events

All tracker methods take two arguments: A JSON of key-value pairs for the event’s properties, and an optional array of contexts, i.e. of self-describing JSONs to be attached as entities. For example:

tracker.trackScreenViewEvent( { screenName: 'myScreenName' }, [ { schema: 'iglu:com.acme/example_entity/jsonschema/1-0-0', data: {someOtherExampleField: 'Foo Bar Baz'} }, ] ); tracker.trackSelfDescribingEvent( { schema: 'iglu:com.acme/example_event/jsonschema/1-0-0', data: {someExampleField: 'Hello World'} }, [ { schema: 'iglu:com.acme/example_entity/jsonschema/1-0-0', data: {someOtherExampleField: 'Foo Bar Baz'} }, ] );
Code language: JavaScript (javascript)

An empty array is acceptable, which will attach no entities to the event.

Features

Configuration

Initialisation Options

createTracker() will instantiate an Emitter and Tracker instance of the native tracker in the app. It takes as arguments:

  • the tracker namespace
  • the tracker configuration object
const tracker = createTracker('my-namespace', { // required endpoint: 'my-endpoint.com', appId: 'my-app-id', // optional method: 'post', protocol: 'https', platformContext: true, base64Encoded: true, applicationContext: true, lifecycleEvents: true, screenContext: true, sessionContext: true, foregroundTimeout: 600, backgroundTimeout: 300, checkInterval: 15, installTracking: true } );
Code language: JavaScript (javascript)

Tracker configuration

Required properties

  • endpoint: (string) – The Snowplow collector endpoint – omit the protocol.
  • appId: (string) – The app ID. Used to identify the environment being tracked.

Optional properties

  • method: ('get' or 'post') – The HTTP method for requests. Default is 'post'.
  • protocol: ('http' or 'https') – The HTTP protocol for requests. Default is 'https'.
  • base64Encoded: (boolean) – Base64 encode custom events and contexts before sending. Default is true.
  • platformContext: (boolean) – Attach the platform context to all events – aka mobile context. The platform context contains operating system and device information, as well as the IDFV/IDFA values, if the app is configured to collect these. Default is true.
  • applicationContext: (boolean) – Attach the application context to all events. The application context contains app version and build number. Default is true.
  • screenContext: (boolean) – Attach the screen context to all events. The screen context contains information about the current and previous screen, along with a screen view id, which is incremented on every screen view event, and can be used to aggregate events to a screen view level in modeling. It is a similar concept to the page view id on web. Default is true.
  • sessionContext: (boolean) – Attach the client session context to all events. The client session context contains session ID and session index, which can be used to aggregate events to session level in modeling. This context also contains tracker-generated UUID for user identification. This UUID is generated on install of the app. Default is true.
  • foregroundTimeout: (integer) – Where sessionContext is enabled, configures the period (in seconds) of inactivity while the app is in the foreground before a new session (ie a new session ID) is created. Defaults to 600 (ten minutes).
  • backgroundTimeout: (integer) – Where sessionContext is enabled, configure the period (in seconds) of inactivity while the app is in the background before a new session (ie a new session ID) is created. Defaults to 300 (five minutes).
  • checkInterval: (integer) – Where sessionContext is enabled, configure the frequency (in seconds) with which the tracker performs a check for whether or not the foreground or background timeout has elapsed. Defaults to 15.
  • lifecycleEvents: (boolean) – Track app lifecycle events, such as foreground and background events. Default is false.
  • installTracking: (boolean) – Track app install events. Defaults is false.

Setting the Subject

The subject is a persistent object containing global data that applies to all events, such as a manually set userId. Set the subject data using the setSubjectData() method. All parameters are optional.

tracker.setSubjectData({ userId: 'my-user-id', screenWidth: 123, screenHeight: 456, colorDepth: 20, timezone: 'Europe/London', language: 'en', ipAddress: '123.45.67.89', useragent: '[some-user-agent-string]', networkUserId: '5d79770b-015b-4af8-8c91-b2ed6faf4b1e', domainUserId: '5d79770b-015b-4af8-8c91-b2ed6faf4b1e', viewportWidth: 123, viewportHeight: 456 });
Code language: JavaScript (javascript)

Subject properties

  • userId: (string) – Manually defined userId. Commonly used for user self-identification – for example after sign in. To unset the userid, pass a null value to this argument.
  • screenWidth: (integer) – Overwrites the dvce_screenwidth field. Must be accompanied by screenHeight.
  • screenHeight: (integer) – Overwrites the dvce_screenheight field. Must be accompanied by screenWidth.
  • viewportWidth: (integer) – Overwrites the br_viewwidth field. Must be accompanied by viewportHeight.
  • viewportHeight: (integer) – Overwrites the br_viewheight field. Must be accompanied by viewportWidth.
  • colorDepth: (integer) – Populates the br_colordepth field.
  • timezone: (string) – Overwrites the os_timezone field. Should contain a valid database timezone code.
  • language: (string) – Overwrites the br_lang field. Should contain a valid ISO standard language code.
  • ipAddress: (string) – Overwrites the user_ipaddress field. Should contain a valid IP address.
  • useragent: (string) – Overwrites the useragent field. Should be a valid useragent string.
  • networkUserId: (string) – Populates the network_userid field. Typically used to link native tracking to in-app browser events tracked using the javascript Normally one would retrieve the network userid from the browser and pass it to the app. Should contain a valid UUID4 string.
  • domainUserId: (string) – Populates the domain_userid field. Typically used to link native tracking to in-app browser events tracked using the javascript Normally one would retrieve the domain userid from the browser and pass it to the app. Should contain a valid UUID4 string.

Tracking Methods

Screen View Tracking

Track a screen view with the trackScreenViewEvent() method. Screen view events will auotomatically be populated with a screen view ID (UUID4), which increments each time a new screen view event fires. This id is also attached to the screen view context if enabled, which enables users to tie screen view events to all other events which happen on the screen, and to aggregate data per screen view.

tracker.trackScreenViewEvent({ screenName: 'my-screen', screenType: 'my-type', transitionType: 'my-transition' });
Code language: JavaScript (javascript)

Required properties

  • screenName: (string) – Developer-defined screen name.

Optional properties

  • screenType: (string) – Developer-defined screen type.
  • transitionType: (string) – Developer-defined transition type.

To attach custom contexts, pass a second argument to the function, containing an array of self-describing JSON.

tracker.trackScreenViewEvent( {screenName: 'myScreenName'}, [{ schema: 'iglu:com.acme/example_entity/jsonschema/1-0-0', data: {someExampleField: 'Foo Bar Baz'} }] );
Code language: JavaScript (javascript)

Custom event tracking

Track Custom events using the trackSelfDescribingEvent() method.

tracker.trackSelfDescribingEvent({ schema: 'iglu:com.acme/example/jsonschema/1-0-0', data: {someExampleField: 'Hello World'} });
Code language: JavaScript (javascript)

Required properties:

  • schema: (string) – A valid Iglu schema path. This must point to the location of the custom event’s schema, of the format: iglu:{vendor}/{name}/{format}/{version}.
  • data: (object) – The custom data for your event. This data must conform to the schema specified in the schema argument, or the event will fail validation and land in bad rows.

To attach custom contexts, pass a second argument to the function, containing an array of self-describing JSON.

tracker.trackSelfDescribingEvent( { schema: 'iglu:com.acme/example_event/jsonschema/1-0-0', data: {someExampleField: 'Hello World'} }, [{ schema: 'iglu:com.acme/example_entity/jsonschema/1-0-0', data: {someOtherExampleField: 'Foo Bar Baz'} }] );
Code language: JavaScript (javascript)

Structured event tracking

Track a structured event with the trackStructuredEvent() method.

tracker.trackStructuredEvent({ category: 'my-category', action: 'my-action', label: 'my-label', property: 'my-property', value: 50.00 });
Code language: JavaScript (javascript)

Required properties

  • category: (string) – Structured event category.
  • action: (string) – Structured event action.

Optional properties

  • label: (string) – Structured event label.
  • property: (string) – Structured event property.
  • value: (number) – Structured event value.

To attach custom contexts, pass a second argument to the function, containing an array of self-describing JSON.

tracker.trackStructuredEvent( { category: 'my-category', action: 'my-action', label: 'my-label', property: 'my-property', value: 50.00 }, [{ schema: 'iglu:com.acme/example_entity/jsonschema/1-0-0', data: {someOtherExampleField: 'Foo Bar Baz'} }] );
Code language: JavaScript (javascript)

Page View Tracking

Track a page view event with the trackPageViewEvent() method. Typically this is uncommon in apps, but is sometimes used where fitting data into an existing page views model is required. To track page views from an in-app browser, it is advisable to use the javascript tracker in-browser.

tracker.trackPageViewEvent({ pageUrl: 'https://my-url.com', pageTitle: 'My page title', pageReferrer: 'http://some-other-url.com' });
Code language: JavaScript (javascript)

Required properties

  • pageUrl: (string) – Page Url for the page view event. Must be a vaild url.

Optional properties

  • pageTitle: (string) – Page Title for the page view event.
  • pageReferrer: (string) – Url for the referring page to the page view event. Must be a vaild url.

Data Modelling

Important features for Data Modelling

For most use cases, the recommended setup is to enable at least the session context, screen context, and platform context. These will enable most of the common information in modeling mobile events in a standard way.

createTracker('my-namespace', { endpoint: 'my-endpoint.com', appId: 'my-app-id', platformContext: true, screenContext: true, sessionContext: true });
Code language: JavaScript (javascript)

User identification

The session context contains a UUID format userid, which is generated on app install. This can be used to easily identify individual installations of the app. If it is necessary to handle cases where users share an app, or uninstall/reinstall an app, this ID should be supplemented with additional logic.

The setSubjectData() method offers the ability to set or unset a custom userid. This is typically used to track logged in users, and can be used to handle cases of multiple users. Normally this self-identified user id is treated as the primary identifier, and modeling logic stitches across the other ids to give this one priority.

The platform context will contain the device and advertising identifiers, if the app has permission to track this.

Where an app contains an embedded browser, typically in-app events are tracked using the Javascript tracker, and cookie values are passed to the application. The setSubjectData() method offers the ability to set these fields.

Aggregation

To follow a similar model of aggregation to that of a web model, one can:

  • aggregate to screen view level using the screen view ID from the screen view context
  • aggregate to the session level the session id from the client session context
  • aggregate to a user level the user_id from the client session context.

The screen view and session context is attached to all events and so these can be used to attribute events to their screen views and sessions.

These contexts also contain identifiers for the previous screens and sessions, to facilitate easier user journey mapping.

The session context contains the first event id for the session in order to make it easier to identify the start time for a given session.

See also the official Snowplow mobile data model!

If you’d like to learn more about Snowplow Insights you can book a demo with our team, or if you’d prefer, you can try Snowplow technology for yourself quickly and easily.