JavaScript, браузеры и закрытие окон: отслеживание ухода пользователя

Отслеживание ухода пользователя важно для сбора данных и выполнения действий до того, как пользователь уйдет страница. Хотя мониторинг событий навигации относительно прост, обнаружение закрытия окна или изменения URL-адреса без взаимодействия с пользователем представляет собой проблему.

Захват события закрытия окна

API Beacon, доступный в современной версии браузеры, предоставляет решение. Запросы Beacon предназначены для выполнения даже тогда, когда пользователь внезапно покидает страницу, обеспечивая возможность выполнения важных действий.

Чтобы использовать API Beacon, используйте следующий фрагмент кода:

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

navigator.sendBeacon(url, data);

Альтернативы для старых браузеров

Если необходима поддержка старых браузеров, событие VisibilityChange предлагает запасной вариант. Переход из «пассивного» в «скрытый» в этом случае означает скорый уход пользователя. Вот пример:

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Perform desired actions (e.g., send beacon request)
  }
});

Надежность и блокировщики рекламы

Изменение видимости стало надежным индикатором выхода пользователя из современных браузеров. Однако блокировщики рекламы могут мешать запросам маяков, особенно если они происходят из разных источников или из известных доменов отслеживания. Ограничения CORS. Делая межсайтовые запросы, убедитесь, что они соответствуют необходимым требованиям, чтобы избежать блокировки браузером.