React Native Getting Started

This page is about React Native for mobile Apps. See React.js for building web apps.

React Native by Facebook, lets JavaScript developers build native mobile apps for iOS and Android. It uses the same design as React, letting developers compose a rich mobile UI from declarative components.

Learn more about installing the Pyze React Native Smart SDK, initializing it, using events, and setting up In-app and/or push notifications. The Pyze SDK supports Android versions 4.0.3 (minSdkVersion 15) and above for Android and iOS version 8 or above for iOS.

1. Get one or more Pyze App Keys

See instructions to get one or more Pyze App Keys depending on platforms (iOS and/or Android) you support for your React Native app.

2. Install the Pyze SDK

Install the Pyze react-native package

3. Setup & Initialize

Setup & Initialize Pyze in your React Native app

Build and Go!

You have enabled all screen flow funnels, loyalty, cohort and churn analysis, Intelligence data explorations, built-in events, auto segmentation, and much more. Use your app with the Pyze SDK and you should see data on growth.pyze.com.

In the following sections, you can add app-defined-, timed- and curated- events. To reach out to your users and create meaningful relationships, add push and in-app notifications.

4. Add events

Add Events to your React Native app.

A comprehensive overview of curated, app defined, timed and built-in events is available under Events in the api & events.

5. Build meaningful relationships with your users

Pyze delivers intelligence-driven marketing and growth automation, so you can build meaningful relationships with your users.

App SDK API, Samples, Resources for React Native developers

Setup & Initialize

Get Pyze App Keys

Get a Pyze App Key (PAK) for iOS and Android React Native apps from growth.pyze.com.

1. Login to growth.pyze.com

Every app is uniquely assigned a Pyze App Key (PAK), a 22 character app specific key, which you obtain from growth.pyze.com after logging in with your email and password. If you have not signed up for Pyze, you can Get Pyze here first.

Login to growth.pyze.com

2. Add a new app

  • To add an application to the Pyze platform, begin by selecting Settings from the Navigation Pane.
  • Under the Apps Tab, click the Add App+ button at the top right of the window.
  • Enter the App Name and Appstore URL (if available), Platform (iOS, Android, Web/SaaS, tvOS, watchOS) and select your Timezone.

3. Copy Your Pyze App Key

Once you add your new app, refresh the page. Navigate to your newly added app’s settings by selecting the app from the drop-down list. The Pyze App Key will be displayed below to the right (bEIUdgQ0REW-31ZWvFXrEQ in this example). Copy Pyze App Key.

Pyze React Native App SDK

Getting Started with React Native

If you are new to react Native, see Getting Started with React Native App. Install React Native and create an iOS and/or Android app.

Installing Pyze React Native SDK

  1. To install Pyze SDK go the project directory and run npm install as shown below.

     cd your/project/folder
     npm install --save pyze-sdk-react-native
    
  2. Now you are ready to Setup and Initialize for iOS and Android

Pyze React Native App SDK: Setup & Initialize

The instructions on this page assume you have installed the Pyze SDK into your React Native project. If not, Install the SDK and come back to this page. See Getting Started React Native Guide.

iOS

  1. Run cd ios && pod install && cd .. command to install the Pyze pod dependency.
  2. Edit AppDelegate.m or ExtensionDelegate.m

    Open your AppDelegate.m in the project and import Pyze module i.e.

     #import <Pyze/Pyze.h>
    

    iOS - Add following lines in application:willFinishLaunchingWithOptions: method in the @implementation block of your App delegate code file. (usually AppDelegate.m). If you do not have application:willFinishLaunchingWithOptions: method in your class simply add it.

    For iOS and tvOS, add code in willFinishLaunchingWithOptions and NOT didFinishLaunchingWithOptions. Also see iOS App Lifecycle Deconstructed to understand your app’s lifecycle

     // Objective C (iOS)
     - (BOOL)application:(UIApplication*)application willFinishLaunchingWithOptions:(NSDictionary*)launchOptions {
         [Pyze initialize:@"<pyze app key for each app from growth.pyze.com>"
              withLogThrottling: PyzelogLevelMinimal]; //see https://growth.pyze.com
         return YES;
     }
    

    Remember to replace <pyze app key for each app from growth.pyze.com> with the Pyze App key you got from growth.pyze.com

  3. Finally, run the react-native run-ios command to run the app.

