如何用JS追蹤用戶
一、同步 AJAX
數據發(fā)回服務器的常見做法是，將收集好的用戶數據，放在unload事件里面，用 AJAX 請求發(fā)回服務器。
但是，異步 AJAX 在unload事件里面不一定能成功，因為網頁已經處于卸載中，瀏覽器可能發(fā)送，也可能不發(fā)送。所以，要改成同步 AJAX 請求。
window.addEventListener('unload', function (event) {
let xhr = new XMLHttpRequest();
xhr.open('post', '/log', false);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('foo=bar');
});
上面代碼中，xhr.open()方法的第三個參數是false，表示同步請求。
這種方法最大的問題在于，瀏覽器逐步將不允許在主線程上面，使用同步 AJAX。所以，上面代碼實際上不能用。
二、異步 AJAX
異步 AJAX 其實是能用的。前提是unload事件里面，必須有一些很耗時的同步操作。這樣就能留出足夠的時間，保證異步 AJAX 能夠發(fā)送成功。
function log() {
let xhr = new XMLHttpRequest();
xhr.open('post', '/log', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('foo=bar');
}
window.addEventListener('unload', function(event) {
log();
// a time-consuming operation
for (let i = 1; i < 10000; i++) {
for (let m = 1; m < 10000; m++) { continue; }
}
});
上面代碼中，強制執(zhí)行了一次雙重循環(huán)，拖長了unload事件的執(zhí)行時間，導致異步 AJAX 能夠發(fā)送成功。
三、追蹤用戶點擊
setTimeout也能拖延頁面卸載，保證異步請求發(fā)送成功。下面是一個例子，追蹤用戶點擊。
// HTML 代碼如下
// <a id="target" rel="external nofollow" rel="external nofollow" rel="external nofollow" >click</a>
const clickTime = 350;
const theLink = document.getElementById('target');
function log() {
let xhr = new XMLHttpRequest();
xhr.open('post', '/log', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('foo=bar');
}
theLink.addEventListener('click', function (event) {
event.preventDefault();
log();
setTimeout(function () {
window.location.href = theLink.getAttribute('href');
}, clickTime);
});
上面代碼使用setTimeout，拖延了350毫秒，才讓頁面跳轉，因此使得異步 AJAX 有時間發(fā)出。
四、反彈追蹤
追蹤用戶點擊，還可以使用反彈追蹤（bounce tracking）。
所謂"反彈追蹤"，就是網頁跳轉時，先跳到一個或多個中間網址，以便收集信息，然后再跳轉到原來的目標網址。
// HTML 代碼如下
// <a id="target" rel="external nofollow" rel="external nofollow" rel="external nofollow" >click</a>
const theLink = document.getElementById('target');
theLink.addEventListener('click', function (event) {
event.preventDefault();
window.location.href = '/jump?url=' +
encodeURIComponent(theLink.getAttribute('href'));
});
上面代碼中，用戶點擊的時候，會強制跳到一個中間網址，將信息攜帶過去，處理完畢以后，再跳到原始的目標網址。
谷歌和百度現在都是這樣做，點擊搜索結果時，會反彈多次，才跳到目標網址。
五、Beacon API
上面這些做法，都會延緩網頁卸載，嚴重影響用戶體驗。
為了解決網頁卸載時，異步請求無法成功的問題，瀏覽器特別實現了一個 Beacon API，允許異步請求脫離當前主線程，放到瀏覽器進程里面發(fā)出，這樣可以保證一定能發(fā)出。
window.addEventListener('unload', function (event) {
navigator.sendBeacon('/log', 'foo=bar');
});
上面代碼中，navigator.sendBeacon()方法可以保證，異步請求一定會發(fā)出。第一個參數是請求的網址，第二個參數是發(fā)送的數據。
注意，Beacon API 發(fā)出的是 POST 請求。
六、ping 屬性
HTML 的<a>標簽有一個ping屬性，只要用戶點擊，就會向該屬性指定的網址，發(fā)出一個 POST 請求。
<a rel="external nofollow" rel="external nofollow" rel="external nofollow" ping="/log?foo=bar"> click </a>
上面代碼中，用戶點擊跳轉時，會向/log這個網址發(fā)一個 POST 請求。
ping屬性無法指定數據體，似乎只能通過 URL 的查詢字符串攜帶信息。
以上就是如何用JS追蹤用戶的詳細內容，更多關于用JS追蹤用戶的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家詳細介紹了JavaScript鼠標特效,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
本篇文章主要是對js控制input輸入字符方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
js for循環(huán)，為什么一定要加var定義i變量
我知道，有些人（譬如之前的我）寫js的for循環(huán)時，都不習慣加上var，這當然是語法允許的。2010-06-06
本文給大家分享的是使用純javascript實現的日歷控件的代碼，筆者也是第一次寫控件，摸索著前行，2015-07-07
最近寫了一個倒計時程序，因為經常要在手機端訪問，所以沒有引用jquery，對于用習慣jquery的我還真不習慣。下面簡單說明js日期相關函數，并說明實現倒計時的原理2013-10-10
JS實現鼠標懸停切換圖片,顯示天氣預報，利用焦點實現選擇網站的實例代碼，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家介紹了style-loader為什么要使用pitch方法原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家詳細介紹了微信小程序實現炫酷的彈出式菜單特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
Javascript中document.referrer隱藏來源的方法
這篇文章主要介紹了Javascript中document.referrer隱藏來源的方法，文中通過一個實例給大家介紹了實現的方法，有需要的朋友可以參考借鑒，下面來一起學習學習吧。2017-01-01
Js中的Object.entries()基本知識詳細分析(附Demo)
Object.entries方法能將對象的可枚舉屬性轉為數組,每個元素是鍵值對數組,可用于for...of迭代,下面這篇文章主要介紹了Js中的Object.entries()基本知識的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09