unload

Когда пользователь уходит со страницы, генерируется событие unload. Мы можем отреагировать на него, подписавшись на это событие у объекта window.

        
          
          window.addEventListener('unload', function () {  // ...})
          window.addEventListener('unload', function () {
  // ...
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В современном вебе всё увешано трекингом: клики, переходы, прокрутка до определённых секций и ещё куча всего. Почему бы не трекать уход пользователя со страницы?

        
          
          window.addEventListener('unload', function () {  const someUsefulData = getSomeUsefulData();  navigator.sendBeacon('/some-endpoint', someUsefulData);})
          window.addEventListener('unload', function () {
  const someUsefulData = getSomeUsefulData();

  navigator.sendBeacon('/some-endpoint', someUsefulData);
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Что происходит в коде выше? Когда пользователь покинет страницу, функция getSomeUsefulData соберёт аналитическую информацию, а метод sendBeacon отправит её по адресу /some-endpoint. Метод sendBeacon — это неблокирующий метод отправки данных. Он находится в состоянии черновика и ещё не принят как стандарт W3C, но уже давно поддерживается всеми браузерами.

Неблокирующая отправка означает, что она будет выполнена асинхронно и не будет мешать выгрузке текущей страницы и загрузке следующей.
Раньше разработчики использовали костыльные специальные техники, чтобы отправить что-либо в момент закрытия страницы, например:

• Синхронные вызовы XMLHttpRequest.
• Картинки со специальными src (так называемые пиксели).
• Иногда даже создавались пустые циклы на несколько секунд.

Метод sendBeacon позволяет надёжно и асинхронно отправить данные, не мешая нормальному ходу вещей.

На практике

Секция статьи "На практике"

kotosha-real

Секция статьи "kotosha-real"

🛠 Событие unload обрабатывают для отправки трекинговых запросов.

🛠 Не полагайтесь на событие unload для определения завершения пользовательской сессии. Например, в следующем сценарии оно не наступит:

• Пользователь посещает страницу в браузере с мобильного телефона
• Пользователь меняет активное приложение
• Пользователь закрывает браузер через менеджер приложений

Обрабатывайте событие visibilitychange в качестве более надёжной альтернативы unload.