Android

  1. Add the PyzeAppKey obtained from growth.pyze.com in AndroidManifest.xml

     <meta-data android:name="PyzeAppKey" android:value="PYZE_APP_KEY"/>
    
  2. In the Main Activity for your project, make the following additions:

    Add the following import statement in the Main Activity present in MainApplication.java file under : android - app - src - main- java - com - PROJECTNAME - MainApplication.java

     import com.pyze.android.*;
    
  3. Add the following Pyze.initialize statement in the onCreate method of MainApplication.java

     public void onCreate(Bundle savedInstanceState) {
     //...
             Pyze.initialize(this);
         }
    
  4. Finally, run the react-native run-android command to run the app.

Build and Go!

Add Events

Pyze React Native App SDK - Events

See a detailed Events Overview at api & events.

Curated Event Handling

You can call events in index.android.js or index.ios.js depending on the platform you choose.

Add the following import statements

import {
  PyzeEvents
} from 'pyze-sdk-react-native';

Add the events of your choice in your code.

PyzeEvents.postCustomEvent("Custom Event");

Pyze has made it easy for you to capture events. We support many built-in events (see api).

For example, to send an Ad requested event, import the curated event class and use it as shown in example below:

import {PyzeAd} from 'pyze-sdk-react-native'; //Import PyzeAd class from the PyzeReact Native package
    ...
    ...
var customAttributes = {};
customAttributes["First Name"] = "John";
customAttributes["Last Name"] = "Smith";
customAttributes["Age"] = 25;
PyzeAd.PostAdRequested(
    "AdMob",            // AdNetwork
    "Settings",            // App Screen
    "300x50",            // Ad SIze
    "Banner",            // Type
    customAttributes
);

Custom Event Handling

We also support custom events in addition to built in events. See custom events class api for React Native.

For example, to send a custom “Game End event” use:

import {PyzeEvents} from 'pyze-sdk-react-native'; //Import PyzeEvents class from the PyzeReact Native package

    ...
    ...
var customAttributes = {};
customAttributes["Seconds Played"] = 33.33;
customAttributes["Bulletes Fired"] = 300;
customAttributes["Enemy Killed"] = 25;
PyzeEvents.postCustomEventWithAttributes("Game End", customAttributes);

Enable Mobile Marketing

Push Notifications (React Native - iOS)

Apple Push Notifications

Pyze customers don’t have to maintain provider servers to communicate with Apple’s push notification service. Pyze can be used to send push notifications for an app in development, an app in production provisioned through the app store, and to a combination of apps in development and production.

1. Generate Personal Information Exchange PKCS #12 (.p12)
  • Go to Certificates, Identifiers & Profiles page of your apple developer account.
  • Select Identifiers and go to YOUR_APP_IDENTIFIER.
  • Under Capabilities go to Push Notifications and select Configure
  • Now under Development/Production SSL Certificate select Create Certificate
  • Upload the Certificate Signing Request as mentioned here
  • Download the certificate generated and add to the Keychain Access
  • Now select the certificate just imported and choose Export.
  • Enter the password and save the .p12 to the desired location.
2. Configure Pyze as your provider

In order to allow Pyze to send push notifications on your behalf to users of your app, please provide the iOS push certificate to Pyze.

  • Login to growth.pyze.com
  • Click Settings from the Navigation Pane
  • Select the app you want to provide keys for from the drop down list
  • Select Push Notifications on the left menu
  • Upload a Push notifications certificate in .p12 format, provide p12 password (the password you generated while creating the certificate), and specify the provisioning mode: Development or Production depending on the type of certificate you are using.
  • Select daily and weekly quota limits
  • Click Save
3. Enabling Push Notifications
  • Goto to capability under application target, add capability Push Notifications and Background Modes.
  • Under Background Modes check Remote notifications.
4. Modify AppDelegate

Update AppDelegate as shown below

 

@import Pyze;
#import <UserNotifications/UserNotifications.h>

@import CoreMotion;

//Let AppDelegate inherit UNUserNotificationCenterDelegate
@interface ALAppDelegate () <UNUserNotificationCenterDelegate>
@end

@implementation ALAppDelegate

//Initialize Pyze
- (BOOL)application:(UIApplication *)application willFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [Pyze initialize:@"PYZE_APP_KEY" withLogThrottling: PyzelogLevelMinimal];
    return YES;
}

//Register for remote notification
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
    [[UNUserNotificationCenter currentNotificationCenter] requestAuthorizationWithOptions:(UNAuthorizationOptionAlert +UNAuthorizationOptionSound) completionHandler:^(BOOL granted, NSError * _Nullable error) {}];
    [UNUserNotificationCenter currentNotificationCenter].delegate = self;
    [[UNUserNotificationCenter currentNotificationCenter] setNotificationCategories:[PyzeNotification getPyzeDefaultNotificationCategories]];
    [[UIApplication sharedApplication] registerForRemoteNotifications];
    return YES;
}

