Vue SPA项目 前端埋点实战

SPA项目统计PV和UV

一、SPA项目统计PV和UV
SPA项目中一次访问算一次PV。一开始我在项目的首页埋了一个点，但是发现用户返回到首页的时候也会上报，于是我就稍微调研了一下，发现了我认为SPA统计PV的最佳办法。

// 伪代码如下：
const user = getUserInfo()
document.addEventListener('visibilitychange', function () {
    // 用户打开或回到页面
    if (document.visibilityState === 'visible') {
    api.trackEvent({
        event: 'pv',
        user_id: user
    })
})

visibilityState有三种状态：

• visible：可见
• hidden：不可见
• preview：页面即将或正在加载，处于不可见状态

有的情况（比如在客户端内Tab下内置了一个H5的webview）是会预先加载这个网页的，这就会导致会导致用户其实没有点击，但是已经有一次访问了。如果我们用 visibilityState === visible 来做判断，就会避免这个误差。只有当页面真正的出现在屏幕中的时候，这个等式才成立。
我们再对比一下其他的API：

• onload和onpageShow都会在页面加载出来的时候调用，所以如果用来统计PV，会导致统计值比实际值偏高。

参考
阮一峰老师的这篇文章：www.ruanyifeng.com/blog/2018/1…