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