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 позволяет надёжно и асинхронно отправить данные, не мешая нормальному ходу вещей.

На практике

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

Антон Субботин советует

Скопировать ссылку "Антон Субботин советует" Скопировано

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

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

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

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

+ Развернуть