category: browser

在點擊連結或是 redirect 前送出請求

on 2022-03-02

Intro

有時在看 GA 的 Web 數據時會發現在 Safari 的點擊 click 事件似乎會比較少

其實這背後是有原因的

主要是各個瀏覽器再處理新 direct 時的行為不一致所導致的

在 Safari 上面發生 direct 到新的 URL 的行為(超連結或是 JS 處理) 時

事件觸發過程中的任何請求會中斷甚至不會發出請求

所以這就是為何在 GA 中的 Safari 的 click 數量會有些異常的原因

雖然 GA 預設會做 setTimeout 處理

但是也不一定是百分之百處理成功

所以最佳處理方式還是自己在用個 settimeout 包起來後再 direct

像是以下範例

link.addEventListener('click', (e) => {
  e.preventDefault();

  window.gtag('event', 'click', {
    event_category: 'link'
  });

  setTimeout(() => {
    location.href = e.target.href
  }, 250)
})

如果真的要確保 GA 送完才做 direct

GA 也有提供事件發送的 callback 處理

Know when an event has been sent

但是如果網路不好的話或是 GA 事件發送請求太久會造成卡畫面的問題

是不太建議使用

同理

在自己處理 click 要發送紀錄 log 之類的行為更是要這樣處理

Refer - tracking-outbound-link-clicks-in-google-analytics.markdown

加碼

在自己設計發送 log 的情況時(例如需要額外的點擊紀錄等)

建議直接採用 GET 的方式發送然後也不要等回傳

可以使用以下的方式處理

const apiLog = function (type, data) {
  const logImage = new Image(0, 0)
  logImage.classList.add('log_image')
  logImage.src = 'https://example.com/log?type=' + type + '&data=' + data
  document.body.appendChild(logImage)
  setTimeout(() => {
    let img = document.querySelectorAll('.log_image')[0]
    if (img) {
      img.outerHTML = ''
      img = null
    }
  }, 100)
}

Read more