如何用網頁腳本追蹤用戶

本文介紹如何編寫 JavaScript 腳本，將用戶數據發回服務器。

我作了一個代碼倉庫，包含了下面全部的例子，能夠運行查看效果。

1、同步 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。因此，上面代碼實際上不能用。

2、異步 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 可以發送成功。

3、追蹤用戶點擊

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 有時間發出。

4、反彈追蹤

追蹤用戶點擊，還可使用反彈追蹤（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'));
});

上面代碼中，用戶點擊的時候，會強制跳到一箇中間網址，將信息攜帶過去，處理完畢之後，再跳到原始的目標網址。

谷歌和百度如今都是這樣作，點擊搜索結果時，會反彈屢次，才跳到目標網址。

5、Beacon API

上面這些作法，都會延緩網頁卸載，嚴重影響用戶體驗。

爲了解決網頁卸載時，異步請求沒法成功的問題，瀏覽器特別實現了一個 Beacon API，容許異步請求脫離當前主線程，放到瀏覽器進程裏面發出，這樣能夠保證必定能發出。

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

上面代碼中，navigator.sendBeacon()方法能夠保證，異步請求必定會發出。第一個參數是請求的網址，第二個參數是發送的數據。

注意，Beacon API 發出的是 POST 請求。

6、ping 屬性

HTML 的<a>標籤有一個ping屬性，只要用戶點擊，就會向該屬性指定的網址，發出一個 POST 請求。

<a href="https://baidu.com" ping="/log?foo=bar">
  click
</a>

上面代碼中，用戶點擊跳轉時，會向/log這個網址發一個 POST 請求。

ping屬性沒法指定數據體，彷佛只能經過 URL 的查詢字符串攜帶信息。

7、參考連接

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

（完）