timeonsite.js 및 JS Beacons를 사용하여 웹사이트에 대한 최신 현장 방문 카운터를 구축해 보겠습니다.

7216 단어 beginnersprogrammingjavascriptwebdev
Timeonsite.js는 웹 사이트 방문 시간 및 사이트 방문 시간에 대한 가장 중요한 메트릭을 측정하는 데 사용할 수 있습니다. Javascript의 Date 객체로 페이지 진입과 페이지 이탈의 차이를 찾아 간단하게 계산할 수 있지만 여기서는 sendBeacon( ) DB 테이블에 안전한 데이터 지속성을 위한 API.

기본 HTML 블록




<!-- 
HTML page with "counter" div container 
-->
<html><head></head>
    <div id="counter">
    </div>
</html>


타이머 빌드를 위한 Javascript 코드 스니펫




// On page Load...
let entryTime = new Date();

//....
//User navigates the website
// some time later....

During Page exit....
let exitTime = new Date();

let timeSpent = exitTime - entryTime;
timeSpent = (timeSpent/1000); //convert to seconds

//Display the time spent with Jquery's API in page:
$(document).ready(function(){
    $('#counter').html('You have spent ' + timeSpent + 'seconds.');
});


그게 다야. 사용자의 페이지 방문 시간 매개변수를 훌륭하게 측정했습니다. 그러나 사용자가 페이지를 여러 번 새로 고치거나 동일한 웹 사이트에서 N개의 브라우저 탭을 열 때 정확성, 브라우저 간 호환성 및 데이터 지속성은 어떻습니까? 사용자가 다른 쇼핑 또는 소셜 미디어 웹사이트를 방문하여 이전 웹페이지가 열린 상태로 있는 경우 어떻게 합니까?

timeSpent는 변수이므로 비활성 탭 또는 동일한 웹 사이트에 대해 동시에 열린 여러 탭과 같이 웹 페이지에서 발생하는 상태를 제어할 수 없습니다. 이 경우 timeSpent의 정확도가 손실되고 안정적으로 측정할 수 없습니다. timeonsite.js 추적기에 의해 노출되는 API를 살펴보겠습니다.

그러나 timeonsite 추적기Tos.getTimeOnPage()의 API는 API를 호출할 때마다 노출timeonpage data합니다. 그리고 이 API를 사용하여 타이머 데이터로 카운터를 표시하고 업데이트할 것입니다.

{
 TOSId: 1129620185532,
 TOSSessionKey: "14802525481391382263",
 TOSUserId: "anonymous",
 title: "Blog application — Nature & Wildlife",
 URL: "http://tos-localdata.london/home.php"
 entryTime: "2021–11–27 13:15:48.663",
 exitTime: "2021–11–27 13:17:31.663",
 timeOnPage: 103,
 timeOnSite: 103,
 timeOnPageTrackedBy: "second",
 timeOnPageByDuration: "0d 00h 01m 43s",
 timeOnSiteByDuration: "0d 00h 01m 43s",
 trackingType: "tos",
}


1 단계



HTML 페이지 헤더에 트래커 스니펫 추가

<head>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/timeonsite/1.2.0/timeonsitetracker.js"></script>
</head>


2 단계



트래커의 초기화 코드 추가

<script>
var config = {
    // track page by seconds. Default tracking is by milliseconds
    trackBy: 'seconds',
    callback: function(data) { /* callback denotes your data tracking is real-time */
        console.log(data);
        var endPointUrl = 'http://example.com' //Replace with your actual backend API URL http://localhost/tos
        if (data && data.trackingType) {
            if (data.trackingType == 'tos') {
                if (Tos.verifyData(data) != 'valid') {
                    console.log('Data abolished!');
                    return; 
                }
            }

            // make use of sendBeacon if this API is supported by your browser.
            if (navigator && typeof navigator.sendBeacon === 'function') {
                data.trasferredWith = 'sendBeacon';
                var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
                navigator.sendBeacon(endPointUrl, blob);
            }
        }
    }
};
var Tos;
if (TimeOnSiteTracker) {
    Tos = new TimeOnSiteTracker(config);
}
</script>


3단계



페이지에 머문 시간 데이터의 상태도 웹페이지에 표시

