一、同步 AJAX

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

但是，異步 AJAX 在unload事件里面不一定能成功，因?yàn)榫W(wǎng)頁(yè)已經(jīng)處于卸載中，瀏覽器可能發(fā)送，也可能不發(fā)送。所以，要改成同步 AJAX 請(qǐng)求。

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()方法的第三個(gè)參數(shù)是false，表示同步請(qǐng)求。

這種方法最大的問(wèn)題在于，瀏覽器逐步將不允許在主線程上面，使用同步 AJAX。所以，上面代碼實(shí)際上不能用。

二、異步 AJAX

異步 AJAX 其實(shí)是能用的。前提是unload事件里面，必須有一些很耗時(shí)的同步操作。這樣就能留出足夠的時(shí)間，保證異步 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; }
  }
});

上面代碼中，強(qiáng)制執(zhí)行了一次雙重循環(huán)，拖長(zhǎng)了unload事件的執(zhí)行時(shí)間，導(dǎo)致異步 AJAX 能夠發(fā)送成功。

三、追蹤用戶(hù)點(diǎn)擊

setTimeout也能拖延頁(yè)面卸載，保證異步請(qǐng)求發(fā)送成功。下面是一個(gè)例子，追蹤用戶(hù)點(diǎn)擊。

// 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毫秒，才讓頁(yè)面跳轉(zhuǎn)，因此使得異步 AJAX 有時(shí)間發(fā)出。

四、反彈追蹤

追蹤用戶(hù)點(diǎn)擊，還可以使用反彈追蹤（bounce tracking）。

所謂"反彈追蹤"，就是網(wǎng)頁(yè)跳轉(zhuǎn)時(shí)，先跳到一個(gè)或多個(gè)中間網(wǎng)址，以便收集信息，然后再跳轉(zhuǎn)到原來(lái)的目標(biāo)網(wǎng)址。

// 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'));
});

上面代碼中，用戶(hù)點(diǎn)擊的時(shí)候，會(huì)強(qiáng)制跳到一個(gè)中間網(wǎng)址，將信息攜帶過(guò)去，處理完畢以后，再跳到原始的目標(biāo)網(wǎng)址。

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

五、Beacon API

上面這些做法，都會(huì)延緩網(wǎng)頁(yè)卸載，嚴(yán)重影響用戶(hù)體驗(yàn)。

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

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

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

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

六、ping 屬性

HTML 的<a>標(biāo)簽有一個(gè)ping屬性，只要用戶(hù)點(diǎn)擊，就會(huì)向該屬性指定的網(wǎng)址，發(fā)出一個(gè) POST 請(qǐng)求。

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

上面代碼中，用戶(hù)點(diǎn)擊跳轉(zhuǎn)時(shí)，會(huì)向/log這個(gè)網(wǎng)址發(fā)一個(gè) POST 請(qǐng)求。

ping屬性無(wú)法指定數(shù)據(jù)體，似乎只能通過(guò) URL 的查詢(xún)字符串?dāng)y帶信息。

以上就是如何用JS追蹤用戶(hù)的詳細(xì)內(nèi)容，更多關(guān)于用JS追蹤用戶(hù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論