FE 개발자를 위한 Google Analytics 4 개요

 

 

구글 정책에 따라 유저 행동 분석에 활용해 오던 Universal Analytics 360(이하 UA360)이 2024년 7월부로 공식적으로 종료되었습니다. 이에 따라, 기존 UA 기반으로 기록되던 이벤트 로그는 Google Analytics 4 로의 전환이 불가피해졌습니다.

 

💡알아두기
2023년 7월 1일부터 UA360 데이터 처리가 중단되었습니다.
read-only로 전환되며 새로운 데이터는 GA4 속성으로만 전달됩니다.
1년간의 계도 기간을 거쳐서 완전히 일몰 되었습니다.

2024년 7월 1일부터 UA 데이터 읽기/쓰기 중단 & UA에 적재된 데이터가 삭제됩니다.
👉 관련 문서

 

이번 포스트에서는 FE 개발자 입장에서 GA4와 이벤트 수집에 대한 대략적인 이해를 도울 수 있는 내용을 정리해보려고 합니다. 처음 GA4를 접하는 분들에게 도움이 되었으면 합니다.

 

📌 GA4에 대한 간단한 소개

Google Analytics 4(이하 GA4)는 웹과 앱 전반에서 이벤트 기반으로 데이터를 수집하는 분석 플랫폼입니다.
해당 서비스의 특징을 살펴보면 다음과 같습니다.

 

• 웹, 앱 데이터를 통합해서 수집 및 분석
• 세션 기반 데이터 대신 이벤트 기반 데이터 사용
• 쿠키 없는 측정, 행동 및 주요 이벤트 모델링과 같은 개인 정보 보호 설정 포함
• 미디어 플랫폼에 직접 통합하여 더 간편하게 적용할 수 있는 방법 제공

 

💡UA360과 GA4의 측정 항목 비교
Universal Analytics와 Google Analytics의 측정 항목을 비교하고 싶다면 다음 문서를 참고해 주세요.
👉 관련 문서

📌 Google Tag?

모든 데이터 측정의 출발점이 되는 코드 세그먼트입니다.
각 Google 태그는 고유한 태그 ID 를 가지며, 일반적으로 G- 로 시작하는 영문과 숫자의 조합으로 구성되어 있습니다.

 

 

수집된 데이터는 GA4, Google Ads 등 Google의 다양한 측정 제품의 계정으로 전송됩니다.

기존에는 각 Google 제품 계정마다 별도 태그를 관리해야 했지만, 이제는 하나의 Google 태그만으로도 웹사이트 전반에서 여러 계정(Google Ads, Google Analytics 4 등)과 연결할 수 있어 훨씬 효율적으로 관리가 가능합니다.

 

🔗 참고 문서

• Google 태그 정보 | Google tag (gtag.js) | Google for Developers

 

Google Tag 특징

Google 태그의 주요 특징과 이를 활용했을 때 얻을 수 있는 이점은 다음과 같습니다.

• Google 제품 계정별로 여러 태그를 관리하는 대신 전체 웹사이트에 하나의 Google 태그 사용
• Google 애널리틱스에서 페이지 조회수, 클릭수, 스크롤 수 등을 자동으로 측정
• Google 제품(예: Google Analytics, Google Tag Manager) 내에서 이러한 Google 태그 설정을 구성하여 사이트의 코드를 변경해야 할 필요를 최소화

 

Google Tag 구성 방법

Google Tag는 단독으로 사용하거나 Google Tag Manager를 통해 사용할 수 있습니다.
어떤 방식을 선택할지는 현재 측정하고자 하는 서비스의 성격에 따라 결정하면 됩니다.

만약 Google 태그만 사용하는 경우, 웹사이트 작성 도구 또는 CMS를 이용하고 있다면 각 플랫폼을 위해 제공되는 Google 태그 통합 기능을 활용할 수 있습니다. 하지만 사용하는 플랫폼에서 통합을 지원하지 않는다면 직접 Google 태그 코드를 삽입해 설정하는 방식을 선택해야 합니다.

 

https://developers.google.com/analytics/devguides/collection/ga4/tag-options?hl=ko#gtm-vs-gtag

 

🔗 참고 문서

• Google 태그 및 태그 관리자 | Google Analytics 4 Properties | Google for Developers

 

💡알아두기
gtag.js는 Google Tag를 웹페이지에 직접 추가하는 데 사용하는 JavaScript 스니펫입니다.

 

📌 Google Tag Manager?

