React Native Mobile Application Implementation Guide¶

Info

As of version 1.1.4, GPS geo-location data is not captured by default and will only be derived from the IP address. You can set the geo-location enable by the trackerConfig.setGeoLocationEnabled(true). To capture GPS geo-location data (requires permission grant by user).

Warning

Do not reshare this document with anyone unless they need to implement WOGAA tracking on their mobile applications.

Latest Version¶

The latest version of WOGAA Mobile Trackers is 2.1.2.

Overview¶

Install via npm.
Implement codes for React Native tracking.
Check React Native implementation
Verification of React Native implementation

Info

React Native Tracker uses native iOS and Android Tracker underneath.

Step 1. Install via npm¶

Install via NPM¶

NPM is an open source package manager for the JavaScript development.

Info

npm will install React Native Tracker under node_modules/react-native-tracker

The steps to install are as follows:

npm install https://trackers.wogaa.sg/react-native/Tracker-2.1.2.tar.gz
react-native link (React Native < 0.60)
Update Podfile and App level Gradle build. See examples below.

Podfile Example

source 'https://github.com/wogaa/Specs.git'

target 'MasterDetailExampleApp' do
  pod 'RNTracker', :path => '../node_modules/react-native-tracker' # React Native < 0.60
  use_frameworks! # or use_modular_headers! # React Native < 0.60
end

Gradle Example

  repositories { 
    maven { 
      url "https://trackers.wogaa.sg/android" 
    } 
  }

Step 2. Implement codes for React Native Tracking¶

In your App.js class,

Add import Tracker from 'react-native-tracker';.
Add the following codes when your application starts for the appropriate environment.

For Staging

Tracker.start("STAGING");

For Production

Tracker.start("PRODUCTION");

Add track screenview for each view.¶

Track ScreenView

  componentDidMount() { 
    Tracker.trackScreenView('ScreenName'); 
  }

Warning

Please update your Tracker.trackScreenView to pass only the screen name as the example above. The function below had been removed because the tracker will auto generate the screen id as uuid. react-native Tracker.trackScreenView('ScreenId', 'ScreenName');

Step 3. Check React Native Implementation¶

Method 1: Manually check the logs¶

Run your application using Xcode or Android Studio and verify the platform logs below

Example (iOS Tracker)¶

[WOGAA Tracker] Started (2.1.2)

Info

[WOGAA Tracker] Started (2.1.2) shows tracker has started and the version number of the tracker

Example (Android Tracker)¶

I/WOGAATracker: Started (2.1.2)

Info

I/WOGAATracker: Started (2.1.2) shows tracker has started and the version number of the tracker

Method 2: Use tool to check if data is being received in your environment(s).¶

Info

- Staging received events will take about 10 seconds to process. (Last 24 hours)

- Production received events will take about 1 day to process.

Step 4. Verification of React Native Implementation¶

A verification email will be sent once we have successfully received data from your mobile application in production server.

It may take up to 7 working days for the verification. Please let us know if there is any issues with regards to this via support@wogaa.gov.sg

Reference Implementation¶

https://github.com/wogaa/mobile-tracker-examples/tree/main/react-native