Setting up Amplitude with React Native involves several steps. Amplitude is an analytics tool that helps track user events and behaviors within your application. This guide will walk you through integrating Amplitude in a React Native project.

Step-by-Step Guide to Set Up Amplitude with React Native

Prerequisites:

• A working React Native environment (Node.js, npm, or yarn installed).

• A project already initialized with React Native.

• An Amplitude account. You can sign up at Amplitude.

1. Install the Amplitude SDK

Amplitude provides an SDK for tracking analytics within React Native apps. This SDK will allow you to send event data from your app to the Amplitude dashboard.

Step 1.1: Install the Amplitude React Native package

First, you'll need to install the Amplitude SDK.

Use either npm or yarn to install the package:

npm install @amplitude/analytics-react-native

or

yarn add @amplitude/analytics-react-native

Step 1.2: Link Native Modules (if needed)

If you’re using React Native version below 0.60, you will need to link the Amplitude package manually. For React Native 0.60 and above, the package should auto-link.

react-native link @amplitude/analytics-react-native

2. Configure Amplitude in the App

Now, you need to initialize Amplitude with your API key.

Step 2.1: Get your Amplitude API Key

• Go to the Amplitude dashboard, and log in.

• Create a new project if you haven’t already.

• Once the project is created, navigate to Settings and grab the API Key.

Step 2.2: Initialize Amplitude in the React Native app

In your main component (e.g., App.js), you need to initialize Amplitude with the API key.

// Import Amplitude
import { Amplitude } from '@amplitude/analytics-react-native';
// Initialize Amplitude in the app
Amplitude.init('YOUR_API_KEY');
export default function App() {
  return (
    // Your app code
  );
}

Make sure to replace 'YOUR_API_KEY' with the actual API key you copied from Amplitude.

3. Track Events

Once Amplitude is initialized, you can start tracking events in your app. To track an event, use the track method provided by the Amplitude SDK.

Step 3.1: Track a Basic Event

You can track any event with a name to identify user actions:

Amplitude.track('Event Name');

For example, if you want to track when a user signs up, you can add an event like this:

Amplitude.track('User Signed Up');

Step 3.2: Track Events with Properties

Sometimes, you may want to send additional data with the event, like a user’s ID or the screen they are on. You can do this by passing a second argument with event properties.

Amplitude.track('User Signed Up', {   userId: '12345',   plan: 'Pro', });

4. Set User Properties

Amplitude also allows you to set user properties, which help in analyzing user segments based on attributes (like age, country, etc.).

Step 4.1: Set User Properties

Amplitude.setUserProperties({   age: 28,   country: 'USA', });

Step 4.2: Identify Specific Users

If you want to associate specific events or user properties with a specific user, you can set the user ID.

Amplitude.setUserId('12345');

5. Testing the Setup

Now that you've integrated Amplitude into your React Native app, you should test it to ensure everything works correctly.

Step 5.1: Run the App

Run your React Native app on either an emulator or a physical device:

npm run android

or

npm run ios

Step 5.2: Trigger Events

Perform actions in your app that should trigger the events you set up, like signing up or performing other user actions.

Step 5.3: Verify in Amplitude

Go back to your Amplitude dashboard, and navigate to the Events section to see if the events are being captured. The events should appear within a few seconds or minutes after they're triggered in your app.

6. (Optional) Advanced Setup

Amplitude offers advanced features like session tracking, user cohorts, and more. Here are a few additional steps for advanced use cases.

Step 6.1: Enable Automatic Session Tracking

By default, Amplitude will track user sessions, but if you want to customize session timing, you can adjust settings in the Amplitude dashboard.

Step 6.2: Set up Revenue Tracking

Amplitude supports revenue tracking if you want to track user purchases.

Amplitude.logRevenue(5.99, 1, 'product_123');

Here, 5.99 is the price, 1 is the quantity, and 'product_123' is the product identifier.

7. Error Handling & Debugging

Sometimes, you might encounter issues while integrating Amplitude. The SDK comes with built-in error handling, but here are a few things you can do to troubleshoot.

Step 7.1: Use Debug Logging

To enable debug logs, which can be helpful during development:

Amplitude.init('YOUR_API_KEY', { logLevel: 'DEBUG' });

This will print out more detailed logs to the console, helping you debug any issues with event tracking.

8. Deploy Your App

Once you have confirmed that everything works correctly, you can deploy your app to production. All events tracked in the production app will also appear in your Amplitude dashboard.

Conclusion

That’s it! You’ve successfully integrated Amplitude into your React Native app. With Amplitude, you can now track user events and gain valuable insights into how users are interacting with your app. This guide covered the basics of setting up and using Amplitude. You can explore more advanced features like cohort analysis, A/B testing, and retention analysis on the Amplitude dashboard.

Integrating Mixpanel instead? Check how to integrate Mixpanel with React Native.