Last modified September 2, 2020 by Shelly Wolfe

React Native

Swrve is a single integrated platform that delivers everything you need to drive mobile engagement and create valuable customer relationships on mobile.

The Swrve React Native SDK plugin enables your app to use all of the features available. This guide contains all the information you need to integrate the SDK plugin into your app.


Requirements

  • The App ID and API Key for your app. This information is available in Swrve on the Integration Settings screen (on the Settings menu, select Integration settings).
  • Note: The React Native plugin uses the native SDKs for iOS and Android. You can find more information about the native SDKs in the platform-specific documentation.
  • A recent version of NPM and Yarn
  • A recent version of CocoaPods and Gradle
  • The React Native CLI and environment setup

Installing the SDK

Swrve’s SDK repository is open source. Installing the SDK from NPM is mostly automatic:

If you prefer to use Yarn, run the following command:


Adding the SDK to your project

Depending on your data requirements, Swrve stores all customer data and content in either our US or EU data centers. If your app uses EU data storage and URL endpoints (that is, you log into the Swrve dashboard at https://eu-dashboard.swrve.com), include the EU stack information in the example below. If you have any questions or need assistance configuring the SDK for EU data storage, please contact support@swrve.com.

iOS

Step 1: In your AppDelegate.m file, import the Swrve SDK and the plugin at the top of the file:

Step 2: In application: didFinishLaunchingWithOptions:, initialize the SDK with your configuration:

Step 3: iOS uses CocoaPods for getting the Swrve native iOS SDK. To ensure you have the correct dependencies available, go to ios/ in your project and run:

Android

Step 1: In your MainApplication.java file, import the Swrve SDK and the plugin at the top of the file:

Step 2: Update your OnCreate() method to intialize the plugin and SDK:

Step 3: In android/build.gradle, add the following repositories:

Step 4: In android/app/build.gradle, include one of the following native Swrve SDK dependencies:

Firebase – select if you want to use push notifications with Swrve.

Basic 

Once the native code has been added you can import the SwrveSDK for use in your React code:


Advanced initialization mode

There are two modes for initializing the SDK: AUTO and MANAGED. In AUTO mode, the SDK is automatically initialized as outlined in the previous section. However, if you want to delay the point at which the SDK starts tracking and sending events for a particular user, set the initMode property in the Swrve config to SwrveInitMode.MANAGED. For example, you might want to use a custom ID as the Swrve user ID and not start sending events or targeting a customer until they’ve confirmed their user ID (that is, they’ve logged in).

Do not use email or other personally identifiable information (PIIs) for the custom user ID, as this could be used to compromise your app or integration. Instead, use an internal ID that is only known to your CRM and cannot be linked back to a user outside of your system.

iOS

In application: didFinishLaunchingWithOptions:, add the following property to your Swrve config changes:

Android

In your MainApplication.java file, include the following with your imports:

In the onCreate() method, add the following property to Swrve config changes:

If you use MANAGED mode, the SDK delays tracking by default until the user ID is set at least once via the start API on the React JS layer.

Constraints and considerations

Depending on the initialization mode you choose to use, there are certain limits or nuances you should be aware of:

  • In MANAGED mode, you can’t call the Identify API. If you try to call the Identify API, it will result in a fail fast exception.
  • In AUTO (default) mode, you can’t call the following APIs. If you try to call them, it will result in a fail fast exception:
    • Start()
    • Start(userId)
  • In-app campaigns linked to a push notification are blocked in configurations where:
    • swrveConfig.initMode is set to a MANAGED enum type
    • swrveConfig.managedModeAutoStartLastUser is false
  • Push notification engaged events are always tracked against the last known user ID (even if InitMode is MANAGED and ManagedModeAutoStartLastUser is false).
  • Use the SwrveSDK.IsStarted() API to check if the SDK is started before calling regular APIs when initMode is MANAGED and ManagedModeAutoStartLastUser is false.

User identity

Swrve supports an Identify API to find preexisting user identities that an app has logged either on a single device or multiple devices. Use this feature to identify users and then track and target them safely across multiple devices, platforms, and channels. For more information, see Tracking your users with Swrve User Identity.

The external ID is a non-discoverable key that identifies your user across multiple channels and platforms. Emails or other personally identifiable information (PIIs) are not accepted as external user IDs, they will be rejected on the server side. Before you implement the Identity service, please consult with your CSM at support@swrve.com for some guidance on best practices to follow in your integration.

Identify

When you are ready, call the Identity API with your external user ID:

If the call fails, then the user will not be correctly linked on the Swrve backend system, which may affect reporting and audiences where the user is logging in on multiple devices. We recommend not queuing or sending events until the identify call completes successfully.


Push notifications

Use Swrve’s push notification campaigns to send personalized messages to your app users while they’re outside of your app or send silent background app updates. For more information, see Intro to push notifications.

Swrve’s React Native plugin leverages the native Swrve SDKs, so the majority of the push notification setup is done in the native code for those apps. The tabs below provide links to the native SDK instructions for configuring push notifications and highlight any key differences that are required to run with the React Native plugin.

iOS

To use Swrve’s push notification registration, processing, and tracking services, you first need to enable push as part of the config you have added to appDelegate.m.

Step 1: In your application: didFinishLaunchingWithOptions:, enable push notifications:

Step 2: To track push delivery and users who are influenced by a push notification, you must set up both a Service Extension and have the application configured for App Groups . For more information on how we track push delivery and influenced users, see the iOS integration guide. Complete the additional required steps in the Apple Developer portal.

Step 3: Once completed, in your application: didFinishLaunchingWithOptions:, ensure your app group identifier is set in your config as part of the code:

Note: The iOS Integration guide explains how to add a pushDelegate to your config. This is not needed as part of the React Native setup as we handle it in the plugin.

Step 4: In the same appDelegate.m file, the native iOS integration requires you include functions for three situations:

  • The app is launched from a push notification.
  • The app receives a push notification while running.
  • The app receives a deeplink from a push notification.

The code sample is very similar for React Native, with the addition of a SwrvePlugin call that you need to include as part of the openURL:

Android

Update your Manifest.xml file, Gradle files, and SwrveConfig in MainApplication.java as specified in the Android integration guide.

iOS provisional authorization for push

In iOS 12, Apple added a feature for provisional authorization of push notifications. This feature enables you to send push notifications as soon as a user opens your app for the first time, without requiring the user to opt-in. The notification is delivered directly to the device’s Notification Center and when the user views the notification, the message automatically includes a built-in prompt asking if they want to continue to receive notifications.

By default, the Swrve SDK requests full push permission the first time the user launches your app. To implement provisional authorization for iOS, set different events for both the provisional and full authorization in the iOS platform as part of the SwrveConfig in the AppDelegate.m file.

Configuring iOS silent notifications

The purpose of a silent notification is to refresh your app’s data when it is running in background, for example, a content update. You should never call the SDK from a silent notification. Note, iOS does not permit silent notifications to wake up the app if it is completely closed (that is, a user has double-clicked the home button and swiped up to close the app). If the app is closed, you can only update the badge number.

To enable silent notifications in your app please see Configuring silent notifications in the iOS integration guide.

Listening for push payloads

If you want to perform custom processing of the push notification engagement payload, you can add a listener on the React JS layer that returns the payload of a notification when a user engages with it:

Notifications received before the React Native framework has started are received by the Swrve plugin and buffered until the first listener is attached. There is no need to call getInitialNotification() or similar to deal with notifications during startup.

Working with deeplinks

The Swrve React Native SDK integrates directly with the React Native Linking functionality so you can work with notification URLs in the standard way. To register for notifications, you need to add code to one of your main components:


In-app messages and Conversations

Swrve’s in-app messages and Conversations campaigns are available as soon as you complete the basic integration described above. These features enable you to send personalized messages to your app users while they’re using your app. For more information, see Intro to in-app messages and Intro to Conversations.

To test in-app messages or Conversations in your app, you need to first create the campaign in Swrve. For more information, see Creating in-app messages and Creating Conversations.

In-app message and Conversation deeplinks

When creating in-app messages and Conversations in Swrve, you can configure message buttons to direct users to perform a custom action when clicked. For example, you might configure a button to direct the app user straight to the app store to provide a rating.

Swrve’s default deeplink behavior is to treat custom actions as URLs, therefore use your existing custom URL scheme. Custom URL schemes need to be configured on a per-platform basis.

Once the custom URL scheme is set, your app can receive and direct users from outside of the app.

If you would like to process the custom action completely on your own, you must add a custom listener to the Swrve SDK before its initialization.

In-app message custom actions

For in-app messages, it is also possible to override this behavior of treating custom actions as URL deeplinks and integrate custom actions to direct users to a sale, website, or other target when they click an in-app message. Add a function to the Swrve SDK listeners function. We recommend doing this as part of the constructor in App.js or whichever class in your React application extends React.component first.


Sending events

The Swrve SDK automatically sends certain events and also enables you to track user behavior by sending custom events. In turn, you can use app-generated events to trigger in-app messages, while both app- and server-generated events help you define segments and perform in-depth analytics.

Custom events

To send a custom event, include the below example in a method where you want to send an event to Swrve.

Requirements for sending custom events:

  • Do not send the same named event with different case. For example, if you send tutorial.start, then ensure you never send Tutorial.Start.
  • Use a period (.) in your event names to organize their layout in the Swrve dashboard. Each ‘.’ creates a new branch in the Event name column of the Events report, and groups your events so they are easy to locate.
  • Do not send more than 1000 unique named events.
    • Do not add unique identifiers to event names. For example, Tutorial.Start.ServerID-ABDCEFG
    • Do not add timestamps to event names. For example, Tutorial.Start.1454458885
  • Do not use the swrve.* or Swrve.* namespace for your own events. This is reserved for Swrve use only. Custom event names beginning with Swrve. are restricted and cannot be sent.

Event payloads

You can add and send an event payload with every event. This allows for more detailed reporting around events and funnels.

Notes on associated payloads:

  • The associated payload should be a dictionary of key/value pairs; it is restricted to string and integer keys and values.
  • There is a maximum cardinality of 500 key-value pairs for this payload per event. This parameter is optional, but only the first 500 payloads are displayed in the dashboard. The data is still available in raw event logs and for audience filtering.
  • It is not currently possible to use payloads as triggers for push notifications. Use events for these purposes.
  • If you want to use event payloads to target your campaign audiences, you can configure up to 10 custom events with a maximum of 20 payloads per event for audience filtering purposes. For more information, see Targeting your audience by event payloads.

For example, if you want to track when a user starts the tutorial experience, it might make sense to send an event named tutorial.start and add a payload time that captures how much time it took the user to complete the tutorial.

Custom user properties

The Swrve SDK sends certain user properties by default and also enables you to assign custom properties to update the user’s status. (For a full list of the default user properties, see Assigning user properties.)

For example, you could create a custom user property called premium, and then target non-premium users and premium users in your campaigns.

Virtual economy events

To ensure virtual currency events are not ignored by the server, make sure the currency name configured in your app matches exactly the Currency Name you enter in the App Currencies section on the App Settings screen (including case-sensitive). If there is any difference, or if you haven’t added the currency in Swrve, the server will ignore the event and return an error event called Swrve.error.invalid_currency. Additionally, the ignored events are not included in your KPI reports. For more information, see Add your app.

If your app has a virtual economy, send the purchase event when users purchase in-app items with virtual currency.

Send the currency given event when you give users virtual currency. Examples include initial currency balances, retention bonuses and level-complete rewards.

In-app purchase events and validation

If your app has in-app purchases (IAPs), send the IAP event when a user purchases something with real money.

Unvalidated IAP

Due to the nature in which React uses a shared JavaScript, we cannot provide an SKReceipt or Google Play response in a JavaScript way. It is available natively, which is covered in the iOS and Android integration guides. However, if you want to simply build revenue reports for your app but do not have or want the receipt to be validated by our servers, use the following unvalidatedIap function:

With your IAPs, you can also track rewards provided for the IAP. This could be something like in-game currency or access to a premium service. These are provided as an optional JSON object that is made up of two JSON lists. One is for items received and the other is related to a virtual currency that you have registered in your Swrve dashboard. The below example includes one of each:


Resource A/B testing

Integrating Swrve’s resource A/B testing functionality enables you to use Swrve to test how users respond to changes to the native app content. For more information about resource A/B testing, see Intro to resource A/B testing.

To get the latest version the user resources from Swrve, use the following:

If you want to be notified whenever resources change, you can register a callback to listen for changes. It is recommended to do this as part of the constructor in the App.js or whichever class extends React.component first.


Testing your integration

After you’ve completed the above, the next step is to test the integration. For more information, see Testing your integration.


Upgrade instructions

If you’re moving from an earlier version of the React Native SDK to the current version, see the React Native SDK upgrade guide for upgrade instructions.