关于前端:前端埋点总结

用户行为剖析

随着互联网倒退，企业对于网站的 PV、UV、用户的转化、新增和留存也越来越关注。而残缺的数据采集是所有的前提。

埋点即监控用户在利用体现层的行为，于产品迭代而言至关重要，经营，产品，数据分析基于此来对用户行为进行剖析统计，同时埋点也可作为一种前端监控的伎俩，测验性能是否达预期的佐证。

基于埋点数据进行用户行为剖析，能够失去蕴含页面点击量、用户访问量、用户拜访门路、用户转化率、导流转化率、用户拜访时长和用户拜访内容分析等重要数据。

• 用户怎么找到该产品的

通过埋点网站拜访起源，能够统计用户入口散布，统计什么推广最无效，产品用户的汇集中央散布。

• 用户感兴趣的是什么

通过产品性能点击的埋点，统计晓得用户感兴趣的是什么，便于产品经营更好的更新产品，勾销或改良不感兴趣的产品。

• 用户有什么特色

地理分布浏览器类型、网站停留时常、寻找产品用户群体，针对群体进行改良更新，以及对其余群体进行吸引等等。

• 其余

通过拜访页面的注册用户数和页面 PV 的比值理解用户转化率。
通过导流页面 PV 和源页面 PV 的比值统计导流转化率。

可埋点数据

type – 上报类型
appid – 设施 id
screen – 屏幕信息
userAgent – 浏览器信息
userInfo – 用户身份信息
timestamp – 上报工夫
document.referrer – 拜访起源
action – 上报事件的动作类型
element – 触发上报的元素
地理位置
拜访渠道
以及其余自定义数据 params 等等

埋点计划

前端埋点大抵分为：代码埋点、可视化埋点、无痕埋点三种。

• 代码埋点也叫手动埋点属于侵入式埋点，由开发手动在代码内植入预埋点，齐全由开发管制埋点的地位工夫和触发机制。
• 可视化埋点即以业务代码为输出，通过可视化系统配置埋点，最初以耦合的模式输入业务代码和埋点代码。
• 无痕埋点即无差别地对全局所有事件和页面加载生命周期等进行拦挡全埋点。

代码埋点

• 应用第三方 sdk 埋点

如百度统计、友盟、TalkingData、Google Analytics、Sensors Analytics 等都提供了这一计划。

应用绝对简略，在 APP 或者界面初始化的时候，初始化第三方数据分析服务商的 SDK，而后在某个事件产生时就调用 SDK 外面相应的数据发送接口发送数据。例如，咱们想统计 APP 外面某个按钮的点击次数，则在 APP 的某个按钮被点击时，能够在这个按钮对应的 OnClick 函数外面调用 SDK 提供的数据发送接口来发送数据。

除此针对特定需要也能够对立封装数据上报通用 sdk，各页面各业务模块按需调用，同时埋点的模式也是多种多样的

• 基于事件点击埋点

// 上报 sdk
export const sdk = {
  params: null,
  initParams() {const params={};
    params.domain = document.domain || '';
    params.title = document.title || '';
    params.referrer = document.referrer || '';
    params.sw = window.screen.width || 0;
    params.sh = window.screen.height || 0;
    params.lang = navigator.language || '';
    params.ua = navigator.userAgent || '';
    params.loadT = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart || 0;
    params.timestamp= new Date();
    sdk.params = params;
  },
  report(params = {}) {
    // 上报
     if(!sdk.params){sdk.initParams();
    }
    const _params = merge({},sdk.params,params);
    request('/api/report',{params:_params});
  }
};

// react wapper 组件式
// 封装埋点包裹组件
export default function TrackerClick(props) {const { children, type} = props;

  return React.Children.map(children, child => {
    React.cloneElement(child, {onClick: (e) => {
        const originClick = child.props.onClick;
        typeof originClick==='function' && originClick.call(child, e);
        sdk.dispatch({type});
      }
    })
  });
}

// 页面应用
<TrackerClick type="namespace.click">
    <Button onClick={handleClick}> 查看 </Button>
</TrackerClick>

// 通用形式
// 上报事件的绑定类型对应的绑定名称
const REPORT_EVENT_FUNC = 'data-reporteventfunc';
// 上报事件数据对应的绑定参数名称
const REPORT_EVENT_DATA = 'data-reporteventdata';
document.body.addEventListener('click',function(e){if(e.target.getAttribute(REPORT_EVENT_FUNC)==='click'){const str=e.target.getAttribute(REPORT_EVENT_DATA);
        sdk.report(JSON.stringify(str));
   }
})

