close
프로필 배경
프로필 로고

산시기

카테고리 없음 · 2026. 3. 29. fullscreen 넓게보기

GA4 완벽 가이드 3편 - GTM으로 GA4 설치하기, 코드 안 건드리고 하는 법

 

GA4 학습 블로그 시리즈 [3/20]
GTM의 본질은 "코드 안 건드리고 태그를 관리하는 리모컨"임. 이거 없이 GA4 쓰는 건 비효율의 극치임.

GTM을 왜 써야 하는지부터 알아야 함

2편에서 GA4 계정과 데이터 스트림을 만들었지만, 아직 웹사이트에서 데이터가 수집되지 않고 있음. GA4를 실제로 작동시키려면 웹사이트에 추적 코드를 설치해야 하는데, 이걸 하는 방법이 두 가지 있음.

 

 

 

방법 1: 웹사이트 HTML에 GA4 코드를 직접 넣는 것
방법 2: GTM(Google Tag Manager)을 통해 넣는 것

 

 

 

결론부터 말하면, 무조건 방법 2를 써야 함. 이유가 명확함!

 

직접 설치하면 벌어지는 일

  • GA4 코드를 바꿀 때마다 개발자한테 요청해야 함
  • 구글 광고 픽셀, 메타 픽셀, 카카오 픽셀 등 추가할 때마다 또 요청해야 함
  • 코드가 여기저기 흩어져서 뭐가 설치되어 있는지 파악이 안 됨
  • 실수로 코드를 잘못 건드리면 사이트가 깨질 수도 있음
  •  

GTM을 쓰면 달라지는 것

 

  • 웹사이트에 GTM 코드 한 번만 설치하면 끝임
  • 이후 모든 태그(GA4, 광고 픽셀 등)는 GTM 웹 화면에서 관리함
  • 개발자 도움 없이 마케터가 직접 태그를 추가/수정/삭제할 수 있음
  • 버전 관리가 되니까 실수해도 이전 상태로 되돌릴 수 있음
  • 미리보기 기능으로 실제 배포 전에 테스트할 수 있음

비유하자면, 직접 설치는 "TV 채널 바꿀 때마다 TV 뒤에 가서 선을 뽑고 꽂는 것"이고, GTM은 "리모컨으로 채널 바꾸는 것"임. 한번 리모컨(GTM)을 세팅하면, 그 뒤로는 클릭 몇 번으로 뭐든 할 수 있음.

 

GTM의 3요소: 태그, 트리거, 변수

GTM을 이해하려면 이 세 가지 개념의 관계를 알아야 함. 이게 GTM의 전부임.

!

태그 (Tag)

  • 역할: 무엇을 실행할 것인가
  • 쉽게 말하면: "GA4한테 데이터를 보내라"

트리거 (Trigger)

  • 역할: 언제 실행할 것인가
  • 쉽게 말하면: "사용자가 페이지를 열 때"

변수 (Variable)

  • 역할: 어떤 정보를 담을 것인가
  • 쉽게 말하면: "그때 페이지 URL이 뭔지"

이 세 개가 합쳐지면 하나의 완전한 명령이 됨:

"사용자가 모든 페이지를 볼 때(트리거), 페이지 URL 정보(변수)와 함께, GA4로 데이터를 보내라(태그)"

이 구조만 이해하면 GTM에서 어떤 추적이든 설정할 수 있음. 나중에 "버튼 클릭 추적하고 싶다"고 하면:

  • 태그: GA4 이벤트 전송
  • 트리거: 특정 버튼 클릭 시
  • 변수: 클릭한 버튼의 텍스트

이런 식으로 조합하면 끝임. 레고 블록 조립하는 것과 비슷함.

---

 

실습 1: GTM 계정 및 컨테이너 만들기

Step 1: GTM 접속

  1. tagmanager.google.com에 접속
  2. 구글 계정으로 로그인 (GA4와 같은 계정을 쓰는 걸 추천함)

Step 2: 계정 만들기

  1. "계정 만들기" 클릭
  2. 계정 이름: 회사 또는 프로젝트 이름 (예: "내 블로그")
  3. 국가: "대한민국" 선택

