GA4 : 사용자 체류시간 분석(2) 더더 정확하게! - 사용자가 서비스를 키고 가만히 있을 때!

2023.07.04 - [GA4] - GA4 : 사용자 이탈 추적하기 (사용자 체류시간 측정)

GA4 : 사용자 이탈 추적하기 (사용자 체류시간 측정)

2023.07.13 - [GA4] - GA4 : 사용자 이탈 추적하기(2) (사용자 unfocus 상태 추가 추적)

GA4 : 사용자 이탈 추적하기(2) (사용자 unfocus 상태 추가 추적)

 

저희가 지난 1편과 2편에서 사용자의 이탈을 추적하고 이에 따른 체류시간을 측정해 보았습니다.

그리고 백그라운드 이동까지 추적함으로써 체류시간 측정이 더 정확해졌고 현재는 user_engagement에서 측정하는 체류시간과 매우 유사한 결과값을 얻어냈습니다.

 

그러나 이 두가지 값에서 모두 잡아내지 못하는 제외해야할 체류시간이 있습니다. 그것은 바로 사용자가 우리 서비스를 포그라운드 상태로 켜 놓았지만 아무것도 하지 않을때, 이때는 우리가 사용자가 우리 서비스를 이용하지 않고있다고 봐야합니다.

 

따라서 이런 부분을 오늘 추적해보겠습니다.

 

아래 코드는 모두 gtm의 맞춤 html로 코드를 작성했지만 저번에도 말씀 드렸드시 코드를 직접 심는 것은 gtm에서 하는 것보다는 실제 웹 코드에 직접 작성하기실 추천드립니다.

 

1. 자바스크립트 이벤트 선택

사용자가 우리 웹사이트에 체류하면서 서비스를 살펴보고 있을때 어떠한 행동을 할지를 생각해보면 크게 4가지 행동을 볼 수 있습니다.

 

1. 마우스 이동

2, 마우스클릭

3. 스크롤

4. 키보드작성

따라서 저는 이 4가지 javascript이벤트를 활용해서 추적해 보겠습니다.

 

2. 코드 작성

저희가 작성해왔던 이탈 태그에서 이어서 수정해보겠습니다.

 

먼저 4가지 이벤트를 한번에 처리할 함수를 생각해야 합니다.

function handleEvent() {
  if (unfocusTime == 0) {
    var currentTime = Date.now();
    if (lastEventTime !== 0 && currentTime - lastEventTime > freezeTime) {
      var timeDifference = currentTime - lastEventTime;
      totalUnfocusTime += timeDifference;
    } else if (lastEventTime === 0 && currentTime - startTime > freezeTime) {
      var timeDifference = currentTime - startTime;
      totalUnfocusTime += timeDifference;
    }
    lastEventTime = currentTime;
  }
}

window.addEventListener('mousemove', handleEvent);
window.addEventListener('keydown', handleEvent);
window.addEventListener('mousedown', handleEvent);
window.addEventListener('scroll', handleEvent);

위 코드가 그 코드입니다.

handleEvent 함수는 위에서 선택한 4가지 이벤트가 발생할 때 함수가 실행됩니다.

 

함수는 바로 직전에 발생한 이벤트와 현재 발생한 이벤트의 발생했던 시간의 차이가 우리가 정의한 freezeTime 즉 사용자가 이탈했다고 가정할 수 있는 시간동안 이벤트가 발생하지 않았었다면 이 시간만큼을 totalUnfocusTIme에 추가합니다.

 

else if 부분은 만약 사용자가 서비스에 들어오자마자! 아무것도 하지 않았다면 이번에 저 4가지 이벤트를 발생한 적이 없기 때문에 loadtime을 기준으로 시간을 측정합니다.

 

이렇게 측정한 totalUnfocusTime에는 우리가 저번시간에 만들었던 백그라운드로 이동했던 시간, 그리고 아무것도 하지 않았던시간이 포함되고 이 값을 마지막 체류시간에서 빼주시면 되는데 저번블로그에서 이미 뺏기 때문에 그대로 두셔도 됩니다.

 

그런데 이런 코드에는 문제가 있습니다.

바로 백그라운드에 5분이상 있다가 이벤트를 발생하면 둘다 중복 수집되어 10분이 총 체류시간에서 제외됩니다.

 

3. 중복수집 해결

이를 해결하는 방식은 간단합니다. 포그라운드로 이동할때 이벤트를 발생시킨것처럼 해주시면 됩니다.

 

window.addEventListener('focus', function(event) {
  if (unfocusTime !== 0) {
    var focusTime = Date.now();
    var elapsedTime = focusTime - unfocusTime;
    totalUnfocusTime += elapsedTime;
    lastEventTime = Date.now();
  }
  unfocusTime = 0;
});

저기서 lastEventTime = Date.now() 이 코드를 추가해주시면 됩니다.

 

이상으로 체류시간 정확도 더더 증가하기 마무리하겠습니다.