Help Center

BlueConic SDK for React Native

How to use the BlueConic SDK for React Native to develop custom CDP mobile applicationsThe BlueConic SDK for React Native makes it easy for developers to collect profile data from their Android and/or iOS native apps. This article explains how to integrate BlueConic into your React Native apps. If you are looking for information on Android apps, see the BlueConic SDK for Android. And, if you are looking for information on iOS apps, see the BlueConic SDK for iOS.

You can use the React Native SDK to do the following:

  • Set and retrieve profile property values
  • Serve (custom) dialogues 
  • Track user behavior using listeners

The BlueConicClient Framework provides the basis for communication with BlueConic. It provides possibilities to develop your own interactions by creating mobile plugins. BlueConicClient Framework allows you to make use of the standard BlueConic plugins. It contains several plugins that are mobile variants of the standard BlueConic Listeners plugins.  


Before you begin

Before you start implementing the SDK, make sure you have the following:

  • Android: The minimum SDK version supported by the SDK is 21. Make sure that your app is compatible with this.
  • iOS: The latest version of Xcode (v14.3.1 or higher).
  • iOS: The binary distribution files of the SDK have been built for iOS 12.

Getting Started

Before you start implementing the SDK, use the following steps to set up your environment:

React Native

Run the following command in your React Native project's root folder:

$ npm install @blueconic/blueconic-react-native

Or include it in your React Native project's package.json:

{
"react": "*",
"react-native": "*",
"@blueconic/blueconic-react-native": "<latest version>"

}

iOS implementation of the React Native App

Note

For the iOS 17 privacy changes that apply to SDK, check the information provided here: BlueConic SDK for iOS.

Note

The iOS SDK used by React is distributed via Cocoapods.

  1. If you are using React Native CLI, make sure you have the pods installed by the following command:
    pod install
  2. Add the configuration key for BlueConic:
    Locate your app's Information Property List file under "Supporting Files."
    Select <project>-Info.plist and add a new row by right-clicking the top row and selecting "Add row." Set the following key name:
    bc_server_url
    Double-click the value field and enter the URL for the hostname of your BlueConic server. For example:
    https://example.blueconic.net
  3. Locate your app's Information Property List file under "Supporting Files".
    Select <project>-Info.plist and add a new row by right-clicking the top row and selecting "Add row." Set the following key name:
    URL types
    This creates an array that contains more property rows. Open "URL types" by clicking the triangle icon in front of the name to display the rows. Right-click "Item 0" and select "Add row". You can also add a new item, and add the new row within that item. Set the following key name:
    URL Schemes
    This creates another array. Add a new row to this array's "Item 0" and enter your app's "Bundle Identifier," for example:
    com.blueconic.testApp
    Full example of the URL schemes:

Android implementation of the React Native App

Note

The Android SDK used by React is distributed via Gradle dependency.

  1. Add the configuration file for BlueConic:

    Create a file named blueconic_configuration.xml in /res/values/:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
      <string name="bc_server_url">[BlueConic server url]</string>
    </resources>

    Replace [BlueConic server URL] with the protocol and hostname of the BlueConic server. For example "https://example.blueconic.net":

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
      <string name="bc_server_url">https://example.blueconic.net</string>
    </resources>

Using the BlueConicClient SDK in React Native apps

Import NativeModules into the app

Import the BlueConicClient module within your app:

// React Native: in the Example.js file
import {
NativeModules
} from "react-native";
const {BlueConicClient} = NativeModules;

Create a page view event

To keep track of every page viewed in the app, you need to create a page view event. Make sure that a unique screen name is passed in the call. The screen name can be used in listener rules or to restrict interactions to specific screens. 

// React Native: in the Example.js file
// Simple screen names, like 'main' pages BlueConicClient.registerPageView("main");

// Unique screen names, e.g. per article
BlueConicClient.registerPageView("news/article/" + UID);

Important

Make sure you trigger a "PAGEVIEW" event in your application before using other functionalities from the SDK.

