GA4&GTM 활용

[GA4&GTM 활용] GTM(구글태그관리자) 설치 방법 완벽 가이드 : 계정 생성부터 head·body 코드 삽입, 설치 확인까지

마케팅 데이터 분석 연구소 2026. 7. 23. 06:06
반응형

핵심 요약 (한 줄 답변)

GTM 설치는 ① 계정·컨테이너 생성 → ② 두 개의 코드 스니펫 복사 → ③ <script>는 <head> 안 최상단에, <noscript>는 <body> 여는 태그 바로 뒤에 삽입 → ④ 소스 보기·미리보기·Tag Assistant로 확인 순서입니다. <noscript>는 iframe을 렌더링하므로 절대 <head>에 넣으면 안 됩니다.

 

이 글에서 알 수 있는 것

  • GTM 계정과 컨테이너의 차이 (무엇을 어떻게 만드나)
  • GTM 설치 코드를 찾는 2가지 위치
  • <script>와 <noscript> 코드를 각각 어디에 넣어야 하는가
  • 왜 <head> 최상단에 넣는 것이 추적에 유리한가
  • 설치가 잘 됐는지 확인하는 3가지 방법
✳️ 난이도 : 입문 | 소요 시간 : 약 9분 | 대상 : GTM을 처음 설치하는 마케터·웹사이트 운영자

 

GTM 설치, 전체 흐름부터 보기

GTM 설치는 계정을 만들고, 코드를 받아, 웹사이트에 삽입한 뒤, 제대로 작동하는지 확인하는 4단계입니다.

단계 내용
1단계 GTM 계정·컨테이너 생성
2단계 설치 코드(2개 스니펫) 찾기
3단계 <head>와 <body>에 코드 삽입
4단계 설치 정상 여부 확인

 

1단계. GTM 계정과 컨테이너 만들기

GTM을 시작하려면 먼저 계정을 생성해야 합니다. 다른 구글 솔루션처럼 기존 구글 계정(Gmail)을 그대로 사용합니다.

이미 구글애즈·구글애널리틱스 등에서 Gmail을 쓰고 있다면 자동 로그인되고, 없다면 먼저 구글 계정을 만들어야 합니다. GTM 공식 웹사이트로 이동해 새 계정을 생성합니다.

 

GTM에서 계정과 컨테이너를 생성하는 입력 화면

 

입력 항목

순서 항목 입력값
계정 이름 / 국가 계정명 입력 / 해당 국가 선택
컨테이너 이름 / 타겟 플랫폼 실제 작업 공간 이름(보통 도메인명) / 선택
완료 [만들기] 버튼 클릭

 

계정 vs 컨테이너, 무엇이 다른가요?

GTM 계정은 구글애널리틱스 계정과 동일하게 동작하며, 계정은 회사/비즈니스 단위, 컨테이너는 웹사이트/앱 단위입니다.

  • 계정 = 일반적으로 회사·비즈니스·클라이언트용
  • 컨테이너 = 일반적으로 웹사이트 또는 애플리케이션용 (많은 태그·트리거·변수를 포함)
✳️ 참고 : 단일 비즈니스에 속한 여러 웹사이트가 구조와 추적 구현이 매우 유사하다면, 하나의 컨테이너를 여러 웹사이트에서 함께 사용할 수도 있습니다.

 

2단계. GTM 설치 코드는 어디서 찾나요?

GTM은 설치할 코드와 위치 지침을 제공하며, 코드는 두 곳에서 찾을 수 있습니다.

 

방법 (1) 컨테이너 ID 클릭

GTM 상단의 컨테이너 ID를 클릭해 코드를 여는 화면

① 제출·미리보기 버튼 옆의 컨테이너 ID(GTM으로 시작하는 코드)를 클릭하면 설치 코드를 볼 수 있습니다.

 

방법 (2) 관리자 메뉴에서 찾기

GTM 관리자 메뉴에서 태그 관리자 설치 항목으로 이동하는 화면

① [관리자] → [계정] → [컨테이너] → Google 태그 관리자 설치 로 이동합니다.

 

GTM 설치 지침에서 head용과 body용 코드 스니펫 2개를 보여주는 화면

두 방법 모두 웹사이트에 추가할 코드 스니펫과 설치 지침을 열어줍니다.

 

3단계. 웹사이트에 GTM 코드 삽입하기

GTM은 두 개의 코드 스니펫으로 구성되며, 각각 들어가는 위치가 다릅니다.

 

첫 번째 코드 : <script> → <head> 안에

첫 번째 코드(<script> 태그로 둘러싸인 부분)가 핵심입니다. 이 코드는 GTM 컨테이너를 비동기식으로 로드하도록 지시합니다. 즉, GTM이 실행되는 동안 웹사이트의 나머지 부분도 계속 실행됩니다.

 

웹사이트 head 태그 안에 GTM script 스니펫을 삽입한 화면

 

두 번째 코드 : <noscript> → <body> 여는 태그 바로 뒤에

두 번째 코드(<noscript>)는 <body> 태그 바로 뒤에 위치해야 합니다. 이 코드는 사용자가 자바스크립트를 활성화하지 않았을 때 브라우저에 알리고, GTM 컨테이너의 iframe 버전을 페이지에 렌더링합니다.

