¿La mejor manera de detectar cuándo un usuario abandona una página web?

¿Cuál es la mejor manera de detectar si un usuario abandona una página web?

El onunloadevento JavaScript no funciona cada vez (la solicitud HTTP tarda más que el tiempo requerido para terminar el navegador).

La creación de uno probablemente será bloqueada por los navegadores actuales.

Pruebe el onbeforeunloadevento: se dispara justo antes de que se descargue la página. También le permite volver a preguntar si el usuario realmente quiere irse. Vea la demostración onbeforeunload Demo .

Alternativamente, puede enviar una solicitud de Ajax cuando se vaya.

Mozilla Developer Network tiene una buena descripción y un ejemplo de onbeforeunload .

Si desea advertir al usuario antes de abandonar la página si su página está sucia (es decir, si el usuario ha ingresado algunos datos):

window.addEventListener('beforeunload', function(e) {
  var myPageIsDirty = ...; //you implement this logic...
  if(myPageIsDirty) {
    //following two lines will cause the browser to ask the user if they
    //want to leave. The text of this dialog is controlled by the browser.
    e.preventDefault(); //per the standard
    e.returnValue = ''; //required for Chrome
  }
  //else: user is allowed to leave without a warning dialog
});

Aquí hay una solución alternativa: dado que en la mayoría de los navegadores los controles de navegación (la barra de navegación, las pestañas, etc.) se encuentran sobre el área de contenido de la página, puede detectar el puntero del mouse que sale de la página por la parte superior y mostrar un " antes de salir " diálogo. Es completamente discreto y le permite interactuar con el usuario antes de que realmente realice la acción de irse.

$(document).bind("mouseleave", function(e) {
    if (e.pageY - $(window).scrollTop() <= 1) {    
        $('#BeforeYouLeaveDiv').show();
    }
});

La desventaja es que, por supuesto, es una suposición que el usuario realmente tiene la intención de irse, pero en la gran mayoría de los casos es correcto.

Para esto estoy usando:

window.onbeforeunload = function (e) {

}

Se dispara justo antes de que se descargue la página.

Sé que esta pregunta ha sido respondida, pero en caso de que solo desee que algo se active cuando se cierra el NAVEGADOR real, y no solo cuando se produce una carga de página, puede usar este código:

window.onbeforeunload = function (e) {
        if ((window.event.clientY < 0)) {
            //window.localStorage.clear();
            //alert("Y coords: " + window.event.clientY)
        }
};

En mi ejemplo, estoy limpiando el almacenamiento local y alertando al usuario con los ratones y los cables, solo cuando el navegador está cerrado, esto se ignorará en todas las cargas de página desde el programa.

Una forma (ligeramente hacky) de hacerlo es reemplazar y enlaces que se alejan de su sitio con una llamada AJAX al lado del servidor, lo que indica que el usuario se va, luego use ese mismo bloque de JavaScript para llevar al usuario al sitio externo He solicitado.

Por supuesto, esto no funcionará si el usuario simplemente cierra la ventana del navegador o escribe una nueva URL.

Para evitar eso, es posible que necesite usar setTimeout () de Javascript en la página, haciendo una llamada AJAX cada pocos segundos (dependiendo de qué tan rápido quiera saber si el usuario se ha ido).

Gracias a Service Workers , es posible implementar una solución similar a la de Adam únicamente en el lado del cliente, siempre que el navegador lo admita. Simplemente evite las solicitudes de latidos:

// The delay should be longer than the heartbeat by a significant enough amount that there won't be false positives
const liveTimeoutDelay = 10000
let liveTimeout = null

global.self.addEventListener('fetch', event => {
  clearTimeout(liveTimeout)
  liveTimeout = setTimeout(() => {
    console.log('User left page')
    // handle page leave
  }, liveTimeoutDelay)
  // Forward any events except for hearbeat events
  if (event.request.url.endsWith('/heartbeat')) {
    event.respondWith(
      new global.Response('Still here')
    )
  }
})

En el caso de que necesite hacer un código asincrónico (como enviar un mensaje al servidor de que el usuario no está enfocado en su página en este momento), el evento beforeunloadno dará tiempo para que se ejecute el código asíncrono. En el caso de async, descubrí que los eventos visibilitychangey mouseleaveson las mejores opciones. Estos eventos se disparan cuando el usuario cambia de pestaña, oculta el navegador o saca al curso del alcance de la ventana.

document.addEventListener('mouseleave', e=>{
     //do some async code
})

document.addEventListener('visibilitychange', e=>{
     if (document.visibilityState === 'visible') {
   //report that user is in focus
    } else {
     //report that user is out of focus
    }  
})

Por lo que vale, esto es lo que hice y tal vez pueda ayudar a otros a pesar de que el artículo es antiguo.

PHP:

session_start();

$_SESSION['ipaddress'] = $_SERVER['REMOTE_ADDR'];

if(isset($_SESSION['userID'])){
    if(!strpos($_SESSION['activeID'], '-')){
        $_SESSION['activeID'] = $_SESSION['userID'].'-'.$_SESSION['activeID'];
    }
}elseif(!isset($_SESSION['activeID'])){
    $_SESSION['activeID'] = time();
}

JS

window.setInterval(function(){
            var userid = '<?php echo $_SESSION['activeID']; ?>';
            var ipaddress = '<?php echo $_SESSION['ipaddress']; ?>';
            var action = 'data';

            $.ajax({
                url:'activeUser.php',
                method:'POST',
                data:{action:action,userid:userid,ipaddress:ipaddress},
                success:function(response){
                     //alert(response);                 
                }
            });
          }, 5000);

Llamada Ajax a activeUser.php

if(isset($_POST['action'])){
    if(isset($_POST['userid'])){
        $stamp = time();
        $activeid = $_POST['userid'];
        $ip = $_POST['ipaddress'];

        $query = "SELECT stamp FROM activeusers WHERE activeid = '".$activeid."' LIMIT 1";
        $results = RUNSIMPLEDB($query);

        if($results->num_rows > 0){
            $query = "UPDATE activeusers SET stamp = '$stamp' WHERE activeid = '".$activeid."' AND ip = '$ip' LIMIT 1";
            RUNSIMPLEDB($query);
        }else{
            $query = "INSERT INTO activeusers (activeid,stamp,ip)
                    VALUES ('".$activeid."','$stamp','$ip')";
            RUNSIMPLEDB($query);
        }
    }
}

Base de datos:

CREATE TABLE `activeusers` (
  `id` int(11) NOT NULL,
  `activeid` varchar(20) NOT NULL,
  `stamp` int(11) NOT NULL,
  `ip` text
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Básicamente, cada 5 segundos, el js publicará en un archivo php que rastreará al usuario y la dirección IP del usuario. Los usuarios activos son simplemente un registro de base de datos que tiene una actualización de la marca de tiempo de la base de datos en 5 segundos. Los viejos usuarios dejan de actualizar a la base de datos. La dirección IP se usa solo para garantizar que un usuario sea único, de modo que 2 personas en el sitio al mismo tiempo no se registren como 1 usuario.

Probablemente no sea la solución más eficiente, pero hace el trabajo.