UncleChen的博客


  • 首页

  • 分类

  • 归档

  • 标签

  • 关于

  • 搜索

揭开JS无埋点技术的神秘面纱

发表于 2018-06-24 | 分类于 技术

一、背景

相信很多人都接触过“埋点”这个概念,无论是前端还是后端开发,我们都可以使用这门技术来生产出一些运营性质的原始数据(接口耗时、程序安装/启动、用户交互行为等等),然后分析它们得到一些抽象指标(例如留存率、转化率),进而决定产品运营或者代码优化的方向。现在业界有许多比较知名数据平台,比如Google Analytics、Facebook Pixel、Mixpanel、GrowingIO、诸葛IO、TalkingData、神策数据等数不胜数一大票,这些平台有单纯做数据分析的,也有服务于特定领域例如广告监测转化的,都提供了多端(Android、iOS、Web、小程序、ReactNative)的埋点SDK和比较全面的BI服务。这一两年,不少平台都开始宣传一种叫“无埋点”的技术,下面以Web端为例,揭开它的神秘面纱。

阅读全文 »

如何实现网页和Chrome插件之间的通信

发表于 2018-06-09 | 分类于 技术

一、需求场景

前面我写过一篇博客使用React.js开发Chrome插件,里面介绍了作为一个新手怎么去开发Chrome插件。这次我总结一下在开发Chrome插件中很容易遇到的一些需求,比如在网页中判断是否安装了某个Chrome插件,安装的版本是多少?或者在网页上点击右键菜单里面的某个按钮,然后执行Chrome插件的某个功能。这些需求本质上都实现了网页和Chrome之间的通信。

阅读全文 »

使用Play框架和React编写Web应用

发表于 2018-05-20 | 分类于 技术

一、背景

上一篇文章提到使用Play框架编写Web应用,Play框架内置了模板引擎,支持MVC架构,但这本质还是一种Server Rendering。现在越来越多的网站(尤其是不需要seo的一些商业平台系统),都在变成SPA(Single Page Application),使用React、Vue、Angular进行开发。我们先不讨论哪种方式更好,只看看它们到底是怎么做的。

阅读全文 »

使用Play框架编写Web应用

发表于 2018-05-13 | 分类于 技术

一、Play框架简介

Play是一个Full-Stack的Web应用开发框架,使用它可以快速编写自己的Web应用,也可以使用它来编写RESTful API。与现在非常流行的Spring全家桶相比,Play略显小众,但它的设计思想天生就是分布式、异步的,也得到许多开发者的认可,在实际生产环境中也有像Linkedin这样的大公司采用。对于一个没有开发过Web应用或者后台应用的开发者来讲,学习和使用Play框架也许是一个不错的选择。

阅读全文 »

JS埋点技术分析

发表于 2017-12-24 | 分类于 技术

一、背景

上一篇博客分析了Android上的埋点SDK技术原理,这次我看看Web页面上的埋点。Web页面上的埋点主要通过JS完成,在JS里面同样有代码埋点、全埋点、可视化埋点三种方案,如果对这几种方案的概念不了解可以看下上一篇博客。由于mixpanel-js和Sensors Analytics JavaScript SDK都开源了自己的SDK,就以它们为例进行分析。

阅读全文 »

Android埋点技术分析

发表于 2017-12-18 | 分类于 技术

一、概念

埋点,是对网站、App或者后台等应用程序进行数据采集的一种方法。通过埋点,可以收集用户在应用中的产生行为,进而用于分析和优化产品后续的体验,也可以为产品的运营提供数据支撑,其中常见的指标有PV、UV、页面时长和按钮的点击等,通常可以采集到下面这些数据。

  • 行为数据:时间、地点、人物、交互的内容等
  • 质量数据:App运行情况、浏览器加载情况、错误异常等
  • 环境数据:手机型号、操作系统版本、浏览器UA、地理、运营商、网络环境等
  • 运营数据:PV、UV、点击量、日活、留存、渠道来源等