Step 3: 컨테이너 설정

  1. 컨테이너 이름: 웹사이트 도메인 (예: "www.myblog.com")
  2. 대상 플랫폼: "웹" 선택
  3. "만들기" 클릭
  4. 서비스 약관 동의

컨테이너가 뭐냐면, 태그들이 담기는 "상자"라고 보면 됨. 웹사이트 하나당 컨테이너 하나를 만드는 게 일반적임.

Step 4: GTM 설치 코드 확인

컨테이너가 생성되면 GTM 설치 코드 2개가 팝업으로 나옴.

코드 1 - <head> 태그에 넣을 것:

<!-- 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 -->

코드 2 - <body> 태그 바로 뒤에 넣을 것:

<!-- 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 부분이 본인의 고유 컨테이너 ID임. 이 코드는 나중에 관리 > 컨테이너 설치에서 다시 확인할 수 있으니 당장 못 넣어도 괜찮음.

 

실습 2: 웹사이트에 GTM 코드 넣기

GTM 코드를 웹사이트에 넣는 건 플랫폼마다 방법이 다름.

직접 HTML 수정하는 경우

웹사이트의 모든 페이지에 공통으로 포함되는 HTML 파일(보통 header.html이나 레이아웃 파일)을 열고:

  1. 코드 1을 <head> 태그 안, 가능한 높은 위치에 넣음
  2. 코드 2를 <body> 태그 바로 뒤에 넣음
<!DOCTYPE html>
<html>
<head>
    <!-- 가능한 높은 위치에! -->
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->
    <title>내 웹사이트</title>
</head>
<body>
    <!-- body 바로 뒤에! -->
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="..."></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    ... 페이지 내용 ...
</body>
</html>

왜 "가능한 높은 위치"에 넣으라는 건지 궁금할 수 있음. GTM 코드가 늦게 로드되면 사용자의 초기 행동(첫 페이지뷰 등)을 놓칠 수 있기 때문임. 빨리 로드될수록 더 정확한 데이터를 수집함.

주요 플랫폼별 설치 방법

  • 워드프레스: 플러그인 "GTM4WP" 또는 "Insert Headers and Footers" 사용
  • 카페24: 디자인 > HTML 편집 > layout > head 영역
  • Shopify: 온라인 스토어 > 테마 > 코드 편집 > theme.liquid
  • 네이버 스마트스토어: 스토어 관리 > 노출관리 > 외부분석도구 연동
  • 티스토리: 관리 > 스킨 편집 > HTML > head 영역

실습 3: GTM에서 GA4 태그 만들기

GTM 코드를 웹사이트에 넣었으면, 이제 GTM 안에서 GA4 구성 태그를 만들어야 함. 여기가 핵심임.

리모컨(GTM)은 설치했는데, 아직 "GA4로 데이터 보내라"는 명령(태그)을 안 만든 상태임. 이제 그걸 만듦.

Step 1: 새 태그 만들기

  1. GTM 대시보드 > 왼쪽 메뉴에서 "태그" 클릭
  2. "새로 만들기" 클릭
  3. 태그 이름: "GA4 - 구성" 이라고 입력 (나중에 태그가 많아지면 이름으로 구분해야 하니까 명확하게 쓰는 게 좋음)

Step 2: 태그 유형 선택

  1. "태그 구성" 영역을 클릭
  2. 태그 유형 목록에서 "Google 태그" 선택
  3. 태그 ID 필드에 GA4 측정 ID 입력: G-XXXXXXXXXX
    • 이게 2편에서 데이터 스트림 만들 때 발급받은 그 ID임
    • 기억 안 나면 GA4 관리 > 데이터 스트림 > 웹 스트림에서 확인 가능함

Step 3: 트리거 설정

  1. "트리거" 영역을 클릭
  2. "All Pages (모든 페이지)" 선택

이게 뭘 의미하냐면, "사용자가 어떤 페이지를 방문하든 GA4 태그를 실행해라"라는 뜻임. GA4 구성 태그는 모든 페이지에서 실행되어야 데이터가 빠짐없이 수집됨.

Step 4: 저장

"저장" 클릭하면 태그 생성 완료임.