$(document).ready(function(){
    setInterval(function () {
        $('#counter').html('You have spent ' + Tos.getTimeOnPage().timeOnPage + 'seconds.');
    }, 1000); // Update the counter every second for real-time experience.
});


그게 다야. 브라우저 터미널에서 트래커 각인을 확인하세요! 우리는 웹 사이트에서 사용자의 사이트 방문 시간을 정확하게 추적합니다. 보고 싶다면 a demo here 이 있습니다.

이렇게 카운터가 보입니다. 모양을 사용자 정의하십시오.


Timeonsite.js는 다음과 같은 모든 것을 처리합니다.

1, 비활성 탭
2, 페이지 새로 고침 및 다시 로드 시 데이터 지속성
3, 동일한 웹사이트의 여러 탭(일반적인 JS 날짜 개체에서는 중복되고 잘못된 사이트 방문 시간 데이터가 생성되기 때문입니다.)
4, 페이지를 닫을 때 원하는 DB 테이블에 데이터를 저장합니다. (이 데이터를 PHP/NodeJS에 저장하기 위해 이미 백엔드visual, free backend server를 사용할 수 있습니다.)
5, 가장 중요한 것은 분석 공급자가 캡처한 메트릭의 전례 없는 정확도입니다!

따라서 사용자가 사이트에서 보낸 시간을 표시할 수 있으며 DB 테이블에서 가져온 로그로 사용자가 마지막 세션에서 보낸 시간을 표시할 수도 있습니다.

2단계에서 다음 줄을 사용했습니다.

navigator.sendBeacon(endPointUrl, blob);


이것은 XMLHTTPRequest와 같은 HTTP 게시 요청을 만들기 위한 가장 강력한 Javascript API 중 하나이지만 특히 페이지를 닫는 동안 로그 데이터를 유지하고 저장하는 데 효과적입니다.



XHR/HTTP 요청과 달리 네트워크 콘솔에 핑이 표시됩니다. CORS 오류를 일으키는 샘플 빈을 사용하고 있습니다. 일반 앱에서는 성공 응답을 다시 보내야 합니다.

보너스 포인트



Timeonsite.js는 Tos.startActivity()와 함께 Tos.endActivity() API도 노출합니다. 이 API의 장점은 사이트의 특정 활동을 추적할 수 있고 비활성 탭, 최소화 탭 또는 여러 탭과 같은 페이지에 머문 시간 매개변수와 같은 동일한 기능과 함께 번들로 제공되어 타이밍 정확도를 측정할 수 있다는 것입니다. 각 페이지뷰에는 사이트에서 발생하는 각 활동TOSSessionKey을 고유하게 식별하는 ActivityId(TOSId)가 포함됩니다. 예를 들어보자면,

// After initializing the TimeOnSiteTracker on page load, call startActivity() as
Tos.startActivity({applicantName: 'Nazir Khan'}); // this will start tracking the activity

// .
// .
// .
// after a while,

Tos.endActivity({applicantCountry: 'Romania'});
// calling .endActivity() will give back response

Gives response as,
{
    TOSId: 585872449448,
    TOSSessionKey: "14802525481391382263",
    TOSUserId: "anonymous",
    title: "Test application - TimeOnSiteTracker",
    URL: "http://tos-localdata.london/home.php",
    activityStart: "2021-11-27 13:20:46.707",
    activityEnd: "2021-11-27 13:20:50.213",
    timeTaken:4,
    timeTakenByDuration: "0d 00h 00m 04s"
    timeTakenTrackedBy: "second",
    trackingType: "activity",
    applicantName: "Nazir Khan",
    applicantCountry: "Romania"
}


이 기사가 마음에 들면 star on github 저장소를 제공하십시오. 그리고 귀하의 웹 페이지에 대한 귀하의 사이트 방문 시간 카운터를 구축하는 것이 어떤 것인지에 대한 귀하의 의견을 공유하십시오.

메모
이 timeonsite.js는 상용 라이브러리이지만 비프로덕션 사이트 및 개인 웹사이트에서도 무료입니다. 따라서 CDN.js 호스팅 웹사이트에서 호스팅되는 무료 버전을 사용해 봅시다.
HTML 오디오 설명!
Flutter에서 Cupertino Sliver 내비게이션 바를 사용하는 방법은 무엇입니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage