📱Quickstart Guide for React Native Apps

CustomerGlu enables growth teams to run gamified programs in minutes using a low-code builder. This guide will help you integrate the CustomerGlu React Native SDK into your App.

Pre-Requisites

• OpenJDK 17

• Android Studio

• Xcode

Recipe

This Quickstart Guide will walk you through an existing implementation of the CustomerGlu React Native SDK using CustomerGlu Sandbox App. You'd learn the fundamentals of using CustomerGlu React Native SDK in your existing app project.

1. Set up the Sandbox app in your IDE

2. Identify and authenticate your Users

3. Load a campaign via Campaign ID in the app

4. Load a campaign with Dynamic Nudges

5. Handling Taps and Clicks(Navigation and Analytics)

🛠️ Setup the Sandbox App

SandboxApp

Start by cloning our pre-configured Demo App with React Native SDK

git clone https://github.com/customerglu/React-Native-Sandbox-App.git

1. Update the API Key in the Sandbox App

Open the Sandbox App in Visual Studio Code or any relevant editor.

Android

• Open the Android Manifest file located at /android/app/src/main/AndroidManifest.xml

• Add your API Key in <meta-data> of the AndroidManifest.xml file like this:

<meta-data android:name="CUSTOMERGLU_API_KEY"  
    android:value="YOUR_API_KEY" />

How to find your CustomerGlu API Key?

iOS

Open the Android Manifest file path -ios/app_name/Info.plist Add the following key to the Info.plist file:

<key>CUSTOMERGLU_WRITE_KEY</key>
<string>YOUR_WRITE_KEY</string>

How to find your CustomerGlu API Key?

2. Install Dependencies for Sandbox App

Run the following command in the terminal to install dependencies

npm install

3. Launch the Emulator and build the App

Launch the Emulator via Android Studio or another emulator and launch the app using the following command

Android

npx react-native run-android

iOS

npx react-native run-ios

4. Allow Permission and Verify App launch

After launching the app, it'll ask for permission to send notifications, please allow it to test Firebase Cloud Messaging based Push Notifications.

You're all set to launch & test CustomerGlu campaigns now! 🎉

🔍 Identify and Authenticate your Users

All campaigns within CustomerGlu are activated for a unique User ID. This User ID is provided during User Registration via the SDK in the app code.

Register the User on the Sandbox app launch

CustomerGlu React Native SDK provides the method registerUser(userId: string) that authenticates and identifies a specific user so that campaigns can be activated for the eligible users. Eligibility via segmentation is also checked at this step on the server side.

To see the sample implementation, open /src/RegisterScreen.js and then check for handleSubmitButton() function declaration, and the registerUser() function inside the block.

We recommend using the registerUser() call at the start of each session.

🎨 Load a campaign via Campaign ID in the app

CustomerGlu React Native SDK provides 2 methods to launch the campaign experiences inside the app:

1. Load a Campaign via Campaign ID by clicking a button or any other event in the app.

2. Load a Campaign via a Dynamic Entrypoint attached to the campaign.

Load a Campaign using a Banner or Button

CustomerGlu React Native SDK provides the method loadCGCampaign(campaignID: string) to start loading a launched campaign from the dashboard with campaignId.

1. Launch a Campaign

For test purposes, you can launch any campaign via the CustomerGlu dashboard.

2. Copy the Campaign ID

After launching the campaign from dashboard copy the campaignId of that campaign

3. Update the `campaignId` in the Sandbox App

• Open file /src/screen/HomeScreen.jsx

• Search for the loadCGCampaign(“”) function call inside the return block of the HomeScreen component, and update it with the campaignID

4. Test the Campaign

• Go back to the emulator and click on the banner present in the HomeScreen

• The campaign should now load in a new web view.

Great going! We can now see the created campaign in the sandbox App 🚀

Load a campaign with Dynamic Nudges

CustomerGlu can launch spontaneous campaigns using native entry points that are dynamically mounted at runtime.

1. Launch a Campaign

For test purposes, start creating any new campaign.

2. Configure the Nudge

• In the campaign creation wizard, navigate to the Nudges section

• Click on + ADD ANOTHER NUDGE

• Set the channel to App and the type of Nudge to Floating

• Configure the Nudge with a background image and specify the on-click behavior to navigate to a campaign

3. Set Trigger Criteria

• Define the screens where you want to show the Nudge.

• For Android, select HomeScreen as the allowed screen that is configured for the Sandbox App. If the option is not present, ddd a Custom Screen with the name HomeScreen

4. Handle the Screen Name in the code

In HomeScreen.jsx, use setCGScreenName("HomeScreen") during app load

useFocusEffect(
    React.useCallback(() => {
        setCGScreenName("HomeScreen");
    }, [])
);

We can use setCGScreenName("ScreenName") in the app's router code or screen initialisation code to enable Dynamic Nudges

5. Testing the Dynamic Nudge

• Relaunch the Emulator

• In the HomeScreen you are able to see the Floating nudge

Well Done! Now we can see the Dynamic Nudges in the Sandbox App 🏆

Handling Navigation and Analytics

CustomerGlu React Native SDK emits various events when users interact with CTAs/Activities. These events can be handled within the app code to trigger navigation, analytics, or custom workflows.

Handling Navigation on Activity Card or Button Tap

1. Observe Deeplink Events for Navigation

   • In the Metro server terminal, you might see

1. Edit `HomeScreen.jsx`

   • Locate the useEffect function and add the event listener:

const eventdeeplink = RncustomergluManagerEmitter.addListener(
    'CUSTOMERGLU_DEEPLINK_EVENT',
    (reminder) => {
        if (Platform.OS === 'ios') {
            reminder = reminder.data;
        }
        console.log('CUSTOMERGLU_DEEPLINK_EVENT...Handle your Redirection logic', reminder);
        navigation.navigate("Profile");
    }
);

1. Capture Analytics Events

   • For Capture Analytics add another listener for analytics

const eventanalytics = RncustomergluManagerEmitter.addListener(
    'CUSTOMERGLU_ANALYTICS_EVENT',
    (reminder) => console.log('CUSTOMERGLU_ANALYTICS_EVENT...', reminder)
);

Congratulations! You finished setting up the CustomerGlu React Native SDK with the Sandbox app.

Please refer to Full SDK Documentation for full reference and advanced use cases.