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`

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.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