Triggering a "PAGEVIEW" event ensures that the SDK data collection works correctly.

The "screenName" property sent via a PAGEVIEW event is used by BlueConic to identify the location in the app.

Now the BlueConic user can retrieve the screen name "Main/Section1" as a value like so (using the regular expression (.*)):

Or the BlueConic user can add values when the Mobile Screen name contains certain words. Create a rule of type "URL / Mobile Screen" and configure the Mobile Screen name to listen to:

When you first interact with BlueConic using the SDK, a profile ID is generated. This profile ID can be used to identify users in BlueConic. To retrieve the BlueConic assigned profile ID, you can use the following method:

// With promise 
const profileId = await BlueConicClient.getProfileId();

// With callback
BlueConicClient.getProfileIdWithCallback(profileId => {
});

Configure consent

In order to configure the consent information for the BlueConic SDK you can use the following methods:

// Get the SDK privacy legislation.
// With promise
const privacyLegislation = await BlueConicClient.getPrivacyLegislation();
// With callback
BlueConicClient.getPrivacyLegislationWithCallback(privacyLegislation => {
});

// Configure the SDK privacy legislation (e.g. GDPR, CCPA).
BlueConicClient.setPrivacyLegislation("GDPR");

// Add consented objective.
// First, the objectives need to be configured in the BlueConic platform.
BlueConicClient.addConsentedObjective("Marketing")

// Add refused objective.
// First, the objectives need to be configured in the BlueConic platform.
BlueConicClient.addRefusedObjective("Tracking")

To configure consent information in BlueConic read more about it in the following article: Privacy management in BlueConic.

Clean up BlueConic interactions 

Creating a page view event will dynamically load interactions (dialogues and listeners) in the app. It is necessary to explicitly call 'destroyPlugins' on the BlueConicClient when the user switches screens.

BlueConicClient.destroyPlugins();

Retrieve and store profile properties

The BlueConic SDK supports the ability to get or set a profile property directly from inside the app. Ask your BlueConic users for the ID of the profile property in BlueConic and use one or more of the following BlueConic methods from the SDK:

// Get profile property value
// With promise
const hobby = await BlueConicClient.getProfileValue("propertyKey");
// With callback
BlueConicClient.getProfileValueWithCallback("propertyKey", value => {
});

// Get profile property values (for multi-value properties)
// With promise
const hobbies = await BlueConicClient.getProfileValues("propertyKey");
// With callback
BlueConicClient.getProfileValuesWithCallback("propertyKey", value => {
});

// Set profile property value
// Passing a property that was already set with values
// will cause for the old values to be removed.
BlueConicClient.setProfileValue("propertyKey", "propertyValue");

// Set profile property values (for multi-value properties)
// Passing a property that was already set with values
// will cause for the old values to be removed.
BlueConicClient.setProfileValues("propertyKey",
["propertyValue1", "propertyValue2"]);

// Add profile property value
// If there are already values for a property the new value will be added.
BlueConicClient.addProfileValue("propertyKey", "propertyValue");

// Add profile property values (for multi-value properties)
// If there are already values for a property the new values will be added.
BlueConicClient.addProfileValues("propertyKey",
["propertyValue1", "propertyValue2"]);

// Increment profile property value
// If there are already values for a property the new value
// will be the sum of all values.
BlueConicClient.incrementProfileValue("propertyKey", "1");

// Update the profile to sync over the data from the
// Mobile app to the BlueConic servers and;
// also pull in the data that has changed on the BlueConic side.
BlueConicClient.updateProfile();

A common use case for setting profile properties directly is to store attributes of the user, especially those that can be used for profile merging across devices. To do this, you first need to note the ID of the user and email address profile properties you wish to populate (e.g. user_id and email). Then, the setProfileValue method should be used to populate these profile properties accordingly.

Track events

The BlueConic SDK allows you to send events to BlueConic. This allows you to keep BlueConic informed of what is happening in your app, even when it happens outside the scope of the basic operations.

