실무에 바로 적용할 수 있는 웹 제작 꿀팁 및 유용한 자료실 공간입니다.
나눔웹이 제공하는 핵심 노하우와 마케팅 인사이트를 자유롭게 활용해 보십시오.

나눔웹 마케팅 꿀팁

구글 태그 관리자(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 태그가 실행됐는지
  • 문의를 보냈을 때 맞춤 이벤트 태그가 한 번만 실행됐는지
  • 게시할 때 버전 이름에 날짜와 바꾼 내용을 적었는지

마지막 항목은 사소해 보여도, 몇 달 뒤 수치가 갑자기 튈 때 원인을 찾는 단서가 됩니다.

"태그는 넣는 것보다 정리해 두는 것이 더 오래 갑니다."

나눔웹은 사이트를 넘겨드릴 때 어떤 분석 코드가 어디서 실행되는지까지 함께 정리해 드립니다.


List of Articles
번호 분류 제목 글쓴이
» 마케팅 구글 태그 관리자(GTM) 설치법, 광고·분석 코드를 소스 수정 없이 관리하는 순서 new 나눔웹
91 웹 성능 한글 웹폰트 용량 줄이기, 서브셋과 woff2로 무거운 폰트 가볍게 만드는 법 new 나눔웹
90 UI/UX 드롭다운 메뉴가 금방 닫힐 때, 틈 메우기와 transition-delay로 잡는 법 나눔웹
89 퍼블리싱 다크 모드 CSS 대응법, 폰을 어둡게 했더니 입력창만 하얗게 뜰 때 나눔웹
88 웹 성능 뒤로 가기 하면 페이지가 처음부터 다시 뜰 때, bfcache 막는 원인 찾는 법 나눔웹
87 마케팅 LocalBusiness 구조화 데이터 작성법, 구글에 상호·주소·영업시간 정확히 알리기 나눔웹
86 UI/UX 링크 밑줄이 글자에 붙어 답답할 때, text-underline-offset으로 다듬는 법 나눔웹
85 모바일 모바일 키보드가 입력창을 가릴 때, visualViewport로 화면 맞추는 법 나눔웹
84 웹 성능 사용하지 않는 CSS 줄이기, 크롬 Coverage 탭으로 안 쓰는 코드 찾는 법 나눔웹
83 마케팅 GA4 문의 전환 설정법, 감사 페이지 도달로 실제 문의 수 세는 순서 나눔웹
82 UI/UX 고정 헤더에 제목이 가려질 때, scroll-margin-top으로 앵커 맞추는 법 나눔웹
81 퍼블리싱 CSS 컨테이너 쿼리 쓰는 법, 화면이 아니라 카드 폭에 맞춰 반응하기 나눔웹
80 UI/UX 폼 에러가 입력 전에 뜨는 문제, :user-invalid로 고치는 법 나눔웹
79 모바일 모바일 브라우저 상단바 색 맞추기, theme-color 메타 태그 쓰는 법 나눔웹
78 마케팅 문의 완료 페이지 noindex 설정법, 검색에 잡히지 않게 막는 순서 나눔웹
77 UI/UX 문의란이 내용만큼 늘어나게, CSS field-sizing으로 맞추는 법 나눔웹
76 웹 성능 긴 페이지 스크롤이 무거울 때, content-visibility로 렌더링 줄이는 법 나눔웹
75 모바일 모바일 100vh 잘림, dvh·svh로 주소창 높이까지 맞추는 법 나눔웹
74 마케팅 구글 서치 콘솔 등록 방법, 새 홈페이지 소유권 확인부터 색인 요청까지 나눔웹
73 퍼블리싱 CSS :has() 선택자 활용법, 자식 상태에 따라 부모 박스 스타일 바꾸기 나눔웹
Board Pagination Prev 1 2 3 4 5 Next
/ 5
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4