前言

为了获悉用户的行为，我们的业务计划在项目中加入埋点的能力，得到用户的行为，以此好对我们系统可以更好的分析去优化

在下面，我要对什么是数据埋点？为什么需要数据埋点？数据埋点的意义和实现，进行一个简单的介绍

一、何为数据埋点

数据埋点，一种常用的数据采集方法，在应用中特定的流程收集一些信息，后续用来进一步优化产品或提供运营的数据支撑。比如访问数、访客数、停留时长、页面浏览数和跳出率。

二、数据埋点

2.1 数据埋点的意义

可以根据用户在APP上的一系列操作线索，提炼信息，进行数据分析，进而分析输出业务分析结论。

分析运营机制的合理性
分析产品功能的合理性
分析用户消费行为，挖掘流失点
监控产品的流畅性
分析不同渠道的用户行为差异

2.2 埋点级别划分

初级埋点

在产品流程关键部位植入相关统计代码，用来追踪用户每次的行为，统计关键流程的使用程度；
中级埋点

在产品中植入多段代码追踪用户连续行为，建立用户模型来具体化用户在使用产品中的操作行为；
高级埋点

与研发及数据分析师团队合作，通过数据埋点还原出用户画像及用户行为，建立数据分析后台，通过数据分析、优化产品

2.3 数据埋点的信息收集

页面统计
统计操作行为

2.4 埋点技术

埋点技术划分，以及他们的优缺点：

全埋点
- 优点：成本低
- 缺点：只覆盖基本行为
- 适用场景：业务简单
可视化埋点
- 优点：自主采集
- 缺点：不支持与服务端交互
- 适用场景：业务标准化
代码埋点 ：
- 前端埋点（H5、PC）
  - 优点：采集全面
  - 缺点：非登录场景采集复杂
  - 适用场景：业务复杂
- 客户端埋点（APP埋点）（Android、ios）
  - 优点：采集标准
  - 缺点：依赖版本、延迟上报
  - 适用场景：业务复杂
- 后端埋点（服务端埋点）
  - 优点：实时有效、属性整合
  - 缺点：只支持调接口
  - 适用场景：整合属性

三、埋点应用

3.1 神策埋点

神测数据 - 新手入门

神策埋点有一些名词的概念介绍，在这里我就赘述了，可自行去神策官网查看，例如：什么是用户行为分析

关于神策埋点的使用，官网里也有教程：Web JS SDK集成文档（Web）

3.1.1 神策埋点的事件模型

事件模型是用来描述用户的各种行为，事件模型包括事件（Event）和用户（user）

我们在描述用户行为时，往往只需要描述清楚几个要点，即可将整个行为描述清楚，要点包括：是谁、什么时间、什么地点、以什么方式、干了什么。

3.1.2 神策埋点的使用

后面的内容是基于Web JS SDK 的一些简单介绍，框架是Vue2

sa-sdk-javascript - Github

sa-sdk-javascript - npm

埋点安装
js 复制代码
```
npm i sa-sdk-javascript
```

参数配置

全埋点 - Web JS SDK

全局引入：

js 复制代码

// main.js
var sensors = require("sa-sdk-javascript");
sensors.init({
  server_url: "", // 服务端接受数据地址
  // is_track_single_page:true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
  // use_client_time: true,
  show_log: true/false, //是否显示conlog到控制台
  // heatmap: 点击图设置，默认配置表示不自动采集元素点击事件和页面保留事件，配置成 {} 表示开启 $WebClick 采集 和 $WebStay 自动采集，默认 $WebClick 只采集 a，button，input ，textarea 四个 dom 元素的点击事件。
  heatmap: {
    // //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
    clickmap: "not_collect",
    // //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
    scroll_notice_map: "not_collect",
    // //  collect_tags：配置是否开启div的全埋点采集，默认不采集。如需开启，配置 collect_tags 参数如下：
    //  collect_tags:{
    //   div: {
    //    max_level: 3 // 默认是 1，即只支持叶子 div。可配置范围是 [1, 2, 3],非该范围配置值，会被当作 1 处理。
    //   },
    //   li: true,
    //   img: true,
    //   svg: true
    //   ...其它标签
    //   },
    // // 配置自定义属性支持可视化
    // track_attr: ['hotrep', 'anotherprop', "data-prop2"],
  },
});
// sensors.quick('autoTrack'); //用于采集 $pageview 事件。
Vue.prototype.$sensors = sensors;

Web JS SDK全埋点包括三种事件：Web 页面浏览、Web 元素点击、Web 视区停留

使用示例：