Git Product home page Git Product logo

ct-segment-react-native's Introduction

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

Integrating a React Native app with Segment & then with CleverTap

Step 1: Segment in React Native app

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

Step 2: CleverTap in Segment React Native app

  • 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]
    })

Validation

Ensure that segment is getting the data

After you launch your app and perform some actions

  • Go to

    Segment 
     -> Source 
      -> <YOUR_SOURCE_CONNECTION> 
       -> Debugger
    
  • You must now be getting the events in Segment Events in Segment

Ensure that Segment is sending the events to CleverTap
  • Go to

    Segment 
     -> Destination 
      -> <YOUR_CLEVERTAP_DESTINATION> 
       -> Event Delivery
    
  • You must see # of Events Delivered to be greater than zero Events to CleverTap

    If # of events is zero, check that the time range is correct

Ensure CleverTap gets the event
  • Go to

    CleverTap Dashboard 
     -> Event Analysis
    
  • Query the event that was delivered from Segment in Step 1 CleverTap Dashboard

For iOS

In the ios folder, make sure to run

pod install
More elaborative app that showcases react native apps working with segment and CleverTap

Jay's example

Enabling push notifications - Android

Install the clevertap-react-native module

In your react-native app's folder
npm install --save clevertap-react-native

Update your build.gradle to have the right dependencies

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'

In your App -> Main -> AndroidManifest file, add you clevertap account details

<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"/>

And permission to send data to clevertap

<!-- 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"/>

In your MainActivity, enable deep links

import com.clevertap.react.CleverTapModule;

@Override
	protected void onCreate(Bundle savedInstanceState) {
    	super.onCreate(savedInstanceState);
    	CleverTapModule.setInitialUri(getIntent().getData());
	}
}

In your MainApplication, initiate ActivityLifeCycle.

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());
  }

Add MyFirebaseMessagingService class, to send token to CT and to set channels

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

In your App -> Main -> AndroidManifest, add the new service

<service android:name=".MyFirebaseMessagingService">
	<intent-filter>
		<action android:name="com.google.firebase.MESSAGING_EVENT"/>
	</intent-filter>
</service>

Bring your google-services.json to app folder

Make sure that your Firebase service key and token are updated in CT FCM push

Update your app's build.gradle according to Google's integration steps

apply plugin: 'com.google.gms.google-services'

Update your project's build.gradle according to Google's integration steps

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)

Enabling Push Notifications - iOS

Make sure your minimum ios target in PodFile is 11 (need to know the ideal, but this works for me)

Get you sdks

Inside your ios folder
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

Update your AppDelegate.m

Imports
#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>

Notes to self

  • 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"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.