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 代码

注意:

将上面的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格式

例子:

事件-不带参数

事件-单个参数

事件-多个参数-参数建议最多不超过5个

hybrid app支持html5,Hybrid App 接入相关推荐

  1. html5混合app原理,HTML5混合App开发

    内容简介 在竞争激烈的移动互联网环境下,HTML5技术一直备受关注.HTML5混合App开发与原生App开发模式之间也争议不断.相对于原生App来说,HTML5混合App开发的成本更低.周期更短,而且 ...

  2. iOS10 适配 ATS(app支持https通过App Store审核) 韩俊强的博客

    一. HTTPS 其实HTTPS从最终的数据解析的角度,与HTTP没有任何的区别,HTTPS就是将HTTP协议数据包放到SSL/TSL层加密后,在TCP/IP层组成IP数据报去传输,以此保证传输数据的 ...

  3. 手机APP模式 之 Hybrid App(混合模式移动应用)

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Hybr ...

  4. Hybrid App技术批量制作APP应用与跨平台解决方案

    Hybrid App技术批量制作APP应用与跨平台解决方案 参考文章: (1)Hybrid App技术批量制作APP应用与跨平台解决方案 (2)https://www.cnblogs.com/aaro ...

  5. 懂商业的技术合伙人(14):使用HTML5开发App客户端,HTML5+和MUI框架基本介绍

    我非常倾向使用HTML5,搞定PC Web.Mobile Web.Android和iOS.微信小程序等各种UI开发. 作为技术人员,一次学习,处处使用,是个美好的愿望. 本文把2014~2017年,零 ...

  6. HTML5开发APP有哪些优点和缺点?HTML5优势和劣势大对比

    HMTL5开发APP有哪些优点和缺点?对比起来看,HTML5开发APP的优势明显大于劣势.比如HTML5有跨平台,开发成本低,推广更容易等等优点,同时它也有着一些缺点,比如容易受到网络的限制,用户体验 ...

  7. #HTML5 Web App项目秀#国内首款大型HTML5页游《黎明帝国》开发背后

    HTML5游戏<黎明帝国>,磊友科技打造,官网试玩 正想游戏邦创始人郑金条在<程序员>杂志专栏文章中所说:"HTML5被整体市场所观望的除了技术标准和规范不够成熟外, ...

  8. php跳转app,小程序支持跳转app么

    小程序支持跳转app. 此功能需要用户主动触发才能打开 APP,所以不由 API 来调用,需要用 open-type 的值设置为 launchApp 的 button 组件的点击来触发. 示例: 小程 ...

  9. 中国 IPv6 网民活跃用户达 3.62 亿,但 App 支持与国外差距较大!

    整理 | 夕颜 出品 | CSDN(ID:CSDNnews) 2017 年底,国家开始推行 IPv6 普及,出台多项政策推进 IPv6 规模部署.至今,IPv6 普及已经有了巨大的进步.普通用户可能在 ...

  10. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP

      前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...

最新文章

  1. redis为什么使用单线程 ,还那么快,单线程是怎么实现的
  2. win32下安装mingw32和cmake来编译opencv2.4.9
  3. 1、RN跨平台开发——环境搭建
  4. 你为什么不爱发朋友圈了?
  5. Spring实战(十三)Spring事务
  6. 入门机器学习(一)--单变量线性回归
  7. 现代图论笔记(二)树与二分图
  8. bzoj 3405: [Usaco2009 Open]Grazing2 移动牛棚(DP)
  9. .NET之我见系列 - 类型系统(上)
  10. Robo 可视化mongoDb的操作
  11. 如果面试官问您还有什么问题要问的,应该如何巧妙的回答才算合适呢?
  12. 嵌入式robocode实训-任务三
  13. ARINC429总线基础
  14. Centos7 下载安装Redis
  15. 全国哀悼日,让网站全站变成灰色的CSS代码
  16. windows7环境下使用github教程(1)
  17. CodeWarrior V5.1破解license+教程
  18. Vue Cli+高德API实现模糊搜索+返回坐标及信息
  19. 初识DTW(动态时间规整)算法及Python实现例
  20. 完美解决:ERROR: the following packages/stacks could not have their rosdep keys resolvedto system depend

热门文章

  1. 代码比对工具-Diffmerge
  2. js alert追加html,利用JQ来美化Js的alert弹出框
  3. 云之讯的短信SDK快速上手
  4. i3-9100f和i5-9400f 的区别
  5. Ubuntu20.04禁用触摸屏键盘
  6. IDM:从Google Drive快速直接下载大文件
  7. php 批量上传图片插件,diyUpload - jQuery多张图片批量上传插件
  8. C6000 DSP技术深度探索---链接命令文件(cmd)
  9. 基于stm32单片机外文文献_(强烈推荐)基于stm32的温度控制毕业论文设计
  10. Python设置显示屏分辨率