Events are sent using the BlueConicEventManager's publish() function. Several kinds of events can be published:

ClickEvent
This event signals to BlueConic that a component with a specific ID has been clicked in your app.
UpdateContentEvent
This event signals to BlueConic that the content of a component with a specific ID has updated its content and also passes on the updated content.
UpdateValuesEvent
This event signals to BlueConic that a component with a specific ID has received an updated list of values and passes on these updated values.
FormSubmitEvent
This event signals to BlueConic that the form with a specific ID has been submitted.
AdvancedEvent
This allows you to send a custom event to BlueConic with its own specific name and a list of values.

 

Click event

BlueConic enables users to indicate the button that defines the click area in a Click / Tap rule as follows:

To make this work for your BlueConic users, add the following code to your app:

// Define click event for selector "#nextButton"
BlueConicClient.registerClickEvent("#nextButton");

Updating content

BlueConic enables you to detect words on the mobile screen:

The BlueConic SDK will scan the mobile screen upon loading the view for the first time. But what if you change the contents of the screen without reloading the view?

To enable this for the BlueConic users at your site, publish an UpdateContentEvent. Add the following code to your app:

// Define update content event for selector "#emailAddress"
BlueConicClient.registerUpdateContentEvent("#emailAddress", "test@test.com");

Updating values

BlueConic enables you to create a form listening rule that updates a profile property when a form field changes its value:

"TextView" and "Spinner" widgets will automatically pick up value changes. All other field types have to be facilitated within your app code.

To make this work for your BlueConic users for non-supported fields, add the following code to your app:

// Define update values event for selector "#emailAddress" 
BlueConicClient.registerUpdateValuesEvent("#emailAddress", ["test@test.com"]);

Now, when the user enters an email address in your app, it will be picked up in BlueConic as well.

Form submit

BlueConic enables you to listen to in-app form submits as follows:

To enable this for your BlueConic users, add the following code to your app:

Custom-defined event

BlueConic enables you to set profile property values when a custom-defined event is received. It even allows you to check for specific values in the context of the event:

To enable this feature for your BlueConic profiles, add the following code to your app:

// Define advanced event with the name "video_started" 
BlueConicClient.registerAdvancedEvent("video_started",
["blueberry", "sushi", "pancakes"]);

The app publishes an event with the name "video_started" and a list of three values ("blueberry," "sushi," and "pancakes") is added as context. Adding values is optional; it provides extra information to allow BlueConic users at your site to make more specific rules.

On the BlueConic side, the example rule in the screenshot says "... if event video_started is received with a context that contains blueberry, raspberry for any value." The published example event contains one of those values (blueberry) for the event, which means there is a match. As a result, BlueConic will add the value "fruit" to the profile property "Food Preferences" of the profile for this particular app user.

Adding context

Adding context to an event makes it a lot easier to develop and configure which values a mobile developer can use and send through the event to BlueConic, where the event context can be used with BlueConic Listeners. Previously, this had to be configured by using a public UI element to retrieve data from a mobile app. Now mobile developers can use private or dynamic values and apply them directly as context to an event. This gives you more control and flexibility to publish BlueConic events within an app, and the BlueConic users at your site can use them to define BlueConic Listeners, without having to know about the internal UI IDs of the mobile app.

Mobile developers can develop these events in their code, for example, to publish a ClickEvent whenever a customer clicks on their favorite sport (code shown below). In addition, you can define a BlueConic Listener to keep track of a customer's favorite category or sport.

You can add the ClickEvent to a function in your app, for example, by adding a click handler a customer interacts with in the UI or when they navigate to a different page. 

// Define click event for selector "#nextButton"
BlueConicClient.registerClickEventWithContext("#favoriteSport",

["soccer"]);