采集行为数据时,通常需要在Web页面/App里面添加一些代码,当用户的行为达到某种条件时,就会向服务器上报用户的行为。其实添加这些代码的过程就可以叫做“埋点”,在很久以前就已经出现了这种技术。随着技术的发展和大家对数据采集要求的不断提高,我认为埋点的技术方案走过了下面几个阶段:

  • 代码埋点:代码埋点是指在某个事件发生时调用数据发送接口上报数据。例如开发人员按照产品/运营的需求,在Web页面/App的源码里面添加行为上报的代码,当用户的行为满足某一个条件时,这些代码就会被执行,向服务器上报行为数据。这种方案是最基础的方案,每次增加或者修改数据上报的条件,都需要开发人员的参与,并且只能在下一个版本上线后才能看到效果。基本上所有的数据平台都提供了这类数据上报的SDK,将行为上报的后台服务器接口封装成了简单的客户端SDK接口。开发者可以通过嵌入这类SDK,在埋点的地方调用少量的代码就可以上报行为数据。

  • 全埋点:全埋点指的是将Web页面/App内产生的所有的、满足某个条件的行为,全部上报到后台服务器。例如把一个App中所有的按钮点击都进行上报,然后由产品/运营去后台筛选所需要的行为数据。这种方案的优点非常明显,就是可以不用在新增/修改行为上报条件时,再找开发人员去修改埋点的代码。然而它的缺点也和优点一样明显,那就是上报的数据量比代码埋点大很多,里面可能很多是没有价值的数据。此外,这种方案更倾向于独立去看待用户的行为,而没有关注行为的上下文,给数据分析带来了一些难度。很多公司也提供了这类功能的SDK,通过静态或者动态的方式,“Hook”了原有的App代码,从而实现了行为的监测,在数据上报时通常是采用累积多条再上报的方案来合并请求。

  • 可视化埋点:可视化埋点是指通过可视化工具配置采集节点,在App/Web解析配置查找节点,监听节点产生的事件并上报。例如产品在Web页面/App的界面上进行圈选,配置需要监测界面上哪一个元素,然后保存这个配置,当App启动时会从后台服务器获得产品/运营预先圈选好的配置,然后根据这份配置查找并监测App界面上的元素,当某一个元素满足条件时,就会上报行为数据到后台服务器。有了暴力的全埋点技术方案,很容易联想到按需埋点,可视化埋点就是一种按需配置埋点的方案。现在也有一些公司提供了这类SDK,圈选监测元素时,有的是提供一个Web管理界面,手机在安装并初始化了SDK之后,可以和管理界面了连接,让用户在Web管理界面上配置需要监测的元素,有的是直接让用户在手机上圈选元素进行埋点。

hook直译是钩子的意思,以前学信息安全的时候在windows上听到过,大体意思是通过某种手段去改变系统API的一个行为,绕过系统的某个方法,或者改变系统的工作流程。在这里其实是指把本来要执行某个方法的对象替换成另一个,一般用的是反射或者代理,需要找到hook的代码位置,甚至还可以在编译阶段实现替换。全埋点和可视化埋点都需要Hook掉App原本的代码实现。

业界有多家SDK都支持上面介绍的3种埋点方案中的一种或者全部,例如Mixpanel、Sensorsdata、TalkingData、GrowingIO、诸葛IO、Heap Analytics、MTA、Umeng Analytics、百度,只是大家对后两种埋点的称呼不完全相同,有的叫无埋点或者codeless埋点。由于Mixpanel(支持代码埋点、可视化埋点)和Sensorsdata(全部支持)都开源了自己的全部SDK,技术方案也比较类似,下面以它们的Android SDK为例,简单分析一下3种埋点方案的技术实现。关于JS的SDK技术实现,可以看下我的另一篇博客-JS埋点SDK技术分析。

阅读全文 »
123…6
unclechen

unclechen

吃下恶魔果实,我就能变成超级赛亚人!

33 日志
4 分类
45 标签
RSS
GitHub Weibo
Creative Commons
0%
© 2015 - 2019 unclechen