안녕하세요.
퍼포먼스 마케터 permaster 입니다.
이번 포스팅에서는 구글 태그매니저(GTM)의 정의, 구조 그리고 연동 방법까지 다뤄보고자 합니다.
그리고 페이지뷰(PageView) 중복 집계를 막기 위해 GA4 코드를 지우고 GTM을 연동하는 과정을 포스팅에 담았습니다.
📢 이전 포스팅 참고 📢
2025.07.20 - [데이터 분석 및 트래킹/구글 애널리틱스(GA4)] - 티스토리 구글 애널리틱스(GA4) 연동하는 방법 - 2025 최신판
티스토리 구글 애널리틱스(GA4) 연동하는 방법 - 2025 최신판
안녕하세요.퍼포먼스 마케터 permater 입니다. 오늘 포스팅에서는 웹/앱 데이터를 통합하여 분석할 수 있는 '구글 애널리틱스(GA4)'에 대해 다뤄보고자 합니다. 목차1. 구글 애널리틱스(GA4)란?2. 사전
permaster.tistory.com
2025.07.23 - [데이터 분석 및 트래킹/기타] - [GA4 실전 가이드] 페이지뷰 중복 집계 원인과 해결 방법 완벽 정리
[GA4 실전 가이드] 페이지뷰 중복 집계 원인과 해결 방법 완벽 정리
안녕하세요.퍼포먼스 마케터 permaster입니다. 이번 포스팅에서는 구글 애널리틱스(GA4)에서 데이터 확인 중 페이지뷰(Page View) 이벤트가 중복 집계되는 원인과 해결 방법에 대해 정리해보고자 합니
permaster.tistory.com
목차
1. 구글 태그 매니저(GTM) 정의와 구조
2. 티스토리 - 구글 태그 매니저(GTM) 연동 방법
2-1. GA4 코드 삭제 방법
2-2. GTM 컨테이너 생성
2-3. 티스토리에 GTM 코드 삽입
2-4. GTM에서 GA4 태그 설정
3. 작동 확인
1. GTM 정의와 구조
Google Tag Manager(GTM)는 웹 사이트에 다양한 태그(tag)를 효율적으로 관리할 수 있게 도와주는 태그 관리 시스템(Tag Management System)입니다. 간단히 말해, 웹사이트 코드 수정 없이도 마케팅 및 분석 도구(GA4, 메타 픽셀 등)를 삽입하고 관리할 수 있는 플랫폼이죠.
GTM은 태그(Tag) / 트리거(Trigger) / 변수(Variable) 총 3가지 핵심 구성요소로 이루어져 있습니다.
1️⃣ 태그 (Tag)
- 실행하고자 하는 기능 코드
- 예: GA4 추적 코드, Meta Pixel, 이벤트 전환 태그 등
2️⃣ 트리거 (Trigger)
- 태그가 언제 실행될지 조건을 지정
- 예: 모든 페이지에서 실행, 특정 버튼 클릭 시 실행, 폼 제출 시 실행 등
3️⃣ 변수 (Variable)
- 트리거와 태그에서 사용하는 동적 값
- 예: 클릭한 버튼의 ID, 페이지 URL, 사용자 정의 파라미터 등
GTM의 핵심 구성요소 3가지에 대해 읽고 충분히 이해하셨겠지만, 정작 글을 작성하는 본인은 처음에 이해하는데 오래 걸렸어서 '샷건'에 비유해서 설명드릴게요. (보다 직관적으로 이해하실 수 있으실 겁니다.)
🔫 GTM 구성요소를 '총'에 비유하면?
| GTM 구성요소 | 총에 비유하면 | 설명 |
| 태그(Tag) | 총알 | 실제로 발사되어 실행되는 코드 (예: GA4 전환 전송, 픽셀 실행 등) |
| 트리거(Trigger) | 방아쇠 | 언제 총알을 쏠지 결정하는 조건 (예: 페이지 열렸을 때, 버튼 클릭 시 등) |
| 변수(Variable) | 총알 안의 구슬 (쇠구슬) |
태그에 포함되어 함께 발사되는 데이터 정보 (예: 클릭한 버튼 ID, 사용자 정보 등) |
GTM 동작 흐름을 정리하면 다음과 같습니다.
| GTM 동작 흐름 | 총에 비유하면 |
| 사용자가 "문의하기 버튼"을 클릭했다면: 1. 트리거 감지 → "이 버튼 클릭 시 태그 발사" 조건 충족 2. 변수 평가 → 클릭 ID, 사용자 정보 등 수집 3. 태그 실행 → GA4로 'form_submit' 이벤트로 전송 |
트리거가 방아쇠를 당김 → 총알 속 쇠구슬이 준비됨 → 태그가 총알처럼 발사됨(GA4나 Meta로 이벤트 전송) |
2. 티스토리 - 구글 태그 매니저(GTM) 연동 방법
기존 GA4 코드를 제거하기 전, 기존에 연동한 GA4 코드를 사용하면 되는데 굳이 구글 태그매니저(GTM) 코드로 바꾸는 이유가 뭘까요?
이유는 GA4 코드는 단순한 데이터 수집만 가능하지만, GTM을 사용하면 페이지뷰는 물론, 버튼클릭, 폼 제출 등 다양한 사용자 행동까지 유연하게 추적할 수 있습니다. 또한, 직접 HTML을 수정하지 않고도 태그를 실시간으로 관리할 수 있어 훨씬 효율적입니다.
즉, GTM은 'GA4를 더 똑똑하게 쓸 수 있게 해주는 도구'라고 할 수 있죠.
| 항목 | GA4 코드 삽입 | GTM 사용 |
| 유지보수 | 코드 수정하기 위해 HTML 직접 수정 | GTM 대시보드에서 바로 수정 가능 |
| 여러 태그 관리 | 코드 중복 위험, 비효율적 | GA4, 메타픽셀, 이벤트 추적 등 통합 관리 |
| 이벤트 추적 | 직접 코딩 필요 (복잡) | 클릭, 폼 제출 등 GUI로 설정 가능 |
| 유연성 | 정적인 코드만 가능 | 조건부 로딩, A/B 테스트, 커스텀 전환 가능 |
* GUI는 'Graphical User Interface(그래픽 사용자 인터페이스)'의 약자로, 사용자가 코드를 입력하지 않고 버튼 클릭, 드래그 앤 드롭 등 그래픽 화면을 통해 조작할 수 있는 인터페이스를 의미합니다.
GTM 코드 활용 시 더 원활한 업무를 진행할 수 있기 때문에, GA4 코드를 지우고 GTM 코드를 삽입하겠습니다.
2-1. GA4 코드 삭제 방법
1. 티스토리 관리 → 스킨 편집 → 'html 편집' 클릭
2. <head> 안에 삽입되어 있는 아래 코드 형태를 삭제
2-2. GTM 컨테이너 생성
1. https://tagmanager.google.com/ 접속
2. 컨테이너 생성
- 계정 이름 : 자유롭게 기입 (ex.permaster_tistory)
- 컨테이너 이름 : 블로그 주소 또는 티스토리
- 대상 플랫폼 : 웹(Web) 선택 (GTM 사용처에 따라 상이)
3. 생성 완료 후 설치 코드 2개 제공됨
2-3. 티스토리에 GTM 코드 삽입
1. 티스토리 관리 → 스킨 편집 → 'html 편집' 클릭
2. <head> 안에 첫 번째 코드 삽입
3. <body> 안에 두 번째 코드 삽입
여기까지 하시면 기본적인 티스토리와 구글 태그 매니저(GTM) 연동은 끝입니다.
하지만 기존에 설치했던 GA4 코드와는 다르게 GTM 코드 삽입 시 별도로 해줘야 하는 절차가 있는데요,
바로 페이지뷰(PageView) 설정을 해줘야 합니다.
| 항목 | GA4 기본 설치 | GTM을 통한 GA4 설치 |
| 페이지뷰 자동 수집 | ✅자동 (기본 설정 포함) | ❌ 수동 설정 필요 |
| 추적 시작 조건 | GA4 스크립트 삽입만 하면 OK | GTM 태그 + 트리거 설정 필요 |
| 사용자 설정 자유도 | 낮음 (기본 수집 위주) | 높음 (이벤트 구성 자유로움) |
2-4. GTM에서 GA4 태그 설정
1. GTM 대시보드 → 태그 → '새로 만들기' 클릭
2. 태그 구성 → 태그 유형 선택 - 'Google 태그' 클릭
3. 태그 구성 - '태그 ID'에 GA4 '측정 ID' 삽입
* 구글 애널리틱스 → 관리 → 데이터 수집 및 수정 - '데이터 스트림' 클릭 시 측정 ID 확인 가능
4. 트리거 - 'All Pages'(모든 페이지뷰 수집용) 설정 후 저장
* 측정 ID의 경우 자주 사용하는 값이기 때문에 변수 세팅을 권장 합니다.
* 세팅 방법 : 변수 → 사용자 정의 변수 '새로 만들기' 클릭 → 변수 유형 선택 - 유틸리티 - '상수' 클릭 후 측정 ID 기입
해당 세팅까지 완료되면 티스토리에서 페이지뷰(PageView) 발생 시 GA4에서 데이터 확인 수 있는데,
데이터 분석의 가장 중요한 것은 '검증'이라고 생각합니다. 즉, 제대로 데이터가 잡히는지 TEST가 필요한 것이죠.
3. 작동 확인
구글 태그 매니저(GTM)에서는 친절하게도 '미리보기' 서비스를 제공합니다.
이 서비스는 GTM 태그가 실제로 어떻게 작동하는지 실시간으로 확인할 수 있으며, 디버그(Debug) 모드라고 볼 수 있습니다.
* 디버그(Debug)란, 개발자가 코드나 설정이 제대로 작동하는지 점검하고 문제를 수정하는 과정을 의미
1. '미리보기'를 클릭 후 실제 추척할 페이지 주소를 입력
2. '연결'을 클릭하면 테스트 페이지가 새 탭으로 열리고, 좌측에는 Tag Assistant 디버깅 창이 나타남
* 구글 태그 매니저(GTM) 세팅 완료 시 까먹지 않고 '제출' 버튼을 눌러 게시하시길 바랍니다.
* 미제출 시 GTM 세팅 내역이 적용되지 않으며, 불이행 시 이에 따른 책임은 전적으로 본인에게 있습니다.
사용자 설정 자유도가 높은 GTM 연동을 통해 GA4를 직접 삽입하지 않아도 다양한 전환 데이터를 유연하게 추적할 수 있습니다.
웹사이트에 GTM 연동하며 어려웠던 점이나 추가 궁금한 점이 있다면 댓글로 남겨주세요.
최대한 빠르고 정확하게 답변드리겠습니다.