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