Google Tag Manager 는 웹사이트나 모바일 앱에 적용된 Google Tag 를 쉽고 빠르게 관리할 수 있는 어드민 서비스입니다. 이를 통해서 서비스에 매번 태그를 직접 추가할 필요 없이 어드민 내에서 태그를 구성 및 게시하고 태그를 실행할 방법을 지정할 수 있습니다.

 

Google Tag Manager를 구성하는 컴포넌트

1️⃣ Tag

앱/웹에서 실행되며 Google Analytics와 같은 시스템에 데이터를 전송하는 코드 조각입니다.
이를 통해서 사용자의 행동을 감지하고 분석 도구로 데이터를 전송할 수 있습니다.

 

2️⃣ Trigger

트리거는 클릭, 폼 제출, 페이지 로드 등과 같은 특정 이벤트의 발생을 감지합니다.
이벤트가 감지되면 해당 트리거와 연결된 모든 태그가 실행됩니다.

또한 트리거는 Trigger filter 를 통해서 트리거 조건을 세밀하게 조정할 수 있으며 이때 Tag Manager variable 이 사용됩니다.

 

3️⃣ Variable

변수는 상품명, 가격처럼 상황에 따라 변하는 동적인 값을 담는 공간입니다.
이 값은 트리거의 조건을 설정하거나 태그에서 데이터를 수집할 때 활용됩니다.

Variable 은 사용되는 맥락에 따라 두 가지 방식으로 의미가 달라집니다.

• trigger 에서의 variable : filter의 동작 조건에 사용되어 트리거가 작동할지 여부
• tag 에서의 variable : 태그에 포함되어 전송될 동적 데이터

Tag Manager에서는 기본적으로 제공되는 기본 변수들 뿐만 아니라 필요에 따라 맞춤 변수를 직접 구성해 사용할 수도 있습니다.

 

🔗 참고 문서

• Built-in variables for web containers - Tag Manager Help

 

4️⃣ Data Layer

DataLayer 는 Google Tag Manager와 gtag.js에서 태그에 정보를 전달하기 위해 사용하는 객체입니다.
DataLayer 는 FIFO(선입선출) 방식으로 처리되기 때문에 등록된 순서대로 이벤트가 처리됩니다.

 

 

GTM 컨테이너가 로드되면 DataLayer 객체는 event 명령어를 사용하여 이벤트 전송을 시작합니다.
그러면 Tag Manager가 큐에 추가된 모든 DataLeyer 푸시 메시지를 순차적으로 처리합니다.

여기서 event 는 Tag Manager가 반응하도록 신호를 보내는 트리거 역할을 한다고 이해할 수 있습니다.
특정 이벤트가 DataLayer에 푸시되면 GTM이 이를 감지하고 해당 이벤트에 연결된 태그를 실행합니다.

 

dataLayer.push({ 'event': 'event_name' });

 

DataLayer 에 데이터를 push 할 때는 JavaScript 객체 형태의 동적 변수도 함께 전달할 수 있습니다.
만약 기존에 정의된 변수와 동일한 이름의 값을 push 하면, 새로운 값이 기존 값을 덮어쓰게 됩니다.

 

dataLayer.push({ 'color': 'red' });

 

이렇게 설정된 DataLayer 변수는 사용자가 해당 페이지에 머무는 동안 유지되며, 페이지를 벗어나면 초기화됩니다.

따라서 여러 페이지에 걸쳐 공통으로 사용하는 변수(ex: 방문자 정보 visitor 등)는 모든 페이지에서 동일한 이름으로 일관되게 선언해 주어야 정확하고 안정적인 데이터 수집이 가능합니다.

 

개발팀에서 DataLayer를 적용하여 특정 정보를 수집하도록 구현했다면, 그다음 단계는 해당 정보를 GTM에서 활용할 수 있도록 설정하는 것입니다.

먼저 DataLayer에 담긴 각각의 변수명을 사용자 정의 데이터 변수 로 GTM에 등록합니다.
이후 이를 기반으로 이벤트를 구성하고 필요한 파라미터 값과 함께 GA4로 전송되도록 설정합니다.

 

🔗 참고 문서

• Custom Events in Google Analytics 4 （dataLayer.push method） | BCS
• 데이터 영역 | Tag Manager | Google for Developers

사용자가 웹/앱에서 트리거하는 대부분의 이벤트는 한 번에 하나씩 동기적으로 처리되지 않습니다.

 

dataLayer.push()가 호출되면 대기 중인 다른 메시지가 모두 처리된 뒤에야 새로 푸시된 메시지가 큐에 추가되고 실행됩니다. 이 말은 곧, 업데이트된 DataLayer 값이 즉시 다음 이벤트에서 사용된다는 보장이 없다는 뜻입니다.

 

