페이지에 소요 된 시간을 측정하는 방법은 무엇입니까?

27

Google 애널리틱스를 사용하는 사용자는 Google 애널리틱스를 사용하는 방식에 대해 확신 할 수는 없지만이 통계를 제공합니다.

직접 롤업하려면 로깅을 위해 서버로 전송되는 AJAX 요청이 필요합니다.

$(document).ready(function() { 
    var start = new Date(); 

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

여기에 대한 자세한 내용보기 : :

jQuery를 당신처럼 사용할 수있는 .unload (...) 메소드가 http://api.jquery.com/unload/

여기서주의해야 할 점은 아무튼 자바 스크립트의 beforeunload 이벤트를 사용한다는 것입니다 이와 같은 AJAX 요청을하기에 충분한 시간 동안 항상 불을 지피므로 합리적으로 많은 양의 데이터를 잃을 것입니다.

또 다른 방법은 서버를 "STILL HERE"메시지와 함께 주기적으로 폴링하여보다 일관되게 처리 할 수 있지만 분명히 비용이 많이 듭니다.

출처

2011-01-12 09:34:39

+2

사용자가 처음 JS를로드 할 때 요청을 보내고 페이지를 떠날 때 요청을 보내면 더 좋은 방법 일 수 있습니다. –

+1

날짜와 함께'$ _SESSION' 변수를 설정하는 것이 더 좋을 것입니다 서버가 업데이트 할 신호를 받으면 업데이트 만합니다.'$ _SESSION'-var는 페이지가로드 될 때 설정되기 때문에 결코 지나치지 않습니다. – jdepypere

+0

간헐적 인 발사를 피하기 위해 위의 ajax 호출에'async : false'를 추가하십시오. – user217562

6

가장 좋은 방법은 쿠키에 이벤트 핸들러를 onload하고 언로드하는 것입니다. 서버 쪽 스크립트에서 분석하십시오.

출처

2011-01-12 09:29:42 heximal

+0

아마 가장 좋은 방법은 다른 방법은 자바 스크립트 심장 박동을하는 것입니다. – dvhh

+3

이것은 사용자가 서버의 다른 페이지로 이동하는 경우에만 작동합니다. –

7

서버에서 세션 ID 당 요청 시간을 추적하는 것이 가장 좋습니다. 사용자가 마지막 페이지에서 소비 한 시간은 현재 요청 시간과 이전 요청 시간 사이의 차이입니다.

사용자가 마지막으로 방문한 페이지 (예 : 다른 요청이 없을 때)를 포착하지는 않지만이 방법을 사용하면 요청을 제출해야하므로 onunload에 있으며 오류가 발생하기 쉽습니다.

출처

2011-01-12 09:31:42

+0

이 방법을 사용하여 video_page를 추적하려고하지만 문제는 사용자가 새 탭에서 새 탭을 열 때이 경우 middel-ware가 새 URL 히트를 감지 할 때입니다. 그리고 세션 및 히트 DB에서 시간을 얻을하지만, 사용자가 그냥 새 탭을 닫지 현재 탭 및 timeme.js 및 아약스 메서드는 나를 위해 버그 : ( – GrvTyagi

+0

지금은 아약스 전화마다 30 초. 나를 위해 일하는 것 같아? – GrvTyagi

38

대답은 좋지만 대신 (대안으로) 사용자가 웹 페이지에 머문 시간을 측정하는 작은 JavaScript 라이브러리에 일부 작업을 넣었습니다. 사용자가 실제로 페이지와 상호 작용하는 시간을 추적하여 더 정확하게 (완벽하지는 않지만) 더 많은 이점을 제공합니다. 사용자가 다른 탭으로 전환하거나, 유휴 상태가되거나, 브라우저가 최소화되는 등의 시간을 무시합니다. 승인 된 답변에 제안 된 Google 웹 로그 분석의 방법에는 사용자가 새 요청을 처리 할 때만 확인하는 단점이 있습니다 (이해할 수 있음). 도메인. 이전 요청 시간과 새 요청 시간을 비교하고 '웹 페이지에서 보낸 시간'을 호출합니다. 누군가가 내 페이지를보고 있는지, 브라우저를 최소화했는지, 마지막으로 페이지를로드 한 후 탭을 3 개의 다른 웹 페이지로 전환했는지는 알 수 없습니다.

편집 : 현재 API를 포함하도록 예제를 업데이트했습니다. 용법.

편집 2 :

이 페이지에 포함 : 프로젝트

https://github.com/jasonzissman/TimeMe.js/

의 사용의 예를 호스팅 도메인을 업데이트

<!-- Download library from https://github.com/jasonzissman/TimeMe.js/ --> 
<script src="timeme.js"></script> 
<script type="text/javascript"> 
TimeMe.initialize({ 
    currentPageName: "home-page", // page name 
    idleTimeoutInSeconds: 15 // time before user considered idle 
}); 
</script>

당신이 원하는 경우 자신의 시간을 백엔드에보고하려면 :

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는 WebSocket을 통해 타이밍 데이터 전송을 지원하는, 그래서 당신은 document.onbeforeunload 이벤트로 전체 HTTP 요청을 억지로 할 필요가 없습니다.

출처

2015-01-31 20:32:56

+0

나는 당신의 대본을 정말 좋아합니다! 그것은 데모 페이지에서 이상한 동작을하지만, 다른 창 (브라우저가 최소화되지 않은 상태에서 다른 창에 초점이 있음)으로 전환하면 타이머가 계속 실행됩니다. 이것은 의도 된 것입니까? – user1111929

+1

감사! 라이브러리는 사용자가 포커스를 얻거나 잃었을 때이를 알려주는 브라우저 이벤트에 의존합니다. 여러 모니터를 가진 사용자가 여전히 브라우저를 볼 수 있기 때문에 브라우저가 창을 전환 할 때 '포커스 손실'이벤트를보고하지 않는다고 가정합니다. 그냥 생각! –

+1

이 측정 항목을 얻는 다른 방법은 마우스 움직임과 스크롤/페이지 이동, 키 누르기를 감지하는 것일 수 있습니다. 이것은 다른 측정입니다. 멀티 스크린 설정에서 한 모니터에서는 참조 페이지를, 다른 모니터에서는 참조 페이지를 사용하는 경우가 있습니다. 참조 페이지는 거기에 있기 때문에 페이지에 머문 시간으로 계산해서는 안되지만보고 있지 않습니다. 약간의 보정을 통해 X 초당 한 번의 마우스 이동/키 누르기/스크롤 이벤트가 여전히 페이지에 시간을 표시하는 것으로 의심됩니다. X는 10 초에서 30 초 사이라고 생각합니다. –

1

올바른 답변에 따르면 나는 이것이 최상의 해결책이 아니라고 생각합니다. JQuery와 문서에 따라 때문에 :

unload 이벤트의 정확한 처리는 브라우저의 버전으로 버전까지 다양했다. 예를 들어 링크를 따라 가면 Firefox의 버전에 따라 이벤트가 발생하지만 창이 닫히면 작동하지 않습니다. 실제 사용에서는 동작이 지원되는 모든 브라우저 에서 테스트되어야하며 유사한 beforeunload 이벤트와 대조되어야합니다.

또 다른 한가지는 시간이 뺄셈 결과가 위조 될 수 있으므로 문서를로드 한 후에 사용하면 안된다는 것입니다. 당신이 유휴 검출기를 사용하여 시간을 계산하려면

<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>

은 물론 당신이 사용할 수 있습니다 :

그래서 더 나은 솔루션은이 같은 <head> 섹션의 마지막에 onbeforeunload 이벤트에 추가하는 것입니다

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

TimeMe 내가 위에 붙여 패키지에 대한 래퍼입니다.

출처

2016-10-05 08:15:40

3

Jason의 답변 외에도 라이브러리를 사용하지 않으려는 경우 유용한 트릭이 필요한 작은 코드가 있습니다. 사용자가 탭을 전환하거나 다른 창을 포커스 할 때 고려합니다.

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);

출처

2017-01-05 08:16:39 KeitIG

+0

유휴 시간으로 간주됩니까? – kabrice

+0

@kabrice 그것은 "유휴"라는 뜻에 달려 있습니다. 탭에 초점이 맞춰지면 사용자가 귀하의 페이지를 읽었는지 여부를 알 수 없습니다. 이 스 니펫은 기본적으로 사용자가 현재 탭에 집중 한 시간을 가져옵니다. 즉, 탭이 전경에있을 때를 의미합니다. – KeitIG

0

<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>

출처

2017-02-16 17:44:33 babiro

페이지에 소요 된 시간을 측정하는 방법은 무엇입니까?

답변

관련 문제