안녕하세요, IT와 테크 지식을 공부하고 기록하는 루카(Luka)입니다.

오랜만에 새로운 프로젝트를 맡게 되었는데, 이번에는 기획 단계부터 "GA4 데이터를 기반으로 의사결정하자!"는 이야기가 나왔습니다. 기존에 유니버설 애널리틱스(UA)만 가볍게 써왔던 저로서는 GA4로의 전환이 부담스러웠죠. 특히, 이직 후 첫 프로젝트라 제대로 설치하고 핵심 전환 지표까지 완벽하게 트래킹해야 한다는 압박감이 컸습니다. 단순한 코드 삽입을 넘어, 사용자의 행동을 파악하고 비즈니스 목표에 맞는 데이터를 수집하는 과정에서 예상치 못한 난관들이 많았고, 그 과정에서 얻은 생생한 경험과 노하우를 오늘 이 글에 담아보려 합니다.

GA4, 단순한 버전 업그레이드가 아니던데요?

처음 GA4로 전환하라는 이야기를 들었을 때, 저는 그냥 UA의 기능 개선 버전쯤으로 생각했습니다. 하지만 직접 파고들어 보니, UA와 GA4는 데이터 측정 방식의 철학 자체가 달랐습니다. UA가 '세션'과 '페이지뷰' 중심이었다면, GA4는 모든 것을 '이벤트'로 바라보더군요. 웹과 앱 데이터를 통합해서 볼 수 있다는 점은 매력적이었지만, 이 새로운 패러다임에 적응하는 데 시간이 좀 걸렸습니다.

특히 저희 프로젝트는 사용자의 "문의하기" 버튼 클릭, 특정 서비스 신청 완료, 그리고 중요 문서 다운로드 수를 핵심 전환으로 설정해야 했습니다. UA에서는 목표(Goal) 설정으로 비교적 직관적이었는데, GA4에서는 모든 것을 이벤트로 정의하고, 그 이벤트들 중 중요한 것을 '전환'으로 표시하는 방식이 처음에는 낯설게 느껴졌습니다.

GA4 설치, 직접 해보니 별거 아니더라 (feat. gtag.js vs GTM)

GA4 설치 방법은 크게 두 가지로 나뉩니다. 직접 웹사이트 HTML <head> 태그 안에 gtag.js 코드를 삽입하는 방식과, Google Tag Manager(GTM)를 사용하는 방식이죠.

처음에는 가장 간단해 보이는 gtag.js 방식을 선택했습니다. 새로운 GA4 속성을 만들고, 스트림 설정을 통해 측정 ID(G-XXXXXXXXXX)를 받은 후, 구글에서 제공하는 기본 코드를 복사해서 붙여 넣었죠.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX'); // 여기에 GA4 측정 ID를 넣습니다.
</script>

이 코드를 웹사이트 모든 페이지의 <head> 태그 안에 넣었습니다. 그리고 GA4 실시간 보고서에서 제 접속이 잡히는 것을 보고 "와, 성공!"이라고 외쳤죠.

하지만 문제는 곧 찾아왔습니다. 단순 페이지뷰 외에, 앞서 언급했던 "문의하기" 버튼 클릭이나 특정 폼 제출 같은 커스텀 이벤트를 트래킹하려고 하니, gtag() 함수를 직접 호출하는 코드를 여기저기 심어야 했습니다. 웹사이트가 성장하고 트래킹해야 할 이벤트가 늘어날수록, 코드를 추가하고 수정하는 일이 점점 번거로워졌습니다. 프런트엔드 개발자에게 매번 요청해야 했고, 배포 없이는 작은 수정도 불가능했습니다.

결국 한 달 정도 gtag.js로 버티다가, 유지보수의 한계를 느끼고 GTM으로 전면 전환하기로 결정했습니다. 제가 내린 결론은 이렇습니다:

특징 gtag.js (직접 설치) Google Tag Manager (GTM)
설치 난이도 쉬움 (코드 복사-붙여넣기) 보통 (GTM 컨테이너 설치 후 태그/트리거 설정)
유지보수 어려움 (이벤트 추가/수정 시 코드 수정 및 배포 필요) 쉬움 (GTM UI에서 태그 설정, 배포 없이 즉시 적용 가능)
유연성 낮음 (단순 GA4 기본 트래킹에 적합) 높음 (GA4 외 다양한 태그, 복잡한 이벤트 설정 가능)
개발 의존도 높음 낮음 (마케터, 기획자도 일부 수정 가능)
초기 속도 미미하게 빠를 수 있음 컨테이너 로드 시간 발생 (최적화 시 큰 차이 없음)

