Comment puis-je détecter de manière fiable lorsqu'un utilisateur ferme un onglet du navigateur ou quitte ma page Web ?

Capturer les événements de fermeture de fenêtre en JavaScript

Identifier l'abandon de la page utilisateur est crucial dans l'analyse Web. Cet article explore les techniques permettant de détecter lorsqu'un utilisateur ferme un onglet de navigateur ou quitte une page spécifique.

Événement Window.close

Auparavant, l'événement window.close fourni une méthode fiable pour suivre les fermetures de fenêtres. Cependant, les changements dans la gestion du cycle de vie des pages rendent cet événement moins fiable.

Événement Visibilitychange

Pour les navigateurs modernes, l'événement visibilitéchange offre une représentation plus précise du moment où un utilisateur quitte une page. Cet événement se déclenche lorsque l'état de visibilité de la page passe de visible à masqué.

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Perform actions on page exit
  }
});

API Beacon

Pour une prise en charge complète entre navigateurs, envisagez d'utiliser l'API Beacon. Les requêtes Beacon sont conçues pour être exécutées même lorsqu'un utilisateur quitte la page, garantissant ainsi la capture des données des sessions et des analyses.

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

navigator.sendBeacon(url, data);

Bibliothèque Lifecycle.js

Pour la compatibilité avec navigateurs existants, la bibliothèque lifecycle.js fournit une prise en charge supplémentaire. Il met en œuvre les meilleures pratiques pour le cycle de vie des pages, garantissant une gestion fiable des événements.

lifecycle.addEventListener('statechange', function(event) {
  if (event.originalEvent === 'visibilitychange' && event.newState === 'hidden') {
    navigator.sendBeacon(url, data);
  }
});

Considérations

• Bloqueurs de publicité : Certains bloqueurs de publicité peuvent bloquer les requêtes sendBeacon vers certains domaines.
• Cross-site demandes : Les demandes de balises sont soumises aux restrictions CORS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!