실습 4: 미리보기로 테스트하기

절대 바로 게시하면 안 됨. 먼저 미리보기(Preview)로 제대로 작동하는지 확인해야 함.

Step 1: 미리보기 모드 시작

  1. GTM 상단 오른쪽의 "미리보기" 버튼 클릭
  2. 테스트할 웹사이트 URL 입력
  3. "Connect" 클릭
  4. 새 탭에서 웹사이트가 열리고, GTM 디버그 창이 함께 뜸

Step 2: 태그 실행 확인

Tag Assistant 화면에서 확인할 것:

  • Tags Fired (실행된 태그) 섹션에 "GA4 - 구성" 태그가 보이면 성공임
  • Tags Not Fired 섹션에 있으면 트리거 설정을 다시 확인해야 함

Step 3: GA4 실시간 보고서에서 확인

이건 이중 확인하는 것임. GTM에서 태그가 실행되었다고 해도 GA4에 데이터가 실제로 도착했는지 한 번 더 확인하는 게 좋음.

  1. analytics.google.com 접속
  2. 왼쪽 메뉴에서 "보고서" > "실시간" 클릭
  3. "지난 30분간의 사용자" 수가 1 이상이면 데이터가 정상적으로 수집되고 있는 것임

데이터가 실시간 보고서에 나타나기까지 몇 초에서 1분 정도 걸릴 수 있음. 안 보인다고 바로 당황하지 말고 잠깐 기다려봄.

실습 5: GTM 게시(Publish)

테스트가 끝났으면 실제로 배포함.

  1. GTM 대시보드 오른쪽 상단의 "제출" 클릭
  2. 버전 이름: "GA4 초기 설치" (알아보기 쉬운 이름)
  3. 버전 설명: "GA4 구성 태그 추가 - 모든 페이지" (변경 내용 기록)
  4. "게시" 클릭

게시하지 않으면 변경사항이 실제 웹사이트에 반영되지 않음. 미리보기는 본인만 보는 테스트 모드임. 반드시 게시까지 해야 모든 방문자에게 적용됨.

자주 발생하는 문제와 해결법

"실시간 보고서에 데이터가 안 보임"

  • GTM을 "게시"했는지 확인. 미리보기만으로는 본인 외에 다른 사용자에게 적용 안 됨
  • 측정 ID가 정확한지 확인. G-로 시작하는 게 맞음. GTM-으로 시작하는 건 GTM 컨테이너 ID이니 헷갈리면 안 됨
  • 광고 차단기(AdBlock)가 GA4 스크립트를 차단하고 있을 수 있음. 잠시 꺼보면 됨

"GTM 미리보기가 연결이 안 됨"

  • 팝업 차단기가 GTM 디버그 창을 막고 있을 수 있음. 팝업 허용 처리하면 됨
  • 브라우저 캐시를 지우고 다시 시도해볼 것

"GA4 구성 태그가 Tags Not Fired에 있음"

  • 트리거가 "All Pages"로 되어 있는지 확인
  • 태그 ID(측정 ID)가 올바르게 입력되었는지 확인. 오타 하나만 있어도 안 됨

이번 편 핵심 정리

  1. GTM = 코드 안 건드리는 리모컨 - 웹사이트에 GTM 한 번만 설치하면, 그 뒤로는 GTM 화면에서 모든 태그를 관리함
  2. 태그 + 트리거 + 변수 - 이 세 가지의 조합이 GTM의 전부임. "뭘 할지(태그) + 언제 할지(트리거) + 어떤 정보를(변수)"
  3. 미리보기 > 테스트 > 게시 - 이 순서를 반드시 지켜야 함. 테스트 없이 게시하면 사고남

이제 웹사이트에서 GA4가 데이터를 수집하기 시작함. 다음 4편에서는 수집된 데이터를 확인하고 분석하는 GA4 인터페이스 사용법을 다룸.

이전 편: GA4 완벽 가이드 2편 - GA4 계정 생성과 데이터 스트림 설정
다음 편: GA4 완벽 가이드 4편 - GA4 인터페이스 완전 정복

 

 

더 많은 자료는 jit.camp로 

티스토리툴바