Once the developer adds the events within the app, BlueConic users at your site can define BlueConic Listeners to keep track of these events and store data to the profile. To create listeners for these events, they just have to know the selectors the developer used in their events (e.g. “#favoriteSport”).

BlueConic users can use the event feature in any of the following BlueConic Listeners:

  • Behavior listener
  • Interest Ranking listener
  • Rule Based Form listener
  • Scoring listener

mobile-listeners-set.png

Inside these listeners, BlueConic users can define the following rules with the event option:

  • Click/tab rule
  • Form Submit rule (only accessible in the Rule-Based Form Listener)
  • Advanced rule

When setting up the BlueConic Listener, under “Expert Settings,” you select the “Value from context of an event” option, as shown here:

behavior-listener.png

Additional functionality

To retrieve the segments the current user is currently part of, use the following methods:

const segments = await BlueConicClient.getSegments();

Testing the SDK integration

Note

The use of the BlueConic Simulator is restricted to Debug mode only.

To test your mobile app, you will need access to a BlueConic environment. There are two options:

  • Are you working on behalf of a BlueConic Customer that has a BlueConic environment set up? Ask a representative of the BlueConic Customer to request a Sandbox environment in which you can test your mobile app.
  • Alternatively, request a free Pyxis environment yourself, and test your mobile app with that instance of BlueConic.

For more information on how to configure connecting to the BlueConic simulator see: Testing a native mobile app in BlueConic.

iOS

Enabling debug mode

Locate your app's Information Property List file under "Supporting Files."
Select <project>-Info.plist and add a new row by right-clicking the top row and selecting "Add row." Set the following key name:

bc_debug

Click the type and select "Boolean." Set the value to "YES" if you want to receive debug logs from the BlueConic SDK. Adding a debug key is optional; if you do not want to receive debug logs from the SDK, you do not need to add it.
Setting Debug to true will provide more logging and enable the use of the BlueConic Simulator.

Warning

When you publish your apps, Debug should always be set false.

Adding a URL Scheme key for the BlueConic Simulator

Locate your app's Information Property List file under "Supporting Files."
Select <project>-Info.plist and add a new row by right-clicking the top row and selecting "Add row." Set the following key name:

URL types

This creates an array that contains more property rows. Open "URL types" by clicking the triangle icon in front of the name to display the rows. Right-click "Item 0" and select "Add row." You can also add a new item, and add the new row within that item. Set the following key name:

URL Schemes

This creates another array. Add a new row to this array's "Item 0" and enter your app's "Bundle Identifier", for example:

com.blueconic.testApp

Full example of the URL schemes:

URL types

After you have added the URL scheme value, select the AppDelegate class and add the following method to enable Simulator functionality:

Swift Objective C
// AppDelegate.swift file
func application(application: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] ) -> Bool {    BlueConic.getInstance(nil).setURL(url)    
    return true
}

 

Android

Enabling debug mode

Add the following node to the configuration file:

<bool name="bc_debug">true</bool>

Note

Setting Debug to true will provide more logging and enable the use of the BlueConic Simulator.

Warning

When you publish your apps, Debug should always be set false.

Example configuration file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="bc_server_url">https://example.blueconic.net</string>
<bool name="bc_debug">true</bool>
</resources>

Adding intent filters to the AndroidManifest.xml for connecting to the Simulator

Configure your appId at the android:scheme attribute in the code fragment below. For example, "com.test.testapp". For more information on how to configure a connection to the BlueConic Simulator see: Testing a native mobile app in BlueConic.

<activity android:name=".MainActivity" android:label="@string/app_name">
  <intent-filter>
    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
  <!-- Filter added for connecting to the Simulator through mail .-->
  <intent-filter>
    <action android:name="android.intent.action.SEND"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <data android:mimeType="text/plain"/>
  </intent-filter>
  <!-- Filter added for connecting to the Simulator through a QR scan. -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data android:scheme="<Your appId>"/>
  </intent-filter>
</activity>

Release Notes

To see a list of updates and bug fixes for the SDK, see the BlueConic SDK for React Native Release Notes

Was this article helpful?
0 out of 0 found this helpful