본문 바로가기
만들어보아요/업무 로그

GA4 로 페이지 속도를 모니터링 하기.

by Kelvin™ 2023. 12. 17.

UA 에서는 페이지 속도를 측정할 수 있었는데, GA4 로 넘어오면서 사라졌다.

모든 집계단위가 이벤트 단위로 바뀌면서
페이지가 로드되기 시작하고, 완료되는 순간에 대한 이벤트를 확인하지 않아서인 것으로 예상된다. 

여러 페이지를 검색 하던 중 아래의 주소를 참고로 시도하고 있는 내용을 기술해 본다. 
( 시도하고 있다는 표현은 아직 깔끔하게 정리가 되지 않는 느낌이라 그렇다. )

https://www.lovesdata.com/blog/page-load-google-analytics

 

How To Track Page Load Time In GA4 (Google Analytics 4)

Do you want to track the loading time of pages in GA4 (Google Analytics 4)? If you’ve been using Universal Analytics, the previous version of Google Analytics, then you might also be wondering where the ‘Site Speed’ reports have gone in GA4.

www.lovesdata.com

위 내용의 대략적인 내용은 다음과 같다.

  • JS script 로 페이지의 로딩 타임을 계산하는 맞춤 자바스크립트 변수를 만든다.
  • 해당 페이지가 창이 로드되면 실행할 수 있게 트리거를 건다.
  • 트리거된 변수를 GA4 의 맞춤측정기준에 넣어 GA4 이벤트 데이터로 전송한다.
  • 결과를 확인한다. ( 결과는 루커 스튜디오에서는 보면 평균 값을 확인할 수 있다고 한다. )

이렇게 해서 예상했던 실행결과는 각 페이지의 로딩타임이 보관되고,
GA4 상에서 페이지의 평균 페이지 로드가 정리되어 리포트 되도록 하는 것이 목표였다. 

그러나, 모든 일이 그렇듯이 우리 페이지의 환경에서 맞지 않는 부분이 발견되었다. 
페이지 로딩 평군 시간이 몇시간이 넘어가는 현상이 발생하고 있었는 데,
이 부분은 상식적으로 이해하기 어려운 것이였다. 

 

 

 

이런 속도가 말이 되는지... 

 

그래서, 빅쿼리로 해당 되는 이벤트를 체크해서 확인해 본바 저장되는 값에는 문제가 없는 것을 발견 했다. 

WITH unnested_params AS (
  SELECT
    (SELECT SPLIT(value.string_value,'?')[offset(0)] FROM UNNEST(event_params) WHERE key = 'page_location') AS page_location,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'page_referrer') AS referrer,
    user_pseudo_id,
    params.value.double_value AS load_sec
  FROM
    `******-ga4.analytics_*******.events_*`
  CROSS JOIN
    UNNEST(event_params) AS params
    where params.key='loading_time_sec' and _table_suffix BETWEEN '20231215' AND '20231215'
)
SELECT
  page_location, user_pseudo_id, referrer, load_sec
FROM
  unnested_params   order by load_sec desc limit 100

그러면, 페이지 로딩 시점에 대한 문제가 아닐까 해서 omnibug 로 모니터링 하여 확인을 해본다. 

개발자 모드를 통해서 OmniBug 로 확인해 보면, 페이지 로딩 속도를 특정하는 가이드에 나와 있는 창이 모두 로드된 이후에 해당 자바스크립트 맞춤 변수를 체크하니 기본적인 페이지 뷰와 9초 차이가 나는 것을 확인 할 수 있다. 

이런게 쌓이다 보니 페이지의 로딩 속도가 너무나 실제와 너무나 큰 차이를 보이는 것이다. 

이 문제를 해결하기 위해서 다른 트리거를 시도해보았으나, 해당 트리거 이외에는 동작하지 않았다. 

JAVASCRIPT 자체사 클라이언트에서 로드되는 것이다 보니, 모든 창이 로드가 완료된 이후에 동작을 하게 된다.

다른 이벤트 실행 시 트리거가 동작할 수 있도록 시도해 보았으나, JS 는 동작하지 않았다.

이 부분을 해결할 수 있는 방법은 페이지가 모두 다 깔끔하게 로딩될 수 있게 소스를 수정해야 하는데. 쉽지가 않을 것 같고.
아니면 페이지 최대 노출 확인 시간을 10초로 제한하고 그 이벤트에 해당하는 페이지만 추출하는 게 방법인데. 

이게 또 문제가 되는 것이 이 이슈로 인해 항상 페이지 로드가 10초 이상으로 잡히면서
중요한 페이지는 모니터링이 아에 안되는 문제가 발생할 수 있다. 

모두 다 이런 고민을 함께 해 주었으면...

댓글