ウェブサイト訪問中にユーザーが費やした時間を測定する

Question

PHPとJavascriptとMAMPを使用してローカルにウェブサイトを構築しようとしています。

私が探しているのは、ウェブサイトのすべてのページにタイマーを置くことです。そのタイマーは、ウェブサイト全体でユーザーが費やした時間をカウントします。ユーザーがページを切り替える場合でも、タイマーは引き続き使用されます。私が見つけた解決策は、各ページに費やされた時間だけを示し、同じページを再び読み込んだときに、タイマーはゼロから再開します。

ここではJavascriptが私がやったタイマーのためだ：私は解決策のためにどこでも検索が、誰もがこれを行う方法を知っていれば運で、私に知らせてくださいました

window.onload=function(){ 
time=0; 
} 
window.onbeforeunload=function(){ 
timeSite = new Date()-time; 
window.localStorage['timeSite']=timeSite; 
} 

。

Answer 1

ここに実例があります。 Peterの答えとは異なり、ユーザーがウィンドウ/タブを閉じるとカウントが停止します。

var timer; 
var timerStart; 
var timeSpentOnSite = getTimeSpentOnSite(); 

function getTimeSpentOnSite(){ 
    timeSpentOnSite = parseInt(localStorage.getItem('timeSpentOnSite')); 
    timeSpentOnSite = isNaN(timeSpentOnSite) ? 0 : timeSpentOnSite; 
    return timeSpentOnSite; 
} 

function startCounting(){ 
    timerStart = Date.now(); 
    timer = setInterval(function(){ 
     timeSpentOnSite = getTimeSpentOnSite()+(Date.now()-timerStart); 
     localStorage.setItem('timeSpentOnSite',timeSpentOnSite); 
     timerStart = parseInt(Date.now()); 
     // Convert to seconds 
     console.log(parseInt(timeSpentOnSite/1000)); 
    },1000); 
} 
startCounting(); 

あなたは、ウィンドウ/タブがアクティブでないとき、タイマーを停止したい場合は、以下のコードを追加します。

var stopCountingWhenWindowIsInactive = true; 

if(stopCountingWhenWindowIsInactive){ 

    if(typeof document.hidden !== "undefined"){ 
     var hidden = "hidden", 
     visibilityChange = "visibilitychange", 
     visibilityState = "visibilityState"; 
    }else if (typeof document.msHidden !== "undefined"){ 
     var hidden = "msHidden", 
     visibilityChange = "msvisibilitychange", 
     visibilityState = "msVisibilityState"; 
    } 
    var documentIsHidden = document[hidden]; 

    document.addEventListener(visibilityChange, function() { 
     if(documentIsHidden != document[hidden]) { 
      if(document[hidden]){ 
       // Window is inactive 
       clearInterval(timer); 
      }else{ 
       // Window is active 
       startCounting(); 
      } 
      documentIsHidden = document[hidden]; 
     } 
    }); 
} 

JSFiddle

Answer 2

使用するlocalStorageは、必要なものに最適ではありません。ただし、sessionStorage、localStorageが最適です。 sessionStorage新しいタブを開くときに新しいセッションに解決することを覚えておいてください。localStorageを使用するのは、sessionStorageしか使用されておらず、ユーザーが新しいタブを並行して開き、そのブラウザのタブのセッションを開始し、その開始からtimeOnSiteとカウントします。次の例では、これを回避して正確な数を計算します。timeOnSite。

sessionStorageプロパティを使用すると、現在のオリジンのセッションストレージ オブジェクトにアクセスできます。 sessionStorageは、唯一の違いは localStorageに格納されたデータがない期限が設定されていない間ページ・セッションが終了したときに、sessionStorageに格納されたデータを をクリアされますであり、 ​​と同様です。ページセッションは、ブラウザが開いているときに長く続き、ページの再読み込みとリストアに耐えられる限り長く続きます（ ）。 新しいタブまたはウィンドウでページを開くと、新しいセッションが になります。これはセッションクッキーの仕組みとは異なります。 fiddle

作業

function myTimer() { 
if(!sessionStorage.getItem('firstVisitTime')) { 
    var myDate = Date.now(); 
    if(!localStorage.getItem('timeOnSite')) { 
    sessionStorage.setItem('firstVisitTime',myDate); 
    } else { 
    if(localStorage.getItem('tabsCount') && parseInt(localStorage.getItem('tabsCount'))>1){ 
    sessionStorage.setItem('firstVisitTime',myDate-parseInt(localStorage.getItem('timeOnSite'))); 
    } else { 
    sessionStorage.setItem('firstVisitTime',myDate); 
    } 
} 
} 
var myInterval = setInterval(function(){ 
    var time = Date.now()-parseInt(sessionStorage.getItem('firstVisitTime')); 
    localStorage.setItem('timeOnSite',time); 
    document.getElementById("output").innerHTML = (time/1000)+' seconds have passed since first visit'; 
}, 1000); 
return myInterval; 
}  
window.onbeforeunload=function() { 
console.log('Document onbeforeunload state.'); 
clearInterval(timer); 
}; 
window.onunload=function() { 
var time = Date.now(); 
localStorage.setItem('timeLeftSite',time); 
localStorage.setItem("tabsCount",parseInt(localStorage.getItem("tabsCount"))-1); 
console.log('Document onunload state.'); 
}; 
if (document.readyState == "complete") { 
if(localStorage.getItem("tabsCount")){ 
localStorage.setItem("tabsCount",parseInt(localStorage.getItem("tabsCount"))+1); 
var timer = myTimer(); 
} else { 
localStorage.setItem("tabsCount",1); 
} 
    console.log("Document complete state."); 
} 

あなたは、サーバー側のソリューションをしたい場合は、$_SESSION['timeOnSite']変数を設定し、各ページのナビゲーションに応じて更新します。