//Set remote notification token to Pyze
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
    [Pyze setRemoteNotificationDeviceToken:deviceToken];
}

//Notify Pyze when push received.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler{
    [Pyze processReceivedRemoteNotification:userInfo];
}

//Let pyze handle the remote notification action
-(void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler{
    [PyzeNotification handlePushNotificationResponseWithUserinfo:response.notification.request.content.userInfo actionIdentifier:response.actionIdentifier];
    completionHandler();
}

//Enable app to view notification in foreground
-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler {
    completionHandler(UNNotificationPresentationOptionAlert);
}

@end
 

import Pyze
import UserNotifications

//Let AppDelegate inherit UNUserNotificationCenterDelegate
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterDelegate {

    //Initialize Pyze
    func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        Pyze.initialize("PYZE_APP_KEY", withLogThrottling: .PyzelogLevelMinimal)
        return true
    }

    //Register for remote notification
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        UNUserNotificationCenter.current().delegate = self;
        UNUserNotificationCenter.current().requestAuthorization(options:[.badge, .alert, .sound]) { granted, error in }
        UNUserNotificationCenter.current().setNotificationCategories(PyzeNotification.getPyzeDefaultNotificationCategories() as! Set<UNNotificationCategory>);
        UIApplication.shared.registerForRemoteNotifications();
        return true
    }

    //Set remote notification token to Pyze
    func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Pyze.setRemoteNotificationDeviceToken(deviceToken);
    }

    //Notify Pyze when notification received
    func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
        Pyze.processReceivedRemoteNotification(userInfo);
    }

    //Let pyze handle the remote notification action
    func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
        PyzeNotification.handlePushResponse(withUserinfo: response.notification.request.content.userInfo, actionIdentifier: response.actionIdentifier)
        completionHandler()
    }

    //Enable app to view notification in foreground
    func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        completionHandler(.alert);
    }
}
5. Enable Rich Push Notification for your app.

Enable your app to receive images and gifs inside push notification messages.

  • Go to File -> New -> Target and cretea Notification Service Extension.
  • Fill the Product Name and select required language.
  • Make sure to select Embed in Application as YOUR PROJECT.
  • XCode will create a NotificationService class after adding the above extension. Replace its content by below code.
 
#import "NotificationService.h"

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;

@end

@implementation NotificationService

- (NSURL *) attachmentFileURLWithTempLocation:(NSURL *)location name:(NSString *)fileName {
    NSFileManager *fileManager = [NSFileManager defaultManager];
    NSError *error;
    NSArray * domainDirectories = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *documentsDirectory = [domainDirectories objectAtIndex:0];
    NSString *attachmentLocalFilePath = [documentsDirectory stringByAppendingPathComponent:@"/Pyze/"];
    if(![fileManager fileExistsAtPath:attachmentLocalFilePath]) [fileManager createDirectoryAtPath:attachmentLocalFilePath withIntermediateDirectories:NO attributes:nil error:&error];
    attachmentLocalFilePath =  [attachmentLocalFilePath stringByAppendingFormat:@"/%@",fileName];
    if([fileManager fileExistsAtPath:attachmentLocalFilePath]) {
        [fileManager removeItemAtPath:attachmentLocalFilePath error:&error];
        if (error) NSLog(@"Error in removing file : %@", error.debugDescription);
    }
    [fileManager moveItemAtPath:[location path] toPath:attachmentLocalFilePath error:&error];
    if (error) NSLog(@"Error in moving file to location : %@", error.debugDescription);
    NSURL *mediaFileURL = [NSURL fileURLWithPath:attachmentLocalFilePath];
    return mediaFileURL;
}

- (NSURLSessionDownloadTask *) loadAttachmentsWithURLString:(NSString *)urlString {
    NSURL *mediaURL = [NSURL URLWithString:urlString];
    NSURLSessionDownloadTask *task = [[NSURLSession sharedSession] downloadTaskWithURL:mediaURL completionHandler:^(NSURL * _Nullable location, NSURLResponse * _Nullable response, NSError * _Nullable error) {
          if (!error) {
              NSURL *mediaFileURL = [self attachmentFileURLWithTempLocation:location name:[response suggestedFilename]];
              UNNotificationAttachment *attachment = [UNNotificationAttachment attachmentWithIdentifier:[response suggestedFilename] URL:mediaFileURL options:nil error:&error];
              if (attachment) self.bestAttemptContent.attachments = @[attachment];
              self.contentHandler(self.bestAttemptContent);
          }
      }];
    return task;
}

