접속한 유저들의 체류시간을 확인하기 위해 데이터를 저장하기 위한 방법으로
현재는 JS setinterval 을 이용해서 5분마다 ajax 함수를 호출해서 디비에 저장을 하도록 되어 있는데요..
정확한 데이터를 확인하기 위해 개선을 할려고 하는데.. 좋은 방법이 있을까요?
생각으로는 백엔드에서 nodejs 의 socketio 를 사용하고 프론트에서는 웹소켓을 이용할려고 하는데
백엔드 socketio 에서 login , disconnect 만 체크해서 시간을 계신하면 되고
프론트에서 주기적으로 서버를 호출할 필요가 없는 것이 맞나요?
아니면 더 좋은 방법으로
아예 체류시간 확인이 필요한 페이지만 react 같은것으로 구현해서 웹사이트에 일부만 넣는 것도 가능한 것이겠죠?
조언 좀 부탁드리겠습니다
감사합니다.
이번 WWDC 2020 요약을 보니 빅셔? 에선 사파리에서 에널리틱스가 막힌다고 하네요 ㅡ.ㅠ
머 웹소켓에서 로그인과 디스컨넷트만 체크해서 저장하고.. 추가 기능들은 추가이벤트로 넣으면 되지 않을가 싶은데. 저도 실서비스에서느 써보지 않아서 문의 글을 남겼던 것입니다.
말슴 감사합니다.
unload 함수를 사용하면, 브라우저를 닫을때 이벤트 동작을 하게 됩니다.
(지금 찾아보니 최근 버전 Jquery에서는 삭제되었군요)
추가로 다른 웹사이트로 이동시엔 뭘 했는지 기억이 안나네요 -_-;
아무튼 (최종 이탈시간 - 최초 인입시간)을 이탈시 쿠키값을 DB에 던져서 기록하긴 했었습니다.
1. `DOMContentLoaded` 이벤트에 리스너를 등록하여 sessionStorage 에 인입 시간 기록 (쿠키나 localStorage 는 쓸 필요 없다고 생각합니다. 어차피 나가거나 창 닫으면 유의미한 정보가 아니니까.)
2. `beforeunload` 이벤트에 리스너를 등록하여 페이지 나갈 시 sessionStorage 에 저장했던 인입 시간을 꺼내 나가려는 시간과 대조하여 총 체류 시간을 계산 후, `navigator.sendBeacon` API 를 사용하여 서버에 시간 정보 전송
(추가) navigator.sendBeacon API 는 IE 에서 지원을 안하기 때문에, 만약에 IE 지원을 하셔야 한다면 그냥 XHR 호출하셔야 합니다. 그러면 다음 페이지 이동이 서버와의 통신 때문에 밀릴 수 있습니다. (동기적으로 작동하기 때문)
[참고자료]
- https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
- https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
- https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon