頁面跳轉時，點擊上報丟失問題解析

gclove 發布于2019-08-01 18:34 / 546人閱讀

摘要：背景最近在工作中，遇到了頁面跳轉時點擊上報丟失的問題，突出表現在微信的上，上報后直接跳轉的失敗率達到了驚人的。對這三種失效的方案有興趣的可以看頁面跳轉時，統計數據丟失問題探討把要跳轉的放到中，然后在下一個頁面上上報點擊。

背景

最近在工作中，遇到了頁面跳轉時點擊上報丟失的問題，突出表現在微信ios的webview上，上報后直接跳轉的失敗率達到了驚人的93%。喝口水壓壓驚，開始逐步分析問題的發生。

原理

現代瀏覽器越來越快，尤其是Chrome的v8內核，跑的那叫一個迅速。但是必須看到的是，在不同的平臺上，瀏覽器之間的實現還是略有不同的。就拿頁面跳轉時點擊上報丟失的問題來看，PC chrome瀏覽器模擬和微信 Android的Webview, 均不存在這個問題，但是在IOS端的表現卻如此的嚴重。

現在我們跨域上報的方式主要有三種，image src, jsonp和fetch。不管是哪種上報方式，在瀏覽器點擊跳轉時，跳轉前的點擊上報請求都會進行一個三次握手，如果此時，網絡較慢、服務器運行緩慢或者上報請求還在處理階段，這時，如果頁面被卸載了，瀏覽器都會自動對當前的請求進行abort。這樣，這個http的請求就沒有建立，導致上報沒有真正發出。

這部分我還有個疑問，按理說只要fetch請求發出，即使是abort也是假的abort，因為現在根本就沒有fetch的abort API，但是從我統計的數據上來看，確實有一部分曝光上報消失了（在fiddler截單看到發出了請求），非常的詭異。我會繼續關注這個問題。

解決方案

說到解決方案，那就海了去了，但是能打的其實一個也沒有。下面我會把我認為還OK的方法加粗。

加一個delay

這應該是最簡單的方案了吧，沒有什么是setTimeout 1s不能解決的，如果有，那就2s……但是這種方案不管是對用戶的體驗，還是對代碼的優雅，都損害特別大。除非真的是對性能不太在意，不然這招是用不出來的。

之前類似的方案還有：
1. 阻塞式的 Ajax 請求
2. 暴力的死循環
3. 發一個圖片請求阻塞

當然這些方案在chrome瀏覽器上都應該失效了，但是他們與delay的原理和優缺點都是類似的。對這三種失效的方案有興趣的可以看《頁面跳轉時，統計數據丟失問題探討》

window.name

把要跳轉的url放到window.name中，然后在下一個頁面上上報點擊。window.name的含義是獲得/設置窗口的名稱，這個屬性是跨域的，當窗口存在的時候，window.name就存在；每個窗口的名稱都可以是不一樣的。
在這個方案中，window.name被當做了一個存儲上報點擊地址的介質。

雖然這個方案解決了體驗差的問題，但是要實現這個方案，就要在所有的頁面上都部署處理window.name的代碼。舉一個簡單的例子，你是一個網站主，點擊一個廣告跳轉廣告落地頁，總不能要求在這個廣告落地頁上也部署你的代碼，所以這種方案也有很大的局限性。

cookie和localStorage

這種方案與window.name的方案類似，但是因為cookie和localStorage的生命周期比window.name的生命周期更長。我們就可以將延時上報的代碼放到我們之前的頁面上去：每當用戶在跳轉頁面時出現了上報丟失的情況，就將這個上報地址寫入cookie或者localStorage中，然后等用戶再次回到我們的頁面上時，判斷下這兩個存儲介質中是否有值，有值則上報即可。

這種方案無需對所有的頁面都加監控代碼，但是若是某些極端情況，用戶去了別的頁面一去不返，或者間隔了一個很長的時間（諸如2天），那對我們整體統計數據上都會有個偏差。

Beacon API

這是W3C委員會給的瀏覽器異步請求發送API。它可以保證即使頁面在unload狀態下，也會異步發送統計，不影響頁面過渡/跳轉到下跳頁。但是，它的瀏覽器支持率一直是個問題。

截止本文發稿時（2018年02月04日），支持率如下：

可以看到至關重要的ios safari終于在11.3版本支持了這一特性，但是，我更新了IOS的最新版本：11.2.5！估計還需要兩個月這個特性才能被使用。而IOS最近爆出的升級變慢門又會進一步拖慢新版本的覆蓋時間，難受了呀，老哥！

后臺上報

說過來覆過去，無非是前端瀏覽器abort了請求，如果后臺同學給給力，問題不就解決了嗎？一種解決方案是前端把所有需要上報的內容扔給后臺，讓后臺去進行上報并進行302跳轉。這是最完美的方案嗎？

前臺Yes, 后臺No。

總結

盡管現在我們還是沒有一個完美的解決方案，但是在不久的將來，我們就能使用到Beacon API。你問我現在怎么辦？先使用cookie/localStorage的方案頂一頂吧。

過兩天我會給出詳細代碼實現。

云服務器 GPU云服務器 ios點擊推送跳轉點擊php跳轉鏈接 asp點擊圖片跳轉 html點擊跳轉網址

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51824.html

頁面跳轉時，點擊上報丟失問題解析

摘要：背景最近在工作中，遇到了頁面跳轉時點擊上報丟失的問題，突出表現在微信的上，上報后直接跳轉的失敗率達到了驚人的。對這三種失效的方案有興趣的可以看頁面跳轉時，統計數據丟失問題探討把要跳轉的放到中，然后在下一個頁面上上報點擊。背景最近在工作中，遇到了頁面跳轉時點擊上報丟失的問題，突出表現在微信ios的webview上，上報后直接跳轉的失敗率達到了驚人的93%。喝口水壓壓驚，開始逐步分析問...

Bmob 2019-08-26 11:36 評論0 收藏0
JS魔法堂:定義頁面的Dispose方法——[before]unload事件啟示錄

摘要：坑無視和是十分特殊的事件，要求事件處理函數內部不能阻塞當前線程，而卻恰恰就會阻塞當前線程，因此規范中以明確在和中直接無視這幾個方法的調用。前言 ?最近實施的同事報障，說用戶審批流程后直接關閉瀏覽器，操作十余次后系統就報用戶會話數超過上限，咨詢4A同事后得知登陸后需要顯式調用登出API才能清理4A端，否則必然會超出會話上限。?即使在頁面上增添一個登出按鈕也無法保證用戶不會直接關掉瀏覽器...

Chiclaim 2019-08-19 18:43 評論0 收藏0
讓前端監控數據采集更高效

摘要：如何在新的技術背景下讓前端數據采集工作更加完善高效，是本文討論的重點。具體來說，我們對前端的數據采集具體主要分為路由切換性能資源錯誤日志上報路由切換等前端技術的快速發展使單頁面應用盛行。隨著業務的快速發展，我們對生產環境下的問題感知能力越來越關注。作為距離用戶最近的一層，前端的表現是否可靠、穩定、好用，很大程度上決定著用戶對整個產品的體驗和感受。因此，對于前端的監控不容忽視。搭建一...

Half 2019-08-23 17:00 評論0 收藏0
前端監控和前端埋點方案設計

摘要：異常監控包括前端腳本執行報錯等。本文針對整個前端監控，設計適用的方案。前端埋點系統的前后端通信加密在上報數據的前后端通信中，需要和端協商加密機制，利用庫來實現的加密，已經是一個廣泛被采用的加密算法。在線上項目中,需要統計產品中用戶行為和使用情況，從而可以從用戶和產品的角度去了解用戶群體，從而升級和迭代產品，使其更加貼近用戶。用戶行為數據可以通過前端數據監控的方式獲得，除此之外，前端還...

April 2019-08-29 16:14 評論0 收藏0
前端監控和前端埋點方案設計

摘要：異常監控包括前端腳本執行報錯等。本文針對整個前端監控，設計適用的方案。前端埋點系統的前后端通信加密在上報數據的前后端通信中，需要和端協商加密機制，利用庫來實現的加密，已經是一個廣泛被采用的加密算法。在線上項目中,需要統計產品中用戶行為和使用情況，從而可以從用戶和產品的角度去了解用戶群體，從而升級和迭代產品，使其更加貼近用戶。用戶行為數據可以通過前端數據監控的方式獲得，除此之外，前端還...

Hwg 2019-08-23 10:37 評論0 收藏0