web埋点如何做

278 阅读2分钟

script 标签 async, defer区别

一、基本概念

  1. 纯web环境有限采用 Image/get,加密base64 上报,如果超出长度浏览器限制,采用post明文上报。

webview内嵌页,采用native上报

  1. session: 前端所用的,用来记录一段连续操作的全局唯一ID,跟后端无关。(无法跨一级域) SDK重置session时机,冷启动(没有cookie),连续30分钟无上报事件的时候

二、使用方式

部分配置可通过meta标签实现:

    <script>
        !(function (win, doc, ns) {
        var cacheFunName = '_LogObject';
        win[cacheFunName] = ns;
        if (!win[ns]) {
            var _LX = function () {
                console.log(123, _LX);
                _LX.q.push(arguments);
                return _LX;
            };
            _LX.q = _LX.q || [];
            _LX.l = +new Date();
            win[ns] = _LX;
        }
        })(window, document, 'LXAnalytics');
        LXAnalytics('config', 'use_post', true);
    </script>

引入SDK链接

三、设置一些可配置的命令

LXAnalytics('set', 'cityid', 1);
LXAnalytics('get', 'lxcuid', function(data){
	console.log(data);
});
LXAnalytics('config', 'onWebviewAppearAutoPV', false); // webview 切换到后台不用自动上报
LXAnalytics('config', 'use_post', true); // 使用post方式上报

四、事件模型

模型以PV为主事件,以MV/MC/ME/BO/BP为子事件,根据request_id关联,以PD标志结束。 PV(page View)、 MV(module view)、 MC(module click)、 ME(module edit)、 BO(order)、 BP(pay)、 PD(page dispear)。

页面打开 。 自动page view(生成request_id),上报 。 MV/MC/ME/BO/BP,获取最近一次的PV的request_id,上报。 是否:单页面离开(路由跳转,关闭)再次发送PV。 window.beforeunload ,获取最近一次PV到现在的时间,作为页面停留的时间,PD 事件。

五、页面停留时间

为了更精准的计算页面停留时间,可监听如下事件。

    1. beforeunload PD。
    1. document.focus PV
    1. document.blur 超过一段时间(默认2s) PD
    1. document.visibilitychange state=visible 的时候,PV
    1. document.visibilitychange state=hidden 的时候,PD

六、如果一个页面对应多个业务方

在增加一层,用以区分不同的业务方,上报多次。实现多例。

七、附

单页面会在路由跳转的时候,跳转前PD,跳转后PV。

八、上报策略

  • PC浏览器: 优先采用XMLHttpRequest,不支持XDomainRequest,不支持navigator.sendBeacon,不支持,放弃
  • 手机端浏览器:第一步采用Image上报以外,其余逻辑同上
  • XMLHttpRequest/XDomainRequest/Image,先base64转码,get;超过浏览器长度限制,不转码,post。
  • XMLHttpRequest/XDomainRequest/Image发送失败status < 200 或 >400, 重新尝试2次,仍失败,navigator.sendBeacon发一次,不行的话,将失败的数据存入indexDB, 6秒一次轮训,轮训总时长5分钟,5分钟后仍然失败,放置。待下一个打开页面,优先检查indexDB ,若有未发送的数据,尝试发送。