Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

blueshift-react-native

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

blueshift-react-native - npm Package Compare versions

Comparing version 1.0.0-beta.0 to 1.0.0-beta.1

Android.md

40

index.js
import { DeviceEventEmitter, Linking, NativeEventEmitter, NativeModules, Platform } from 'react-native';
const BlueshiftEventEmitter = NativeModules.BlueshiftReactEventsManager ? new NativeEventEmitter(NativeModules.BlueshiftReactEventsManager) : DeviceEventEmitter;
const BlueshiftEventEmitter = new NativeEventEmitter(NativeModules.BlueshiftReactEventsManager);

@@ -94,3 +94,3 @@ var Blueshift = {

*
* @param {Object} extras Additional params (if any)
* @param {Object} details Additional params (if any)
*

@@ -110,4 +110,4 @@ * Usage -

* @param {String} eventName Name of the custom event.
* @param {Object} extras Additional params (if any).
* @param {Boolean} canBatch Tells if this event can be batched or not.
* @param {Object} details Additional params (if any).
* @param {Boolean} isBatch Tells if this event can be batched or not.
*

@@ -127,4 +127,4 @@ * Usage -

* @param {String} screenName Name of the screen to track.
* @param {Object} extras Additional params (if any).
* @param {Boolean} canBatch Tells if this event can be batched or not.
* @param {Object} details Additional params (if any).
* @param {Boolean} isBatch Tells if this event can be batched or not.
*

@@ -143,3 +143,3 @@ * Usage -

*
* @param {String} email email of the customer.
* @param {String} emailId email of the customer.
*

@@ -235,3 +235,3 @@ * Usage -

*
* @param {Boolean} enabled When true, opt-in else opt-out.
* @param {Boolean} isEnabled When true, opt-in else opt-out.
*

@@ -249,3 +249,3 @@ * Usage -

*
* @param {Boolean} enabled When true, opt-in else opt-out.
* @param {Boolean} isEnabled When true, opt-in else opt-out.
*

@@ -296,4 +296,4 @@ * Usage -

*
* @param {double} latitude location latitude value.
* @param {double} longitude location longitude value.
* @param {Number} latitude location latitude value.
* @param {Number} longitude location longitude value.
*

@@ -373,3 +373,3 @@ * Usage -

*
* @param {function} success success callback.
* @param {function} callback success callback.
*

@@ -388,3 +388,3 @@ * Usage -

*
* @param {function} success success callback.
* @param {function} callback success callback.
*

@@ -403,3 +403,3 @@ * Usage -

*
* @param {function} success success callback.
* @param {function} callback success callback.
*

@@ -418,3 +418,3 @@ * Usage -

*
* @param {function} success success callback.
* @param {function} callback success callback.
*

@@ -433,3 +433,3 @@ * Usage -

*
* @param {function} success success callback.
* @param {function} callback success callback.
*

@@ -448,3 +448,3 @@ * Usage -

*
* @param {function} success success callback.
* @param {function} callback success callback.
*

@@ -463,3 +463,3 @@ * Usage -

*
* @param {function} success success callback.
* @param {function} callback success callback.
*

@@ -478,3 +478,3 @@ * Usage -

*
* @param {function} success success callback.
* @param {function} callback success callback.
*

@@ -493,3 +493,3 @@ * Usage -

*
* @param {function} success success callback.
* @param {function} callback success callback.
*

@@ -496,0 +496,0 @@ * Usage -

{
"name": "blueshift-react-native",
"version": "1.0.0-beta.0",
"version": "1.0.0-beta.1",
"description": "React native plugin for Blueshift iOS and Android SDK.",
"main": "index",
"main": "index.js",
"types": "index.d.ts",
"scripts": {

@@ -7,0 +8,0 @@ "test": "echo \"Error: no test specified\" && exit 1"

@@ -9,249 +9,129 @@ # blueshift-react-native

npm install blueshift-react-native
// using Github url
npm install https://github.com/blueshift-labs/blueshift-react-native --save
```
## Android and iOS Integration
Refer to the below documents to integrate the Blueshift SDK for Android and iOS.
- [Android SDK Integation](https://github.com/blueshift-labs/blueshift-react-native/blob/main/Android.md)
- [iOS SDK Integation](https://github.com/blueshift-labs/blueshift-react-native/blob/main/iOS.md)
## Usage
Import Blueshift plugin in your JS as mentioned below.
Import the Blueshift plugin in your JS/TS as mentioned below to use its functionality.
```js
import Blueshift from 'blueshift-react-native';
```
Once imported, you can call the Blueshift methods as mentioned below.
```js
// Make a call to Blueshift functions
Blueshift.setUserInfoEmailId("test@blueshift.com");
Blueshift.identifyWithDetails({"user_type":"premium"});
```
Refer to [these Blueshift JS methods](https://github.com/blueshift-labs/blueshift-react-native/blob/main/src/index.js) to know about features supported by Plugin and how to use them.
## Get Deep links on React native
Blueshift Plugin will deliver Push, in-app and universal links deep links to react native using `url` event. You can add event listener using default `Linking` method as below in you react project to get the deep link.
```javascript
// Add event listener to get the deep link url
Linking.addEventListener('url', this.handleDeepLink);
handleDeepLink(event) {
// handle the deep link
console.log("deep link url = "+ event.url);
}
```
## Get Push notification payload on React native
Blueshift Plugin will deliver Push notification payload using event `PushNotificationClickedEvent`. Add event listener using the `Blueshift` method in your react project.
```javascript
// Add custom event listner using Blueshift method
Blueshift.addEventListener('PushNotificationClickedEvent',this.handlePushClick );
Refer to [these Blueshift JS methods](https://github.com/blueshift-labs/blueshift-react-native/blob/main/index.js) to know about features and methods supported by Plugin and how to use them.
handlePushClick(event) {
alert("push payload "+JSON.stringify(event.bsft_experiment_uuid));
}
```
### Setting user info
# iOS integration
Using the Plugin, you can set the logged-in user info in the Blueshift SDK. SDK will add this user data to each event and send it to the Blueshift server. This user data can be saved when the user logs in to the app and needs to be removed once the user logs out of the app.
After adding Blueshift plugin to your project, run `pod install` inside `iOS` directory. The pod will install the Blueshift plugin along with the Blueshift iOS SDK in your iOS Project.
In order to associate the events to the correct user, there are three primary identifiers used to identify a user uniquely.
### Prerequisites
- DeviceID - This will be auto-generated by SDK and sent to the Blueshift server as the `device_id` attribute as part of every event.
- EmailId - Email id needs to be set whenever it changes as mentioned in the below code snippet and this will be sent to the Blueshift server as part of every event.
- CustomerId - Customer id needs to be set whenever it changes as mentioned in the below code snippet and this will be sent to the Blueshift server as part of every event.
Following permissions needs to be enabled in your Xcode project to send push notifications to the user’s device.
* To send push notifications, [add **Push Notifications** capability to your app target](https://developer.apple.com/documentation/usernotifications/registering_your_app_with_apns).
* To send silent push notifications, [add **Background modes** capability to your App target and enable **Remote notifications** background mode for your app target](https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/pushing_background_updates_to_your_app).
```javascript
// Set data on successful login
Blueshift.setUserInfoEmailId("test@test.com");
Blueshift.setUserInfoCustomerId("cust123456");
After adding the **Push Notifications** capability and enabling **Remote notifications** background mode, it should look like below.
// Set other user info as below. This info will be used for creating
// segments or running personalized campaigns
Blueshift.setUserInfoFirstName("John");
Blueshift.setUserInfoLastName("Cartor");
Blueshift.setUserInfoExtras({"profession":"software engineer", "isLoggedIn":true});
![alt text](https://files.readme.io/6b23055-capability.png)
// Clear the stored data at the time of logout
Blueshift.removeUserInfo();
## 1. SDK integration
```
Make sure you fire an `identify` event after making changes to the user data to reflect it on the Blueshift server.
You can integrate Blueshift React plugin for your iOS project using Automatic integration, where Blueshift Plugin can take care of handling the device token, push notification and deep link callbacks.
### Identify event
`Identify` event is responsible to update the data for the user profile on the Blueshift server. Whenever you change any user data in the Blueshift SDK, we recommend you fire an identify event to reflect those changes on the Blueshift server. This ensures that we can still attribute the events to the user and generate recommendations for the user if the `device_id` resets due to the app uninstall.
Automatic integration is not recommended if you are using Firebase SDK or any other SDK with auto integration along with Blueshift. The push notification and other OS callback methods do conflict with each other, so in this case you can use the manual way of SDK integration. Please reach out to our support team by sending an email to support@getblueshift.com for any integration related queries.
```javascript
// Set user data at login
Blueshift.setUserInfoEmailId("test@test.com");
Blueshift.setUserInfoCustomerId("cust123456");
Blueshift.setUserInfoExtras({"profession":"software engineer", "isLoggedIn":true});
Follow below steps for SDK integration:
// Identify event with custom data
Blueshift.identifyWithDetails({"user_type":"premium"});
#### Setup AppDelegate.h
To get started, include the Plugin’s header file in the `AppDelegate.h` file of the app’s Xcode project.
Include the Plugin’s header `BlueshiftPluginManager.h` in `AppDelegate.h` and also implement the `UNUserNotificationCenterDelegate` protocol on `AppDelegate` class. The `AppDelegate.h` should like:
```objective-c
#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
#import "BlueshiftPluginManager.h"
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>
@property (nonatomic, strong) UIWindow *window;
@end
```
#### Setup AppDelegate.m
### Custom Event
Use the below method to track custom events with custom data in your app.
Now open `AppDelegate.m` file and add the following function in the `AppDelegate` class. Initialise the Blueshift react native plugin using `BlueshiftPluginManager` class method `intialisePluginWithConfig: autoIntegrate:`. Pass `autoIntegrate` as `YES` to opt in for automatic integration.
```javascript
Blueshift.trackCustomEvent("name_of_event",{},false);
To know more about the other optional configurations, please check [this document](https://developer.blueshift.com/docs/include-configure-initialize-the-ios-sdk-in-the-app#initialize-the-sdk).
```objective-c
- (void)initialiseBlueshiftWithLaunchOptions:(NSDictionary*)launchOptions {
// Create config object
BlueShiftConfig *config = [[BlueShiftConfig alloc] init];
// Set Blueshift API key to SDK
config.apiKey = @"API KEY";
// Set launch options to track the push click from killed app state
config.applicationLaunchOptions = launchOptions;
// Delay push permission by setting NO, by default push permission is displayed on app launch.
config.enablePushNotification = NO;
// Set userNotificationDelegate to self to get the push notification callbacks.
config.userNotificationDelegate = self;
// Initialise the Plugin and SDK using the Automatic integration.
[[BlueshiftPluginManager sharedInstance] intialisePluginWithConfig:config autoIntegrate:YES];
}
```
Now call above function inside the `application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions` method of the `AppDelegate` class. The `AppDelegate.m` file will look like:
### Push and in-app notification opt-out
- **Push notifications opt-out**
```objective-c
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
Use Blueshift app preferences to opt-out of push notifications that we send from our platform. You can use it if you don't want push notifications from our platform to show up on your device. After modifying the value, fire an identify event to update the data on the Blueshift server.
/*
// React Native initialisation code.
//
*/
// Initialise the Plugin & SDK by calling the `initialiseBlueshiftWithLaunchOptions` method before the return statment.
[self initialiseBlueshiftWithLaunchOptions:launchOptions];
return YES;
}
```javascript
// set the preference for push notification
Blueshift.setEnablePush(false);
```
// fire identify event
Blueshift.identifyWithDetails({});
The SDK setup with automatic integration is complete over here. Using this setup you will be able to send events to Blueshift, send basic push notifications (title+content) to the iOS device. And also you will get the deep links in your react app under event `url`.
Refer section to enable Rich push notifications, section to enable in-app notifications and section to enable Blueshift email deep links.
### Manual Integration
You will need to follow above mentioned steps to create the Blueshift Config and then initialise the Plugin by passing `autoIntegrate` as `NO`.
```objective-c
[[BlueshiftPluginManager sharedInstance] intialisePluginWithConfig:config autoIntegrate:NO];
```
- **In-app notifications opt-out**
Now, as you are doing manual integration, follow below steps to integrate the Blueshift SDK manually to handle push notification and deep link callbacks.
Use Blueshift app preferences to opt-out of In-app notifications that we send from our platform. You can use it if you don't want in-app notifications from our platform to show up on your device. After modifying the value, fire an identify event to update the data on the Blueshift server.
#### Configure AppDelegate for push notifications
Add the following to the `AppDelegate.m` file of your app’s Xcode project to support the push notifications. Refer [this section](https://developer.blueshift.com/docs/include-configure-initialize-the-ios-sdk-in-the-app#configure-appdelegate-for-push-notifications) for more information.
```javascript
// set the preference for push notification
Blueshift.setEnableInApp(false);
```objective-c
#pragma mark - remote notification delegate methods
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(nonnull NSData *)deviceToken {
[[BlueShift sharedInstance].appDelegate registerForRemoteNotification:deviceToken];
}
// fire identify event
Blueshift.identifyWithDetails({});
- (void)application:(UIApplication*)application didFailToRegisterForRemoteNotificationsWithError:(NSError*)error {
[[BlueShift sharedInstance].appDelegate failedToRegisterForRemoteNotificationWithError:error];
}
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))handler {
[[BlueShift sharedInstance].appDelegate handleRemoteNotification:userInfo forApplication:application fetchCompletionHandler:handler];
}
#pragma mark - UserNotificationCenter delegate methods
-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler{
NSDictionary* userInfo = notification.request.content.userInfo;
if([[BlueShift sharedInstance]isBlueshiftPushNotification:userInfo]) {
[[BlueShift sharedInstance].userNotificationDelegate handleUserNotificationCenter:center willPresentNotification:notification withCompletionHandler:completionHandler];
} else {
//Handle Notifications other than Blueshift
}
}
- (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler {
NSDictionary* userInfo = response.notification.request.content.userInfo;
// Optional : Call Plugin method to send the push notification payload to react native under event `PushNotificationClickedEvent`.
[[BlueshiftPluginManager sharedInstance] sendPushNotificationDataToRN:userInfo];
if([[BlueShift sharedInstance]isBlueshiftPushNotification:userInfo]) {
// Call Blueshift method to handle the push notification click
[[BlueShift sharedInstance].userNotificationDelegate handleUserNotification:center didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
} else {
//Handle Notifications other than Blueshift
}
}
```
#### Configure AppDelegate for Batch uploads
Add following to the `AppDelegate.m` file of your app’s Xcode project to support batch uploads. Refer [this section](https://developer.blueshift.com/docs/include-configure-initialize-the-ios-sdk-in-the-app#batch-upload-interval) for more information.
```objective-c
#pragma mark - Lifecycle methods
- (void)applicationDidEnterBackground:(UIApplication *)application {
[[BlueShift sharedInstance].appDelegate appDidEnterBackground:application];
}
### Delay Push permission dialog(iOS only)
Blueshift SDK registers for iOS push notifications automatically after the app launch. If you don't want the push notification permission to be displayed immediately on the app launch, you can customize it to display it later after sign up/sign in. To do that you need to set the `config.enablePushNotification` as `false` in your **Xcode project** while initializing the Blueshift Plugin.
- (void)applicationDidBecomeActive:(UIApplication *)application {
[[BlueShift sharedInstance].appDelegate appDidBecomeActive:application];
}
```Objective-c
// Disable push notifications in the SDK configuration
// to delay the Push notification permission dialog
[config setEnablePushNotification:NO];
```
#### Handle the push and in-app deep links manually
The Blueshift iOS SDK supports deep links on push notifications and in-app messages. If a deep-link URL is present in the push or in-app message payload, the Blueshift SDK triggers `AppDelegate` class `application:openURL:options:` method on notification click/tap action and delivers the deep link there.
You can invoke the below plugin method from your **React Native JS/TS** when you want to register for push notifications and show the push notification dialog to the user.
```objective-c
/// Override the open url method for handling deep links
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
// Check if the received link is from Blueshift, then pass it to Blueshift plugin to handle it.
if ([[BlueshiftPluginManager sharedInstance] isBlueshiftOpenURLLink:url options:options] == YES) {
return [[BlueshiftPluginManager sharedInstance] application:application openURL:url options:options];
} else {// If the link is not from Blueshift, write custom logic to handled it in your own way.
// Write code to handle the other urls
}
return YES;
}
```
In case of Automatic integration, the deep links for push and in-app are handled by the plugin automatically. You can always override this functionality by manually implementing the method as mentioned above.
```javascript
// Register for remote notifications using SDK.
// Calling this method will show push permission dialogue to the user.
Blueshift.registerForRemoteNotification();
## 2. Enable Rich push notifications
Blueshift supports Image and Carousel based push notifications.
- Support Rich image based push notifications - you will need to add the `Notification service extension` to you project and integrate the `Blueshift-iOS-Extension-SDK`. Follow [this document](https://developer.blueshift.com/docs/integrate-your-ios-apps-notifications-with-blueshift#set-up-notification-service-extension) for step by step guide to enable Rich image push notifications.
- Support Carousel push notifications - You will need to integrate the `Notification service extension` and then add `Notification content extension`. Follow [this document](https://developer.blueshift.com/docs/integrate-your-ios-apps-notifications-with-blueshift#set-up-notification-content-extension) for step by step guide to enable carousel push notifications. Make sure you set the App group id, `App group id` is mandatory to set when you use carousel push notifications. For [this document](https://developer.blueshift.com/docs/integrate-your-ios-apps-notifications-with-blueshift#add-an-app-group) to create and set up app group id in your project.
## 3. Enable In-App Messages
By default, In-app messages are disabled in the SDK. You will need to enable it explicitly from the Blueshift config.
#### Enable In-App messages from Blueshift Config
During the SDK initialisation in `AppDelegate.m` file, we have set the values to the config. You need to set `enableInAppNotification` property of config to `YES` to enable in-app messages from Blueshift iOS SDK.
```objective-c
[config setEnableInAppNotification:YES];
```
#### Enable Background Modes
We highly recommend enabling Background fetch and Remote notifications background modes from the Signing & Capabilities. This will enable the app to fetch the in-app messages if the app is in the background state.
## In-App Notifications
Once you enable the in-app notifications from the SDK as mentioned in the Android and iOS set-up documents, you will need to register the screens in order to see in-app messages. You can register the screens in two ways.
![alt_text](https://files.readme.io/31d15b6-Screenshot_2020-07-14_at_7.02.38_PM.png)
- **Register all screens** Refer to [this]() Android and iOS integration documents to register all screens to receive in-app notifications. After completing this set up, in-app can be displayed on any screen when it is availble to display.
#### Register screens for in-app messages
Once you enable the In-app messages, you will need to register the react native screens for receiving the in-app messages. You can register the screens in two ways.
- **Register and unregister each screen** of your react native project for in-app messages. If you don’t register a screen for in-app messages, the in-app messages will stop showing up for screens that are not registered. You will need to add in-app registration and unregistration code on the `componentDidMount` and `componentWillUnmount` respectively inside your react native screens. Refer below code snipper for reference.
1. Register all screens to receive in-app messages
You need to add `registerForInAppMessage` line in the `AppDelegate.m` file immediately after the SDK initialisation line. Refer below code snippet for reference.
```objective-c
[[BlueshiftPluginManager sharedInstance] intialisePluginWithConfig:config autoIntegrate:NO];
[[BlueShift sharedInstance] registerForInAppMessage:@"ReactNative"];
```
2. Register and unregister each screen of your react native app for in-app messages. If you don’t register a screen for in-app messages, the in-app messages will stop showing up for screens that are not registered. You will need to add in-app registration and unregistration code on the `componentDidMount` and `componentWillUnmount` respectively inside your react native screens. Refer below code snipper for reference.
```Javascript

@@ -268,177 +148,95 @@ componentDidMount() {

```
## 3. Enable Blueshift email deep links
Blueshift’s deep links are usual https URLs that take users to a page in the app or launch them in a browser. If an email or text message that we send as a part of your campaign contains a Blueshift deep link and a user clicks on it, iOS will launch the installed app and Blueshift SDK will deliver the deep link to the app so that app can navigate the user to the respective screen.
- Complete the CNAME and AASA configuration as mentioned in the `Prerequisites` section of [this document](https://developer.blueshift.com/docs/integrate-blueshifts-universal-links-ios#prerequisites).
## Event Listeners and Deep links
- Add associated domains to your Xcode project as mentioned in the `Integration` section of [this document](https://developer.blueshift.com/docs/integrate-blueshifts-universal-links-ios#integration).
### Get Push notification payload on React Native
Blueshift Plugin will deliver the Push notification payload using the event `PushNotificationClickedEvent` when the user clicks on the push notification. Add a custom event listener using the `Blueshift` method in your react project.
- Follow below steps for to enable Blueshift deep links from the SDK.
```javascript
// Add custom event listner using Blueshift method
Blueshift.addEventListener('PushNotificationClickedEvent',this.handlePushClick );
Implement protocol `BlueshiftUniversalLinksDelegate` on the AppDelegate class to get the deep links callbacks from the SDK. You `AppDelegate.h` will look like below,
```objective-c
#import "BlueshiftPluginManager.h"
handlePushClick(payload) {
alert("push payload "+JSON.stringify(payload));
}
```
Remove the custom event listener by calling the Blueshift `removeEventListener` method.
@interface AppDelegate : UIResponder <UIApplicationDelegate,BlueshiftUniversalLinksDelegate, UNUserNotificationCenterDelegate, RCTBridgeDelegate>
@property (nonatomic, strong) UIWindow *window;
@end
```javascript
// Remove custom event listner using Blueshift method
Blueshift.removeEventListener('PushNotificationClickedEvent');
```
Now set the `blueshiftUniversalLinksDelegate` config variable to `true` to enable the Blueshift deep links during the Blueshift Plugin initialisation in `AppDelegate.m` file.
```objective-c
// If you want to use the Blueshift universal links, then set it as below.
config.blueshiftUniversalLinksDelegate = self;
```
### Automatic Integration
If you have integrated the Plugin and SDK using the automatic integration, your setup is completed here. You will receive the deep link on the react native using event `url`.
### Deep links for Push and In-app notifications
Blueshift Plugin will take care of delivering the deep link added inside the Push and in-app notifications to the react-native once the user interacts with the notification.
### Manual Integration
If you have opted for Manual integration, you will need to follow below steps to integrated the Blueshift Plugin.
Blueshift plugin will deliver the deep link to react-native using `url` event. You will need to add an event listener using default `Linking` method as below in your react project to receive the deep link.
#### Configure continueUserActivity method
Pass the URL/activity from the `continueUserActivity` method to the Plugin, so that the Plugin can process the URL and perform the click tracking. After processing the URL, the SDK sends the original URL in the `BlueshiftUniversalLinksDelegate` method.
```objective-c
// Override the `application:continueUserActivity:` method for handling the universal links
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
// Check if the received URL is Blueshift universal link URL, then pass it to Blueshift plugin to handle it.
if ([[BlueshiftPluginManager sharedInstance] isBlueshiftUniversalLink:userActivity] == YES) {
return [[BlueshiftPluginManager sharedInstance] application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
} else { // If the link is not from Blueshift, write custom logic to handled it in your own way.
// Write code to handle the other urls
}
return YES;
```javascript
componentDidMount() {
// Add event listner for `url` event
global.urlListener = Linking.addEventListener('url', (event) => {
var url = event.url;
if(url) {
this.handleDeeplinkUrl(url);
}
});
}
```
In case of Automatic integration, the email deep links are handled by the plugin automatically. You can always override this functionality by manually implementing the method as mentioned above.
#### Implement BlueshiftUniversalLinksDelegate
Now, implement the `BlueshiftUniversalLinksDelegate` delegate methods to get the success and failure callbacks. `BlueshiftPluginManager` will take care of delivering this deep link under event `url` to the react native.
```objective-c
// Deep link processing success callback
- (void)didCompleteLinkProcessing:(NSURL *)url {
if (url) {
[[BlueshiftPluginManager sharedInstance] application:UIApplication.sharedApplication openURL:url options:@{}];
}
componentWillUnmount() {
// You must unregister these callbacks
global.urlListener.remove();
}
// Deep link processing failure callback
- (void)didFailLinkProcessingWithError:(NSError *)error url:(NSURL *)url {
if (url) {
[[BlueshiftPluginManager sharedInstance] application:UIApplication.sharedApplication openURL:url options:@{}];
}
handleDeeplinkUrl(url) {
// Handle the received deep link to perform action.
}
```
Refer to the Troubleshooting section of [this document](https://developer.blueshift.com/docs/integrate-blueshifts-universal-links-ios#troubleshooting) to
troubleshoot the integration issues.
### Deep links for Email links
Email deep links are basically App links for Android and Universal links for iOS. To enable the App links and Universal links you need to set up them as mentioned in the Android and iOS integration document.
# Android Integration
Once set up is done, you can modify the existing `url` event listener added for Push and In-app deep links to process the email deep links. It should look like the below.
## Depend on Blueshift Android SDK
To install the Blueshift Android SDK, add the following line to the app level `build.gradle` file. To know the latest version, check the [releases](https://github.com/blueshift-labs/Blueshift-Android-SDK/releases) page in Github.
```groovy
implementation "com.blueshift:android-sdk-x:$sdkVersion"
```
## Depend on Firebase Messaging
Blueshift uses Firebase Messaging for sending push messages. If not already done, please integrate Firebase Messaging to the project.
If this is the first time that you are integrating FCM with your application, add the following lines of code into the `AndroidManifest.xml` file. This will enable the Blueshift Android SDK to receive the push notification sent from Blueshift servers via Firebase.
```xml
<service android:name="com.blueshift.fcm.BlueshiftMessagingService">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service>
```
If you have an existing FCM integration, let your `FirebaseMessagingService` class to extend `BlueshiftMessagingService` as mentioned below. This will enable the Blueshift Android SDK to receive the push notification sent from Blueshift servers via Firebase.
```java
public class AwesomeAppMessagingService extends BlueshiftMessagingService {
@Override
public void onMessageReceived(RemoteMessage remoteMessage) {
if (BlueshiftUtils.isBlueshiftPushMessage(remoteMessage)) {
super.onMessageReceived(remoteMessage);
} else {
/*
* The push message does not belong to Blueshift. Please handle it here.
*/
}
```javascript
componentDidMount() {
// Get the email deep link when app launched from killed state
Linking.getInitialURL().then(url => {
if(url) {
// Check if the email deep link from Blueshift
if (Blueshift.isBlueshiftUrl(url)) {
// Process the email deep link to get original url
Blueshift.processBlueshiftUrl(url);
}
}
});
@Override
public void onNewToken(String newToken) {
super.onNewToken(newToken);
/*
* Use the new token in your app. the super.onNewToken() call is important
* for the SDK to do the analytical part and notification rendering.
* Make sure that it is present when you override onNewToken() method.
*/
// Add event listner for `url` event
global.urlListener = Linking.addEventListener('url', (event) => {
var url = event.url;
if(url) {
// Check if the email deep link from Blueshift
if (Blueshift.isBlueshiftUrl(url)) {
// Process the email deep link to get original url
Blueshift.processBlueshiftUrl(url);
} else {
this.handleDeeplinkUrl(url);
}
}
});
}
```
## Grant Permissions
componentWillUnmount() {
// You must unregister these callbacks
global.urlListener.remove();
}
Add the following permissions to the `AndroidManifest.xml` file.
```xml
<!-- Internet permission is required to send events,
get notifications and in-app messages. -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- Network state access permission is required to detect changes
in network connection to schedule sync operations. -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!-- Location access permission is required if you want to track the
location of the user. You can skip this step if you don't want to
track the user location. -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
handleDeeplinkUrl(url) {
// Handle the received deep link to perform action.
}
```
## Initialize the Native SDK
##
Open the `MainApplication` class and add the following lines to its `onCreate()` method.
```java
Configuration configuration = new Configuration();
// == Mandatory Settings ==
configuration.setAppIcon(R.mipmap.ic_launcher);
configuration.setApiKey("BLUESHIFT_EVENT_API_KEY");
Blueshift.getInstance(this).initialize(configuration);
```
To know more about the other optional configurations, please check [this document](https://developer.blueshift.com/docs/get-started-with-the-android-sdk#optional-configurations).
Also, add update the `onCreate()` and `onNewIntent()` methods of your `MainActivity` class as given below to handle push deep links.
```java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
BlueshiftReactNativeModule.processBlueshiftPushUrl(getIntent());
}
@Override
public void onNewIntent(Intent intent) {
super.onNewIntent(intent);
BlueshiftReactNativeModule.processBlueshiftPushUrl(getIntent());
}
```
## Contributing

@@ -445,0 +243,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc