前端記錄用戶頁面停留時間(解決移動端無法監聽頁面刷新或關閉問題)


思路: 監聽用戶離開頁面的事件就行!!!!  離開的時間減去進入的時間, 就是用戶停留時間, 埋點

問題:  怎么監聽 用戶里離開頁面!!!!

1.網上大多數都是 beforeunload   和  unload  還有  vue的生命周期 destroyed,  都試過了,  在移動端 都沒有用!!!!!

2.移動端監聽不到beforeunload和  unload 

3.在本人鍥而不舍的找尋下(其實也就兩三個小時),找到了一個較為滿意的答案,既然移動端監聽不到beforeunload,找尋一個能取代的API就好,上代碼

window.addEventListener('pagehide', () => {
    localStorage.setItem("timestamp",'77778899998')
})

4.沒錯,就是pagehide,完美代替,至此大功基本告成

(剩余的跳轉頁面,特殊情況,返回頁面,大家可自行埋點!!)

補充說明:

1、pageshow事件:這個事件在用戶瀏覽網頁時觸發,pageshow 事件類似於 onload 事件,onload 事件在頁面第一次加載時觸發, pageshow 事件在每次加載頁面時觸發,即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發。
2、pagehide事件:該事件會在用戶離開網頁時觸發。離開網頁有多種方式。如點擊一個鏈接,刷新頁面,提交表單,關閉瀏覽器等。pagehide 事件有時可以替代 unload事件,但 unload 事件觸發后無法緩存頁面。

 

 

參考地址:https://blog.csdn.net/weixin_44431295/article/details/98876528


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM