티스토리에 gtm이용해서 ga4 설치하기

실무 적용

티스토리에 gtm이용해서 ga4 설치하기

허진 2026. 5. 1. 00:04

마케팅을 공부하다 보면 "GA4를 써야 한다"는 말을 자주 듣는다.

그런데 막상 설치하려고 보면 GTM이 뭔지, GA4가 뭔지, 둘의 차이가 뭔지부터 헷갈린다.

이 글에서는 GA4와 GTM이 무엇인지 간단히 짚고,
티스토리 블로그에 직접 연결하는 전 과정을 단계별로 정리한다.

GA4와 GTM, 뭐가 다른가

둘 다 Google 제품이라 헷갈리기 쉽지만 역할이 완전히 다르다.

구분	GA4	GTM
역할	데이터 분석 툴	데이터 트래킹 툴
하는 일	수집된 데이터를 분석·시각화	추적 코드(태그)를 웹에 심고 관리
관점	"무엇이 일어났는지" 분석	"무엇이 일어났는지" 추적·기록

쉽게 말하면 GTM은 GA4를 포함한 각종 추적 코드를 웹사이트에 붙이는 관리 도구이고, GA4는 그렇게 수집된 데이터를 분석하는 도구다.
결론적으로 GTM을 통해 GA4를 사용하는 것이 실무 표준이다.

GTM을 사용하는 이유

웹사이트에 GA4 코드를 직접 삽입해도 데이터를 수집할 수 있다.
그런데 왜 굳이 GTM을 쓰는 걸까?

1. 소스코드 수정 없이 태그 관리가 가능하다
GA4 추적 태그를 웹사이트 코드에 직접 건드리지 않고, GTM 인터페이스에서 추가·수정·삭제할 수 있다.

2. 커스텀 이벤트 설치가 자유롭다
GA4에서도 이벤트를 만들 수 있지만, GTM을 통하면 JavaScript/CSS를 활용한 정교한 이벤트 설치가 가능하다.

3. 버전 관리와 디버깅이 편하다
게시 버전별로 히스토리가 남고, 미리보기(Preview) 모드로 실제 적용 전에 테스트할 수 있다.

핵심: 티스토리에 GTM 코드를 삽입하면, 이후 모든 태그는 GTM에서 관리한다. 코드를 매번 수정할 필요가 없다.

데이터 흐름 전체 구조

실습 전에 전체 구조를 한 번 머릿속에 그려두면 이해가 훨씬 쉽다.

[사용자가 티스토리 블로그 방문]
        ↓
[티스토리 HTML에 삽입된 GTM 코드 실행]
        ↓
[GTM 내 Tag가 GA4로 데이터 전송]
        ↓
[GA4 보고서에서 사용자 행동 데이터 확인]

STEP 1. GA4 계정 및 속성 만들기

Google Analytics에 접속한다.

계정 만들기

1. 측정 시작 버튼 클릭 (처음 접속 시) 또는 좌측 하단 관리(⚙) → 계정 만들기 클릭

2. 계정 이름 입력 (예: 내 블로그)

3. 데이터 공유 설정은 기본값 유지 후 다음 클릭

속성 만들기

속성 이름 입력 (예: 내 티스토리 블로그)
보고 시간대: 대한민국, 통화: 대한민국 원(KRW) 선택
다음 클릭

4. 비즈니스 세부정보(업종, 규모) 입력 후 다음 클릭

5. 비즈니스 목표 선택 후 만들기 클릭 → 약관 동의

데이터 스트림 추가

플랫폼 선택 화면에서 웹 선택

2. 웹사이트 URL에 내 티스토리 주소 입력 (예: https://myblog.tistory.com)

3. 스트림 이름 입력 후 스트림 만들기 클릭

4. 측정 ID (G-XXXXXXXXXX) 복사해서 별도로 저장해둔다

STEP 2. GTM 계정 및 컨테이너 만들기

Google Tag Manager에 접속한다.

계정 만들기 클릭
계정 이름 입력 (예: 내 블로그)
컨테이너 이름 입력 (예: 티스토리)
타겟 플랫폼: 웹 선택
만들기 클릭 → 서비스 약관 동의

코드 스니펫 팝업이 나타난다. 이 화면을 닫지 말고 다음 단계에서 바로 사용한다.

STEP 3. 티스토리에 GTM 코드 삽입하기

⚠️ 주의: GTM 코드를 단순히 개발자 도구에서 붙여넣으면 적용되지 않는다. 반드시 아래 경로로 접근해야 한다.

티스토리 블로그 관리자 페이지로 이동한다.

꾸미기 → 스킨 편집 클릭

2. 우측 상단 html 편집 클릭

3. HTML 탭에서 <head> 태그를 찾는다 (Ctrl+F로 검색)

4. <head> 바로 다음 줄에 GTM 코드 스니펫의 첫 번째 코드 (스크립트 코드) 붙여넣기

html

<!-- 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-XXXXXXXX');</script>
<!-- End Google Tag Manager -->

5. <body> 태그를 찾는다

6. <body> 바로 다음 줄에 GTM 코드 스니펫의 두 번째 코드 (noscript 코드) 붙여넣기

html

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