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

나눔웹 마케팅 꿀팁

구글 태그 관리자(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
번호 분류 제목 글쓴이
93 웹 성능 홈페이지 로딩 속도를 3배 높이는 '이미지 최적화' 실무 가이드 나눔웹
92 퍼블리싱 CSS 변수로 유지보수와 테마 기능을 한 번에! (CSS Custom Properties) 나눔웹
91 마케팅 카카오톡 링크 썸네일의 비밀! 클릭률을 높이는 '오픈 그래프(OG)' 세팅법 나눔웹
90 모바일 모바일 꽉 찬 화면 하단 짤림 현상! '100vh'의 함정과 완벽 해결법 나눔웹
89 웹 성능 홈페이지 첫 화면 글자 깜빡임(투명 현상) 1초 만에 해결하는 법 나눔웹
88 퍼블리싱 스마트폰에서 로고가 흐리게 보인다고요? 'SVG' 포맷이 정답입니다. 나눔웹
87 웹 성능 클릭 실수 유발하는 '화면 덜컹거림(CLS)', 단 한 줄로 해결하는 법 나눔웹
86 모바일 고객의 이탈을 막는 1초 디테일, '모바일 맞춤형 키보드' 세팅법 나눔웹
85 UI/UX 모바일에서 버튼 누를 때 생기는 촌스러운 '회색 박스' 없애는 법 나눔웹
84 UI/UX 레이아웃을 망치는 긴 글, 예쁘게 '...'으로 자르는 마법의 CSS 나눔웹
83 UI/UX 상단 메뉴에 제목이 가려진다고요? '부드러운 스크롤' 마법의 2줄 나눔웹
82 모바일 아이폰에서 입력창 누를 때 화면 '자동 확대'되는 현상 막는 법 나눔웹
81 퍼블리싱 지저분한 모바일 스크롤바, 기능은 남기고 쏙 숨기는 마법의 CSS 나눔웹
80 모바일 모바일 웹을 진짜 '앱(App)'처럼! 이미지 꾹 누를 때 뜨는 팝업 막기 나눔웹
79 UI/UX 애플(Apple) 사이트처럼 고급스러운 '반투명 유리' 메뉴 만드는 법 나눔웹
78 퍼블리싱 무거운 플러그인 NO! 넷플릭스처럼 쫀득한 '가로 스와이프' CSS로 뚝딱 만들기 나눔웹
77 UI/UX 1%의 디테일이 브랜딩을 완성합니다! '텍스트 드래그 색상' 바꾸기 나눔웹
76 UI/UX 투박한 파란색 체크박스는 그만! 단 1줄로 우리 회사 컬러 입히기 나눔웹
75 모바일 하단 고정 버튼이 아이폰 '검은 줄'에 겹친다면? (Safe Area 대응법) 나눔웹
74 모바일 앗, 실수로 새로고침! 튕기는 모바일 화면 꽉 잡는 법 (Overscroll) 나눔웹
Board Pagination Prev 1 2 3 4 5 Next
/ 5
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4