MOCA iOS SDK 3.8.0+ provides new API calls to instrument your WebViews and exposes MOCA JS
API to your JavaScript pages through the native bridge.
This new feature consists of 3 components:
- New API that enables you to inject a native bridge to your WebView component.
- Native bridge implementation embedded in MOCA SDK to handle messages from
WebView directed to MOCA SDK - MOCA JavaScript API you can use in your WebView rendered HTML/Javascript
pages to call native MOCA SDK.
The new API calls added to MOCA.h file allow you to register MOCA native bridge to your
WebView component.
// Adds a native bridge script message handler to the WebView content
// controller so that page content itself can call native MOCA SDK.
// This method registers native script message handler to your WebView
//controller and loads MOCA JavaScript interface to your HTML/JS page.
+ (void)registerNativeBridge:(WKUserContentController*)controller;
// This method unregisters the native bridge from a WebView that was
// registered previously and is no longer needed.*
+ (void)unregisterNativeBridge:(WKUserContentController*)controller;
The following example shows how to create a WKWebView component and register MOCA
native bridge. Internally, MOCA SDK loads JavaScript library script into the WebView and
registers native script command handler.
WKUserContentController *controller = [[WKUserContentController alloc] init];
[MOCA registerNativeBridge:controller];
WKWebViewConfiguration *webViewConfig = [[WKWebViewConfiguration alloc] init];
webViewConfig.userContentController = controller;
webViewConfig.preferences.javaScriptEnabled = YES;
WKWebView *webView = [[WKWebView alloc] initWithFrame:frame
configuration:webViewConfig];
Once instantiated, the MOCA native bridge exposes MOCA JavaScript API to your web
page rendered within WebView. This API exposes window.moca object with the following
interface:
-
moca.trackViewed (item, category) // tracks a viewed item.
- item : string - item identifier or name. Required.
- category : string - item category or null. Optional.
-
moca.addToFavList (item) // adds an item to the list of favourite items
- item : string - item identifier or name. Required.
-
moca.removeFromFavList (item) // removes an item from the list of favourite items
- item : string - item identifier or name. Required.
-
moca.clearFavList (item) // clear the list of favourite items
-
moca.addToWishList (item) // adds an item to the wish list
- item : string - item identifier or name. Required.
-
moca.removeFromWishList (item) // removes an item from the wish list
- item : string - item identifier or name. Required.
-
moca.clearWishList (item) // clear the wish list
-
moca.addToCart (item, category, unitPrice, currency, quantity) // adds an item
to the shopping cart.- item: string - item identifier or name. Required.
- category: string - item category or null. Optional.
- unitPrice: double - item unit price in given currency. Required.
- currency: string - currency string, for example EUR or USD. Required.
- quantity: int - positive number of items to be added.
-
moca.updateCart (item, category) // updates a quantity of an item in the shopping cart.
- item: string - item identifier or name. Required.
- quantity: int - positive number of items to be added
-
moca.removeFromCart (item) // remove an item from the shopping cart. If quantity is
bigger than 1, all are removed.- item : string - item identifier or name. Required.
-
moca.clearCart () // clears the shopping cart by removing all the items.
-
moca.beginCheckout () // marks the being of the checkout process of the shopping cart.
-
moca.completeCheckout () // notifies that the user has completed the checkout of the
shopping cart and purchased the items. This operation clears the shopping cart. -
moca.trackPurchased (item, category, unitPrice, currency, quantity) // tracks
the purchase of an item to a user purchase history.- item : string - item identifier or name. Required.
- category : string - item category or null. Optional.
- unitPrice : double - item unit price in given currency. Required.
- currency : string - currency string, for example EUR or USD. Required.
- quantity : int - positive number of items to be added.
-
moca.addTag (tagName, value) // adds a tag to user profile.
- tagName : string - tag name. Required.
- value: string - tag value or increment, for example :
- “+1” -- increment tag value by 1
- “+2” -- increment tag value by 2
- “=5” -- set tag value to 5
- “-1” -- decrement tag value by 1
In order to install MOCA JS calls, it is necessary to implement mocaReady event handler as
shown in the example below.
document.addEventListener("mocaReady", function(event) {
log("MOCA JS is ready");
installEvents ();
}
You can test the correct integration using this HTML snippet on the MOCA Console.
<!DOCTYPE html>
<!--
Copyright (c) 2021 MOCA Platform.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<title>MOCA NativeBridge JS Demo</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-blue.min.css">
<style>
body {
width: 600px;
padding: 0 20px 0 20px;
}
h4 {
font-size: 1.3em;
}
</style>
<script type="text/javascript">
function onLoaded () {
log("Page loaded");
}
function log (message) {
console.log(message);
var div = document.getElementById('log1');
div.innerHTML += '<p>- ' + message + '</p>';
}
function installEvents () {
document.getElementById("product1").addEventListener("click", function() {
log("Track View Product 1");
moca.trackViewed("product1", "cars");
});
document.getElementById("product2").addEventListener("click", function() {
log("Track View Product 2");
moca.trackViewed("product2", "bikes");
});
document.getElementById("cartAdd").addEventListener("click", function() {
log("Add Product3 to Cart");
moca.addToCart("product3", "bikes", 1200.0, "USD", 1);
});
document.getElementById("cartRemove").addEventListener("click", function() {
log("Remove Product3 from Cart");
moca.removeFromCart("product3");
});
}
document.addEventListener("mocaReady", function(event) { // (1)
log("MOCA JS is ready");
installEvents ();
});
</script>
</head>
<body onload="onLoaded()">
<h4>WebView with MOCA Native Bridge</h4>
<button id="product1" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Track View Product 1
</button>
<br /><br />
<button id="product2"class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Track View Product 2
</button>
<br /><br /><br /><br />
<button id="cartAdd"class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Add Product 3 to Cart
</button>
<br /><br />
<button id="cartRemove"class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Remove Product 3 from Cart
</button>
<br/><br/><br/>
<div id="log1" >Logs:</div>
</body>
</html>