1. Hybrid App接入指南


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

1.1. 功能介绍

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

1)统一统计app内全部数据,无需跳转查看,打破app与h5的边界

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

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

1.2. 实现原理

H5 使用 JavaScript SDK ,采集到数据后,发往 App,App SDK 收到 JavaScript SDK 发送的数据后,会把默认采集的属性加上,最后如果 App 端设置了公共属性,也会把公共属性加上。使用了混合统计功能以后,在 APP 内加载的 html5 页面也能通过 Native 的方式上报页面访问事件和自定义kv事件。

使用混合统计功能时,需要在 iOS,Android 以及 HTML 端同时接入对应的 SDK。

iOS SDK:需要使用V2.0.9及之后的版本 (点击下载)

Android SDK:需要使用V3.2.1及之后的版本(点击下载)

JavaScript SDK:点击查看

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

1.3. iOS SDK使用说明


Hybrid 统计是在原生统计基础上进行的,在开始之前,请确保已按照ios sdk接入指南正常接入MTA iOS SDK

1、在 MTA iOS SDK 包中的sdk/plugin/hybrid目录下找到libmtahybrid.a 静态库和MTAHybrid.h头文件

2、将静态库文件连接至工程中

3、在工程中添加代码(具体例子可以参考demo)

3.1如果使用的是UIwebview

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

    // 原有的代码
    return YES;
}
  • 3.1.2在UIWebView被隐藏或者从父view移除时 ,调用方法
+ (void)stopWebView:(UIWebView *)webView;
  • 3.1.3在UIWebView重新被显示,或者重新被添加到父view上时,调用方法
+ (void)restartWebView:(UIWebView *)webView;

3.2如果使用的是WKwebview

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

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

1.4. Android SDK使用说明


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

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

1.4.2. 配置WebView

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

初始化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());
}

1.4.3. 配置WebViewClient

Natiive使用拦截MTA专用的url跳转方式与H5交互,因此,需在WebViewClient的shouldOverrideUrlLoading方法调用SDK接口,进行url拦截。

/**
* 拦截MTA专用url跳转
* @param webView 当前WebView
* @param url i当前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);
    }
}

1.5. JavaScript SDK使用说明


1.5.1. app&h5联动分析接入

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

<script src="//pingjs.qq.com/mta/app_link_h5_stats.js" name="MtaLinkH5"></script>
  • 注意:
    • 后续的方法上报都必须保证已加载以上js sdk

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

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

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

1.5.3. 设置登陆帐号

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

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

1.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>

1.6. 注意事项

  • 只统计app内的h5数据,不统计app外的h5数据;如需统计查看app外的h5数据可使用h5数据统计
  • 集成之后事件中h5页面的事件会标记展示(如Native页面和h5页面事件id相同,将作为1条进行展示;如事件id不同将分开展示)

  • 页面统计中的h5页面会进行标记展示

  • H5事件添加后需要研发人员进行事件上报后才有数据,具体上报参见上文JavaScript sdk使用说明>>自定义事件

  • 本地安装Js SDK:npm包链接

  • 可视化埋点目前暂不支持h5页面埋点,支持原生页面埋点

  • 不支持x5内核

results matching ""

    No results matching ""