// 页面 -react
<span 
    data-reporteventfunc="click" 
    data-reporteventdata={JSON.stringify({code:1,id:2})}></span>
// 页面 -vue
<span 
    data-reporteventfunc="click" 
    :data-reporteventdata="JSON.stringify({code:1,id:2})"></span>

// 应用装璜器，剥离埋点与业务逻辑实现上的耦合，实现低侵入埋点
@tracker((params)=>request('/api/report',{params}))
click(params){// click 业务...}

const tracker = partical=>(target, key, descriptor)=>{if (typeof partical!=='function') {throw new Error('tracker arguments is not a function' + partical)
    }
    const oldValue=descriptor.value;
    descriptor.value=function(...args){partical.apply(this,args);
        return oldValue.apply(this,args);
    }
    return descriptor;
}

• 页面拜访埋点 - 统计页面曝光时长

// Vue 中通过 mixin
beforeRouteEnter(to, from, next) {this.enterTime=+ new Date();
},
beforeRouteLeave(to, from, next) {
     sdk.report({
         type: 'visit',
         name: to.name,
         enterTime: this.enterTime,
         leaveTime: +new Date(),
         params: {
             from: {
                 name: from.name,
                 path: from.path,
                 query: from.query
             },
             to: {
                 name: to.name,
                 path: to.path,
                 query: to.query
             },
         } 
     })
}

传统基于 DOMContentLoaded、beforeunload、onload 等也能够实现

• css 埋点

<style>
.tracker:active::after{content: url("http://www.yzw.com/api/tracker/report?action=yourdata"); 
}
</style>
<a class="tracker"> 点击我，会发埋点数据 </a>

埋点数据上报的模式

• xhr 上报

实用于须要承受数据上报后的返回后果进行回调解决

• img/iframe/script 上报

sdk.report=(params){
    // 1.img 标签
    var img = document.createElement("img");
    img.src = '/api/report?' + querystring.stringify(params);
    // 2.img 对象
    const img = new Image();
    img.src='/api/report?' + querystring.stringify(params);
    // 3.script 标签
    var script = document.createElement("script");
    script.src = src;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
}

可视化埋点

计划有 Mixpanel、TalkingData、诸葛 IO、腾讯 MTA，Sensors AnalyticsV1.3+ 等

可视化埋点通常流程为：

输出页面的 url =>
页面加载实现后 =>
配置可视化的工具 =>
点击创立事件（click）=>
进入元素抉择模式 =>
用鼠标点击页面上的某个元素（例如 button、a 这些 element）=>
就能够在弹出的对话框外面 =>
设置这个事件的名称（比方叫 TEST），选上报数据属性（properties）=>
保留配置 =>
用户拜访点击按钮 =>
数据上报

其中针对元素标记多是利用 xpath，是在 xml 文档中查找信息的语言，如下所示

const getPath = function (elem) {if (elem.id != '') {return '//*[@id="' + elem.id + '"]';
     } 
     if (elem == document.body) {return '/html/' + elem.tagName.toLowerCase();
     } 
     let index = 1, siblings = elem.parentNode.childNodes;
     for (const i = 0, len = siblings.length; i < len; i++) {const sibling = siblings[i];
         if (sibling === elem) {return arguments.callee(elem.parentNode) + '/' + elem.tagName.toLowerCase() + '[' + (index) + ']';
         } else if (sibling.nodeType === 1 && sibling.tagName === elem.tagName) {index++;} 
     }
 }

通过上述办法，当咱们点击某个元素时，将触发的元素 event.target 传入，即可失去残缺的 xpath。
如果将其换做 dom 的选择器，相似：div#container>div:nth-of-type(2)>p:nth-of-type(1)，由此，能够定位到具体的 DOM 节点

mixpanel 分为三层构造：

• 根本工具层：提供类型判断、遍历、继承、bind 等根本的工具函数；json、base64、utf8 编解码能力；url 参数读写函数；cookie、localStorage 读写能力；dom 事件绑定能力；dom 节点查问能力；info 浏览器信息获取能力。
• 功能模块层：提供基于 DomTracker 实现的 LinkTracker 跳链接埋点、FormTracker 提交数据埋点性能；autotrack 主动埋点性能；基于 cookie 或 localStorage 的 MixpanelPersistence 长久化性能；MixpanelNotification 提醒性能；gdbr 根据欧盟《通用数据保护条例》，首先判断用户是否设置了 navigator.doNotTrack 防止数据被追踪，其次判断长久层是否禁止数据被追踪，当两者同时容许追踪埋点数据时，mixpanel 才会上报埋点数据。
• 外围实现层：MixpanelLib 串联性能、解决选项、发送埋点数据等；MaxpanelGroup；MaxpanelPeople

Sensors Analytics

使用者在本人的网页引入 Sensors Analytics 的 JavaScript SDK 代码后，从 Sensors Analytics 的后盾可视化埋点治理界面跳转到使用者的网站界面时，会主动进入到可视化埋点模式。在这个模式下，使用者在网页上点击任意 html 元素时，Sensors Analytics 都会取到这个元素的 url，层级关系等信息来形容这个 html 元素，当使用者设置了这个元素和某个事件相关联时，SDK 会把这些关联信息和客户生成配置信息，并且寄存在 Sensors Analytics 提供的相应保留地位。当真正的用户以一般模式拜访这个网页时，SDK 会主动加载配置信息，从而在相应的元素被点击时，应用 Sensors Analytics 的数据发送接口来 track 事件。

从下面咱们介绍的可视化埋点的计划能够看出，可视化埋点很好地解决了代码埋点的埋点代价大和更新代价大两个问题。然而，可视化埋点可能笼罩的性能无限，目前并不是所有的控件操作都能够通过这种计划进行定制；同时，Mixpanel 为首的可视化埋点计划是不能自己设置属性的，例如，一个界面上有一个文本框和一个按钮，通过可视化埋点设置点击按钮为一个“提交”事件时，并不能将文本框的内容作为事件的属性进行上传的，因而，对于可视化埋点这种计划，在上传事件时，就只能上传 SDK 主动收集的设施、地区、网络等默认属性，以及一些通过代码设置的全局公共属性了；最初，作为前端埋点的一种计划，可视化埋点也仍然没有解决传输时效性和数据可靠性的问题。

无埋点

Heap、百度（点击猴子）、GrowingIO 等
与可视化埋点又相似，二者的区别就是可视化埋点先通过界面配置哪些控件的操作数据须要收集；“无埋点”则是先尽可能收集所有的控件的操作数据，而后再通过界面配置哪些数据须要在零碎外面进行剖析。

“无埋点”相比可视化埋点的长处，一方面是解决了数据“回溯”的问题，例如，在某一天，忽然想减少某个控件的点击的剖析，如果是可视化埋点计划，则只能从这一时刻向后收集数据，而如果是“无埋点”，则从部署 SDK 的时候数据就始终都在收集了；另一方面，“无埋点”计划也能够主动获取很多启发性的信息，例如，“无埋点”能够通知使用者这个界面上每个控件别离被点击的概率是多大，哪些控件值得做更进一步的剖析等等。

当然，与可视化埋点一样，“无埋点”仍然没有解决笼罩的性能优先，不能灵便地自定义属性，传输时效性和数据可靠性欠佳这几个毛病。甚至因为所有的控件事件都全副收集，反而会给服务器和网络传输带来更大的负载。

技术实现上也能够通过拦挡全局页面拜访和事件响应，剖析用户拜访全流程门路，上报所有触发埋点，因而无埋点也叫全埋点。

总结

每种计划各有优劣，并不存在某种广泛完满的能够适应所有场景的埋点计划，而是应该依据不同的产品，不同的剖析需要，不同的零碎架构，不同的应用场景，抉择最合适的一种接入计划。上面是一些典型的例子：

1. 仅仅是剖析 UV、PV、点击量等根本指标，能够抉择代码埋点或者可视化埋点等前端埋点计划；
2. 精细化剖析外围转化流程，则可能须要利用后端 SDK 或者 LogAgent 接入后端日志；
3. 流动 / 新性能疾速上线迭代时的成果评估，则能够利用可视化埋点疾速实现；
4. 对客服服务质量的考核，或者不同快递在不同省份运送不同品类产品的速度的比拟，则须要应用后端 SDK 来对接第三方零碎以便导入数据。