做境外盈利网站违法吗,盘搜搜,西双版纳傣族自治州天气预报,网站建设价格表一、什么是埋点 所谓“埋点”#xff0c;是数据采集领域#xff08;尤其是用户行为数据采集领域#xff09;的术语#xff0c;指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。 埋点…一、什么是埋点 所谓“埋点”是数据采集领域尤其是用户行为数据采集领域的术语指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。 埋点的技术实质是先监听软件应用运行过程中的事件当需要关注的事件发生时进行判断和捕获。埋点需要在特定的时机来收集数据然后上报给服务端进行分析
二、为什么需要埋点 数据生产-》数据采集-》数据处理-》数据分析挖掘-》数据驱动/用户反馈-》产品优化/迭代 上述是整个数据从产生到最终作用于产品优化上的过程。埋点是整个流程的开始点终端提供商在收集到埋点数据之后通过大数据处理、数据统计、数据分析、数据挖掘等加工处理可以得到衡量产品状态的一些基本指标比如活跃、留存、新增等大盘数据从而洞察产品的状态随着数据挖掘等技术的兴起埋点采集到的数据在以下方面的作用也越来越凸显。
三、如何去埋点
一般情况下主要有3类埋点展现埋点 曝光埋点 交互埋点。1、展现埋点 定义展现其实是一个服务端的触发。服务端被触发后用户侧将会展现什么内容展现埋点需要记录的是页面展现的内容信息即服务端下发的内容是什么这些东西一定是当前页面主要内容不包含一些交互信息。2、曝光埋点 哪些下发的内容被用户实际看到了。和展现埋点类似由于屏幕有限但内容可以无限。哪些内容被用户侧实际看到曝光需要记录的是单个“内容”被看到。一系列被下发的内容可以触发多次曝光埋点。3、交互埋点 交互埋点表明的是功能/内容被用户“点击”了。从埋点时机来说这个是展现 曝光的下游。记录对于我们提供的“服务”的“消费”情况。比如一个页面用户可以点击那么我们需要记录相应的交互动作埋点比如一个视频可以点赞我们也可以记录交互埋点比如一个视频可以播放暂停我们也可以记录消费埋点。总体来说就是我们要记录 被看到的可交互功能/信息的“消费”数据。
四、埋点记录
关于埋点记录需要明确记录两个信息点位信息、点位映射。 点位信息明确每个业务事件下的具体的参数信息包含公共参数、业务参数。 点位映射每个埋点对应的业务含义。
五、前端监控 一般来讲一个成熟的产品运营与产品团队需要关注用户在产品内的行为记录通过用户的行为记录来优化产品研发与测试团队则需要关注产品的性能以及异常确保产品的性能体验以及安全迭代。
前端监控一般也分为三大类
5.1 数据监控监控用户行为 ●PV/UV: PV(page view)即页面浏览量或点击量UV指访问某个站点或点击某条新闻的不同 IP 地址的人数 ●用户在每一个页面的停留时间 ●用户通过什么入口来访问该网页 ●用户在相应的页面中触发的行为等... 统计这些数据是有意义的比如我们知道了用户来源的渠道可以促进产品的推广知道用户在每一个页面停留的时间可以针对停留较长的页面增加广告推送等等。
5.2 性能监控监控页面性能 ●不同用户不同机型和不同系统下的首屏加载时间 ●白屏时间 ●http 等请求的响应时间 ●静态资源整体下载时间 ●页面渲染时间 ●页面交互动画完成时间等... 这些性能监控的结果可以展示前端性能的好坏根据性能监测的结果可以进一步的去优化前端性能尽可能的提高用户体验。
5.3 异常监控监控产品、系统异常
及时的上报异常情况可以避免线上故障的发上。虽然大部分异常可以通过 try catch 的方式捕获但是比如内存泄漏以及其他偶现的异常难以捕获。常见的需要监控的异常包括 ●Javascript 的异常监控 ●样式丢失的异常监控
六、埋点上报
实现前端监控第一步肯定是将我们要监控的事项数据给收集起来再提交给后台进行入库最后再给数据分析组进行数据分析最后处理好的数据再同步给运营或者是产品。数据收集的丰富性和准确性会直接影响到我们做前端监控的质量因为我们会以此为基础为产品的未来发展指引方向。 现在常见的埋点上报方法有三种手动埋点、可视化埋点、无埋点
6.1 手动埋点 手动埋点也叫代码埋点即纯手动写代码调用埋点 SDK 的函数在需要埋点的业务逻辑功能位置调用接口上报埋点数据像**[友盟]、[百度统计]**等第三方数据统计服务商大都采用这种方案。手动埋点让使用者可以方便地设置自定义属性、自定义事件所以当你需要深入下钻并精细化自定义分析时比较适合使用手动埋点。 手动埋点的缺陷就是项目工程量大需要埋点的位置太多而且需要产品开发运营之间相互反复沟通容易出现手动差错如果错误重新埋点的成本也很高。
6.2 可视化埋点 通过可视化交互的手段代替上述的代码埋点。将业务代码和埋点代码分离提供一个可视化交互的页面输入为业务代码通过这个可视化系统可以在业务代码中自定义的增加埋点事件等等最后输出的代码耦合了业务代码和埋点代码。 可视化埋点的缺陷就是可以埋点的控件有限不能手动定制。
6.3 无埋点 无埋点则是前端自动采集全部事件上报埋点数据由后端来过滤和计算出有用的数据。优点是前端只要一次加载埋点脚本缺点是流量和采集的数据过于庞大服务器性能压力山大。 佳佳 HTML COBUB PHP 无码埋点
七、SDK实现
数据收集以及数据上报的方式都有了那么就可以开始实现SDK了这里先以单文件非工程化进行实现
7.1 非工程化
// JS 完整代码部分
(function (e) {function wrap(event) {const fun history[event];return function () {const res fun.apply(this, arguments);const e new Event(event);window.dispatchEvent(e);return res;};}class TrackingDemo {constructor(options {}) {// 重写 pushState、replaceStatewindow.history.pushState wrap(pushState);window.history.replaceState wrap(replaceState);// 上报地址this.reportUrl options.reportUrl || ;this.sdkVersion 1.0.0;this._eventList [click, dblclick, mouseout, mouseover];this._dulation {startTime: 0,value: 0,};this._initJSError();// 初始化事件数据收集this._initEventHandler();// 初始化PV统计this._initPV();this._initPageDulation();}setUserId(uid) {this.uid uid;}_initEventHandler() {this._eventList.forEach((event) {window.addEventListener(event, (e) {const target e.target;const reportKey target.getAttribute(report-key);if (reportKey) {this._report(event, {tagName: e.target.nodeName,tagText: e.target.innerText,event,});}});});}_initPV() {window.addEventListener(pushState, (e) {this._report(pv, {type: pushState,referrer: document.referrer,});});window.addEventListener(replaceState, (e) {this._report(pv, {type: replaceState,referrer: document.referrer,});});window.addEventListener(hashchange, () {this._report(pv, {type: hashchange,referrer: document.referrer,});});}_initPageDulation() {let self this;function initDulation() {const time new Date().getTime();self._dulation.value time - self._dulation.startTime;self._report(dulation, {...self._dulation,});self._dulation.startTime time;self._dulation.value 0;}// 首次进入页面window.addEventListener(load, () {// 记录时间const time new Date().getTime();this._dulation.startTime time;});// 单页应用页面跳转(触发 replaceState)window.addEventListener(replaceState, () {initDulation();});// 单页应用页面跳转(触发 pushState)window.addEventListener(pushState, () {initDulation();});// 非单页应用跳转触发 popstatewindow.addEventListener(popstate, () {initDulation();});// 页面没有任何跳转, 直接关闭页面的情况window.addEventListener(beforeunload, () {initDulation();});}_initJSError() {window.addEventListener(error, (e) {this._report(error, {message: e.message,});});window.addEventListener(unhandledrejection, (e) {this._report(error, {message: e.reason,});});}// 用户可主动上报reportTracker(data) {this._report(custom, data);}_getPageInfo() {const { width, height } window.screen;const { userAgent } navigator;return {uid: this.uid,title: document.title,url: window.location.href,time: new Date().getTime(),ua: userAgent,screen: ${width}x${height},};}_report(type, data) {const reportData {...this._getPageInfo(),type,data,sdk: this.sdkVersion,};if (navigator.sendBeacon) {navigator.sendBeacon(this.reportUrl, JSON.stringify(reportData));} else {const imgReq new Image();imgReq.src ${this.reportUrl}?params${JSON.stringify(reportData)}t${new Date().getTime()};}}}e.TrackingDemo TrackingDemo;
})(window);
// HTML 代码部分
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton report-keybutton按钮/button
/body
script src./tackerDemo.js/script
scriptconst trackingDemo new TrackingDemo()
/script
/html
实现方式就是将此文中 数据收集 部分的代码整合成一个类。
7.2 工程化
如果项目是模块化开发的话就需要打包工具进行打包以便支持esm、cjs和umd三种方式同时工程化还便于维护。
这里使用rollup进行打包以及使用typescript进行类型约束。
GitHub - GaLiDunGuide/TrackerDemo
7.3 发布NPM包 files: [dist], // 发布 npm 时需要上传的目录
main: dist/index.cjs.js,
module: dist/index.esm.js,
browser: dist/index.js, 八、为什么都用GIF来做埋点
向服务器端上报数据可以通过请求接口请求普通文件或者请求图片资源的方式进行。只要能上报数据无论是请求GIF文件还是请求js文件或者是调用页面接口服务器端其实并不关心具体的上报方式。那为什么所有系统都统一使用了请求GIF图片的方式上报数据呢 ●防止跨域 一般而言打点域名都不是当前域名所以所有的接口请求都会构成跨域。而跨域请求很容易出现由于配置不当被浏览器拦截并报错这是不能接受的。但图片的src属性并不会跨域并且同样可以发起请求。排除接口上报 ●防止阻塞页面加载影响用户体验 通常创建资源节点后只有将对象注入到浏览器DOM树后浏览器才会实际发送资源请求。反复操作DOM不仅会引发性能问题而且载入js/css资源还会阻塞页面渲染影响用户体验。 但是图片请求例外。构造图片打点不仅不用插入DOM只要在js中new出Image对象就能发起请求而且还没有阻塞问题在没有js的浏览器环境中也能通过img标签正常打点这是其他类型的资源请求所做不到的。排除文件方式 ●相比PNG/JPGGIF的体积最小 最小的BMP文件需要74个字节PNG需要67个字节而合法的GIF只需要43个字节。 同样的响应GIF可以比BMP节约41%的流量比PNG节约35%的流量。并且大多采用的是1*1像素的透明GIF来上报 1x1像素是最小的合法图片。而且因为是通过图片打点所以图片最好是透明的这样一来不会影响页面本身展示效果二者表示图片透明只要使用一个二进制位标记图片是透明色即可不用存储色彩空间数据可以节约体积。