#pragma mark - UNNotificationServiceExtension delegate

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];
    self.bestAttemptContent.title = self.bestAttemptContent.title;
    self.bestAttemptContent.subtitle = self.bestAttemptContent.subtitle;
    NSString *mediaUrlString = request.content.userInfo[@"mediaUrl"];
    NSURLSessionDownloadTask *task = [self loadAttachmentsWithURLString:mediaUrlString];
    [task resume];
}

- (void)serviceExtensionTimeWillExpire {
    // Called just before the extension will be terminated by the system.
    // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
    self.contentHandler(self.bestAttemptContent);
}

@end
 
import UserNotifications

class NotificationService: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        defer {
            contentHandler(bestAttemptContent ?? request.content)
        }
        guard let attachment = request.attachment else { return }
        bestAttemptContent?.attachments = [attachment]
    }
    
    override func serviceExtensionTimeWillExpire() {
        // Called just before the extension will be terminated by the system.
        // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
        if let contentHandler = contentHandler, let bestAttemptContent =  bestAttemptContent {
            contentHandler(bestAttemptContent)
        }
    }
}

extension UNNotificationRequest {
    var attachment: UNNotificationAttachment? {
        guard let attachmentURL = content.userInfo["mediaUrl"] as? String, let imageData = try? Data(contentsOf: URL(string: attachmentURL)!) else {
            return nil
        }
        return try? UNNotificationAttachment(data: imageData, options: nil)
    }
}

extension UNNotificationAttachment {
    convenience init(data: Data, options: [NSObject: AnyObject]?) throws {
        let fileManager = FileManager.default
        let temporaryFolderName = ProcessInfo.processInfo.globallyUniqueString
        let temporaryFolderURL = URL(fileURLWithPath: NSTemporaryDirectory()).appendingPathComponent(temporaryFolderName, isDirectory: true)
        try fileManager.createDirectory(at: temporaryFolderURL, withIntermediateDirectories: true, attributes: nil)
        let imageFileIdentifier = UUID().uuidString + ".jpg"
        let fileURL = temporaryFolderURL.appendingPathComponent(imageFileIdentifier)
        try data.write(to: fileURL)
        try self.init(identifier: imageFileIdentifier, url: fileURL, options: options)
    }
}

Push Notifications with FCM

Google Notifications

Google provides the Firebase Cloud Messaging service (FCM) to allow app publishers to reach out to their users via push notifications.

App Publishers have the option of hosting and running servers “app servers” themselves to send notification content “payload” to FCM. Google then forwards the notification content to your app on user’s device.

Pyze customers do not have to maintain their own servers to communicate with Google’s Messaging service. Pyze can be used to send push notifications for an app in development, an app that is live in Google Play, and to a combination of apps in development and production.

Prerequisites

You must Create Firebase project in Firebase console. Click here after logging into the google account that owns your project for next steps.

Following sections

In the following sections, we will generate the google-services.json and enter the Server Key in growth.pyze.com. Then we will also enable push notifications in your Android project.

Configuring the Server API Key and Sender ID

In this section we will

  1. Get the Server Key and Sender ID for your app
  2. Enter the Server Key on growth.pyze.com

Generate the Server API Key and Sender ID

Login into the Google Account that owns your app
Go to Google Cloud Messaging and select Get a Configuration File
  • Obtain the Server API Key and Sender ID from the project settings for your

Enter the Server Key and Sender ID on growth.pyze.com

Login into your Firebase Console
  • Select Your Project and Click on the Settings icon next to the Project name
  • In the Cloud Messagin Tab, locate the Server Key and Sender ID

Login into your Pyze Account
  1. On the Settings page, select an app from the drop down menu.
  2. On the App Settings page, navigate to the Push Notifications settings from the left pane.
  3. Enter the Server key and Sender ID along with quota limits for the maximum number of push messages your app can send in a day and a week.