이런 비동기적 특성 때문에, 값이 정확히 반영되기를 기대하여 동기적으로 처리하고 싶은 경우에는 데이터를 푸시할 때 메시지에 이벤트 이름을 추가한 다음, 맞춤 이벤트 트리거로 해당 이벤트를 수신 대기해야 합니다.

 

Google Analytics는 내부적으로 sendBeacon API를 활용하여 언로딩이나 탐색 지연 없이 효과적으로 이벤트 데이터를 비동기로 전송합니다.

 

🔗 참고 문서

• https://developer.mozilla.org/ko/docs/Web/API/Navigator/sendBeacon

 

💡DataLayer 튜토리얼은 다음 유튜브 영상을 참고해 주세요.
👉 Youtube 링크

 

 

GTM 이벤트 전송 방식

Google Tag Manager에서 GA4로 이벤트 데이터를 전송하려면 두 가지 종류의 태그를 설정해야 합니다.

 

1️⃣ Google Tag

Google Tag는 도메인별로 1개씩 만들어서 측정하려는 모든 사이트에 삽입합니다.
Google Analytics에 데이터를 전송할 수 있는 기반 역할을 합니다.

 

2️⃣ Google Analytics Event Tag

실제 수집하려는 사용자 행동이나 이벤트 데이터를 정의하는 태그입니다.
이벤트 데이터는 GA4 보고서 에 표시되며 측정하는데 필요한 만큼 이벤트 태그를 생성합니다.

 

 

Google Tag Manager에서 태그는 form 제출, 동영상 재생 등과 같은 이벤트 를 기준으로 실행됩니다.
이러한 이벤트를 감지하고 태그 실행 여부를 결정하는 것이 바로 트리거 입니다.

 

트리거 는 태그가 언제 실행되거나 차단될지를 제어하는 역할을 하며, 하나의 태그가 작동하기 위해서는 반드시 하나 이상의 트리거가 연결되어 있어야 합니다.

클라이언트 측에서 특정 이벤트가 발생하면, GTM 내부적으로 해당 이벤트에 반응하는 트리거 함수가 호출되고, 그 트리거가 설정된 조건과 일치할 경우 연결된 태그가 실행되는 구조입니다.

 

🔗 참고 문서

• [GA4] Google 태그 관리자에서 Google 애널리틱스 4 구성하기 - 태그 관리자 고객센터

 

 

📌 Google Analytics 이벤트 종류

Google Analytics 에는 다양한 유형의 이벤트가 존재합니다.
수집 방식에 따라 자동 수집 이벤트 와 수동 수집 이벤트 로 구분할 수 있습니다.

 

1️⃣ 자동 수집 이벤트

GA4에서 추가적인 개발 없이도 자동으로 수집할 수 있는 이벤트가 있습니다.
이는 크게 자동 수집 이벤트와 향상된 측정 이벤트 두 가지로 나뉩니다.

• 자동 수집 이벤트
  • 웹/앱에서 GA4를 설정할 때 기본적으로 수집되는 이벤트입니다.
• 향상된 측정 이벤트
  • 자동 수집 이벤트 중 사이트의 상호작용 및 콘텐츠를 중심으로 자동으로 측정하는 이벤트입니다.

 

2️⃣ 수동 수집 이벤트

다음 두 가지 이벤트는 GA4에서 자동으로 수집되지는 않지만 필요에 따라 개발을 통해 직접 추가할 수 있는 이벤트 유형입니다.

• 추천 이벤트
  • 비즈니스 유형에 따라 GA에서 사전에 정의한 이벤트 이름과 매개변수가 있는 이벤트입니다.
  • 특정 사용자 행동이 추천 이벤트에 해당한다고 해서 반드시 추천 이벤트 를 써야 하는 것은 아니지만, GA에서 해당 이벤트에 최적화된 보고서 기능을 활용하지 못할 수 있다는 점은 고려해야 합니다.
• 맞춤 이벤트
  • 개발자가 직접 정의해 구현하는 형태의 커스텀 이벤트입니다.
    GA에서 제공하는 사전 정의 이벤트가 분석 목적에 맞지 않거나 존재하지 않는 경우 사용합니다.
  • 맞춤 이벤트는 대부분의 표준 보고서에는 표시되지 않기 때문에 유의미한 분석을 위해서는 맞춤 보고서 또는 탐색 분석 을 설정할 필요가 있습니다.

