📱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.
Set up the Sandbox app in your IDE
Identify and authenticate your Users
Load a campaign via Campaign ID in the app
Load a campaign with Dynamic Nudges
Handling Taps and Clicks(Navigation and Analytics)
🛠️ Setup the Sandbox App
Start by cloning our pre-configured Demo App with React Native SDK
1. Update the API Key in the Sandbox App
Open the Sandbox App in Visual Studio Code or any relevant editor.
Open the Android Manifest file located at
/android/app/src/main/AndroidManifest.xml
Add your API Key in
<meta-data>
of theAndroidManifest.xml
file like this:
2. Install Dependencies for Sandbox App
Run the following command in the terminal to install dependencies
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
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:
Load a Campaign via Campaign ID by clicking a button or any other event in the app.
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 theHomeScreen
component, and update it with thecampaignID
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 toFloating
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 nameHomeScreen
4. Handle the Screen Name in the code
In HomeScreen.jsx
, use setCGScreenName("HomeScreen")
during app load
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
Observe Deeplink Events for Navigation
In the Metro server terminal, you might see
Edit `HomeScreen.jsx`
Locate the
useEffect
function and add the event listener:
Capture Analytics Events
For Capture Analytics add another listener for analytics
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.
Last updated