Integrate FCM Push Notifications in your App project

  1. First, add rules to your root-level build.gradle file, to include the google-services plugin:

     buildscript {
         // ...
         dependencies {
             // ...
             classpath 'com.google.gms:google-services:3.0.0'
         }
     }
    
  2. Then, in your module Gradle file (usually the app/build.gradle), add the apply plugin line at the bottom of the file to enable the Gradle plugin:

     apply plugin: 'com.android.application'
    
     android {
       // ...
     }
    
     dependencies {
       // ...
       compile 'com.google.firebase:firebase-core:9.6.1'
     }
    
     // ADD THIS AT THE BOTTOM
     apply plugin: 'com.google.gms.google-services'
    
  3. Add the below dependency to your app’s build.gradle file:

     dependencies {
         compile "com.google.firebase:firebase-messaging:9.6.1"
     }
    
  4. In the Android.Manifest file, add the below between the Application Tag:

     <receiver android:name="com.pyze.android.push.PyzePushTrackingReceiver" android:exported="true"/>
     <service
         android:name="com.pyze.android.push.fcm.FcmPushListenerService">
         <intent-filter>
             <action android:name="com.google.firebase.MESSAGING_EVENT" />
         </intent-filter>
     </service>
    
  5. Get the configuration file from Google and place it under your app/ folder in your android studio project. Open this link for more info: https://support.google.com/firebase/answer/7015592

In-App Notifications

Enable In-app Notifications in your App

In-app notifications allow app publishers to reach out to app users when they use your app. In-App Notifications are deeply integrated in Pyze Growth Intelligence and allow app publishers to reach out to users from manually from Dynamic Funnels and Intelligence Explorer, and automatically based on workflows and campaigns from Growth Automation.

App publishers have full control over when to display the in-app messages and have two options: use the user interface provided by Pyze or develop their own.

Show in-app notification from your app

To display in-app notifiction scheduled, just call the below API. It’ll display the in-app message if there are any scheduled messages from growth.pyze.com.

showInAppNotification();

Sending In-App notifications from growth.pyze.com

In-app notifications allow app publishers to reach out to app users when they use your app. In-App Notifications are deeply integrated in growth.pyze.com and allow app publishers to reach out to users from manually from Conversion Funnels and Auto Segmentation, and automatically based on workflows and campaigns from Growth Automation. For illustration purposes, we will send In-App Notifications from Conversion Funnels.

  • Sending In-App notifications from Conversion Funnels

    Create an event sequence and specify filters. You can reach out from either Build & Run or from Saved Funnels.

    Create and send an In-App Notification. In this example, we will congratulate the user for reaching a milestone with a reward.

Enable Personalization

Personalization Intelligence™

Enable Personalization in your App

To learn more about personalization see here.

In Intelligence explorer, for example, you may assign “High Value” tag to users who match the following criteria. This tag will be available in your app to personalize content feed, experience, user interface or messaging.

  • High Engagement and High Loyalty or
  • High Advocacy and Seasonal Ticket Holder or
  • High Revenue or
  • High Engagement, High Advocacy, and Low or Medium Attrition Risk or

The Personalization Intelligence™ tags assigned to a user are available in the agent and are accessible via class PyzePersonalizationIntelligence

The following methods are available in this class

getTags(callback)

Get all tags assigned to the user.
Note: Tags are case sensitive, High Value and high value are different tags.

Usage

PyzePersonalizationIntelligence.getTags(function(tags){
    console.log(tags);
});
isTagSet(tag, callback)

Returns true if requested tag is assigned to user.
Note: Tags are case sensitive, High Value and high value are different tags

Usage

PyzePersonalizationIntelligence.isTagSet("loyal", function(tagExists) {
    console.log(tagExists);
});
areAnyTagSet(listOfTags, callback)

Returns true if at least one tag is assigned.
Note: Tags are case sensitive, High Value and high value are different tags.

Usage

PyzePersonalizationIntelligence.areAnyTagSet(["loyal","High Value","Low value"], function(tagExists) {
    console.log(tagExists);
});
areAllTagSet(listOfTags, callback)

Returns true if all tags requested are assigned to user.
Note: Tags are case sensitive, High Value and high value are different tags.

Usage

PyzePersonalizationIntelligence.areAllTagSet(["loyal","High Value","Low value"], function(tagExists) {
    console.log(tagExists);
});

User Privacy

Pyze provides APIs to allow end-users to Opt out of Data Collection and also instruct the Pyze system to forget a user’s data.

setUserOptOut

Allows end-users to opt out from data collection. Opt-out can be toggled true or false.

Pyze.setUserOptOut(true) 

To resume user data collection set value to false

Pyze.setUserOptOut(false) 

deleteUser

Allows end-users to opt out from data collection and delete the user in the Pyze system. We recommend you confirm this action as once a user is deleted, this cannot be undone.

Pyze.deleteUser(true)