前端埋点方案

发表于 | 更新于:

为什么需要埋点

现在评定产品的好坏、产品使用范围的广度等信息，基本上都是通过数据说明的，而埋点，正是作为这些数据统计的支撑。埋点的意义也就不言而喻了。用户浏览次数统计、交互行为跟踪、商品交易信息收集等，都是埋点的作用。

埋点有哪些方案

我了解到的目前市面上的埋点方案，有代码埋点、可视化埋点、无埋点、后端埋点方案。

1、代码埋点

代码埋点，就是通过我们前端同学，手动在代码里自定义监听和收集处理需要跟踪的信息。
由于是自定义的，所以在精度这块比较可控，数据分析同学需要什么我们基本上都能收集给他们，代码埋点的优势如下：

  • 事件标识明确、触发方式可以灵活自定义
  • 业务参数丰富
  • 数据分析更精确

同时也伴随着痛点：

  • 前端同学工作量增大
  • 业务代码和埋点揉在一起，不好管理
  • 修改埋点不是很方便，还要发版后生效

2、可视化埋点

可视化埋点就相对简单了，但是需要有数据平台支持。运营通过可视化的界面拖拽配置，将元素与要采集事件关联起来，可以自动生成埋点代码嵌入到页面中。优点是：

  • 所配即所得
  • 减少前端工作量
  • 埋点流程简化

也有不好的一面：不能像代码埋点那样收集丰富的业务参数。

3、无埋点

无埋点也叫全埋点，前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据。优势：

  • 技术成本低
  • 数据可回溯（这是最大的优势）

缺点就是：不够灵活，记录的信息少，并且由于所有的元素数据都要收集，导致传输压力大，会给数据传输和服务器带来较大的压力

4、后端埋点

在后端采集的数据，例如后端的日志的采集。优势是传输的数据很真实，但缺少用户交互方面的采集，所以这种方案需要配合前端埋点，实现更大的数据价值

为什么是 gif 图打点

前端监控的原理，就是要将页面的用户信息上报给服务器，数据一般都是通过 url_encode 或者 json 收集。通常我们知道的埋点实现，都是基于 gif 图打点的，那么为什么这么做呢，有如下原因：

  • 避免跨越
  • 相比 PNG/JPG 等其他格式的图片，GIF 的最低合法体积最小（最小的 BMP 文件需要 74 个字节，PNG 需要 67 个字节，而合法的 GIF，只需要 43 个字节）
  • 执行过程无阻塞

实现一个简单的埋点

这段简单的脚本在页面加载完后执行，可以统计页面的曝光率，至于其他点击事件、选择事件等以及参数的收集，实现起来就比较复杂了。但是埋点的原理，就是我们在需要业务统计的地方，通过 gif 打点，告诉服务器相关的信息，服务器再做统一处理。更复杂的埋点方案，可以去 github 搜索大牛们实现的埋点源码解读下。

1
2
3
4
5
6
7
8
var thisPage = location.href;
var referringPage = document.referrer ? document.referrer : "none";
var beacon = new Image();
beacon.src =
  "http://www.example.com/logger/beacon.gif?page=" +
  encodeURI(thisPage) +
  "&ref=" +
  encodeURI(referringPage);

神策埋点介绍

由于最近有用神策的埋点，对于神策的接入，去官方文档了解下就行了，知道埋点原理，就能很快上手。

安装 sdk，npm install sa-sdk-javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var sensors = require('sa-sdk-javascript');
sensors.init({
  server_url: '...',
  //如果神策代码中 `sensorsdata.min.js` 版本是 1.13.1 及以前版本，必须须配置 heatmap_url，高于此版本不需要配置。heatmap_url 神策分析中点击分析及触达分析功能代码，代码生成工具会自动生成。
  heatmap_url: "在 GitHub 下载新版本的 heatmap.min.js ",
  //如果神策后台版本及 `sensorsdata.min.js` 均是 1.10 及以上版本，这个参数不需要配置 web_url。 web_url 神策分析中点击分析及触达分析功能会用到此地址，代码生成工具会自动生成。
  web_url:"神策分析后台地址",
  heatmap: {
     //是否开启点击图，默认为 default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭
     //需要 Web JS SDK 版本号大于 1.7
     clickmap:'default',
     //是否开启触达注意力图，默认 not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启
     //需要 Web JS SDK 版本号大于 1.9.1
     scroll_notice_map:'not_collect'
  }
  .......
});
sensors.quick('autoTrack'); //用于采集 $pageview 事件

这样就算接入神策了，接入之后可以去神策后台验证下。

上手神策数据，首先要了解它的数据格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
	"distinct_id": "123456",
	"time": 1434556935000,
	"type": "track",
	"event": "ViewProduct",
	"project": "ebiz_test",
	"time_free": true, //建议在导入历史数据时使用，SDK 采集的实时数据不建议使用
	"properties": {
		"$is_login_id":true, //此参数请慎重使用，详细介绍请参考文档底部 8.1 $is_login_id 参数说明
		"$app_version":"1.3",
		"$wifi":true,
		"$ip":"180.79.35.65",
		"$province":"湖南",
		"$city":"长沙",
		"$user_agent":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/58.0.3029.113 Mobile/14F89 Safari/602.1",
		"$screen_width":320,
		"$screen_height":640,
		"product_id":12345,
		"product_name":"苹果",
		"product_classify":"水果",
		"product_price":14.0
	}
}
  • event：事件名，需是合法的变量名，我认为最重要的标志，是你需要监控的某个按钮或者成功标志的一个名称
  • properties：event 的具体属性，就是我们记录了这个事件，然后通过事件带过来的 properties 就能更详细的了解这个用户触发个事件做了什么事
  • 神策里给我预置了很多属性，带$的属性都是预置的

发送一个事件：sensors.track(event_name[, properties][, callback])

  • event_name: string，必选。表示要追踪的事件名。
  • properties: object，可选。表示这个事件的属性。
  • callback: function，可选。表示已经发送完数据之后的回调。
1
2
3
4
5
6
7
8
9
10
11
12
13
// 追踪浏览商品事件。
sensors.track("ViewProduct", {
  //String 类型
  ProductName: "MacBook Pro",
  //Number 类型，-9E15 到 9E15 小数点后最多保留 3 位
  ProductPrice: 123.45,
  //BOOL 类型，true 或 false
  IsAddedToFav: false,
  //List 类型，字符串元素的数组，最大元素个数为 500，其中每个元素使用 UTF-8 编码后最大长度 255 字节
  ProductList: ["apple", "orange"],
  //DATETIME 类型，可以直接传 new Date() 或者 传 yyyy-MM-dd HH:mm:ss.SSS / yyyy-MM-dd HH:mm:ss 格式的字符串。
  ViewTime: new Date(),
});

至此，就可以轻松收集这个点的数据了，埋点就是这么简单。

sensors.registerPage(object)，对于某些情况，有些数据对每个事件都是需要的，那么可以用 registerPage 方法将该属性设置为事件公共属性。例如 sensors.registerPage({gender:”male”})，在你 track 的时候 sensors.track(“index_visit”)，相当于 sensors.track(“index_visit”, {gender:”male”})，一旦有变化可以统一便捷的修改公共参数。

需要进行其他更复杂的埋点，神策官方文档查一下就 OK 了，神策 WebAPI 传送门：https://manual.sensorsdata.cn/sa/latest/tech_sdk_client_web-1573905.html