구글 태그 관리자(GTM) 설치법, 광고·분석 코드를 소스 수정 없이 관리하는 순서
광고를 하나 시작할 때마다 개발자에게 "이 코드 좀 넣어 주세요"라고 부탁하고 계신가요?
구글 태그 관리자(GTM)를 한 번만 설치해 두면 GA4, 광고 전환 태그 같은 코드를 관리 화면에서 추가하고 끌 수 있습니다. 설치 위치부터 게시 전 확인까지, 실무에서 쓰는 순서대로 정리했습니다.
💡 코드를 직접 넣는 것과 뭐가 다른가요?
유지관리를 맡은 사이트를 열어 보면 몇 년 전 끝난 광고 태그가 헤더에 그대로 남아 있는 경우가 정말 많습니다. 누가 왜 넣었는지 아무도 모르니 지우지도 못합니다. GTM은 태그마다 이름과 실행 조건이 남고, 바꿀 때마다 버전이 기록돼서 문제가 생기면 이전 버전으로 되돌릴 수 있습니다.
1. 컨테이너 만들고 코드 두 개 넣기
tagmanager.google.com에서 계정과 컨테이너(대상 플랫폼은 웹)를 만들면 설치 코드 두 개가 나옵니다. 첫 번째는 <head> 안에서 가능한 한 위쪽에, 두 번째 noscript 코드는 <body> 여는 태그 바로 뒤에 넣습니다. 모든 페이지에 들어가야 하니 공통 헤더나 레이아웃 파일에 한 번만 넣으면 됩니다.
<head>
<!-- ① GTM 기본 코드: head 안 최대한 위쪽 -->
...
</head>
<body>
<!-- ② GTM noscript 코드: body 바로 뒤 -->
...
2. GA4는 GTM 안에서 연결하기
태그 메뉴에서 'Google 태그'를 새로 만들고 GA4의 측정 ID(G-로 시작)를 입력한 뒤, 트리거는 모든 페이지로 지정합니다. 여기서 가장 흔한 실수가 중복 설치입니다. 사이트 소스에 GA4 코드가 이미 들어가 있는데 GTM에서 한 번 더 걸면 페이지뷰가 두 번씩 잡힙니다. GTM으로 옮겼다면 소스에 있던 기존 코드는 꼭 지워 주세요.
문의 완료처럼 페이지 이동이 없는 동작을 세고 싶다면, 전송 성공 시점에 이벤트를 하나 남겨 두고 GTM에서 맞춤 이벤트 트리거로 받으면 됩니다.
// 문의 전송이 성공한 뒤 실행
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'inquiry_submit'
});
// GTM 트리거: 맞춤 이벤트 'inquiry_submit'
3. 미리보기로 확인한 뒤에 게시하기
GTM은 저장만 해서는 사이트에 반영되지 않고, 오른쪽 위 제출 버튼으로 게시해야 적용됩니다. 그 전에 미리보기를 눌러 실제 사이트를 열어 보세요. Tag Assistant 창에 어떤 태그가 실행됐는지 나옵니다.
- 페이지를 열었을 때 Google 태그가 실행됐는지
- 문의를 보냈을 때 맞춤 이벤트 태그가 한 번만 실행됐는지
- 게시할 때 버전 이름에 날짜와 바꾼 내용을 적었는지
마지막 항목은 사소해 보여도, 몇 달 뒤 수치가 갑자기 튈 때 원인을 찾는 단서가 됩니다.
"태그는 넣는 것보다 정리해 두는 것이 더 오래 갑니다."
나눔웹은 사이트를 넘겨드릴 때 어떤 분석 코드가 어디서 실행되는지까지 함께 정리해 드립니다.