如何用網頁尾本追蹤使用者

阮一峰發表於2019-04-15
網頁

我做了一個程式碼倉庫，包含了下面所有的例子，可以執行檢視效果。

一、同步 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">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">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" ping="/log?foo=bar">
  click
</a>

上面程式碼中，使用者點選跳轉時，會向/log這個網址發一個 POST 請求。

ping屬性無法指定資料體，似乎只能透過 URL 的查詢字串攜帶資訊。

七、參考連結

  • Link Click Analytics and Privacy, John Wilander
  • ping Attribute, David Walsh

（完）

相關文章