You may integrate both Android and iOS SDKs in your React Native application, through the use of React Native Modules.
For general information about React Native Modules, please refer to these articles:
Please review the provided React Native sample application and its Readme file, which explains both the integration and available methods.
Note:
The required domainId value is a four-digit number (or a string) that is unique for each domain, e.g. "1234".
The production value can be found on the client's website (on article pages) by typing _ain.id in the Console, but for testing purposes you may use a different value. Please contact smartocto support for more details.
Resources
- iOS SDK binary framework (zip, 1.6MB)
- iOS native module (zip, 1.3KB)
- Android SDK release build (aar, 45KB)
- Android native module (zip, 1.6KB)
- Example React Native app (zip, 1.2MB) - contains both Android and iOS SDKs
Android SDK setup
In order to use ContentInsights (smartocto insights) Android SDK, it is necessary to copy provided ContentInsights-X.Y.Z.aar file into <project_root>/android/app/libs folder.
In case the libs folder does not exist, you should create it.
build.gradle modification
In order for Gradle to include .aar file in your project, it is necessary to modify the build.gradle file at <project_root>/android/app/build.gradle
Under the dependencies section in build.gradle file update the following line:
implementation fileTree(dir: 'libs', include: ['*.jar'])
to look like this:
implementation fileTree(dir: 'libs', include: ['*.jar', '*.aar'])
If for any reason the line above does not exist, you should add it.
Application code
In order to use ContentInsights (smartocto insights) SDK, it is required to copy provided Native module files from the links above into your Java package. Native module class implements the getName() method which represents the name of the module in the ReactNative app. It also includes all the method calls for tracking. You need to change the package name in the header of this file.
package YOUR_PACKAGE_NAME // change this/**
* Get the name of the module, to be used in ReactNative as NativeModules.{module_name}
*/
@Override
public void getName() { return "ContentInsights";
}
See: ContentInsightsSDKModule.java at
<project_root>/android/app/src/main/java/com.<YOUR_PACKAGE_NAME>
The created module is included in the provided Package class. Again, make sure you change the package name here as well:
package YOUR_PACKAGE_NAME // change this/**
* {@inheritDoc}
*/
@Override
@NonNull
public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new ContentInsightsSDKModule(reactContext, domainId));
return modules;
}
For more information, see ContentInsightsExamplePackage.java at
<project_root>/android/app/src/main/java/com.<YOUR_PACKAGE_NAME>
Next, you need to include the aforementioned package in the getPackages() method inside your MainApplication.java class.
Here you need to provide unique domainId to the SDK:
/**
* {@inheritDoc}
*/
@Override
@NonNull
public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new ContentInsightsSDKModule(reactContext, domainId)); // set your domainId here
return modules;
}
iOS SDK setup
In order to use ContentInsights (smartocto insights) iOS SDK, it is necessary that you copy provided folder
ContentInsightsSdk-X.Y.Z.xcframework
and the following files:
- ContentInsightsModule.swift
- ContentInsightsSDKIntegration-Bridging-Header.h
- ContentInsightsBridge.m
into <project_root>/ios folder and include them in your project.
Podfile
If you're using CococaPods, it is required to add use_frameworks! to the Podfile in your Xcode project directory:
use_frameworks!
In case the above line causes a build error, please add it in the following way:
use_frameworks! :linkage => :static
Application Code
In order to create the iOS Native module and have it exposed to React Native, it is needed to have the following components:
- Native Module implementation
- Bridging header
- Bridge
Native Module
Native module ContentInsightsModule.swift implements the following methods:
- startArticleReadTracker
- startAttentionTracker
- startAttention
- pauseAttention
- setNewScrollPosition
- flushArticle
You also need to set the domainId in this class:
import Foundationimport ContentInsightTracker​@objc(ContentInsightsSDKModule)class ContentInsightsModule: NSObject {​ private var contentInsights: ContentInsights! override init() { super.init() self.contentInsights = ContentInsights.shared(domainID: "domainId") // set domainId here } ...}
Bridging Header
This file is a header file and it has to include the following:
#import "RCTBridgeModule.h"
Bridge
The bridge file contains the code for exposing the module and methods to ReactNative.
You can see ContentInsightsBridge.m file from our example application.
#import <Foundation/Foundation.h>
#import <RCTBridgeModule.h>
@interface RCT_EXTERN_MODULE(ContentInsightsModule, NSObject)
RCT_EXTERN_METHOD(startArticleReadTracker: (NSString *) referrerUrl articleUrl: (NSString *) articleUrl postId: (NSString *) postId)
RCT_EXTERN_METHOD(startAttentionTracker: (NSString *) referrerUrl articleUrl: (NSString *) articleUrl postId: (NSString *) postId)
RCT_EXTERN_METHOD(setScrollPosition: (NSInteger) position)
RCT_EXTERN_METHOD(startAttention)
RCT_EXTERN_METHOD(pauseAttention)
RCT_EXTERN_METHOD(flushArticle)
@end
React Native usage
Tracking Article Load
Loading an article means that the article page/screen has been opened for reading.
To track this event set desired parameters and request tracking to be done by the SDK.
NativeModules.ContentInsightsSDKModule.startArticleReadTracker("https://test-domain.com/article/test", "1", "test-domain.com");
Tracking Article Read
Tracking Article Read will be done automatically by the SDK, 10s after startArticleReadTracker has been called.
Tracking Attention Time
For attention time there is AttentionTimeTracker that can be obtained from SDK in a similar way as ArticleReadTracker.
NativeModules.ContentInsightsSDKModule.startAttentionTracker("https://test-domain.com/article/test", "1", "test-domain.com");
In order to achieve the maximum flexibility with older Android SDK levels, tracking when the app/screen has the user's attention is done manually by calling respective methods:
NativeModules.ContentInsightsSDKModule.startAttention()
or
NativeModules.ContentInsightsSDKModule.pauseAttention()
Apart from notifying when the article has user attention or not, no further calls are required in order to track the attention time.
Tracking Scrolling Activity
As part of AttentionTimeTracker, there is an option to track how much the user has been scrolled.
In order to have valid statistics, there is a formula for calculating the scroll position:
(viewportHeight + scrollTop) * 100 / scrollHeight
The new scroll position is marked manually by calling setNewScrollPosition() whenever the scroll event occurs:
NativeModules.ContentInsightsSDKModule.setNewScrollPosition(newPos)
Flushing the Article
When a user leaves the article, the tracker must flush the article.
This is a sign for the tracker to finish the tracking of attention time and to do any final calls to ingestion servers.
When everything is finished, the tracker should be destroyed.
To flush the article, please call the following method:
NativeModules.ContentInsightsSDKModule.flushArticle()
Testing the SDK integration
When you're done with the SDK integration, you will probably want to test if everything works as expected. You can always count on our dedicated support in this process or perform the testing yourselves.
There are two types of requests that can be sent by the smartocto insights tracking script.
1. Page-View and Article Read (p-requests)
To search for page load requests, you can filter out "contentinsights.com/p" string in the output log console of your preferred testing tool.
There should be only two p-requests (one pair) for each loaded article, they can be identified by the t-parameter:
- t=0 indicates a page-view
- t=1 indicates an article read, it loads 10 seconds after the first p-request
If the user leaves an article within the first 10 seconds, only one p-request should be sent (page-view).
2. Attention Time (a-requests)
To search for attention time requests, use "contentinsights.com/a" as a search string.
One attention time request for a single loaded article should be fired every 5 seconds while reading an article.
It's correct and expected for our ingestion server to send a "204 No Content" response for every generated request.
IMPORTANT:
Please pay attention that not a single request is sent to ingestion.contentinsights.com after the user leaves the article or exits from the application (and the app still runs in the background).