关于javascript:统计用户停留网站时长

52次阅读

共计 3054 个字符，预计需要花费 8 分钟才能阅读完成。

最近接到一个需要，须要统计用户从进入网页到全副网页都在浏览器敞开这个过程的工夫。

首先确定一下需要：

用户一进来，记录用户进入页面的开始工夫；
用户在新的标签页关上页面，如果其余标签页曾经关上了页面，这时候的开始工夫还是算第一次进入的页面的工夫；
用户敞开该网页的全副标签页时，须要记录敞开的完结工夫，调用接口传数据给后盾；

首先，进入页面的时候，浏览器会调用 onload 事件, 浏览器敞开时，浏览器会调用 beforeunload 事件，能够从这两个事件动手。

然而这里有几个问题，那就是浏览器刷新的时候，也会调用beforeunload, 还有就是如何晓得用户在其它标签页也关上了网页呢？

有什么能够记录浏览器是否刷新呢？这时候我想到了sessionStorage。

sessionStorage，用于长期保留同一窗口 (或标签页) 的数据，在敞开窗口或标签页之后将会删除这些数据。也就是说数据存储在 sessionStorage 中，在以后标签页会始终存在。

首先在首次进入页面时在 onload 事件中往 sessionStorage 存入一个标识

window.addEventListener("load",function(){if(sessionStorage.getItem("flag")){return;}
    sessionStorage.setItem("flag", true);
})

下面说的还有一个问题，就是如何统计用户关上了多个标签页呢？

在本地缓存中，localStorage中的数据是整个网站都能够共享的，也就是具备雷同域名、ip 的网站，localStorage里的数据在不同标签页中也是雷同的。

这时候能够往 localStorage 里存一个计数器，当用户进入页面时，计数器加 1，当用户来到页面时计数器减 1。当计数器为 0 时，标记页面全副敞开，此时能够记录页面敞开的完结工夫。同时拜访网站的开始工夫也存到 localStorage 中

window.addEventListener("load",function(){let nowTime = getNowTime()
    let openPageCount = localStorage.getItem("openPageCount")
    openPageCount += 1
    localStorage.setItem("openPageCount",openPageCount)
    // 其实阐明是页面是刷新后加载的，不应该统计开始工夫
    if(sessionStorage.getItem("flag")){return;}
    localStorage.setItem("startTime",nowTime)
    sessionStorage.setItem("flag", true);
})

window.addEventListener("beforeunload",function(){let nowTime = getNowTime()
    let openPageCount = localStorage.getItem("openPageCount")
    openPageCount -= 1
    localStorage.setItem("endTime",nowTime)
    localStorage.setItem("openPageCount",openPageCount)
    if(openPageCount == 0){// 阐明页面全副敞开，这时候能够传数据给后盾}
})

function getNowTime(){let nowTime = new Date().getTime()
    return nowTime
}

这里还有个问题，就是用户意外关掉电脑或者忽然断电了，这时候是不会执行 beforeunload 是不会执行，此时这个数据是不正确，是应该摈弃的。

要解决这个问题，能够往 localStorage 里存一个刷新工夫，每 30 秒更新这个刷新工夫，用户加载网站时，读取这个刷新工夫，如果以后工夫和这个刷新工夫相差大于 1 分钟，阐明数据有断层，此时应该摈弃这一条记录数据。

window.addEventListener("load",function(){let nowTime = getNowTime()
    let openPageCount = localStorage.getItem("openPageCount")
    openPageCount = openPageCount ? parseInt(openPageCount) : 0
    openPageCount += 1
    localStorage.setItem("openPageCount",openPageCount)
    refreshTime()
    let isRightTime =  compareRefreshTime()
    // 其实阐明是页面是刷新后加载的，不须要统计开始工夫
    if(sessionStorage.getItem("flag") && isRightTime){return;}
    localStorage.setItem("startTime",nowTime)
    localStorage.setItem("refreshTime",nowTime)
    sessionStorage.setItem("flag", true);
})

window.addEventListener("beforeunload",function(){let nowTime = getNowTime()
    let openPageCount = localStorage.getItem("openPageCount")
    openPageCount -= 1
    localStorage.setItem("endTime",nowTime)
    localStorage.setItem("openPageCount",openPageCount)
    if(openPageCount == 0){// 阐明页面全副敞开，这时候能够传数据给后盾}
})

function getNowTime(){let nowTime = new Date().getTime()
    return nowTime
}

function compareRefreshTime(){let nowTime = getNowTime()
   let refreshTime = localStorage.getItem("refreshTime")
   return nowTime - refreshTime < 60 * 1000
}

function refreshTime(){setTimeout(refreshTime ,30 * 1000)
    let nowTime = getNowTime()
    localStorage.setItem("refreshTime",nowTime)
}

以上就是统计用户停留网站时长思路的全副代码。

利用场景能够是统计手机 App 应用时长、统计用户关上网站后多久会敞开，这都是属于大数据的领域。

由此能够拓展到用户应用每个页面的浏览时长，统计每个页面浏览时长能够更好的统计哪些页面是用户常常浏览，从而更好的优化这些页面，而浏览量比拟少的或者没有浏览量的页面应该从新设计或者花更少工夫去保护。而在前端方面存储这些数据的实现思路总体是差不多的。

当然下面的办法也有肯定的毛病，比方数据可能会失落、每个关上的页面都要启动一个定时器等等。

如果须要数据更精准些，咱们能够应用 websocket 或者启动一个定时器定时向后盾传数据等等，这样会也有一点的毛病，比方增大服务器压力，影响性能。

正文完