Overview

The Nudge React Native Package allows you to integrate the core analytics and experience triggering nudge package provided by Nudge into your React Native application. With this package, you can engage your users with interactive games and promotions. Nudge Core is the required repository which you would need to integrate with

To integrate with Nudge Core, you need to first install thenudge-core-mobilepackage into your React Native project. Find the latest version of nudge-core-mobile here.

npm install nudge-core-mobile --save

Once you install the nudge-core-mobile package, follow the steps below to complete the integration.

For iOS: Do not forget to run the pod installcommand in the ios folder

Create a Nudge Account

To get started with the Nudge React Native Package, follow these steps:

Navigate to Nudge's official website to explore the in-app experiences you can enable in your app.
Register your product on our website Nudge.
From the Nudge website, you will obtain a unique secret key. Use this secret key while initializing the package.

Usage

After adding the Nudge Core package to your project's dependencies in the package.json file, you need to run React Native pub get command to fetch the package and make it accessible in your React Native project. This command will download the package and its dependencies, allowing you to import and utilize the Nudge package in your code.

To initialize the NudgeCore class with a reusable variable name and access all its functions through it, follow these steps:

Import the NudgeCore package into your Dart file:

import Nudge from 'nudge-core-mobile';

Create an instance of the Nudge class with your desired variable name and add:

token (required): The secret key obtained from the Nudge website, used for authentication.

var nudge = Nudge(<TOKEN>);

Step 1: Wrapping the app in NudgeProvider

The <NudgeProvider> is a React Native component that should be wrapped around the main code of your application. It enables integration with the Nudge package and by default requires one parameter: nudge

Parameters

app (required): An instance of the Nudge core initialized with your unique token. The Nudge core manages your application's integration with the Nudge platform.
Example

  <NudgeProvider app={nudge}>
    ..
    ..
    ..
  </NudgeProvider>

Step 2: Initializing session

Whenever a distinct user ID which is used to identify users at the client's end is defined, call the initSession function to initialize the user session.

  await nudge.initSession('CLIENT_IDENTIFIABLE_USER_ID');

You can also send more user attributes along with the user ID for making segments of audiences.

  await nudge.initSession('CLIENT_IDENTIFIABLE_USER_ID',
                  {
                  	"name": "Client User 1",
                  	"age": 27,
                  	"gender": "M",
                  	"country":"US",
                  });

Step 3: Start Tracking Events

Make sure you have initialized the session before tracking
To track an event, simply call

await nudge.track('EVENT_TYPE');

You can also add event properties for analytics and .making segments of users based on the properties of their events performed for custom audience experiences.

await nudge.track('EVENT_TYPE',
                  properties: <String, dynamic>{
                  "product": "Fortune Cookies",
                  "quantity": 5,
                  "countryOfExport":"US",
                  });

Step 4: IDing Components

Add a testID to your React Native components to make them identifiable and listable on our Nudge Dashboard.

<Text testID="mainHeading" style={styles.mainHeading}>Checkout</Text>

Wrap the components into Views which do not support testID

<View testID="checkout">
  <Button onPress={handleCheckout}>Checkout</Button>
 </View>

React Native: Core SDK Integration