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

2023.07.08 - [GA4] - GA4 : 사용자 체류시간 정확도 탐구 (User_engagement VS exit)

GA4 : 사용자 체류시간 정확도 탐구 (User_engagement VS exit)

저번시간에 위에 블로그를 작성하다가 우리가 만든 사용자 이탈 이벤트의 문제점을 발견했죠!

오늘은 이 문제점을 해결해서 더 정밀한 측정값을 얻어보겠습니다.

 

저번블로그를 통해 알게된 문제점을 다시 말씀드리면

user_engagement 이벤트의 경우 사용자의 화면에서 우리의 웹서비스가 unfocused된 상태 즉 우리 화면이 아닌 다른 탭에 focus가 가있을때는 시간을 측정하지 않습니다.

그러나 제가 만든 사용자_이탈 이벤트에서 측정하는 체류시간은 이런 상태에서도 계속 시간이 측정되는 것이 문제였습니다.

이제 아래에서 이런 문제를 해결해 보겠습니다.

 

1. 자바스크립트 이벤트 확인

자바스크립트의 이벤트를 확인하면 우리가 사용하면 좋겠다 싶은 이벤트가 두가지 있습니다.

바로 focus이벤트와 blur이벤트 입니다.

focus는 사용자가 요소에 집중했을떄

blur는 사용자가 요소에 집중하지 않았을때 발생되죠
이 두가지를 활용하면 우리는 우리가 원하는 만큼 시간을 측정 할 수 있습니다.

 

2. 맞춤 html 수정

이번 이벤트는 저번에 만들었던 사용자_이탈이라는 이벤트를 트리거하는 이탈추적 이벤트를 수정할거에요..

참고로 여기서 잠깐 번외로 하나만 말씀드리면

제가 gtm에서는 이탈추적을 만들고 또 이걸 트리거로 사용해서 사용자_이탈 이라는 이벤트를 만들잖아요

사실 이탈추적 이벤트만 있더라도 사용자가 이탈하는 이벤트가 잡힙니다.

하지만 제가 굳이 또  이걸 트리거로 활용해서 사용자_이탈 이벤트를 만드는 이유는 gtm에서 맞춤 html으로 만든 gtag이벤트는 수집이 잘 안되더라고요! 그래서 굳이 gtm에서 만들꺼면 한번을 더 거쳐서 만들어줘야 해요.!

그래서 저는 사실 이런 사용자가 이탈하는 직접 gtag를 심어야 하는 이벤트를 만들거면 웹 자바스크립트 코드에 직접 심길 바래요!

 

 

자 이제 시작해보겠습니다.

 

1. focus이벤트 리스너 추가

<script>
var startTime = 0;

window.addEventListener('load', function(event) {
  startTime = Date.now();
});

window.addEventListener('beforeunload', function(event) {
  var endTime = Date.now();
  var elapsedTime = (endTime - startTime) / 1000; // Convert milliseconds to seconds
  gtag('event', 'exit', {
    'user_participation_time': elapsedTime
  });

  var currentDate = new Date();
  var formattedDate = currentDate.toISOString().split('T')[0];
  localStorage.setItem('lastVisitDate', formattedDate);
});

</script>

이게 원래 코드이죠 !  여기에 일단 먼저 변수들을 추가해주세요

우리는 이제 unfocus를 시작했을때의 시각 그리고 focus가 다시 됬을때의 시각, 그리고 그 둘의 차이를 저장할 변수가 필요합니다.

 

var startTime = 0;
var totalElapsedTime = 0;
var unfocusTime = 0;
var totalUnfocusTime = 0;

이렇게 추가해 주세요.

totalElapsedTime은 전체 참여시간을 측정하기 위한 변수, totalUnfocustime은 전체  unfocus time을 위한 변수입니다.

 

그 후 blur eventListener를 추가하겠습니다.

window.addEventListener('blur', function(event) {
  unfocusTime = Date.now(); // Start the timer when the window loses focus
});

