简介：超过10年互联网行业技术工作经验总结

前言：更多关于数智化转型、数据中台内容可扫码加群一起探讨

阿里云数据中台官网 https://dp.alibaba.com/index

（作者：qingliang_hu）
关联阅读：大厂经验（一）：一套 Web 自动曝光埋点技术方案

团队经过一年探索，已经实现了多终端可视化埋点方案，包含 Web / App / 小程序等终端，基本操作流程就是将原运行在终端的应用，映射到PC浏览器上，通过浏览器做配置埋点，相较于H5，App终端因技术栈及访问环境等条件不同，在界面投屏及元素识别上有一定的难度，下面分享我们实现的像素识别方案。

埋点，简单说就是对指定位置埋上指定的值，以便监控到该位置是否做了点击、曝光、跳转等操作，从而得到数据以做分析使用。

该数据通常被PD、运营等同学使用，但埋点却由编码的开发同学完成，且埋点的值还会不定时的更新，增加开发人员工作。

以此为诉求，团队着手实现可视化埋点方案，可视化埋点核心在于如何以平台的形式不经开发人员来对页面埋点，比如由制定埋点规划、使用埋点数据的PD人员来操作。

可视化埋点从使用终端及技术栈上可划分为两类，native和web，而weex、小程序则两端都覆盖

开发完全不参与，当然是非常理想，实际上难以操作。简单来说做埋点管理的平台通常是在web端，而PD很难通过web平台来操作native app的页面元素。相比之下web端的埋点可视化因终端及技术的一致性，我们已经实现。

退而求其次，由开发人员在代码中标明需要埋点的位置，由PD来配置、更新需埋点的值，也可以很大程度上减少开发人员工作，提升工作效率，我们就以这种思路来实际App可视化埋点。

下面主要分享下，如何在PC平台对App实现可视化埋点解析，实际的实现行为更复杂，这里精要讲下思路、流程。

方案

web端的可视化埋点，用户可以通过js实现对html操作，从而直接在PC上对web页面做元素的圈选、分析。

而web不具备操作native的能力，通过埋点规范、Native截屏、解析约定等，共同实现了一套完整的方案。

首先Native开发人员做硬编码向需要埋点的元素定义id，native接入sdk，以识别此类元素，截应用图，并将图元素绘制在对应位置，保存为RGB色值的png图像，如下图。

上图中带黑色边框的蓝色正方形的区块，标明了需要埋点的元素及ID都隐藏这个区块里。

我们放大该区块

可以看到黑框内的左上角，有一些彩色像素，这些像素就是用来标识埋点元素的位置及id。

web端的工作重点就是解析这张图片的Data。

web端下载该图并得到其像素数据

const canvas = document.canvas;
const ctx = canvas.getContext('2d');

const img = new Image();
img.setAttribute("crossOrigin", "anonymous");
img.crossOrigin = "Anonymous"
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0);
let imageData = ctx.getImageData(0, 0, this.width, this.height); // imageData即该图片的所有像素点
}

得到所有像素点，如

[255, 144, 0, 255, 255, 144, 0, 255, 255, 144, 0, 255, 255,...]

我们知道，一个像素点，由四个值组成，分别为RGBA，如第一个像素点

255 - R
144 - G
0 - B
255 - A

通过这套数据，四个一组来筛选找到 web与native 约定好的起始点（即 [97, 117, 116, 255, 111, 116, 114, 255, 97, 99, 107, 255]) ，找到后，再取5656px的区块，且该区块外有 22px的黑色边框，符合这个条件的，即是双方约定标识的有效区域，如下图示意

比如我们在第10000个像素找到了符合条件的区块，经过简单计算我们可以得到每个像素在图片上的位置

const pi = 10000; //如对第10000个像素点

const width = 1000; //该图片的宽度为1000
const pos = {
height: pi*width,
width: parseInt(i / width, 10)
}

得到有效区域后，再分析该区域像素数据，可以得出，如下像素值

[

97, 117, 116, 255, #起始标识 a,u,t
111, 116, 114, 255, #起始标识 o,t,r
97, 99, 107, 255, #起始标识 a,c,k
0, 0, 27, 255, #id 长度 27
97, 50, 49, 255, #id值 a,2,1
52, 49, 46, 255, #id值 4,1,.
49, 46, 115, 255, #id值 1,.,s
101, 97, 114, 255, #id值 e,a,r
99, 104, 98, 255, #id值 c,h,b
97, 114, 46, 255, #id值 a,r,.
115, 101, 97, 255, #id值 s,e,a
114, 99, 104, 255, #id值 r,c,h
98, 111, 120, 255, #id值 b,o,x 0, 0,
255, 255, 0, 0,
255, 255, 0, 0,
255, 255, 0, 0,
255, 255, 0, 0,
255, 255, 0, 0,
255 ...
]

前三个像素表起始标识，

第四个像素表id的长度值，即27个字符，

据这个长度读取后面的字符

