Articles in this section

See more

Quick Start Guide for instrumenting React Mobile Applications

Amir Rozenberg Agent
  • Updated
Follow

Please refer to the complete instrumentation guide for a complete reference, release notes etc.

1. Install the SDK

Run the following command to add the package:

npm install @bluetriangle/react-native-btt-sdk

For iOS, install the native dependencies:

cd ios && pod install

2. Configure Your Site ID

Add the following snippet to your index.js / index.jsx / index.ts / index.tsx file:

import { BTTConfiguration, BTTOptions } from '@bluetriangle/react-native-btt-sdk';
const bttOptions = new BTTOptions();
BTTConfiguration.configure('<SITE_ID>', bttOptions);

3. Track Checkout Events

Use BTTTimer and PurchaseConfirmation to capture purchase data.

Brand Value Example 

import { BTTTimer, PurchaseConfirmation } from '@bluetriangle/react-native-btt-sdk';
const timer = new BTTTimer('Confirmation');
timer.startTimer();
const purchaseConfirmation = new PurchaseConfirmation.Builder()
 .setBrandValue(100.0)
 .build();
timer.stopTimer(purchaseConfirmation);

Cart + Order Example 

import { BTTTimer, PurchaseConfirmation } from '@bluetriangle/react-native-btt-sdk';
const timer = new BTTTimer('Confirmation');
timer.startTimer();
const purchaseConfirmation = new PurchaseConfirmation.Builder()
 .setCartValue(99.0)
 .setCartCount(2)
 .setCartCountCheckout(2)
 .setOrderNumber('ORD-123345')
 .build();
timer.stopTimer(purchaseConfirmation);

4. Enable Native View Tracking

Automated Screen Tracking (React Navigation)

If you use the React Navigation library, add two lines to your NavigationContainer:

import React from 'react';
import BTTNavigationContainerTracker from '@bluetriangle/react-native-btt-sdk';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
function App() {
 const navigationRef = useNavigationContainerRef();
 return (
   <NavigationContainer
     ref={navigationRef}
     onReady={() => {
       BTTNavigationContainerTracker.onContainerStateChange(navigationRef);
     }}
     onStateChange={async () => {
       BTTNavigationContainerTracker.onContainerStateChange(navigationRef);
     }}>
     {/* ... */}
   </NavigationContainer>
 );
}

To also track background/foreground transitions, add this to your app component:

AppState.addEventListener('change', state => {
 if (state === 'active') {
   BTTNavigationContainerTracker.onContainerStateChange(navigationRef);
 } else if (state === 'background') {
   BTTNavigationContainerTracker.applicationDidEnterBackground(navigationRef);
 }
});

Related articles

Comments

0 comments

Article is closed for comments.