如何可靠地偵測使用者何時關閉瀏覽器標籤或離開我的網頁？

在 JavaScript 中擷取視窗關閉事件

識別使用者頁面放棄對於 Web 分析至關重要。本文探討了偵測使用者何時關閉瀏覽器標籤或離開特定頁面的技術。

Window.close 事件

之前的 window.close 事件提供了一種追蹤視窗關閉情況的可靠方法。然而，頁面生命週期管理的變化使得該事件的可靠性降低。

Visibilitychange 事件

對於現代瀏覽器，visibilitychange 事件可以更準確地表示使用者何時退出一頁。當頁面的可見性狀態從可見轉換為隱藏時，就會觸發此事件。

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Perform actions on page exit
  }
});

Beacon API

要獲得全面的跨瀏覽器支持，請考慮使用 Beacon API。信標請求設計為即使在使用者離開頁面時也能完成，從而確保會話和分析的資料擷取。

var url = "https://example.com/foo";
var data = "bar";

navigator.sendBeacon(url, data);

Lifecycle.js 庫

與對於舊版瀏覽器，lifecycle.js 庫提供了額外的支援。它實現了頁面生命週期的最佳實踐，確保可靠的事件處理。

lifecycle.addEventListener('statechange', function(event) {
  if (event.originalEvent === 'visibilitychange' && event.newState === 'hidden') {
    navigator.sendBeacon(url, data);
  }
});

注意事項

• 廣告攔截器：某些廣告攔截器可能會阻止 sendBeacon 要求到某些網域。
• 跨站點請求： Beacon 請求受 CORS 限制。

以上是如何可靠地偵測使用者何時關閉瀏覽器標籤或離開我的網頁？的詳細內容。更多資訊請關注PHP中文網其他相關文章！