방문자가 생각보다 많은데요? "봇이지 뭐"
지난 글에서 미뤄뒀던 GA4 측정 ID를 받고 나서, 실제 연동을 이어서 진행했다. 연동 작업을 진행하다 보니 매번 GA4 대시보드에 따로 들어가는 게 번거로울 수도 있겠다는 생각이 들었다.
그럴 바엔 GA4가 분석한 데이터를 API로 받아와서 통계 화면에서 바로 보여주면 어떨까 싶었다. 그 바람에 작업 범위가 늘었다. API 연동, 패키지 설치, Vercel 환경변수 등록까지 겹치면서 생각보다 시간이 더 걸렸다.
추적 스크립트는 어디에?
추적 스크립트는 사이트의 모든 페이지를 감싸는 최상위 레이아웃 파일에 붙였다. 개별 페이지마다 따로 추가할 필요 없이 여기 한 번만 붙이면 사이트 전체에 적용된다. @next/third-parties의 GoogleAnalytics 컴포넌트가 이 위치에 붙이는 걸 그대로 지원해서, 직접 <head>에 스크립트 태그를 넣는 것보다 손이 덜 갔다. 로컬 개발 환경에서는 동작하지 않고 운영 환경에서만 동작하도록 조건을 걸어뒀다.
GA4 분석 결과 오이데 오이데
스크립트만 붙이면 GA4 콘솔에서 보는 것까지는 되지만, 그 데이터를 코드로 가져오는 건 별개다. GA4 관리 콘솔(analytics.google.com)에서 속성을 만드는 것 외에, Google Cloud 콘솔(console.cloud.google.com)에서 프로젝트를 만들고 Analytics Data API를 켠 다음, 조회 전용 서비스 계정을 만들어 GA4 속성에 뷰어 권한으로 등록해야 한다. 이 절차를 거쳐야 코드에서 그 계정으로 인증해서 GA4 데이터를 읽어올 수 있다.
이렇게 준비해두면 GA4 Data API로 유입경로, 기기·브라우저 종류, 페이지별 조회수, 세션 길이, 방문 지역, 이벤트 수까지 상당히 많은 지표를 가져올 수 있다. 지금 당장은 그 정도까지 필요 없어서, 그중 유입경로와 기기별 세션 두 가지만 가져와서 PorkLog 통계 화면에 카드로 추가했다.
니가 이제 어디서 온지 알 수 있다.
측정 ID를 발급받기 전까지는 "유입 경로를 전혀 모른다"는 게 이 시리즈를 시작한 이유였다.
이제는 블로그 방문자가 검색을 통해서 들어왔는지(Google SEO 등록도 함), 어느 커뮤니티 링크를 타고 왔는지를 숫자로 볼 수 있게 됐다.
안녕 친구.