作者：阮一峰 原文：http://www.ruanyifeng.com/blog/2019/04/user-tracking.html
本文介紹如何編寫 JAVAScript 腳本，將用戶數據發回服務器。
我做了一個代碼倉庫(https://github.com/ruanyf/user-tracking-demos)，包含了下面所有的例子，可以運行查看效果。
一、同步 AJAX
數據發回服務器的常見做法是，將收集好的用戶數據，放在unload事件里面，用 AJAX 請求發回服務器。
但是，異步 AJAX 在unload事件里面不一定能成功，因為網頁已經處于卸載中，瀏覽器可能發送，也可能不發送。所以，要改成同步 AJAX 請求。
上面代碼中，xhr.open()方法的第三個參數是false，表示同步請求。
這種方法最大的問題在于，瀏覽器逐步將不允許在主線程上面，使用同步 AJAX。所以，上面代碼實際上不能用。
二、異步 AJAX
異步 AJAX 其實是能用的。前提是unload事件里面，必須有一些很耗時的同步操作。這樣就能留出足夠的時間，保證異步 AJAX 能夠發送成功。
上面代碼中，強制執行了一次雙重循環，拖長了unload事件的執行時間，導致異步 AJAX 能夠發送成功。
三、追蹤用戶點擊
setTimeout也能拖延頁面卸載，保證異步請求發送成功。下面是一個例子，追蹤用戶點擊。
上面代碼使用setTimeout，拖延了350毫秒，才讓頁面跳轉，因此使得異步 AJAX 有時間發出。
四、反彈追蹤
追蹤用戶點擊，還可以使用反彈追蹤（bounce tracking）。
所謂"反彈追蹤"，就是網頁跳轉時，先跳到一個或多個中間網址，以便收集信息，然后再跳轉到原來的目標網址。
上面代碼中，用戶點擊的時候，會強制跳到一個中間網址，將信息攜帶過去，處理完畢以后，再跳到原始的目標網址。
谷歌和百度現在都是這樣做，點擊搜索結果時，會反彈多次，才跳到目標網址。
五、Beacon API
上面這些做法，都會延緩網頁卸載，嚴重影響用戶體驗。
為了解決網頁卸載時，異步請求無法成功的問題，瀏覽器特別實現了一個 Beacon API，允許異步請求脫離當前主線程，放到瀏覽器進程里面發出，這樣可以保證一定能發出。
window.addEventListener('unload', function (event) {
navigator.sendBeacon('/log', 'foo=bar');
});
上面代碼中，navigator.sendBeacon()方法可以保證，異步請求一定會發出。第一個參數是請求的網址，第二個參數是發送的數據。
注意，Beacon API 發出的是 POST 請求。
六、ping 屬性
HTML 的<a>標簽有一個ping屬性，只要用戶點擊，就會向該屬性指定的網址，發出一個 POST 請求。
<a href="https://baidu.com" ping="/log?foo=bar"> click </a>
上面代碼中，用戶點擊跳轉時，會向/log這個網址發一個 POST 請求。
ping屬性無法指定數據體，似乎只能通過 URL 的查詢字符串攜帶信息。
七、參考鏈接
- Link Click Analytics and Privacy, John Wilander
- ping Attribute, David Walsh
