Customer Engagement
Installing Smartech Push React Native
Install CEE React Native plugin using the npm package manager. And then link your native dependencies :
npm install smartech-push-react-native
For Android SDK
If you are building your Android app, follow the Android Customer Engagement steps for integration steps for push notifications & in-app messages.
Also you need to add the below code inside the onCreate method of your MainActivity class.
SmartechPushReactNativeModule.init(getIntent());
SmartechPushReactNativeModule.init(intent);
Step 1 : Define Latest SDK version
Add below line in gradle.properties
// Version of smartech push SDK to use with React Native
SMARTECH_PUSH_SDK_VERSION=<<push_sdk_android_version>>
Step 2: Integrate the latest CEE SDK
Make the following changes in the app-level build.gradle
api "com.netcore.android:smartech-push:${SMARTECH_PUSH_SDK_VERSION}"
For iOS SDK
If you are building your iOS app, follow the iOS Customer Engagement steps for integration steps for push notifications & in-app messages.
Handling deeplinks
#import <Smartech/Smartech.h>
#import <SmartPush/SmartPush.h>
#import <UserNotifications/UserNotifications.h>
#import <UserNotificationsUI/UserNotificationsUI.h>
#import <SmartechBaseReactNative.h>
#import "SmartechPushReactnative.h"
#import "SmartechPushReactEventEmitter.h"
To implement the deeplink in the iOS React Native app, please implement the following steps:
1. Create smtDeeplinkData Dictionary in appdelegate
@interface AppDelegate () <UNUserNotificationCenterDelegate, SmartechDelegate> {
NSMutableDictionary *smtDeeplinkData;
}
var smtDeeplinkData = [String: Any]()
2. Initialize the dictionary and add observer in didFinishLaunchingWithOptions
didFinishLaunchingWithOptions
smtDeeplinkData = [[NSMutableDictionary alloc] init];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleNotificationInTerminatedSate:) name:@"OnloadEvent" object:nil];
smtDeeplinkData = [:]
NotificationCenter.default.addObserver(self, selector: #selector(handleNotificationinTerminatedSate(notification:)), name: NSNotification.Name("OnloadEvent"), object: nil)
3. Add Smartech Deeplink Delegate methods
#pragma mark Smartech Deeplink Delegate
- (void)handleDeeplinkActionWithURLString:(NSString *)deeplinkURLString andCustomPayload:(NSDictionary *_Nullable)customPayload {
NSMutableDictionary *smtData = [[NSMutableDictionary alloc] init];
smtData[kSMTDeeplinkIdentifier] = deeplinkURLString ? deeplinkURLString : @"";
smtData[kSMTCustomPayloadIdentifier] = customPayload ? customPayload : @{};
smtDeeplinkData = smtData;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 1.0 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
NSLog(@" SMTLOGGER DEEPLINK: %@",deeplinkURLString);
[[NSNotificationCenter defaultCenter] postNotificationName:kSMTDeeplinkNotificationIdentifier object:nil userInfo:smtData];
});
}
@objc func handleNotificationinTerminatedSate(notification: NSNotification) {
if (smtDeeplinkData.count > 0) {
self.handleDeeplinkAction(withURLString: smtDeeplinkData[kSMTDeeplinkIdentifier] as! String, andCustomPayload: smtDeeplinkData[kSMTCustomPayloadIdentifier] as? [AnyHashable : Any])
smtDeeplinkData = [:]
}
}
4. Add NotificationManager
. It will create Bridge between React Native to native.
NotificationManager
. It will create Bridge between React Native to native.//NotificationManager.h file
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
NS_ASSUME_NONNULL_BEGIN
@interface NotificationManager : NSObject <RCTBridgeModule>
@end
NS_ASSUME_NONNULL_END
//NotificationManager.m file
#import "NotificationManager.h"
@implementation NotificationManager
RCT_EXPORT_MODULE()
RCT_EXPORT_METHOD(postNotification:(NSString *)name) {
[[NSNotificationCenter defaultCenter] postNotificationName:name object:nil userInfo:nil];
}
@end
Retrieving Deeplink Data
The below method will provide the deep link value and the custom payload when push notification is clicked.
let eventEmitterSubscription;
SmartechPushReact.addDeepLinkListener(SmartechPushReact.SmartechDeeplinkNotification, handleDeeplinkWithPayload, (eventSubscriptionObject) => {
eventEmitterSubscription = eventSubscriptionObject;
});
// Android callback to handle deeplink in terminated/background state.
SmartechPushReact.getDeepLinkUrl(function (_response) {
console.log('getDeepLinkUrl Initial Deeplink Response ', _response);
});
eventEmitterSubscription.remove() // For remove listner
const handleDeeplinkWithPayload = (deeplinkdata) => {
};
Add listener for notification received
The below method will provide the push notification payload which is received from Netcore
let notificationReceivedEventEmitterSubscription
// Adding the Smartech Deeplink Notification received Listener
SmartechPushReact.addCommonListener(SmartechPushReact.SmartechNotificationReceived, handleOnNotificationReceived, (eventSubscriptionObject) => {
notificationReceivedEventEmitterSubscription = eventSubscriptionObject;
});
//Remove this listener on cleanup
notificationReceivedEventEmitterSubscription.remove() // For remove listner
const handleOnNotificationReceived = (notificationData) => {
};
Add listener for Custom HTML In-app deep link and custom payload (Only For Android)
The below method will provide the deep link and custom payload on custom HTML in-app message is clicked
let inAppClickedEventEmitterSubscription
// Adding the Smartech Deeplink Notification received Listener
Smartech.addCommonListener(Smartech.SmartechInAppOnClick, handleOnInAppCustomHtmlClick, (eventSubscriptionObject) => {
inAppClickedEventEmitterSubscription = eventSubscriptionObject;
});
//Remove this listener on cleanup
inAppClickedEventEmitterSubscription.remove() // For remove listner
const handleOnInAppCustomHtmlClick = (inappPayload) => {
};
Updated about 1 month ago