并将每个像素点除第四位外的其它值解析成asc码

String.fromCharCode(97)//=> aString.fromCharCode(117)//=> u

我们即可得出其表示的数据含义

前三个像素的表起始标识，解析为 autotrack，

据第四像素指定长度（27）字符，解析后面的code为 a2141.1.searchbar.searchbox。

再显示到图像上，效果如下

为显示友好对 "a2141.1.searchbar.searchbox"，只显示了最后一段。

这样我们即得到了该元素的位置，又得到了其id。

监听用户在该图上的点击操作，即可轻松选中埋点区域并得到其id，为该id绑定配置需要的参数值。生成配置文档并打包到该App中，通过sdk解析该份配置，通过id将配置与页面元素对应上，就大功告成！！

原文链接>>

数据中台是企业数智化的新基建，阿里巴巴认为数据中台是集方法论、工具、组织于一体的，“快”、“准”、“全”、“统”、“通”的智能大数据体系。目前正通过阿里云数据中台解决方案对外输出，包括零售、金融、互联网、政务等领域，其中核心产品有：

Dataphin，一站式、智能化的数据构建及管理平台；
Quick BI，随时随地智能决策；
Quick Audience，全方位洞察、全域营销、智能增长；
Quick A+，跨多端全域应用体验分析及洞察的一站式数据化运营平台；

官方站点：
数据中台官网 https://dp.alibaba.com

原文链接：https://developer.aliyun.com/article/765541?

版权声明：本文中所有内容均属于阿里云开发者社区所有，任何媒体、网站或个人未经阿里云开发者社区协议授权不得转载、链接、转贴或以其他方式复制发布/发表。申请授权请邮件developerteam@list.alibaba-inc.com，已获得阿里云开发者社区协议授权的媒体、网站，在转载使用时必须注明"稿件来源：阿里云开发者社区，原文作者姓名"，违者本社区将依法追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：developer2020@service.aliyun.com 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。

大厂经验（二）：多端可视化埋点解决方案相关推荐

ios无痕埋点_移动端无痕埋点实践详解(二)
0x01 前言在移动端无痕埋点实践详解(一)这篇文章大致总结了移动端无痕埋点的基本原理.主要介绍了什么是无痕埋点,无痕埋点的基础数据流程以及在Android系统上总体思路.这篇文章着重总结下无痕埋点 ...
ios无痕埋点_iOS可视化埋点方案
前言随着公司业务的发展,数据的重要性日益体现出来. 数据埋点的准确和全面性显得尤为重要. 通过精准和详细的数据,后面的分析才有意义.随着业务的不断变化,动态化埋点也越来越重要. 三大埋点方式为了解 ...
代码埋点、可视化埋点、无埋点几种数据埋点方案的分析报告
目录数据采集的核心问题一.埋点是什么二.为什么要埋点三.埋点有哪些方式四.各埋点方式优劣对比五.其他在这篇文章里面,我们会对数据采集的一些基本概念进行阐述,然后,会针对目前市面上新增的一 ...
B端可视化：图表设计
作者:nick (转载已取得作者授权) 可视化图表需要经历无数次推敲,才能更好得传递信息. 图表是数据可视化的常用表现形式,是对数据的二次加工,可以帮助我们理解数据.洞悉数据背后的真相,让我们更好地适 ...
基于f2从零实现移动端可视化编辑器
往期推荐在线IDE开发入门之从零实现一个在线代码编辑器基于React+Koa实现一个h5页面可视化编辑器-Dooring 深度剖析github star数15.1k的开源项目redux-thunk ...
GPS定位系统(二)——Android端
前言 GPS系列--Android端,github项目地址 tag: gps_mine Android移动端,主要是使用高德地图定位,后台上传定位信息,然后就是想办法尽量保活. 包括两个小功能:1.上 ...
易观方舟70秒可视化埋点SDK全部开源！
近日,易观CTO郭炜在易观A10大会对易观方舟开源体系以及易观方舟智能用户数据中台的架构建设进行了系统地阐述,并重磅宣布:将易观方舟"不用7天,只用70秒"的可视化埋点SDK全部开 ...
CAT分布式监控系统（二）：CAT埋点方案项目接入CAT监控说明
CAT分布式监控系统(二):CAT埋点方案项目接入CAT监控说明本文概要: 前面<CAT监控功能介绍>已经介绍了CAT监控系统是什么.能做什么: ...
头条创始人张一鸣没有任何大厂经验，是怎么做出这么厉害的产品的呢，以及管理这么大的团队呢？...
明代诗人杨基有<感怀>诗" 英雄各有见,何必问出处."任何人都可能成为英雄,不应以身份的高低,出身的贵贱,相貌的美丑来衡量英雄.有网友在论坛上问:头条创始人张一鸣没有任 ...

大厂经验（二）：多端可视化埋点解决方案

方案

大厂经验（二）：多端可视化埋点解决方案相关推荐

最新文章

热门文章