WebView
Android
From SDK v3.5.0 onwards, you now raise events inside a Webview generated by your app. To enable raising of events from a WebView, add the following code while creating the webview activity
webView.addJavascriptInterface(new CTWebInterface(CleverTapAPI.getDefaultInstance(this)),"CleverTap");
The following methods can be used to raise events and update user properties in the webview -
//An example of recording a User Event called Product Viewed in the Webview JS
if (window.CleverTap) {
// Call Android interface
CleverTap.pushEvent("Product Viewed");
}
//An example of recording a User Event called Product Viewed with properties, in the Webview JS
var props = {foo: 'xyz', lang: 'French'};
if (window.CleverTap) {
// Call Android interface
CleverTap.pushEvent("Product Viewed",JSON.stringify(props));
}
//An example of recording a CHARGED Event with charge details and items, in the Webview JS
var chargeDetails = {Amount: 300, Payment: 'Card'};
var items = [{Category: 'Books', Name: 'Book name', Quantity: 1},{Category: 'Clothes', Name: 'Cloth name', Quantity: 1},{Category: 'Food', Name: 'Food name', Quantity: 1}]
if (window.CleverTap) {
// Call Android interface
CleverTap.pushChargedEvent(JSON.stringify(chargeDetails),JSON.stringify(items))
}
//An example of updating profile properties of the User in the Webview JS
var props = {foo: 'xyz', lang: 'French'};
if (window.CleverTap) {
// Call Android interface
CleverTap.pushProfile(JSON.stringify(props));
}
//An example of adding user property for the User in the Webview JS
if (window.CleverTap) {
// Call Android interface
CleverTap.addMultiValueForKey('membership', 'gold');
}
//An example of adding multiple user properties for the User in the Webview JS
var cars = ['Saab', 'Volvo', 'BMW', 'Kia'];
if (window.CleverTap) {
// Call Android interface
CleverTap.addMultiValuesForKey('Cars', JSON.stringify(cars));
}
//An example of removing a user property for a specific key in the Webview JS
if (window.CleverTap) {
// Call Android interface
CleverTap.removeMultiValueForKey(‘Cars’, 'Saab');
}
//An example of removing multiple user properties for a specific key in the Webview JS
var cars = ['BMW', 'Kia'];
if (window.CleverTap) {
// Call Android interface
CleverTap.removeMultiValuesForKey('Cars', JSON.stringify(cars));
}
//An example of removing a user property by specifying a key in the Webview JS
if (window.CleverTap) {
// Call Android interface
CleverTap.removeValueForKey('Cars');
}
//An example of setting a user property by specifying the key in the Webview JS
var values = ['Mercedes','Bentley']
if (window.CleverTap) {
// Call Android interface
CleverTap.setMultiValueForKey('Cars', JSON.stringify(values));
}
// Increment user property value by specifying the key in JS enabled custom In-Apps
if (window.CleverTap) {
// Call Android interface
CleverTap.incrementValue('Cars',2);
}
// Decrement user property value by specifying the key in JS enabled custom In-Apps
if (window.CleverTap) {
// Call Android interface
CleverTap.decrementValue('Cars',2)
}
//Calling onUserLogin
var props = {Identity: '12434', Email: '[email protected]'};
if (window.CleverTap) {
// Call Android interface
CleverTap.onUserLogin(JSON.stringify(props));
}
iOS
The CleverTapJSInterface is a bridge to communicate between Webviews and CleverTap SDK
Integrating the CleverTapJSInterface -
- Import the CleverTap JS Interface Header
- Initialize the Webview and add the CleverTapJSInterface as a script message handler
#import <CleverTapSDK/CleverTapJSInterface.h>
// Inititialize the Webview and add the CleverTapJSInterface as a script message handler
CleverTapJSInterface *ctInterface = [[CleverTapJSInterface alloc] initWithConfig:nil];
[self.webView.configuration.userContentController addScriptMessageHandler:ctInterface name:@"clevertap"];
//Inititialize the Webview and add the CleverTapJSInterface as a script message handler
let ctInterface: CleverTapJSInterface = CleverTapJSInterface(config: nil)
self.webView.configuration.userContentController.add(ctInterface, name: "clevertap");
The following methods can be used to raise events and update user properties in the webview -
//Recording a User Event called Product Viewed in JS enabled custom in-apps.
var props = {foo: 'xyz', lang: 'French'};
var message = { action:'recordEventWithProps', event:'Product Viewed', props: props};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
// Call iOS interface
window.webkit.messageHandlers.clevertap.postMessage(message);
}
//Updating profile properties of the User in JS enabled custom in-apps.
var props = {foo: 'xyz', lang: 'French'};
var message = { action:profilePush, properties: props};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
window.webkit.messageHandlers.clevertap.postMessage(message);
}
//Setting a user profile
var message = {
action: 'profileSetMultiValues',
value: ['bag', 'kitkat'],
key: 'myStuff'
};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
window.webkit.messageHandlers.clevertap.postMessage(message);
}
//Add multi value
var message = {action: 'profileAddMultiValue',
value: 'coat',
key: 'myStuff'};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
window.webkit.messageHandlers.clevertap.postMessage(message);
}
//Add multi values
var message = {action: 'profileAddMultiValues',
values: ['bag', 'kitkat', 'Wine'],
key: 'myStuff'};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
window.webkit.messageHandlers.clevertap.postMessage(message);
}
//Remove value for key
var message = {action: 'profileRemoveValueForKey',
key: 'myStuff' };
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
window.webkit.messageHandlers.clevertap.postMessage(message);
}
//Remove multi values for key
var message = {action: 'profileRemoveMultiValues',
values: ['scarf', 'knife'],
key: 'myStuff'};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
window.webkit.messageHandlers.clevertap.postMessage(message);
}
//Remove multi Value
var message = {action: 'profileRemoveMultiValue',
value: 'bag',
key: 'myStuff'};
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
window.webkit.messageHandlers.clevertap.postMessage(message);
}
// Record Charged Event
const chargeDetails = {
"Amount" : 300,
"Payment mode": "Credit Card",
"Charged ID": 24052013
};
const items = [{
"Category": "books",
"Book name": "The Millionaire next door",
"Quantity": 1
},{
"Category": "books",
"Book name": "The Millionaire previous door",
"Quantity": 5
];
const message = {
action:'recordChargedEvent',
chargeDetails: chargeDetails,
items: items
};
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap) {
window.webkit.messageHandlers.clevertap.postMessage(message);
}
// Increment user property value
var message = {action: 'profileIncrementValueBy',
value: 1,
key: 'score'
};
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap) {
window.webkit.messageHandlers.clevertap.postMessage(message);
}
// Decrement user property value
var message = {action: 'profileDecrementValueBy',
value: 1,
key: 'score'
};
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap) {
window.webkit.messageHandlers.clevertap.postMessage(message);
}
// Call onUserLogin
var props = { Name: 'JohnWeb', Email: '[email protected]' };
var message = { action:'onUserLogin', properties: props };
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap) {
window.webkit.messageHandlers.clevertap.postMessage(message);
}
Updated 4 months ago