⚠️ 중요! <noscript>를 <head>에 넣으면 안 됩니다 두 코드를 모두 <body> 안에 넣는 것은 가능하지만, 둘 다 <head>에 넣으면 안 됩니다. <noscript>는 <head>에서 허용되지 않는 iframe을 렌더링하므로, 웹사이트 HTML에 문제가 생길 수 있습니다.

 

가능한 삽입 조합 2가지

조합 <script> 위치 <noscript> 위치
권장 <head> <body> 여는 태그 뒤
대안 <body> <body>
✳️ 참고 : <noscript> 부분은 자바스크립트 없이 방문자를 추적하거나, 구글 서치 콘솔 소유권 확인을 하려는 경우에만 필요합니다.

 

4단계. <head>에 넣는 것이 왜 더 좋은가요?

100% 필수는 아니지만, <script> 코드는 <head>에 배치하는 것이 추적에 더 유리합니다. 스니펫이 페이지에서 높은 위치에 있을수록 더 빨리 로드되기 때문입니다.

삽입 위치 로드 시점 영향
<head> (상단) 더 빨리 로드 더 많은 방문자 추적 가능
<body> (하단) 더 늦게 로드 본문 로드 전 이탈한 사용자 놓칠 수 있음

이전 버전 GTM에서는 <body> 배치가 권장됐지만, 이 경우 무거운 웹사이트에서 GTM 로드가 몇 초 이상 지연되어 본문이 로드되기 전에 떠난 사용자를 놓칠 수 있습니다. <head>에서는 훨씬 빠르게 시작되므로 더 많은 방문자를 파악할 수 있습니다.

✅ 기억하세요 : 추적 코드가 웹사이트 코드에서 낮게 설치될수록 나중에 실행됩니다.

 

5단계. GTM이 제대로 설치됐는지 확인하는 3가지 방법

코드를 삽입한 뒤에는 실제로 잘 설치됐는지 반드시 확인해야 합니다.

방법 확인 절차
① 페이지 소스 보기 웹사이트에서 우클릭 → "페이지 소스 보기"gtm.js 로 검색해 코드 확인
② 미리보기·디버그 모드 GTM 우측 상단 [미리보기] 클릭 → 웹사이트 이동 → 화면 하단에 미리보기·디버그 패널이 나타나는지 확인
③ Tag Assistant Tag Assistant(레거시) 크롬 확장 프로그램을 설치·활성화 → GTM이 표시되는지 확인

세 방법 중 하나로 GTM이 확인되면 설치가 완료된 것입니다.

 

자주 묻는 질문 (FAQ)

Q. <noscript> 부분을 <body> 태그 바로 뒤가 아닌 다른 곳에 넣어도 되나요? 

A. 권장하지는 않지만, 본문(<body>) 안에 <script>와 <noscript>를 넣을 수 있습니다. 다만 A/B 테스트를 GTM으로 계획·운영 중이라면 실험이 순조롭게 진행되도록 상단에 스니펫을 삽입해야 합니다.

Q. <noscript> 부분을 빼고 <script>만 써도 되나요?

A. 네, 됩니다. 자바스크립트를 완전히 비활성화하는 사용자를 신경 쓰지 않는다면, <noscript> 부분은 무시해도 무방합니다.

Q. GTM 계정과 컨테이너는 어떻게 다른가요?

A. 계정은 회사·비즈니스 단위, 컨테이너는 웹사이트·앱 단위입니다. 하나의 컨테이너에 여러 태그·트리거·변수를 담을 수 있습니다.

Q. <script> 코드를 꼭 <head>에 넣어야 하나요?

A. 필수는 아니지만 강력히 권장됩니다. <head> 상단에 있을수록 빨리 로드되어 더 많은 방문자를 추적할 수 있습니다.

Q. GTM 설치 코드는 어디서 찾나요?

A. ① 상단의 컨테이너 ID 클릭, 또는 ② [관리자] → [컨테이너] → Google 태그 관리자 설치 에서 찾을 수 있습니다.

Q. 설치했는데 잘 됐는지 어떻게 확인하나요?

A. 페이지 소스 보기(gtm.js 검색), 미리보기·디버그 모드, Tag Assistant 세 가지 중 하나로 확인하세요.

 

요약 (한 장 정리)

  • 1단계 : GTM 계정·컨테이너 생성 (계정=회사, 컨테이너=웹사이트, 타겟 플랫폼 웹)
  • 2단계 : 설치 코드 찾기 (컨테이너 ID 클릭 or 관리자 메뉴)
  • 3단계 : <script> → <head> 안 최상단 / <noscript> → <body> 여는 태그 뒤
    금지 : <noscript>를 <head>에 넣기 (iframe 렌더링 → HTML 오류)
  • 4단계 : <head> 배치가 추적에 유리 (빨리 로드 = 더 많은 방문자)
  • 5단계 : 소스 보기(gtm.js) / 미리보기 / Tag Assistant 로 확인

작성 : 디애널리틱스(The Analytics) · 구글애널리틱스를 활용하여 기업의 마케팅 성과를 향상시키는 방법을 연구합니다.

반응형