Install & Initalize
This topic describes how to set up your React Native application with the Optimizely Data Platform (ODP) SDK.
NPM Module
This page will take you through the steps to set up the ODP SDK module in your React Native application.
The ODP SDK module was written using TypeScript and is fully compatible with both JavaScript and TypeScript applications. If you are developing a new React Native app and wish to integrate with ODP, it is recommended you use TypeScript.react-native init Project --template typescript.
npm install --save @zaiusinc/react-native-sdk @react-native-community/async-storage react-native-push-notification
Important
If you are relying on the ODP SDK, you must use
react-native-push-notification
version 3.2.1. If you are handling the display of the notifications, newer versions may work.
iOS
For an iOS project you'll also need to run the following:
npm install --save @react-native-community/push-notification-ios
cd <project>/ios && pod install
react-native link
After this, you need to allow your app's Bundle ID to have the Push Notifications capability (in Xcode, click Capabilities and scroll down to Push Notifications).
Android
Inside <project>/android/app/src/main/AndroidManifest.xml
, integrate the following XML to allow proper permissions to allow the app to manage Push Notifications.
<receiver
android:name="com.google.android.gms.gcm.GcmReceiver"
android:exported="true"
android:permission="com.google.android.c2dm.permission.SEND" >
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE" />
<category android:name="${applicationId}" />
</intent-filter>
</receiver>
<!-- < Only if you're using GCM or localNotificationSchedule() > -->
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
</intent-filter>
</receiver>
<service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>
<!-- < Only if you're using GCM or localNotificationSchedule() > -->
<service
android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm"
android:exported="false" >
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE" />
</intent-filter>
</service>
<!-- </ Only if you're using GCM or localNotificationSchedule() > -->
<!-- < Else > -->
<service
android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
android:exported="false" >
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service>
<!-- </Else> -->
You will also need to install your google-services.json
according to Google's instructions. From the google-services.json
file, you will need the project_number
field, which you will use as the "Sender ID".
Initialize
In order to use the ODP SDK, you must configure it first. You will need two required and one optional piece of information. First, you will need the Short Identifier from the Mobile Apps integration. This will be your App ID. Next, you can obtain the API Key from the APIs section in ODP. You can find your API Key in the key field under Public. Lastly, you will optionally need the Sender ID as mentioned above. This is not required for iOS apps, but is required for Android apps.
With this information, you can use the main entry point for the SDK, Zaius.configure()
.
Zaius.configure({
appId: string,
apiKey: string,
appVersion?: string = '',
baseUrl?: string = 'https://api.zaius.com/v3',
onNotification?: (notification: PushNotification) => void = () => undefined,
onRegister?: (push_token: PushToken) => void = () => undefined,
platform?: 'ios' | 'ios-sandbox' | 'android' | 'tvos' | 'tvos_sandbox' | 'unknown' // = [calculated from Platform.OS]
requestPermissions?: boolean = true,
senderID?: string = '',
startQueue?: boolean = true,
}) : Promise<Zaius>
The arguments of configure
are as follows:
appId
: [Required] The App ID as mentioned above, the Shortened Name of your project.apiKey
: [Required] The API Key from the Public tab in the APIs section of the ODP app.appVersion
: The version of your app, sent with each request to help you keep track of which customers are using which version.baseUrl
: Where the ODP API is located. You should not change this.onNotification
: A callback function that is called when a Push Notification is received by the app (Android) or tapped by the user (both Android and iOS). See Push Messaging Notifications] for more information.onRegister
: A callback function that is called when permission for Push Notifications has been granted. Once this callback is called, everything is set up on the phone side for Pushes to work.platform
: Which platform the app is running on. Will be detected if it is not supplied.requestPermissions
: If this isfalse
, then it is up to the app author to callZaius.requestPermission()
in order for Push Notifications to be initialized. See Push Notifications] for more.senderID
: [Required for Android] Required for Push Notifications on Android. The Sender ID is found in thegoogle-services.json
file. You can obtain this file from Firebase by following Google directions. TheSender ID
is the value found atproject_info
->project_number
.startQueue
: When set to true, the SDK will start processing the Event queue as soon as it can. See Events for more information about the Event queue.
The return type of Zaius.configure
is a Promise
and so you must handle it as a Promise
or call it from an async
function.
Once you have the Zaius
object from configure()
, the following functions are available on both the object returned from Zaius.configure()
and as functions directly on the global Zaius
object (for example, Zaius.customer()
).
Zaius.getConfig()
: Returns the configuration that theZaius
object is using.Zaius.getVUID()
: Returns theVUID
that identifies the current user. See Customers for more info.Zaius.anonymize()
: Generates a new VUID, effectively anonymizing the user.Zaius.event()
: Queues an event into the Event queue. See Events for more info.Zaius.customer()
: Updates information about this Customer with ODP. See Customers for more info.Zaius.identify()
: Updates Customer identification information. See Customers for more info.
Updated 3 months ago