[TIL 24] GTM에서 새로운 이벤트 설치 후 GA에서 확인하는 방법

어쩌다보니 회사 내에서 GTM을 세팅해야 했다.

 

GTM을 활용해 본 적은 없고 개념만 알고 있었지

GA도 대시보드 보는 방법에 대해서 대략 알고 있는 정도였다.

 

탐색 보고서에서 내가 보고 싶은 것들을 조합해서 구성할 수 있는 정도?

즉 거의 읽을 수 있는 수준이었지 잘 다루는 수준도 아니었다.

 

그러던 기회에 GA 내의 데이터 정합성 체크와 UXUI 개편에 따른 트래킹이 필요한 상황에서

GTM을 활용해 보아야 하는 상황들이 생겼다. 

 

이 기회에 GTM 에 대해서 학습하고 잘 활용하는 것을 목표로 삼기로 했다.

GTM에 대해서 간략히 알아보고 예시를 들어 설치 방법에 대해 남겨 보고자 한다.

특히, 주의해야 하는 점(내가 실수한 부분)에 대해서도 함께 기록해보려 한다.

---

 

웹 페이지 신규 기능(예: 버튼 배너)에 대해 GA 트래킹을 위한 GTM 설정 프로세스

1. GTM 구성 요소 및 설치 프로세스

🔧 GTM을 구성하는 핵심 3요소

GTM에는 3가지 요소가 있고 이미 생성된 것들을 쓸 수도 때에 따라서는 생성을 해야 할 수도 있다. 

요소	설명	예시	역할
Tag (태그)	실행할 코드 조각 (스크립트)	GA 이벤트 전송, Meta Pixel, Naver 전환 스크립트	행동 결과
Trigger (트리거)	태그를 실행시킬 조건	특정 페이지 진입, 버튼 클릭 시	실행 조건
Variable (변수)	태그나 트리거에서 활용할 값	클릭된 요소의 ID, URL 파라미터, 사용자 정보	조건 제어, 동적 전송

---

🛠 GTM 설치 프로세스

단계	설명
1. GTM 계정 생성	tagmanager.google.com에서 계정/컨테이너 생성
2. GTM 코드 삽입	제공된 <script>를 자사몰 head, body에 삽입 (모든 페이지 공통 포함)
3. GA4 연결 (선택)	GA4 Configuration 태그 설정 (모든 페이지 로드 시 실행)
4. 태그 설정	수집할 행동에 맞는 이벤트 또는 추적 스크립트 설정 ✏️ 여기서 태그 구성 시, 측정 ID 값은 반드시 GA4 아이디를 넣어주어야 한다.
5. 트리거 설정	이벤트 발생 조건 정의 (예: 클릭, 페이지 URL, 커스텀 이벤트 등)
6. 변수 활용	동적 데이터 (예: 클릭한 버튼 이름, ID 등) 전달에 활용
7. Preview & Debug	GTM Preview 모드로 정상 작동 여부 확인
8. 게시(Publish)	최종 설정 완료 후 배포

---

2. 신규 기능: "버튼 배너" 트래킹 설정 예시

예: 페이지 우측 하단에 "이벤트 바로가기" 버튼이 생김

→ 사용자가 버튼을 클릭했을 때 GA4에서 이벤트가 수집되도록 설정하는 예시

---

🎯 목표

GTM을 통해 banner_click이라는 GA4 이벤트 수집

---

⚙️ GTM 설정 단계별

🔹 1) 해당 버튼 요소 확인 (개발자 도구 활용)

예: 버튼 HTML 구조가 다음과 같다고 가정

html
복사편집
<button class="banner" id="PromoBtn">이벤트 바로가기</button>

---

🔹 2) 트리거 설정

• 유형: 클릭 → 모든 요소 클릭(All Elements)
• 조건:
  • Click ID = PromoBtn
  • 또는 Click Classes에 banner 포함
• 트리거 이름: Button 클릭

✏️ "트리거"는 웹페이지 내에서의 행동 기반이기 때문에 웹 상에서 "이벤트"로 인지할 만한 것으로 설정해주어야 한다.

---

🔹 3) 변수 설정 (최초 1회만 하면 됨)

• 사용자가 클릭한 요소의 정보를 수집하려면 변수 활성화 필요

GTM > 변수 > 기본 제공 변수 활성화

• Click ID
• Click Classes
• Click Text
• Click URL

이걸 해줘야 트리거 조건에서 "Click ID" 같은 항목을 사용할 수 있다. 

---

🔹 4) 태그 설정

• 태그 유형: Google Analytics: GA4 이벤트
• 이벤트 이름: banner_click
• 구성 태그: 기존 GA4 설정 태그 선택
• 매개변수 예시:
  • button_text: {{Click Text}}
  • page_location: {{Page URL}}

---

🔹 5) 트리거 연결

• 위에서 만든 Button 클릭 트리거를 태그에 연결

---

🔹 6) 미리보기 → 게시

1. GTM 상단의 "미리보기" 클릭
2. 자사몰에 들어가서 버튼을 눌러 이벤트 발생 확인
3. GA4 실시간 보고서에서 mini_banner_click 이벤트 발생 여부 확인
4. 이상 없으면 게시(Publish) 진행

---

📊 GA4에서의 분석 예시

GA4 탐색형 보고서 또는 실시간 이벤트 탭에서 아래와 같이 확인 가능

• 이벤트: mini_banner_click
• 포함 매개변수:
  • button_text: “이벤트 바로가기”
  • page_location: 클릭이 발생한 URL

---

✅ 마무리 정리

항목	요약
GTM 핵심 요소	Tag (행동 정의), Trigger (조건), Variable (조건/값 수집 보조)
설치 절차	스크립트 삽입 → 태그-트리거 설정 → 미리보기 → 게시
신규 기능 트래킹 예시	미니 버튼 클릭 이벤트를 GA4에 mini_banner_click으로 수집
중요한 포인트	실제 클릭 대상 요소의 ID/클래스 확인, 트리거 조건 정밀하게 설정

 

가장 중요한 것은 웹 페이지에서의 어떤 행위를 어떤 기준에서 정의해서 볼 것인지가 중요하다.

 

예를 들어 페이지의 특정 구간에 스크롤하면서 2번 본 것도 데이터 체크에 포함할 지?

아니면 1번만 본 unique한 사람 수로 할 것인 지에 따라 해석하는 게 달라질 수 있다.

 

즉, 우리가 의도한 행위를 보려면 이벤트 자체를 명확히 정의해서 보는 게 필요하다는 것!

 

✏️ 느꼈던 점 요약
- 하나씩 하다 보니 또 달라지는 점들이 있다. 더 많이 고민하고 연습하고 업무에 적용해봐야겠다고 느꼈다.
- 늘 업무는 이론 상으로 아는 것보다 실제로 해보면 또 다른 부분들이 있는 것 같다.

💪🏻 시도할 점
- GTM은 도구일 뿐 자사몰에서의 고객 행동을 어떻게 정의할까를 더 많이 고민해보기