阿里云数据中台官网 https://dp.alibaba.com/index
（作者：qingliang_hu）
关联阅读：大厂经验（二）：多端可视化埋点解决方案
首先在介绍这套方案前，咱们还是简单地普及一下“埋点”这个名词。
埋点是指在各个终端（如网页、小程序）中收集一些关键访问数据并将数据发送到日志服务器，以供后续的数据分析。
如下笔者在写这篇文章之前对公司内的一些业务做的访谈调研记录，可以发现埋点在实际业务中大概会有这些作用：
在简单介绍今天的主角——埋点的定义后，接下来，我们一起来研究一下自动曝光这件事情。
自动曝光是指按照埋点规范在页面上进行一个简单的声明式埋点，第三方采集SDK会根据埋点信息自动的采集元素曝光信息的一种方式。
如下图，页面滑动过程中A、B、C、D模块出现在视口内采集SDK会自动上报埋点日志：
典型轮播图场景，图片滚动出现后需要打曝光日志：
1、一般而言产品上会要求页面上某个模块一定面积连续一段时间出现在视口才是有效曝光（如30%、300ms）
2、性能，几乎所有的第三方采集平台都会在曝光埋点的说明文档里注明：“请不要配置过多的曝光埋点，这会严重影响你的页面性能”
两个埋点方式
HTML如下：
<title>轮播图自动曝光埋点demo</title>
<style type="text/css">
ul {
padding: 0;
}
.clear{
clear:both;
zoom: 1;
}
*, :after, :before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:after {
clear: both;
}
.clearfix:after,
.clearfix:before {
display: table;
content: "";
}
.promo-bd {
margin: 0 auto;
overflow: hidden;
width: 520px;
}
.promo-bd .items-container {
list-style: none;
overflow: hidden;
width: 2280px;
left: 0px;
opacity: 1;
height: 280px;
}
.promo-bd .items-container .item {
display: list-item;
float: left;
overflow: hidden;
display: block;
visibility: visible;
height: 100%;
}
.promo-bd .items-container .item a {
display: inline-block;
height: 100%;
}
.sld-ft-nav {
text-align: center;
}
.sld-ft-nav li {
display: inline-block;
margin-left: 8px;
border-radius: 10px;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #ccc;
color: #fff;
font-size: 12px;
cursor: pointer;
}
.sld-ft-nav li:first-child {
margin-left: 0px;
}
.sld-ft-nav li.selector {
background-color: #ff7300;
}
<div class="container">
<div class="promo-bd">
<div class="items-container clear">
<div class="item" data-id="111">
<a href="#">
<img src="https://img.alicdn.com/tfs/TB1fEOLCrr1gK0jSZFDXXb9yVXa-520-280.jpg">
</a>
</div>
<div class="item" data-id="112">
<a href="#">
<img src="//img.alicdn.com/tfs/TB1BrwUFuL2gK0jSZPhXXahvXXa-520-280.jpg_q90_.webp">
</a>
</div>
<div class="item" data-id="113">
<a href="#">
<img border="0" src="//aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg">
</a>
</div>
<div class="item" data-id="114">
<a href="#">
<img border="0" src="//aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg">
</a>
</div>
</div>
<ul class="promo-nav sld-ft-nav">
<li class="dot selector" onclick="handlerClick(0)">1</li>
<li class="dot" onclick="handlerClick(1)">2</li>
<li class="dot" onclick="handlerClick(2)">3</li>
<li class="dot" onclick="handlerClick(3)">4</li>
</ul>
</div>
</div>
<script type="text/javascript">
let handlerLoop;
let width = 520;
function transform (num) {
document.querySelector('.items-container').setAttribute('style', `
transition-duration: 0.3s;
transform: translate3d(-${width * num}px, 0px, 0px);
backface-visibility: hidden;
left: 0px;
opacity: 1;
`);
document.querySelectorAll('li.dot').forEach(function(ele, i){
ele.setAttribute('class', 'dot');
if (i === num) {
ele.setAttribute('class', 'dot selector');
}
});
}
function loop (n) {
let num = n;
handlerLoop = setInterval(function(){
if (num === 3) {
num = 0;
} else {
num++;
}
transform(num);
}, 1500);
}
loop(0);
function handlerClick (index) {
clearInterval(handlerLoop);
transform(index);
loop(index);
}
</script>
方式1：在head头部声明式埋点
...... <meta name="auto-exp-track" content='[{"logkey":"/banner.item.image","cssSelector":".item","props":["data-id"]}]' />
......
方式2：JS注入式埋点
...... <script> var q = (window.tracksdk_queue.push || (window.tracksdk_queue.push = [])); q.push({ action: 'trackSdk.setMetaInfo', arguments: ['auto-exp-track',[{ "logkey":"/banner.item.image", "cssSelector":".item", "props":["data-id"] }]] }) </sctipt>
......
以上两种方式，埋点SDK均会判断cssSelector=".name"的所有元素被曝光时，自动采集这个标签的曝光信息，及当前元素上"data-id"等props参数打包在一起，以logkey=/banner.item.image的形式发出去。
如：https://tracker.xxx.com/banner.item.image
生命周期
技术细节
1、初始化:DomReady后做监听埋点配置变化（watchConfig）
2、watchConfig首次拿到埋点配置
①监听dom变化(watchDOM)
②监听曝光(watchExposureByIntersectionObserver)
③监听曝光(watchExposureByCustomIntersection)
④监听日志发送命令(watchRecord)
⑤watchConfig非首次拿到埋点配置
1、配置不为空时do_reset，做两件事：1.1、重置_aeElementsHashMap上下文；1.2、将符合条件的元素的track-ae属性重置成同类节点索引值，以触发下一轮曝光监听。
2、配置为空值时do_destroy，做三件事：2.1、销毁_aeElementsHashMap上下文；2.2、移除所有监听事件；2.3、清空所有track-ae锚点属性。
笔者通过大量测试和线上优化，拿目前这套架构方案与GA做了一个对比，即对208个元素做了曝光埋点，连续来回滚动，直到所有元素都完成曝光日志上报的性能对比：
有了这个基础，做如下两件事会显得比较轻松了
1、可视化埋点
2、可视化分析
原文链接>>
参考文献：
IntersectionObserver
IntersectionObserverPolyfill
数据中台是企业数智化的新基建，阿里巴巴认为数据中台是集方法论、工具、组织于一体的，“快”、“准”、“全”、“统”、“通”的智能大数据体系。目前正通过阿里云数据中台解决方案对外输出，包括零售、金融、互联网、政务等领域，其中核心产品有：
官方站点：
数据中台官网 https://dp.alibaba.com