GTM으로 전환하는 과정은 생각보다 훨씬 깔끔하고 효율적이었습니다. 웹사이트에는 GTM 컨테이너 코드만 딱 한 번 삽입하면 끝이죠.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

GTM-XXXXXXX 부분에 자신의 GTM 컨테이너 ID를 넣고, 이 스크립트들을 <head> 태그의 시작 부분과 <body> 태그의 시작 부분에 각각 삽입했습니다. 이 작업 후에는 모든 GA4 태그 관리를 GTM UI에서 진행했습니다. GTM에 GA4 구성 태그를 설정하고, 이 태그가 모든 페이지에서 실행되도록 트리거를 'All Pages'로 설정하면 GA4 기본 트래킹 준비는 완료됩니다.

핵심 전환 지표 트래킹, 이렇게 설정했어요

저희 프로젝트의 핵심 전환은 다음과 같았습니다. 1. 문의하기 버튼 클릭: 잠재 고객 발굴 2. 서비스 신청 완료: 비즈니스 핵심 목표 3. 중요 문서 다운로드: 정보 탐색 의지 확인

저는 이 세 가지를 GA4의 '전환'으로 설정하기 위해 GTM을 활용했습니다. 가장 난이도가 있었던 "문의하기 버튼 클릭"을 예시로 설명해 드릴게요.

"문의하기" 버튼은 웹사이트 내 여러 페이지에 존재했고, 버튼의 ID나 Class는 일관되지 않았습니다. 하지만 개발팀과 협의하여, 버튼 클릭 시 dataLayer.push를 통해 특정 이벤트를 보내도록 표준화했습니다.

// 웹사이트의 '문의하기' 버튼 클릭 이벤트 발생 시 실행되는 JavaScript
document.getElementById('contactButton').addEventListener('click', function() {
  dataLayer.push({
    'event': 'contact_button_click',
    'button_text': '문의하기',
    'page_path': window.location.pathname
  });
  console.log('dataLayer push for contact_button_click'); // 개발자 도구 콘솔 확인용
});

위 코드를 통해 사용자가 '문의하기' 버튼을 클릭하면 contact_button_click이라는 이벤트와 함께 button_text, page_path라는 파라미터가 dataLayer에 추가됩니다.

다음으로 GTM에서 이 contact_button_click 이벤트를 감지하고 GA4로 데이터를 보내도록 설정했습니다.

  1. 변수 설정: dataLayer에서 보낸 button_text와 page_path를 GA4 이벤트 파라미터로 사용하기 위해 '데이터 영역 변수'를 생성했습니다.

    • 변수 이름: dl_button_text, 데이터 영역 변수 이름: button_text
    • 변수 이름: dl_page_path, 데이터 영역 변수 이름: page_path

  2. 트리거 설정: '맞춤 이벤트' 유형으로 contact_button_click을 이벤트 이름으로 하는 트리거를 만들었습니다.

  3. 태그 설정:

    • 태그 유형: Google 애널리틱스: GA4 이벤트
    • 구성 태그: 이전에 설정한 GA4 구성 태그 선택 (G-XXXXXXXXXX 연결된 태그)
    • 이벤트 이름: contact_button_click (dataLayer에서 보낸 이벤트 이름과 정확히 일치해야 합니다!)
    • 이벤트 매개변수:
      • button_text : {{dl_button_text}}
      • page_path : {{dl_page_path}}
    • 트리거: 위에서 만든 contact_button_click 맞춤 이벤트 트리거 선택

이렇게 설정한 후, GTM의 '미리보기' 모드를 통해 실제로 버튼을 클릭했을 때 contact_button_click 태그가 정상적으로 실행되고 dataLayer 변수가 올바르게 전달되는지 꼼꼼히 확인했습니다.

GTM 미리보기 모드에서 태그가 성공적으로 실행되는 것을 확인한 뒤, GA4의 '디버그 뷰'로 이동하여 실시간으로 이벤트가 수신되는지, 파라미터는 정확하게 잡히는지 검증했습니다. 제가 설정한 contact_button_click 이벤트가 button_text와 page_path 파라미터와 함께 GA4로 들어오는 것을 확인했을 때의 쾌감이란!

이벤트가 GA4로 잘 들어오는 것을 확인한 후, GA4 관리 화면에서 이 contact_button_click 이벤트를 '전환'으로 표시했습니다. 이제 저희는 이벤트를 통해 하루 평균 150건의 '문의하기' 버튼 클릭이 발생하며, 이 중 실제 상담으로 이어지는 비율이 10% 수준이라는 중요한 데이터를 얻을 수 있게 되었습니다.

