Comment mesurer le temps passé sur une page?

Si vous utilisez Google Analytics, ils fournissent cette statistique, même si je ne sais pas exactement comment ils l'ont obtenue.

Si vous souhaitez rouler votre propre, vous devrez avoir une demande AJAX qui est envoyée à votre serveur pour la journalisation.

JQuery a une méthode .unload (…) que vous pouvez utiliser comme:

var start; $(document).ready(function() { start = Date.getTime(); $(window).unload(function() { end = Date.getTime(); $.ajax({ url: "log.php", data: {'timeSpent': end - start} }) }); }); 

Voir plus ici: http://api.jquery.com/unload/

La seule lacune ici est qu'elle utilise l'événement beforeunload de javascript, qui ne déclenche pas toujours avec suffisamment de temps pour faire une demande AJAX comme celle-ci, de sorte que vous perdrez beaucoup de données.

Une autre méthode consisterait à interroger périodiquement le serveur avec un type de message "STILL HERE" qui peut être traité de manière plus cohérente, mais évidemment beaucoup plus coûteux.

La réponse acceptée est bonne, mais (en alternative), j'ai mis un peu de travail dans une petite bibliothèque de JavaScript qui permet de connaître la durée d'utilisation d'un utilisateur sur une page Web. Il a l'avantage supplémentaire de plus précisément (pas parfaitement, cependant) de suivre combien de temps un utilisateur interagit réellement avec la page. Il ignore les moments où un utilisateur passe à différents onglets, ralenti, minimise le navigateur, etc. La méthode Google Analytics proposée dans la réponse acceptée a la lacune (si je comprends bien) qu'elle vérifie uniquement lorsqu'une nouvelle demande est traitée par votre domaine. Il compare le temps de demande précédent contre le nouveau temps de demande et appelle le «temps passé sur votre page Web». Il ne sait pas réellement si quelqu'un visualise votre page, a minimisé le navigateur, a changé d'onglets vers 3 pages Web différentes depuis le dernier chargement de votre page, etc.

Edit: J'ai mis à jour l'exemple pour inclure l'utilisation actuelle de l'API.

http://timemejs.com

Un exemple de son utilisation:

Inclure dans votre page:

 <script src="http://timemejs.com/timeme.min.js"></script> <script type="text/javascript"> TimeMe.initialize({ currentPageName: "home-page", // page name idleTimeoutInSeconds: 15 // time before user considered idle }); </script> 

Si vous souhaitez signaler les temps vous-même sur votre backend:

 xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","ENTER_URL_HERE",true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds(); xmlhttp.send(timeSpentOnPage); 

TimeMe.js prend également en charge l'envoi de données de synchronisation via les websockets, de sorte que vous ne devez pas essayer de forcer une requête http complète dans l'événement document.onbeforeunload .

Je dirais que votre meilleur pari est de suivre le calendrier des demandes par ID de session sur votre serveur. Le temps passé par l'utilisateur sur la dernière page est la différence entre l'heure de la demande actuelle et l'heure de la demande précédente.

Cela n'attrapera pas la toute dernière page que l'utilisateur visite (c'est-à-dire lorsqu'il n'y aura pas d'autre demande), mais j'aimerais toujours aborder cette approche, car vous devriez en onunload soumettre une demande en onunload , ce qui Serait extrêmement sujet aux erreurs.

Je pense que la meilleure façon est de stocker le temps de chargement et de décharger les gestionnaires d'événements dans les cookies, par exemple, puis de les analyser dans les scripts côté serveur

En plus de la réponse de Jason, voici un petit code qui devrait faire le truc si vous préférez ne pas utiliser une bibliothèque, il considère quand l'utilisateur change d'onglet ou se concentre sur une autre fenêtre.

 let startDate = new Date(); let elapsedTime = 0; const focus = function() { startDate = new Date(); }; const blur = function() { const endDate = new Date(); const spentTime = endDate.getTime() - startDate.getTime(); elapsedTime += spentTime; }; const beforeunload = function() { const endDate = new Date(); const spentTime = endDate.getTime() - startDate.getTime(); elapsedTime += spentTime; // elapsedTime contains the time spent on page in milliseconds }; window.addEventListener('focus', focus); window.addEventListener('blur', blur); window.addEventListener('beforeunload', beforeunload); 

Selon la bonne réponse, je pense que ce n'est pas la meilleure solution. Parce que selon les documents jQuery:

La manipulation exacte de l'événement de déchargement a varié d'une version à l'autre des navigateurs. Par exemple, certaines versions de Firefox déclenchent l'événement lorsqu'un lien est suivi, mais pas lorsque la fenêtre est fermée. Dans l'utilisation pratique, le comportement devrait être testé sur tous les navigateurs pris en charge et contrasté avec l'événement précédent avant charge.

Une autre chose est que vous ne devriez pas l'utiliser après la chargement des documents car le résultat de la soustraction du temps peut être faux.

Donc, la meilleure solution est de l'ajouter à l'événement onbeforeunload à la fin de la section <head> comme ceci:

 <script> var startTime = (new Date()).getTime(); window.onbeforeunload = function (event) { var timeSpent = (new Date()).getTime() - startTime, xmlhttp= new XMLHttpRequest(); xmlhttp.open("POST", "your_url"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var timeSpentOnPage = TimeMe.getTimeOnCurrentPageInSeconds(); xmlhttp.send(timeSpent); }; </script> 

Bien sûr, si vous voulez compter l'heure en utilisant le détecteur de ralenti, vous pouvez utiliser:

https://github.com/serkanyersen/ifvisible.js/

TimeMe est une enveloppe pour le paquet que je colle ci-dessus.

 <body onLoad="myFunction()"> <script src="jquery.min.js"></script> <script> var arr = []; window.onbeforeunload = function(){ var d = new Date(); var n = d.getTime(); arr.push(n); var diff= n-arr[0]; var sec = diff/1000; var r = Math.round(sec); return "Time spent on page: "+r+" seconds"; }; function myFunction() { var d = new Date(); var n = d.getTime(); arr.push(n); } </script>