目錄一、同步 AJAX二、異步 AJAX三、追蹤用戶點擊四、反彈追蹤五、Beacon API六、ping 屬性一、同步 AJAX

數(shù)據(jù)發(fā)回服務器的常見做法是，將收集好的用戶數(shù)據(jù)，放在unload事件里面，用 AJAX 請求發(fā)回服務器。

但是，異步 AJAX 在unload事件里面不一定能成功，因為網(wǎng)頁已經(jīng)處于卸載中，瀏覽器可能發(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()方法的第三個參數(shù)是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 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毫秒，才讓頁面跳轉(zhuǎn)，因此使得異步 AJAX 有時間發(fā)出。

四、反彈追蹤

追蹤用戶點擊，還可以使用反彈追蹤（bounce tracking）。

所謂'反彈追蹤'，就是網(wǎng)頁跳轉(zhuǎn)時，先跳到一個或多個中間網(wǎng)址，以便收集信息，然后再跳轉(zhuǎn)到原來的目標網(wǎng)址。

// HTML 代碼如下// <a 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’));});

上面代碼中，用戶點擊的時候，會強制跳到一個中間網(wǎng)址，將信息攜帶過去，處理完畢以后，再跳到原始的目標網(wǎng)址。

谷歌和百度現(xiàn)在都是這樣做，點擊搜索結(jié)果時，會反彈多次，才跳到目標網(wǎng)址。

五、Beacon API

上面這些做法，都會延緩網(wǎng)頁卸載，嚴重影響用戶體驗。

為了解決網(wǎng)頁卸載時，異步請求無法成功的問題，瀏覽器特別實現(xiàn)了一個 Beacon API，允許異步請求脫離當前主線程，放到瀏覽器進程里面發(fā)出，這樣可以保證一定能發(fā)出。

window.addEventListener(’unload’, function (event) { navigator.sendBeacon(’/log’, ’foo=bar’);});

上面代碼中，navigator.sendBeacon()方法可以保證，異步請求一定會發(fā)出。第一個參數(shù)是請求的網(wǎng)址，第二個參數(shù)是發(fā)送的數(shù)據(jù)。

注意，Beacon API 發(fā)出的是 POST 請求。

六、ping 屬性

HTML 的<a>標簽有一個ping屬性，只要用戶點擊，就會向該屬性指定的網(wǎng)址，發(fā)出一個 POST 請求。

<a rel='external nofollow' rel='external nofollow' rel='external nofollow' ping='/log?foo=bar'> click</a>

上面代碼中，用戶點擊跳轉(zhuǎn)時，會向/log這個網(wǎng)址發(fā)一個 POST 請求。

ping屬性無法指定數(shù)據(jù)體，似乎只能通過 URL 的查詢字符串攜帶信息。

以上就是如何用JS追蹤用戶的詳細內(nèi)容，更多關(guān)于用JS追蹤用戶的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！