자주 겪는 문제와 해결법

GA4와 GTM을 연동하면서 제가 직접 겪었던 문제점들과 그 해결책을 공유합니다.

1. "GA4에 데이터가 안 들어와요!" (가장 흔한 문제)

문제 상황: GTM 컨테이너도 잘 설치했고, GA4 구성 태그도 설정했는데 GA4 실시간 보고서나 디버그 뷰에 아무런 데이터가 잡히지 않을 때가 있었습니다. 실제 에러 메시지/증상: GA4 Realtime report에 방문자 0명, DebugView에 이벤트 미표시. 해결법: * GTM 미리보기 모드 확인: 웹사이트에 GTM 컨테이너가 정확히 설치되었는지, 그리고 GA4 구성 태그가 'Firing' 상태인지 가장 먼저 확인해야 합니다. GTM 미리보기 모드에서 웹사이트에 접속했을 때 GTM 디버거 창이 뜨지 않는다면, 컨테이너 코드 삽입이 잘못되었을 가능성이 큽니다. * Google Tag Assistant Chrome 확장 프로그램: 이 도구를 사용하면 웹사이트에 설치된 모든 Google 태그(GA4, GTM 등)의 상태를 진단할 수 있습니다. GA4 측정 ID가 제대로 인식되는지, 에러는 없는지 빠르게 파악할 수 있습니다. 제 경우에는 gtag.js 코드가 중복으로 삽입되어 GTM 태그가 작동하지 않는 경우도 있었습니다. * 캐시 문제: 간혹 브라우저 캐시 때문에 변경사항이 바로 반영되지 않는 경우가 있습니다. 강제로 새로고침(Ctrl/Cmd + Shift + R)을 하거나 시크릿 모드에서 테스트해 보세요.

2. "이벤트 파라미터가 이상하게 나와요!"

문제 상황: 이벤트 자체는 GA4로 잘 들어오는데, button_text나 page_path 같은 커스텀 파라미터 값이 'undefined'로 표시되거나 전혀 다른 값이 들어올 때가 있었습니다. 실제 에러 메시지/증상: DebugView에서 이벤트는 보이지만 파라미터 값에 (not set) 또는 undefined 표시. 해결법: * dataLayer.push 스키마 일치 확인: 웹사이트 코드에서 dataLayer.push로 보내는 키 이름(예: button_text)과 GTM의 '데이터 영역 변수'에서 설정한 변수 이름이 대소문자까지 정확히 일치하는지 확인해야 합니다. 제가 한번은 웹사이트에서는 buttonText로 보냈는데 GTM에서는 button_text로 설정하여 파라미터가 누락된 적이 있습니다. * 변수 유형 확인: GTM에서 데이터 영역 변수를 생성할 때, '데이터 영역 변수 이름'을 정확하게 입력했는지 다시 한번 확인하세요. 또한, 변수 값이 배열이나 객체 형태로 들어올 때는 '데이터 영역 변수 버전'을 2 이상으로 설정해야 할 수도 있습니다. 대부분의 경우 기본 설정으로 충분하지만, 복잡한 데이터 구조에서는 주의가 필요합니다. * GTM 미리보기 모드의 dataLayer 탭: GTM 미리보기 모드에서 'dataLayer' 탭을 보면, 각 이벤트 발생 시 dataLayer에 어떤 객체가 push 되었는지 정확하게 확인할 수 있습니다. 여기서 원하는 파라미터가 제대로 들어오고 있는지 검토하면 문제의 원인을 파악하기 쉽습니다.

3. "전환 설정했는데 왜 전환으로 안 잡힐까요?"

문제 상황: GA4 관리 화면에서 특정 이벤트를 '전환으로 표시'했는데, 한참을 기다려도 전환 보고서에 데이터가 잡히지 않았습니다. 실제 에러 메시지/증상: GA4 전환 보고서에 해당 이벤트의 전환 수가 0으로 표시. 해결법: * 이벤트 이름의 정확한 일치: '전환으로 표시'할 이벤트 이름은 GA4에 실제로 수신되는 이벤트 이름과 한 글자도 틀리지 않고 정확히 일치해야 합니다. 대소문자도 구별됩니다. 제 경우에는 contact_button_click으로 보냈는데 GA4에서 Contact_Button_Click으로 변환해서 보거나 하는 식의 오타가 있었습니다. * 처리 지연 시간 고려: GA4는 데이터 처리 및 보고서 반영에 시간이 걸릴 수 있습니다 (최대 24~48시간). 실시간 보고서나 DebugView에서 이벤트가 정상적으로 수신되는 것을 확인했다면, 하루 정도는 여유를 가지고 기다려 보세요. 너무 조급해하지 않는 것이 중요합니다. * 필터링 확인: 혹시 GA4 속성에 잘못된 필터(데이터 제외)가 적용되어 있어 특정 이벤트가 제외되고 있는 것은 아닌지 확인해야 합니다.

