如何用JS追蹤用戶
一、同步 AJAX
數據發回服務器的常見做法是,將收集好的用戶數據,放在unload事件裡面,用 AJAX 請求發回服務器。
但是,異步 AJAX 在unload事件裡面不一定能成功,因為網頁已經處於卸載中,瀏覽器可能發送,也可能不發送。所以,要改成同步 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 能夠發送成功。
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; } } });
上面代碼中,強制執行瞭一次雙重循環,拖長瞭unload事件的執行時間,導致異步 AJAX 能夠發送成功。
三、追蹤用戶點擊
setTimeout也能拖延頁面卸載,保證異步請求發送成功。下面是一個例子,追蹤用戶點擊。
// HTML 代碼如下 // <a id="target" href="https://baidu.com" 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 有時間發出。
四、反彈追蹤
追蹤用戶點擊,還可以使用反彈追蹤(bounce tracking)。
所謂”反彈追蹤”,就是網頁跳轉時,先跳到一個或多個中間網址,以便收集信息,然後再跳轉到原來的目標網址。
// HTML 代碼如下 // <a id="target" href="https://baidu.com" 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,允許異步請求脫離當前主線程,放到瀏覽器進程裡面發出,這樣可以保證一定能發出。
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" rel="external nofollow" rel="external nofollow" rel="external nofollow" ping="/log?foo=bar"> click </a>
上面代碼中,用戶點擊跳轉時,會向/log這個網址發一個 POST 請求。
ping屬性無法指定數據體,似乎隻能通過 URL 的查詢字符串攜帶信息。
以上就是如何用JS追蹤用戶的詳細內容,更多關於用JS追蹤用戶的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 基於javascript實現移動端輪播圖效果
- 面試必備之ajax原始請求
- 傳說中VUE的語法糖到底是做什麼的
- JavaScript 的setTimeout與事件循環機制event-loop
- JavaScript超詳細實現網頁輪播圖