Initialization

This section outlines the steps to initialize the AppTrove React Native SDK in your React Native project, enabling tracking of user interactions, attribution, and campaign analytics. Initialization involves retrieving your app token from the Trackier MMP Panel and configuring the SDK with the token and environment.

Prerequisites

• AppTrove React Native SDK installed in your project
• A Trackier MMP account with access to the Trackier Panel
• React Native 0.60 or later
• Basic knowledge of JavaScript and React Native development

Retrieve Your App Token

To initialize the AppTrove SDK, you need an app token (SDK key) from the Trackier Mobile Marketing Platform (MMP) Panel.

Steps to Retrieve the App Token

1. Log in to your Trackier Panel.
2. Select your application from the Dashboard.
3. Navigate to SDK Integration via the left-side navigation menu.
4. Copy the SDK Key to use as the app_token.

Initialize the SDK

After installing the SDK, initialize it by configuring the TrackierConfig object with your app token and environment in your React Native application.

Step 1: Import the SDK

Add the following import statement at the top of your JavaScript file (e.g., App.js):

import { TrackierConfig, TrackierSDK } from 'react-native-trackier';

Step 2: Add Initialization Code

Add the following code to initialize the SDK in your App.js or main application component. Replace the placeholder app token with the one retrieved from the Trackier Panel.

App.js

import React from 'react';
import { TrackierConfig, TrackierSDK } from 'react-native-trackier';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  // Initialize the SDK
  const trackierConfig = new TrackierConfig("xxxx-xx-4505-bc8b-xx", TrackierConfig.EnvironmentDevelopment);
  TrackierSDK.initialize(trackierConfig);

  return (
    <View style={styles.container}>
      <Text>AppTrove React Native SDK Initialized</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Initialize with Apple Ads Token (iOS)

For enhanced tracking on iOS, you can include Apple Ads token initialization:

App.js

import React, { useEffect } from 'react';
import { TrackierConfig, TrackierSDK } from 'react-native-trackier';
import { getAttributionToken } from 'react-native-attribution-token';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  useEffect(() => {
    const initializeSDK = async () => {
      // Get Apple Ads token before initializing SDK
      try {
        const appleAdsToken = await getAttributionToken();
        if (appleAdsToken) {
          TrackierSDK.updateAppleAdsToken(appleAdsToken);
        }
      } catch (error) {
        console.log('Error getting Apple Ads token:', error);
      }
      
      // Initialize the SDK
      const trackierConfig = new TrackierConfig("xxxx-xx-4505-bc8b-xx", TrackierConfig.EnvironmentDevelopment);
      TrackierSDK.initialize(trackierConfig);
    };

    initializeSDK();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Trackier React Native SDK Initialized</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

note

To use Apple Ads token functionality, first install the react-native-attribution-token library:

npm install react-native-attribution-token

Parameters

• App Token: The unique SDK key retrieved from the Trackier Panel (e.g., xxxx-xx-4505-bc8b-xx).
• Environment: Set to one of the following values based on your deployment stage:
  • TrackierConfig.EnvironmentTesting
  • TrackierConfig.EnvironmentDevelopment
  • TrackierConfig.EnvironmentProduction

Step 3: Verify Initialization

1. Run your React Native project using npm start.
2. Test on an Android or iOS device/emulator to ensure the SDK initializes without errors.
3. Check the console logs for any initialization-related messages (if debug logging is enabled).

Expected Outcome

The SDK will initialize when the application starts, enabling tracking capabilities. You can verify initialization by testing tracking features like events or checking the Trackier Panel for data.

Best Practices

• Secure App Token: Store the app token securely (e.g., in a configuration file or environment variables) and avoid hardcoding it in source code.
• Choose the Correct Environment: Use EnvironmentDevelopment or EnvironmentTesting for testing and EnvironmentProduction for live apps to avoid mixing test and production data.
• Initialize Early: Initialize the SDK as early as possible in the app lifecycle (e.g., in the main App.js component) to ensure all events are tracked.
• Validate Initialization: Test initialization in a development environment and verify that the app token is correctly recognized in the Trackier Panel.
• Use Version Control: Commit initialization code to version control to track changes and facilitate collaboration.

Troubleshooting

• App Token Invalid:
  • Verify the app token is correctly copied from the Trackier Panel without extra spaces or characters.
  • Ensure you're using the token for the correct application in the Trackier Panel.
• Initialization Fails:
  • Check the console logs for errors related to TrackierSDK.initialize.
  • Confirm the SDK package is correctly installed in node_modules/trackier/react-native-sdk.
• Environment Issues:
  • Ensure the environment parameter (EnvironmentDevelopment, EnvironmentProduction, or EnvironmentTesting) matches your deployment stage. For further assistance, refer to the Trackier Documentation Portal or contact Trackier support at support@trackier.com.