GA4 데이터, 이제 어떻게 활용해야 할까요?

GA4 데이터를 수집하는 것만큼 중요한 것이 바로 활용입니다. 저는 디버그 뷰와 실시간 보고서를 통해 데이터 유효성을 검증하는 것을 넘어, 이제 '탐색 보고서' 기능을 적극적으로 활용하고 있습니다. '경로 탐색' 보고서를 통해 사용자들이 저희 웹사이트에서 어떤 페이지를 거쳐 '서비스 신청 완료'까지 도달하는지 시각적으로 확인하면서 UX 개선 포인트를 찾고 있습니다. 예를 들어, 특정 단계에서 이탈율이 20% 이상 높다면, 해당 페이지의 콘텐츠나 CTA(Call-to-Action) 버튼을 개선하는 식이죠.

또한, '세그먼트' 기능을 활용해 "문의하기" 버튼을 클릭한 사용자 그룹과 그렇지 않은 그룹의 행동 패턴을 비교 분석하고 있습니다. 이 데이터를 기반으로 마케팅팀에서는 특정 그룹을 대상으로 한 리타겟팅 캠페인을 기획하기도 했습니다. 초기에는 그저 숫자에 불과했던 데이터가 이제는 실제 비즈니스 의사결정에 중요한 인사이트를 제공하는 보물이 된 셈입니다.

핵심 요약

  • GA4 설치는 gtag.js보다 GTM을 활용하는 것이 유연성과 유지보수 측면에서 압도적으로 유리합니다.
  • 핵심 전환 지표 트래킹은 dataLayer.push를 통해 이벤트와 파라미터를 보내고, GTM에서 이를 받아 GA4 이벤트 태그로 설정하는 것이 표준입니다.
  • 설치 후에는 GTM 미리보기, Google Tag Assistant, GA4 디버그 뷰를 통해 데이터 유효성을 꼼꼼히 검증하는 과정이 필수적입니다.

FAQ

Q1: GTM을 사용하면 웹사이트 속도가 느려지지 않나요? A1: 네, GTM 컨테이너 로드 시간이 추가되긴 하지만, 일반적으로 최적화된 GTM 설정과 웹사이트 성능이라면 사용자 경험에 체감될 정도의 큰 영향은 없습니다. 오히려 다양한 스크립트를 직접 삽입하는 것보다 GTM으로 통합 관리하는 것이 더 효율적일 수 있습니다.

Q2: 기존 UA 데이터를 GA4로 가져올 수 있나요? A2: 아니요, UA와 GA4는 데이터 측정 모델 자체가 다르기 때문에 기존 UA의 데이터를 GA4로 직접 마이그레이션할 수는 없습니다. GA4는 새로운 속성으로 처음부터 데이터를 쌓아나가야 합니다.

Q3: GA4 전환 설정은 이벤트 이름만으로 가능한가요? 특정 파라미터 값으로도 전환을 설정할 수 있나요? A3: 네, GA4는 기본적으로 이벤트 이름을 '전환으로 표시'합니다. 하지만 GTM에서 GA4 이벤트 태그를 설정할 때, event_name과 함께 특정 파라미터 값(예: event_name이 purchase이고 currency가 KRW인 경우)을 조건으로 하는 별도의 이벤트를 만들고, 그 이벤트를 전환으로 설정하는 방식으로 복잡한 전환 조건을 만들 수 있습니다.

GA4는 처음에는 복잡하게 느껴질 수 있지만, 한번 제대로 설치하고 핵심 지표를 트래킹하기 시작하면 비즈니스 성장에 큰 도움을 주는 강력한 도구입니다. 이 글이 여러분의 GA4 여정에 작은 이정표가 되기를 바랍니다. 궁금한 점이나 더 깊이 논의하고 싶은 부분이 있다면 언제든 댓글로 남겨주세요! 다음에는 GA4 탐색 보고서를 활용한 데이터 분석 심화편으로 돌아오겠습니다.

IT와 테크 지식을 공부하고 기록하는 루카(Luka)였습니다. 감사합니다!