Quick Start Guide for instrumenting React Mobile Applications

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

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>
  );
}