tags: [组件]
categories: 业务场景解决方案

埋点方式

  • 数据监测：数据采集 | 数据传输 | 数据存储 | 数据分析挖掘 | 数据可视化

  • 数据采集也叫埋点(加码|打点)

  • 埋点核心参数：埋点 | 埋点参数 | 来源页面 | 来源页面参数 | 当前页面 | 当前页面参数

手工埋点

  • 在需要监测的页面引入基础js文件，然后根据业务需求添加监测代码

  • 手工埋点的数据监测产品：Google Analytics | Omniture | Webtrends | Coremetrics | Flurry | 百度统计 | CNZZ | 腾讯云分析 | 友盟

  • 灵活：可以设置自定义事件属性、发送数据内容、发送时间等，可以采集自己最为关心和需要的数据

  • 对于大型、复杂的网站，跨部门沟通成本较高

可视化埋点

  • 通过点击交互替代手写代码

  • 原理：在需要监测的页面引入基础JS文件，使用者进入可视化模式下，选择并配置监测内容(html元素)的信息被记录，并存放在相应位置。当真实世界的用户触发到该监测内容时，基础JS会自动加载之前配置过的信息，记录并发送该数据

  • 产品：Mixpanel 的 Codeless 模式 | 神策分析

无埋点(全埋点)

  • 也是通过可视化的形式添加要监测的内容

  • 可视化埋点是需要先通过配置才能实现内容监测，而无埋点默认先尽可能多的收集能监测的内容，然后再通过配置确定哪些内容需要展示和分析

  • 可以对想要监测的数据进行回溯，不必担心因为漏掉埋点而导致数据丢失

  • 但由于有大量数据需要预先传输，数据时效性和网络传输对无埋点技术要求较高

  • 产品：Heap | GrowingIO

前端埋点操作

由于访问印记实现埋点是跨域的请求，所以前端这里用jsonp实现跨域请求。

  1. 下载并引入第三方库 jsonp

  • npm install jsonp —save

  • import originJsonp from ‘jsonp’

  1. jsonp的实现原理就是动态创建script标签，并且将我们需要请求的路径通过该标签的src来实现，并且将我们要传入的参数拼接在路径后面。

  2. jsonp请求的封装

  • url：需要请求的接口地址

  • option(Object)：jsonp的请求配置，如：timeout设置超时时间、param(String)回调函数名称

  • fn：回调函数，用来接受返回的错误或者成功的结果

  1. 封装调用印记方法

  • 提供三种方法实现印记系统的登录、定时激活session、调用印记接口记录日志

  • 将三种方法放在jsonpCMT对象中

    1. writeLogLogin 登录印记系统

    2. writeLogActive 激活session

    3. writeLogToDSInfo 调用印记接口记录日志

    4. 上述三种方法只需要传入一个参数params(Object)即可。该参数就是需要记录的状态。

  1. 实现埋点

  • 在需要埋点的模块中导入模块 import jsonpCMT from ‘文件路径’

  • 在前端应用登录成功以后调用jsonpCMT.writeLogLogin方法，该方法成功以后则成功登录印记系统

  • 在登录印记系统成功以后调用jsonpCMT.writeLogActive实现定时激活session

  • 在需要实现埋点的地方调用jsonpCMT.writeLogToDSInfo实现日志记录