🔗 참고 문서

• [GA4] About events - Analytics Help
• [GA4] Recommended events - Analytics Help
• [GA4]7. 구글 애널리틱스 4 이벤트 이해하기 - 분석마케팅

💡 맞춤 이벤트 생성하는 방법은 다음 문서를 참고해 주세요.
👉 관련 문서

 

3️⃣ 주요 이벤트

주요 이벤트 는 비즈니스 성공에 가장 중요한 액션을 측정하는 이벤트입니다.
예를 들어 뉴스레터를 구독한다던가, 상품을 구매한다던가 하는 행동이 이에 해당합니다.

Google Analytics에서는 이러한 이벤트들을 별도로 지정해서 추적할 수 있으며, 이를 통해 일반 이벤트와 구분해 성과 분석이나 전환 측정에 더 집중된 인사이트를 얻을 수 있습니다.

 

🔗 참고 문서

• https://support.google.com/analytics/answer/13965727?sjid=3497623498772699296-NC

 

📌 이벤트 측정기준 및 측정항목

GA4 측정기준 과 측정항목 에 대한 개념을 잘 정리한 글이 있으니 아래 링크를 참고하시면 많은 도움이 될 것 같습니다.

 

🔗 참고 문서

• 구글 애널리틱스 4 측정기준과 측정항목의 이해(맞춤 측정기준과 맞춤 측정항목)

 

📌 이벤트 수집 한도

GA4에서 이벤트를 수집할 때는 매개변수의 개수, 길이 등 여러 가지 제한이 존재합니다.
이러한 수집 한도를 초과하면, 해당 이벤트나 매개변수는 기록되지 않으며 Google Analytics에서 오류 코드가 발생할 수 있습니다.

 

🔗 참고 문서

• 애널리틱스 오류 코드 | Google Analytics for Firebase
• [GA4] 이벤트 수집 한도 - 애널리틱스 고객센터

 

📌 Firebase Analytics

Firebase Analytics의 역사

Firebase 는 앱 개발에 필요한 여러 서비스들을 종합적으로 제공하는 플랫폼 서비스입니다.
2014년 Google에 인수된 이후, firebase에서 제공되는 서비스들도 점차 변화해 왔습니다.

 

과거에는 Firebase Analytics 라는 이름으로 모바일 앱 데이터를 수집하는 전용 모듈이 제공됐지만, 해당 서비스는 2021년을 기준으로 공식적으로 deprecated 되었습니다.
(참고로 당시에는 웹용 SDK는 제공되지 않았습니다.)

 

이후 이를 계승한 서비스가 바로 Google Analytics for Firebase 입니다.
우리가 요즘 흔히 Firebase Analytics 라고 부르는 것도 사실은 이 서비스를 뜻하는 경우가 많습니다.

현재 기준으로 Firebase에서 제공하는 유일한 로깅 서비스이며 웹과 앱을 모두 지원하는 SDK가 함께 제공됩니다.

 

🔗 참고 문서

• Google Analytics 4 vs. Firebase vs. Firebase Analytics: What’s the Difference?

 

GA4와 Firebase Analytics의 관계

Firebase Analytics 는 모바일 앱 데이터를 수집하는데 특화된 분석 도구입니다.
이벤트 기반 구조를 따르고 있으며 그 형식은 Google Analytics 4와 매우 유사합니다.

 

앱 개발 시에는 Firebase Analytics를 통해 주요 이벤트를 수집하고, 이렇게 수집된 데이터를 Google Analytics에서 연동하여 탐색 및 보고서 등 더욱 고도화된 분석 기능을 활용할 수 있습니다.

즉 Firebase Analytics는 데이터 수집에, GA4는 분석에 강점을 가진 구조이며 두 도구를 함께 연동해 사용하면 웹과 앱 사용자 행동을 더 깊이 있게 이해하고 인사이트를 도출할 수 있습니다.

 

🔗 참고 문서

• Firebase Analytics와 GA4의 관계 알아보기

 

WebView에서 Firebase Analytics 사용하기

WebView 내에서 발생한 이벤트 로깅이나 사용자 속성 설정은 단순히 웹에서 호출하는 것만으로는 GA4에 직접 전송되지 않습니다.

웹과 앱 간의 브릿지 역할을 하는 web-app 인터페이스를 활용해 WebView에서 발생한 이벤트를 네이티브로 전달하고 그 이후 Google Analytics로 전송하는 방식을 사용합니다.

 

🔗 참고 문서

• WebView에서 애널리틱스 사용 | Google Analytics for Firebase