처음 unfocus를 시작하면 그 시각을 기록합니다.

 

그 다음 focus eventListener를 추가하겠습니다.

window.addEventListener('focus', function(event) {
  if (unfocusTime !== 0) {
    var focusTime = Date.now(); // Stop the timer when the window gets focus
    var elapsedTime = (focusTime - unfocusTime); // Convert milliseconds to seconds
    totalUnfocusTime += elapsedTime/1000; // Add the elapsed time to totalUnfocusTime
  }
  unfocusTime = 0; // Reset the start time
});

다시 focus가 됬을때 unfocusTime이 0이아니면 즉 첫 load때 focus된경우를 제외하고 focus됬을때 시각을 구한 후 unfocusTime과의 차이를 통해 unfocus되었던 시간을 기록한 후 전체 unfocus time에 더했습니다.

이후 unfocusTime은 다시 0으로 초기화 => 마지막에 unload eventListener에서 활용하기 위함입니다. 어떻게 활용할지는 이따 보여드리겠습니다.

 

이렇게 하면이제 전체 unfocused time을 구할 수 있습니다.

 

이제 마지막으로 exit부분을 수정해보겠습니다.

window.addEventListener('unload', function(event) {
  var endTime = Date.now();
  if(unfocusTime != 0){
    var focusTime = Date.now(); 
    var elapsedTime = (focusTime - unfocusTime); // Convert milliseconds to seconds
    totalUnfocusTime += elapsedTime/1000; 
  }
    
  var elapsedTime = (endTime - startTime) / 1000; // Convert milliseconds to seconds
  totalElapsedTime += elapsedTime;
  totalElapsedTime -= totalUnfocusTime;
  
  gtag('event', 'exit', {
    'user_participation_time': totalElapsedTime
  });

  var currentDate = new Date();
  var formattedDate = currentDate.toISOString().split('T')[0];
  localStorage.setItem('lastVisitDate', formattedDate);
});

이런식으로 수정해서 작성해주시면 됩니다.

전체 참여시간에서 이제 전체 unfocused시작을 빼주시면 되고

또 마지막에 이탈할때 만약 unfocusTime!=0이라면 unfocus상태에서 창을 닫은 것이라 시작을 제대로 측정하려면 이때 unfocustime에 시간을 추가해주셔야 합니다.

 

따라서 전체 코드는 아래와 같습니다.

`

<script>
var startTime = 0;
var totalElapsedTime = 0;
var unfocusTime = 0;
var totalUnfocusTime = 0;

window.addEventListener('load', function(event) {
  startTime = Date.now();
});

window.addEventListener('unload', function(event) {
  var endTime = Date.now();
  if(unfocusTime != 0){
    var focusTime = Date.now(); 
    var elapsedTime = (focusTime - unfocusTime); // Convert milliseconds to seconds
    totalUnfocusTime += elapsedTime/1000; 
  }
    
  var elapsedTime = (endTime - startTime) / 1000; // Convert milliseconds to seconds
  totalElapsedTime += elapsedTime;
  totalElapsedTime -= totalUnfocusTime;
  
  gtag('event', 'exit', {
    'user_participation_time': totalElapsedTime
  });

  var currentDate = new Date();
  var formattedDate = currentDate.toISOString().split('T')[0];
  localStorage.setItem('lastVisitDate', formattedDate);
});

window.addEventListener('focus', function(event) {
  if (unfocusTime !== 0) {
    var focusTime = Date.now(); // Stop the timer when the window gets focus
    var elapsedTime = (focusTime - unfocusTime); // Convert milliseconds to seconds
    totalUnfocusTime += elapsedTime/1000; // Add the elapsed time to totalUnfocusTime
  }
  unfocusTime = 0; // Reset the start time
});

window.addEventListener('blur', function(event) {
  unfocusTime = Date.now(); // Start the timer when the window loses focus
});
</script>​