DFINERY Integration [Hybrid App]
Start
This guide is for integrating DFINERY (adbrix) SDK on Hybrid app using Javascript Interface
For those who need SDK installation and SDK initialization please go to [SDK Integrations] section and go to Android / iOS SDK integration guide.
This guide will show two parts. Webpage part and Native part.
- WEB PAGE
- NATIVE
- ANDROID
- iOS
WEB PAGE
To send web event information to Native please integrate javascript code on your web page.
For Android
To send web event information to Android native, add javascript code following example.
window.[interface_name].[method_name](var event_data);
Using this example you can call AdBrixRM commerce event (or any kind of event) like the following example.
window.adbrix.purchase(orderId, productId, productName, unitPrice, quantity, currencyCode, category);
* All of the information being sent to Native must be processed with URL encoding.
For iOS
To send web event information to iOS native, add javascript code following example.
window.location("[interface_name]://[method_name]?key=value");
Using this example you can call AdBrixRM commerce event(or any kind of event) like the following example.
adbrix://purchase?orderId=orderid&productId=productid&productName=productname&unitPrice=price&quantity=quantity¤cyCode=currencycode&category=category
* All of the information being sent to Native must be processed with URL encoding.
Android Native
After receiving event data from web, you can call Adbrix API.
All of the following android code and a sample can be found in our git.
Add Interface handler
Add javascript interface handler on Android webview for catching javascript event on web.
webView.addJavascriptInterface(new AdbrixRmHybridInterface(WebViewActivity.this), "adbrix");
* Javascript event from web window.[interface_name].[method_name] and [interface_name] must be the same with the following sample "adbrix"
Interface integration
This is the interface integration sample code for purchase event from web.
public class AdbrixRmHybridInterface {
public AdbrixRmHybridInterface(){ }
@JavascriptInterface
public void purchase(String orderId, String productId, String productName, double price, int quantity, String currencyCode, String category){
try {
Log.d(LOG_TAG, "GET PURCHASE EVENT DATA FROM WEB WITH BELOW DATAS ::: " +
" \n orderId :: " + orderId
+ "\n productId :: " + productId
+ "\n productName :: " + productName
+ "\n price :: " + price
+ "\n quantity :: " + quantity
+ "\n discount :: n/a"
+ "\n currencyCode :: " + currencyCode
+ "\n category :: " + category);
/**
* Create Product Model List For Purchased Products Details
* */
ArrayList productModelArrayList = new ArrayList<>();
/**
* Create Product Model With Product Details
* */
AdBrixRm.CommerceProductModel productModel =
new AdBrixRm.CommerceProductModel().setProductID(productId)
.setProductName(productName)
.setCategory(new AdBrixRm.CommerceCategoriesModel().setCategory(category))
.setPrice(price)
.setQuantity(quantity)
.setCurrency(AdBrixRm.Currency.getCurrencyByCurrencyCode(currencyCode));
/**
* Put The Purchased Product Details Into Product Model List
* */
productModelArrayList.add(productModel);
/**
* Store Purchase Event Details For Passing Data To Adbrix Remaster Back-end.
* */
AdBrixRm.Common.purchase(orderId, productModelArrayList, 0.00, 0.00, AdBrixRm.CommercePaymentMethod.CreditCard);
}catch (Exception e){
Log.e(LOG_TAG, "parameter error w/ " + e.getMessage());
}
}
}
iOS Native
After receiving event data from web, you can call Adbrix API.
All of the following ios code and a sample can be found in our git.
Interface integration (Swift)
Implemented to identify JavaScript interface call events with predefined interface_name and method_name among the webView events passed to the webView delegate.
This is the interface integration sample code for purchase event from web.
@available(iOS 8.0, *)
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
if let url = navigationAction.request.url, let schm = url.scheme, let funcName = url.host {
if let dic = Utils.getURLParmaters(url) {
if ("adbrix" == schm) {
if (funcName.contains(Constants.FUNC_purchase) || funcName.contains(Constants.FUNC_viewList) || funcName.contains(Constants.FUNC_addToWishList) || funcName.contains(Constants.FUNC_share) || funcName.contains(Constants.FUNC_search) || funcName.contains(Constants.FUNC_productView) ||
funcName.contains(Constants.FUNC_addToCart)
) {
var cateArr :Array = Array()
if let cate = (dic[Constants.DIC_category] as? String) {
let categories = cate.components(separatedBy: ".")
for str in categories {
if cateArr.count >= 5 {
break
}
cateArr.append(str)
}
}
else {
if cateArr.count < 5 {
cateArr.append("")
}
}
if let productId = dic[Constants.DIC_productId], let productName = dic[Constants.DIC_productName], let price = dic[Constants.DIC_unitPrice], let quantity = dic[Constants.DIC_quantity], let currencyString = dic[Constants.DIC_currencyCode] {
var arr : Array = Array()
if let priceNum = (price as? NSString), let quantityNum = (quantity as? NSString) {
let productModel = AdBrixRM.getInstance.createCommerceProductData(
productId: productId as! String
,productName: productName as! String
,price: Double(priceNum.integerValue)
,quantity: quantityNum.integerValue
,discount: 0.00
,currencyString: self.validCurreny(currencyString as! String)
,category: AdBrixRM.getInstance.createCommerceProductCategoryDataByArray(categoryArray: cateArr)
,productAttrsMap: nil
)
arr.append(productModel)
if funcName.contains(Constants.FUNC_purchase) {
if let orderId = dic[Constants.DIC_orderId] {
AdBrixRM.getInstance.commonPurchase(
orderId: orderId as! String,
productInfo: arr,
discount: 0.00,
deliveryCharge: 0.00,
paymentMethod:
AdBrixRM.getInstance.convertPayment(self.validPayment(Constants.ABXRM_PAYMENT[1] ?? "CreditCard"))
)
}
}
}
}
}
}