Make sure you've set up Segment connections correctly
- Source is set to React Native app
- Destination is set to CT with the project id and token set
- Soruce and Destination are connected and enabled
To get started with Segment, follow this
-
Add the segment dependency
npm install -save @segment/analytics-react-native
-
Import the analytics class object wherever you wish to connect to segment backend
import analytics from '@segment/analytics-react-native'
-
Setup and add segment events
await analytics.setup('YOUR_WRITE_KEY', { // Record screen views automatically! recordScreenViews: true, // Record certain application events automatically! trackAppLifecycleEvents: true })
Remember to replace YOUR_WRITE_KEY with your own Segment Write Key
-
Get CleverTap's Segment React Native SDK
yarn add @segment/analytics-react-native-clevertap
-
Import CleverTap class
import CleverTap from '@segment/analytics-react-native-clevertap'
-
Update the Segment setup function to now also send data to CleverTap
await analytics.setup('YOUR_WRITE_KEY', { // Record screen views automatically! recordScreenViews: true, // Record certain application events automatically! trackAppLifecycleEvents: true, using : [CleverTap] })
After you launch your app and perform some actions
-
Go to
Segment -> Source -> <YOUR_SOURCE_CONNECTION> -> Debugger
-
Go to
Segment -> Destination -> <YOUR_CLEVERTAP_DESTINATION> -> Event Delivery
-
You must see # of Events Delivered to be greater than zero
If # of events is zero, check that the time range is correct
-
Go to
CleverTap Dashboard -> Event Analysis
In the ios folder, make sure to run
pod install
In your react-native app's folder
npm install --save clevertap-react-native
In your android app build.gradle, add the following
implementation 'com.clevertap.android:clevertap-android-sdk:3.6.3'
implementation "com.google.android.gms:play-services-base:+"
implementation "com.google.firebase:firebase-messaging:+"
implementation 'androidx.multidex:multidex:2.0.1'
//For CleverTap Android SDK v3.6.3 and above add the following -
implementation 'com.android.installreferrer:installreferrer:1.1'
implementation 'com.android.support:appcompat-v7:28.0.0'//MANDATORY for App Inbox
implementation 'com.android.support:design:28.0.0'//MANDATORY for App Inbox
implementation 'com.github.bumptech.glide:glide:4.9.0'//MANDATORY for App Inbox
//Optional ExoPlayer Libraries for Audio/Video Inbox Messages. Audio/Video messages will be dropped without these dependencies
implementation 'com.google.android.exoplayer:exoplayer:2.8.4'
implementation 'com.google.android.exoplayer:exoplayer-hls:2.8.4'
implementation 'com.google.android.exoplayer:exoplayer-ui:2.8.4'
<meta-data
android:name="CLEVERTAP_ACCOUNT_ID"
android:value="Your CleverTap Account ID"/>
<meta-data
android:name="CLEVERTAP_TOKEN"
android:value="Your CleverTap Account Token"/>
<!-- Required to allow the app to send events and user profile information -->
<uses-permission android:name="android.permission.INTERNET"/>
<!-- Recommended so that CleverTap knows when to attempt a network call -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
import com.clevertap.react.CleverTapModule;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
CleverTapModule.setInitialUri(getIntent().getData());
}
}
Need to Check - Is it required event though segment will have these?
import com.clevertap.android.sdk.ActivityLifecycleCallback;
@Override
public void onCreate() {
ActivityLifecycleCallback.register(this);
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
if (!BuildConfig.DEBUG) {
UpdatesController.initialize(this);
}
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
}
package com.second;
import android.os.Bundle;
import android.util.Log;
import com.clevertap.android.sdk.CleverTapAPI;
import com.clevertap.android.sdk.pushnotification.NotificationInfo;
import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;
import java.util.Map;
public class MyFirebaseMessagingService extends FirebaseMessagingService {
@Override
public void onMessageReceived(RemoteMessage message){
try {
if (message.getData().size() > 0) {
Bundle extras = new Bundle();
for (Map.Entry<String, String> entry : message.getData().entrySet()) {
extras.putString(entry.getKey(), entry.getValue());
}
Log.e("TAG","onReceived Mesaage Called");
NotificationInfo info = CleverTapAPI.getNotificationInfo(extras);
if (info.fromCleverTap) {
//Create Notification Channel
CleverTapAPI.createNotificationChannel(getApplicationContext(), "generic", "generic", "generic", 2, true);
CleverTapAPI.createNotificationChannel(getApplicationContext(), "123456", "123456", "Your Channel Description", 2, true);
// Creating a Notification Channel With Sound Support
// CleverTapAPI.createNotificationChannel(getApplicationContext(), "got", "Game of Thrones", "Game Of Thrones", NotificationManager.IMPORTANCE_MAX, true, "gameofthrones.mp3");
CleverTapAPI.createNotificationChannel(getApplicationContext(), "got", "Game of Thrones", "Game Of Thrones", 2, true, "gameofthrones.mp3");
CleverTapAPI.createNotification(getApplicationContext(), extras);
}
}
} catch (Throwable t) {
Log.d("MYFCMLIST", "Error parsing FCM message", t);
}
}
@Override
public void onNewToken(String token) {
CleverTapAPI.getDefaultInstance(this).pushFcmRegistrationId(token,true);
// If you want to send messages to this application instance or
// manage this apps subscriptions on the server side, send the
// Instance ID token to your app server.
//sendRegistrationToServer(token);
}
}
//Update your channels above
<service android:name=".MyFirebaseMessagingService">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT"/>
</intent-filter>
</service>
Make sure that your Firebase service key and token are updated in CT FCM push
apply plugin: 'com.google.gms.google-services'
classpath("com.google.gms:google-services:4.3.5")
Make sure notification channel is updated in MyFirebaseMessagingService Make sure that the same notification channel is used for sending notifications (test)
Inside your ios folderMake sure your minimum ios target in PodFile is 11 (need to know the ideal, but this works for me)
pod install
You may encounter this error
warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'boost-for-react-native' from project 'Pods')
Fix this by adding the following piece of code inside your target in PodFile
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
if Gem::Version.new('8.0') > Gem::Version.new(config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'])
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '8.0'
end
end
end
end
#import <CleverTap-iOS-SDK/CleverTap.h>
#import <clevertap-react-native/CleverTapReactManager.h>
In didFinishLaunchingWithOptions
[self registerForPush];
[CleverTap autoIntegrate];
[CleverTap setDebugLevel:CleverTapLogDebug];
[[CleverTapReactManager sharedInstance] applicationDidLaunchWithOptions:launchOptions];```
And add additional functions
-(void) registerForPush {
UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
center.delegate = self;
[center requestAuthorizationWithOptions:(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge) completionHandler:^(BOOL granted, NSError * _Nullable error){
if(!error){
dispatch_async(dispatch_get_main_queue(), ^{
[[UIApplication sharedApplication] registerForRemoteNotifications];
});
}
}];
}
//Device Token
-(void) application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken{
NSLog(@"Device Token : %@",deviceToken);
}
-(void) application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error{
NSLog(@"Error %@",error.description);
}
-(BOOL)application:(UIApplication *)application willContinueUserActivityWithType:(NSString *)userActivityType{
return TRUE;
}
//PN Delgates
-(void) userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler{
self.resp = response.notification.request.content.userInfo;
completionHandler();
}
-(void) userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler{
completionHandler(UNAuthorizationOptionAlert | UNAuthorizationOptionBadge | UNAuthorizationOptionSound);
}
Also update your AppDelegate.h to have the right imports, variables and implementations
#import <Foundation/Foundation.h>
#import <EXUpdates/EXUpdatesAppController.h>
#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
#import <UserNotifications/UserNotifications.h>
#import <CleverTap-iOS-SDK/CleverTap.h>
#import <clevertap-react-native/CleverTapReactManager.h>
#import <UMCore/UMAppDelegateWrapper.h>
@interface AppDelegate : UMAppDelegateWrapper <RCTBridgeDelegate, EXUpdatesAppControllerDelegate, UNUserNotificationCenterDelegate>
@property (nonatomic, strong) UIWindow *window;
@property (nonatomic,strong) NSDictionary *resp;
@end
Lastly, make sure you've added the CT token & account id in your Info.plist file
<key>CleverTapAccountID</key>
<string>XXX-XX-XXX</string>
<key>CleverTapToken</key>
<string>XXX-XXX</string>
- To run the react native project on iOS device
react-native run-ios --device
- If you get aps-entitlement error, check that Signing and capabilities have the "Background mode" and "push notification"