大厂经验多端可视化埋点解决方案

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

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

（作者：qingliang_hu）

团队经过一年探索，已经实现了多终端可视化埋点方案，包含 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])，找到后，再取 56_56px 的区块，且该区块外有 2_2px 的黑色边框，符合这个条件的，即是双方约定标识的有效区域，如下图示意

比如我们在第 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