hybrid app支持html5,Hybrid App 接入
1. 1. Hybrid App接入指南
Hybrid App指包含原生頁面和html5頁面的app。MTA hybrid支持統(tǒng)計Android/iOS+webview開發(fā)的應(yīng)用數(shù)據(jù)。
1.1. 1.1. 功能介紹
MTA提供hybrid app接入服務(wù)，為用戶提供更完善的數(shù)據(jù)服務(wù)，用戶接入后可實現(xiàn)：
1)統(tǒng)計App內(nèi)全部數(shù)據(jù)，無需跳轉(zhuǎn)查看，打破native app與html5頁面的邊界
2)連接native app與html5頁面之間的關(guān)鍵路徑，事件漏斗更完整
3)可統(tǒng)計h5頁面數(shù)據(jù)，訪問路徑更完整
1.2. 1.2. 實現(xiàn)原理
html5頁面使用 JavaScript SDK ，采集到數(shù)據(jù)后，發(fā)往Native App，Native App SDK 收到 JavaScript SDK 發(fā)送的數(shù)據(jù)后，會把默認(rèn)采集的屬性加上，最后如果 App 端設(shè)置了公共屬性，也會把公共屬性加上。
使用了混合統(tǒng)計功能以后，在 APP 內(nèi)加載的 html5 頁面也能通過 Native 的方式上報頁面訪問事件和自定義kv事件。
詳情請查看以下說明文檔：
2. 2.接入說明
3. Native 端(Android)
Hybrid 統(tǒng)計是在原生統(tǒng)計基礎(chǔ)上進行的，在開始之前，請確保已按照Android SDK接入指南，正常接入MTA Android SDK配置和初始化流程。
3.1. 初始化Hybrid模塊
在Application或MainActivity的onCreate初始化MTA基礎(chǔ)統(tǒng)計接口后，需要額外調(diào)用以下接口，初始化Hybrid模塊，開發(fā)者可根據(jù)是否使用與原生App一致的Appkey來決定靈活使用哪個初始化接口。
/**
* 初始化Hybrid模塊，默認(rèn)使用原生App的appkey、渠道等配置信息
* @param context 上下文對象
*/
public static void init(Context context);
/**
* 初始化Hybrid模塊，使用指定的appkey和渠道信息
* @param context 上下文對象
* @param appkey Hybrid統(tǒng)計所使用的Appkey
* @param channel Hybrid統(tǒng)計所使用的渠道
*/
public static void init(Context context, String appkey, String channel);
示例
public class MyApp extends Application{
public static Application application = null;
@Override
public void onCreate(){
super.onCreate();
// 其它代碼
// 使用默認(rèn)Appkey初始化Hybrid模塊
StatHybridHandler.init(this);
}
}
3.2. 配置WebView
在需要使用Hybrid統(tǒng)計的WebView組件，調(diào)用以下方法進行初始化。
3.2.1. 初始化WebSettings
/**
* 初始化WebSettings
* @param webSettings 待初始化的webSettings
*/
public static void initWebSettings(WebSettings webSettings)
示例
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
webView = (WebView) findViewById(R.id.webview);
webSettings.setJavaScriptEnabled(true);
StatHybridHandler.initWebSettings(webSettings);
webView.setWebViewClient(new MyWebViewClient());
}
3.2.2. 配置WebViewClient
Native使用攔截MTA專用的url跳轉(zhuǎn)方式與H5交互，因此，需在WebViewClient的shouldOverrideUrlLoading方法調(diào)用SDK接口，進行url攔截。
/**
* 攔截MTA專用url跳轉(zhuǎn)
* @param webView 當(dāng)前WebView
* @param url 當(dāng)前url
* 返回值 true：該url為mta特有url并處理；false：其它url，需要繼續(xù)處理
*/
public static boolean handleWebViewUrl(WebView webView, String url);
示例
public class MyWebViewClient extends WebViewClient{
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url){
// 盡量保證放在第一行
if(StatHybridHandler.handleWebViewUrl(view, url)){
return true;
}
super.shouldOverrideUrlLoading(view, url);
return true;
}
}
// 如果不能保證放在第一行處理，請按照以下方式處理
public class MyWebViewClient extends WebViewClient{
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url){
try {
String decodedURL = java.net.URLDecoder.decode(url, "UTF-8");
if (!TextUtils.isEmpty(decodedURL) &&
url.toLowerCase().startsWith(StatHybridHandler.URI_PREFIX.toLowerCase()){
StatHybridHandler.handleWebViewUrl(view, url);
return true;
}else{
// 其它url的處理邏輯
}
}catch (UnsupportedEncodingException ex){
}
return super.shouldOverrideUrlLoading(view, url);
}
}
4. Native 端(iOS)
參考MTA接入文檔接入MTA。
在 MTA iOS SDK 包中的 sdk/plugin/hybrid 目錄下找到 libmtahybrid.a 靜態(tài)庫和 MTAHybrid.h 頭文件。
將靜態(tài)庫文件連接至工程中。
4.1. 添加 Native 代碼 (具體例子可以參考demo)
4.1.1. UIWebView
在 UIWebView 的 delegate 中添加以下代碼
- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType {
// 處理MTA混合統(tǒng)計請求的代碼
if ([MTAHybrid handleRequest:request
fromWebView:webView]) {
return NO;
}
// 原有的代碼
return YES;
}
在 UIWebView 被隱藏，或者從父 view 中移除時，調(diào)用
+ (void)stopWebView:(UIWebView *)webView;
方法
在 UIWebView 重新被顯示，或者重新添加到父 view 上時， 調(diào)用
+ (void)restartWebView:(UIWebView *)webView;
方法
4.1.2. WKWebView
在 WKWebView 的 navigationDelegate 中添加以下代碼
- (void)webView:(WKWebView *)webView
decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
// 處理MTA混合統(tǒng)計請求的代碼
if ([MTAHybrid handleAction:navigationAction
fromWKWebView:webView]) {
decisionHandler(WKNavigationActionPolicyCancel);
return;
}
// 原有的代碼
decisionHandler(WKNavigationActionPolicyAllow);
}
在 WKWebView 被隱藏，或者從父 view 中移除時，調(diào)用以下方法：
+ (void)stopWKWebView:(WKWebView *)wkWebView;
在 WKWebView 重新被顯示，或者重新添加到父 view 上時， 調(diào)用以下方法:
+ (void)restartWKWebView:(WKWebView *)wkWebView;
5. HTML 端
5.1. 頁面統(tǒng)計
需要統(tǒng)計app webview的基礎(chǔ)訪問、點擊事件時，請在webview里加入以下js 代碼
注意：
將上面的js拷貝放到頁面標(biāo)簽中。
如果需兼容https與http,則將上面js sdk鏈接中的(http:)去掉
，后續(xù)的方法上報都必須保證已加載以上js sdk
5.2. 手動上報頁面訪問統(tǒng)計
訪問頁面時，上報頁面訪問情況
MtaLinkH5.pageBasicStats({
'title': '必填-每頁要求不重復(fù)'
});
注意：確定聯(lián)動分析js sdk已載入，并且設(shè)置了title名稱
title為必填項目，并且每頁的title都要求不重復(fù)，重復(fù)影響統(tǒng)計
5.3. 設(shè)置登陸帳號
用于設(shè)置用戶登陸帳號信息
MtaLinkH5.setLoginUin(uin);
注意：確定聯(lián)動分析js sdk已載入
uin 為設(shè)置的用戶帳號，string類型
5.4. 自定義事件
用于頁面自定義事件埋點上報
MtaLinkH5.eventStats(event_id, param_json);
注意：確定聯(lián)動分析js sdk已載入
event_id 為事件id,在事件中添加后拷貝過來
param_json 為事件參數(shù)以及事件參數(shù)值，每個參數(shù)對應(yīng)一個參數(shù)值，為json格式
例子：
事件-不帶參數(shù)
事件-單個參數(shù)
事件-多個參數(shù)-參數(shù)建議最多不超過5個
總結(jié)
以上是生活随笔為你收集整理的hybrid app支持html5,Hybrid App 接入的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库索引原理实例
- 下一篇： Hybrid APP基础篇(一)-什么是