1. 1. Hybrid App接入指南


Hybrid App指包含原生页面和html5页面的app。MTA hybrid支持统计Android/iOS+webview开发的应用数据。

1.1. 1.1. 功能介绍

MTA提供hybrid app接入服务,为用户提供更完善的数据服务,用户接入后可实现:

1)统计App内全部数据,无需跳转查看,打破native app与html5页面的边界

2)连接native app与html5页面之间的关键路径,事件漏斗更完整

3)可统计h5页面数据,访问路径更完整

1.2. 1.2. 实现原理

html5页面使用 JavaScript SDK ,采集到数据后,发往Native App,Native App SDK 收到 JavaScript SDK 发送的数据后,会把默认采集的属性加上,最后如果 App 端设置了公共属性,也会把公共属性加上。

使用了混合统计功能以后,在 APP 内加载的 html5 页面也能通过 Native 的方式上报页面访问事件和自定义kv事件。

详情请查看以下说明文档:

2. 2.接入说明


3. Native 端(Android)

Hybrid 统计是在原生统计基础上进行的,在开始之前,请确保已按照Android SDK接入指南,正常接入MTA Android SDK配置和初始化流程。

3.1. 初始化Hybrid模块

在Application或MainActivity的onCreate初始化MTA基础统计接口后,需要额外调用以下接口,初始化Hybrid模块,开发者可根据是否使用与原生App一致的Appkey来决定灵活使用哪个初始化接口。

/**
* 初始化Hybrid模块,默认使用原生App的appkey、渠道等配置信息
* @param context 上下文对象
*/
public static void init(Context context);

/**
* 初始化Hybrid模块,使用指定的appkey和渠道信息
* @param context 上下文对象
* @param appkey Hybrid统计所使用的Appkey
* @param channel Hybrid统计所使用的渠道
*/
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();
        // 其它代码

        // 使用默认Appkey初始化Hybrid模块
        StatHybridHandler.init(this);
    }
}

3.2. 配置WebView

在需要使用Hybrid统计的WebView组件,调用以下方法进行初始化。

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跳转方式与H5交互,因此,需在WebViewClient的shouldOverrideUrlLoading方法调用SDK接口,进行url拦截。

/**
* 拦截MTA专用url跳转
* @param webView 当前WebView
* @param url 当前url
* 返回值 true:该url为mta特有url并处理;false:其它url,需要继续处理
*/
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 静态库和 MTAHybrid.h 头文件。
  • 将静态库文件连接至工程中。

4.1. 添加 Native 代码 (具体例子可以参考demo)

4.1.1. UIWebView

  • 在 UIWebView 的 delegate 中添加以下代码
- (BOOL)webView:(UIWebView *)webView
    shouldStartLoadWithRequest:(NSURLRequest *)request
    navigationType:(UIWebViewNavigationType)navigationType {
    // 处理MTA混合统计请求的代码
    if ([MTAHybrid handleRequest:request
        fromWebView:webView]) {
        return NO;
    }

    // 原有的代码
    return YES;
}
  • 在 UIWebView 被隐藏,或者从父 view 中移除时,调用
+ (void)stopWebView:(UIWebView *)webView;

方法

  • 在 UIWebView 重新被显示,或者重新添加到父 view 上时, 调用
+ (void)restartWebView:(UIWebView *)webView;

方法

4.1.2. WKWebView

  • 在 WKWebView 的 navigationDelegate 中添加以下代码
- (void)webView:(WKWebView *)webView
    decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
    decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    // 处理MTA混合统计请求的代码
    if ([MTAHybrid handleAction:navigationAction
        fromWKWebView:webView]) {
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }

    // 原有的代码
    decisionHandler(WKNavigationActionPolicyAllow);
}
  • 在 WKWebView 被隐藏,或者从父 view 中移除时,调用以下方法:
+ (void)stopWKWebView:(WKWebView *)wkWebView;
  • 在 WKWebView 重新被显示,或者重新添加到父 view 上时, 调用以下方法:
+ (void)restartWKWebView:(WKWebView *)wkWebView;

5. HTML 端

5.1. 页面统计

需要统计app webview的基础访问、点击事件时,请在webview里加入以下js 代码

<script src="http://pingjs.qq.com/mta/app_link_h5_stats.js" name="MtaLinkH5"></script>
  • 注意: 将上面的js拷贝放到页面标签中。 如果需兼容https与http,则将上面js sdk链接中的(http:)去掉 ,后续的方法上报都必须保证已加载以上js sdk

5.2. 手动上报页面访问统计

访问页面时,上报页面访问情况

MtaLinkH5.pageBasicStats({
  'title': '必填-每页要求不重复'
});
  • 注意:
    • 确定联动分析js sdk已载入,并且设置了title名称
    • title为必填项目,并且每页的title都要求不重复,重复影响统计

5.3. 设置登陆帐号

用于设置用户登陆帐号信息

MtaLinkH5.setLoginUin(uin);
  • 注意:
    • 确定联动分析js sdk已载入
    • uin 为设置的用户帐号,string类型

5.4. 自定义事件

用于页面自定义事件埋点上报

MtaLinkH5.eventStats(event_id, param_json);
  • 注意:
    • 确定联动分析js sdk已载入
    • event_id 为事件id,在事件中添加后拷贝过来
    • param_json 为事件参数以及事件参数值,每个参数对应一个参数值,为json格式

例子:

<button onclick="MtaLinkH5.eventStats('test_event')">事件-不带参数</button>
<button onclick="MtaLinkH5.eventStats('test_event', {'param1':'value1'})">事件-单个参数</button>
<button onclick="MtaLinkH5.eventStats('test_event', {'param1':'value1','param2':'value2'})">事件-多个参数-参数建议最多不超过5个</button>

results matching ""

    No results matching ""