React Native Advanced Features
Learn more about React Native advanced features.
Advanced Features
This section outlines the advanced features of the CleverTap React Native SDK. These capabilities provide greater control over debugging, remote configuration, personalization, attribution, and data privacy.
Debugging
Set the SDK to DEBUG mode during development to view warnings and other important logs via the platform's logging system. This helps in troubleshooting SDK-related integration issues.
Set Debug Level
Debug level can be one of the following:
-1: Disables all debugging. You can set thedebugLevelto -1 if you want to disable CleverTap logs for the production environment.0: Default, shows minimal SDK integration related logging.2: Shows debug output.3: Shows verbose output.
CleverTap.setDebugLevel(debugLevel);
Note
To get the SDK logs in the killed state, add platform-specific debugging.
- For Android platform, refer to Android Debugging.
- For iOS platform, refer to iOS Debugging.
Custom Push Notifications (Android Only)
CleverTap's React Native SDK provides a built-in mechanism for receiving push notifications via FCM. However, if you have your own custom Service for managing push notifications, you can inform CleverTap about the service’s token ID whenever it is available. Following are the APIs for supported Platforms:
Note
FCM Token, HPS Token, and BPS Token should be fetched from respective push providers after user permissions are granted.
Registering FCM Token
CleverTap.setFCMPushToken("<Your FCM Token>");
Registering Huawei Token
CleverTap.pushRegistrationToken("<Your HMS Token>", {
type: 'hps',
prefKey: 'hps_token',
className: 'com.clevertap.android.hms.HmsPushProvider',
messagingSDKClassName: 'com.huawei.hms.push.HmsMessageService'
});
Registering Baidu Token
CleverTap.pushRegistrationToken("<Your BPS Token>", {
type: 'bps',
prefKey: 'bps_token',
className: 'com.clevertap.android.bps.BaiduPushProvider',
messagingSDKClassName: 'com.baidu.android.pushservice.PushMessageReceiver'
});
Create Notification from Payload
// Create a notification from payload (when using custom push handler)
CleverTap.createNotification(data);
Native Display
Show personalized banners or visuals using Native Display.
On Display Units Loaded
// Listener for display unit load events
CleverTap.addListener(CleverTap.CleverTapDisplayUnitsLoaded, (data) => {
// Use the 'data' to render UI or store display units
});
Get All Display Units
// Fetch all available display units
CleverTap.getAllDisplayUnits((err, res) => {
console.log('All Display Units: ', res, err);
});
Display unit viewed event for ID
// Track display unit impression
CleverTap.pushDisplayUnitViewedEventForID('Display Unit Id');// Replace "display_unit_id" with the actual ID configured in the CleverTap dashboard.
Display unit clicked event for ID
// Track display unit click
CleverTap.pushDisplayUnitClickedEventForID('Display Unit Id');// Replace "display_unit_id" with the actual ID configured in the CleverTap dashboard.
Product Config
Feature Availability
A new and enhanced version of Product Experiences is coming soon. New customers (CleverTap for Enterprise or CleverTap for Startups) who have not enabled the current functionalities can use this feature only when the new version is released. However, the existing users can continue to use it. The methods for the Product Experiences feature have been deprecated and will be removed from the code by September 2024.
Set Product Configuration to Default
// Initialize product config and listen for event
CleverTap.addListener(CleverTap.CleverTapProductConfigDidInitialize, (data) => {
// Called when Product Config is initialized
});
// Set default values for product config keys
CleverTap.setDefaultsMap({
'text_color': 'red',
'msg_count': 100,
'price': 100.50,
'is_shown': true,
'json': '{"key":"val"}' // JSON string example
});
Fetching product configs
//Add the Product Config Fetched listener
CleverTap.addListener(CleverTap.CleverTapProductConfigDidFetch, (data) => {
/* consume the event data */
});
//Fetch the Product Config
CleverTap.fetch();
Activate the most recently fetched product config
//Add the Product Config Activated listener
CleverTap.addListener(CleverTap.CleverTapProductConfigDidActivate, (data) => {
/* consume the event data */
});
//Activate the Product Config
CleverTap.activate();
Fetch And Activate product config
// Fetch and activate in a single call
CleverTap.fetchAndActivate();
Fetch Minimum Time Interval
// Set minimum interval between fetches (in seconds)
CleverTap.setMinimumFetchIntervalInSeconds(interval);
Get Boolean key
// Get boolean value for a config key
CleverTap.getProductConfigBoolean(“key”);
Get String Key
// Get string value for a config key
CleverTap.getProductConfigString(“key”);
Get Number key
// Get number value for a config key
CleverTap.getNumber(“key”);
Get last fetched timestamp in millis
// Get last fetch time in milliseconds
CleverTap.getLastFetchTimeStampInMillis();
Feature Flag
Control feature rollouts using feature flags.
Get Feature Flag
// Listen for updates to feature flags
CleverTap.addListener(CleverTap.CleverTapFeatureFlagsDidUpdate, (data) => {
// Use the updated flag values
const isEnabled = CleverTap.getFeatureFlag("BoolKey", false); // default fallback = false
});
App Personalization
Enable or disable personalized experiences based on user profiles.
Enable Personalization
// Enable personalization features (based on user profile data)
CleverTap.enablePersonalization();
Disable Personalization
// Disable personalization (e.g., after user opt-out)
CleverTap.disablePersonalization();
Attributions
Track install sources for marketing attribution.
Push Install Referrer
// Track install referrer info for attribution
CleverTap.pushInstallReferrer("source", "medium", "campaign");
// Example: source = "google", medium = "cpc", campaign = "summer_sale"
GDPR
Manage user data opt-in/opt-out and control device-level tracking.
Set Opt Out
CleverTap.setOptOut(false); ///Will opt in the user to send data to CleverTap
CleverTap.setOptOut(true); ///Will opt out the user to send data to CleverTap
Enable Device Networking Info Reporting
// Will opt out the user to send Device Network data to CleverTap
CleverTap.enableDeviceNetworkInfoReporting(false);
// Will opt in the user to send Device Network data to CleverTap
CleverTap.enableDeviceNetworkInfoReporting(true);
Set Offline
// Will set the user online
CleverTap.setOffline(false);
// Will set the user offline
CleverTap.setOffline(true);
Encryption for PII data
PII data is stored across the SDK and could be sensitive information. From CleverTap React Native SDK v1.2.0 onwards, you can enable encryption for PII data such as Email, Identity, Name, and Phone.
Currently, two levels of encryption are supported, i.e., None(0) and Medium(1). The encryption level is None by default.
- None: All stored data is in plaintext
- Medium: PII data is encrypted completely
Android
The only way to set the encryption level in Android is from the manifest file. Add the encryption level in the manifest as following:
<!-- Add this to AndroidManifest.xml to set encryption level -->
<meta-data
android:name="CLEVERTAP_ENCRYPTION_LEVEL"
android:value="1" /> <!-- 1 = Medium, 0 = None -->
iOS
The only way to set the encryption level in iOS is from the info.plist file. Add the CleverTapEncryptionLevel String key to info.plist file, where value 1 means Medium and 0 means None. The encryption level is set to None if any other value is provided.
<!-- Add this to Info.plist -->
<key>CleverTapEncryptionLevel</key>
<string>1</string> <!-- 1 = Medium, 0 = None -->
Updated about 1 month ago