블로그스팟을 운영하다 보면 어느 순간 구글 애널리틱스, 애드센스, 네이버 서치어드바이저, 각종 전환 추적 코드를 한곳에서 관리하고 싶어질 때가 있습니다. 이럴 때 많이 사용하는 도구가 바로 구글 태그 매니저 Google Tag Manager, GTM입니다.
문제는 설치 과정에서 생각보다 많은 분들이 막힌다는 점입니다. 구글 태그 매니저에서 안내하는 코드를 그대로 복사해 블로그스팟 테마 HTML에 넣었는데, 갑자기 XML 파싱 에러가 뜨면서 저장이 되지 않는 경우가 있습니다.
특히 아래와 비슷한 문구가 나오면 처음 보는 분들은 “내가 뭘 잘못 건드렸나?” 하고 당황하기 쉽습니다.
대표 오류 메시지 예시
org.xml.sax.SAXParseException; lineNumber: 9; columnNumber: 43; The reference to entity "T" must end with the ';' delimiter
이 오류는 블로그가 망가진 것이 아니라, 블로그스팟 테마가 XML 형식으로 되어 있어서 생기는 문법 문제입니다. 오늘은 블로그스팟에 구글 태그 매니저를 설치하는 방법과 XML 에러를 해결하는 방법을 초보자도 따라 할 수 있게 차근차근 정리해 보겠습니다.
1. 블로그스팟에 구글 태그 매니저를 왜 설치할까요?
구글 태그 매니저는 여러 추적 코드를 한곳에서 관리할 수 있게 도와주는 도구입니다. 예를 들어 GA4 방문자 분석 코드, 광고 전환 코드, 이벤트 추적 코드 등을 매번 블로그 HTML에 직접 넣지 않고 GTM 안에서 관리할 수 있습니다.
블로그를 처음 시작할 때는 방문자 수만 확인해도 충분하다고 느낄 수 있습니다. 하지만 글이 쌓이고 애드센스 수익이나 유입 경로를 더 자세히 보고 싶어지면, 단순 방문자 수보다 “어떤 글에서 어떤 행동이 일어나는지”가 중요해집니다.
이때 GTM을 설치해두면 나중에 분석 코드를 추가하거나 수정할 때 훨씬 편합니다. 블로그스팟 테마 HTML을 매번 열어 수정하지 않아도 되기 때문입니다.
- GA4 방문자 분석 코드 관리
- 애드센스 관련 추적 코드 관리
- 버튼 클릭, 외부 링크 클릭 같은 이벤트 추적
- 여러 마케팅 태그를 한곳에서 관리
다만 블로그스팟은 일반 웹사이트와 구조가 조금 다릅니다. 테마 편집 화면이 HTML처럼 보이지만 실제로는 XML 문법의 영향을 받기 때문에, 코드 안의 특수기호 하나 때문에 저장 오류가 날 수 있습니다.
2. 구글 태그 매니저 코드는 어디에서 받을 수 있을까요?
GTM 코드는 구글 태그 매니저 공식 사이트에서 컨테이너를 만든 뒤 받을 수 있습니다. 컨테이너는 쉽게 말해 내 블로그에 붙일 태그들을 담아두는 상자라고 생각하시면 됩니다.
- 구글 태그 매니저 공식 사이트에 접속합니다.
- 구글 계정으로 로그인합니다.
- 새 계정을 만들고 블로그 주소를 입력합니다.
- 컨테이너 유형은 일반적으로 웹을 선택합니다.
- 생성이 끝나면 설치용 코드 2개가 나타납니다.
설치 안내 화면에는 보통 두 가지 코드가 나옵니다. 첫 번째 코드는 <head> 영역에 넣는 코드이고, 두 번째 코드는 <body> 바로 아래에 넣는 코드입니다.
| 구분 | 넣는 위치 | 역할 |
|---|---|---|
| 첫 번째 코드 | <head> 안쪽 | GTM을 불러오는 기본 스크립트 |
| 두 번째 코드 | <body> 바로 아래 | 스크립트가 꺼진 환경을 위한 보조 코드 |
여기서 중요한 점은 첫 번째 코드입니다. 블로그스팟에서 XML 에러가 나는 경우는 대부분 첫 번째 코드 안에 들어 있는 & 기호 때문입니다.
3. 블로그스팟 XML 파싱 에러는 왜 생길까요?
블로그스팟 XML 파싱 에러의 핵심 원인은 GTM 코드 안의 & 기호입니다. 일반 HTML에서는 크게 문제 되지 않는 기호지만, 블로그스팟 테마 편집기에서는 이 기호를 XML 문법의 시작으로 해석할 수 있습니다.
구글 태그 매니저 기본 코드에는 아래와 같은 부분이 들어갑니다.
dl=l!='dataLayer'?'&l='+l:'';
여기서 &l= 부분이 문제가 될 수 있습니다. 블로그스팟은 & 뒤에 오는 문자를 특수한 엔티티로 이해하려고 하는데, 정상적인 XML 엔티티 형식이 아니면 저장 과정에서 오류를 냅니다.
그래서 블로그스팟 테마 HTML에 넣을 때는 이 부분을 아래처럼 바꿔야 합니다.
변경 전: &l=
변경 후: &l=
정리하면 간단합니다. 블로그스팟 테마 HTML에 GTM 코드를 넣을 때는 코드 안의 & 기호를 &로 바꿔야 저장 오류를 피할 수 있습니다.
4. 블로그스팟 HTML 편집기는 어디에서 열까요?
코드를 넣기 전에 먼저 블로그스팟 테마 HTML 편집기를 열어야 합니다. 처음 이용하는 분들은 메뉴 위치가 헷갈릴 수 있으니 아래 순서대로 진행해 보시면 됩니다.
- 블로그스팟 관리자 화면에 접속합니다.
- 왼쪽 메뉴에서 테마를 클릭합니다.
- 현재 테마 미리보기 옆의 아래쪽 화살표 버튼을 누릅니다.
- HTML 편집을 선택합니다.
- 수정 전 전체 코드를 복사해 메모장에 백업합니다.
백업은 꼭 해두는 것이 좋습니다. GTM 설치 자체는 어렵지 않지만, 테마 HTML은 블로그 디자인과 연결되어 있습니다. 혹시 위치를 잘못 잡거나 다른 코드를 지웠을 때 백업본이 있으면 바로 되돌릴 수 있습니다.
HTML 편집 화면에서 검색 기능을 사용하면 훨씬 편합니다. 윈도우는 Ctrl + F, 맥은 Command + F를 누른 뒤 <head> 또는 <body 를 검색하면 됩니다.
5. <head> 안에 넣는 GTM 코드 수정본
아래 코드는 블로그스팟에서 XML 오류가 나지 않도록 & 부분을 수정한 예시입니다. 단, 그대로 붙여넣기 전에 반드시 GTM-XXXXXXX 부분을 본인의 GTM ID로 바꿔야 합니다.
<head> 안쪽에 넣을 코드 예시
<!-- 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'?'&amp;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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
위 코드에서 가장 중요한 부분은 &l=입니다. 블로그 글 화면에서는 &l=처럼 보여야 하고, 실제 블로그스팟 테마 HTML에 넣을 때도 이 형태를 유지해야 합니다.
GTM ID는 구글 태그 매니저 화면 상단이나 컨테이너 정보에서 확인할 수 있습니다. 보통 GTM-으로 시작하는 형태입니다.
6. <body> 바로 아래에는 어떤 코드를 넣어야 할까요?
두 번째 코드는 <body> 태그 바로 아래에 넣습니다. 블로그스팟 테마에서는 <body>가 단순히 표시되지 않고 <body expr:class=...>처럼 길게 되어 있을 수 있습니다.
이럴 때는 <body 로 시작하는 줄을 찾은 뒤, 그 바로 아래에 코드를 넣으면 됩니다. 아래 코드에서도 GTM-XXXXXXX 부분은 본인의 ID로 바꿔주세요.
<body> 바로 아래에 넣을 코드 예시
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
두 번째 코드는 첫 번째 코드보다 오류가 덜 나는 편입니다. 다만 ID를 바꾸지 않으면 내 블로그가 아닌 예시 코드로 남게 되므로, 두 코드 모두 같은 GTM ID가 들어갔는지 확인해야 합니다.
7. 저장 후 설치가 제대로 되었는지 어떻게 확인할까요?
코드를 넣었다면 오른쪽 상단의 저장 버튼을 누릅니다. 저장이 정상적으로 되면 XML 파싱 에러가 더 이상 나오지 않아야 합니다.
이후에는 구글 태그 매니저 화면으로 돌아가 미리보기 기능을 사용해 내 블로그와 연결되는지 확인합니다. 미리보기에서 블로그 주소를 입력하면 GTM 연결 상태를 테스트할 수 있습니다.
- 블로그스팟 테마 HTML 저장이 정상적으로 되는지 확인
- GTM 미리보기에서 블로그 주소 연결 확인
- GA4 태그를 연결했다면 실시간 보고서에서 방문 기록 확인
- 코드 안의 GTM ID가 두 곳 모두 같은지 확인
만약 저장은 되었는데 GTM 미리보기에서 연결이 되지 않는다면, 코드 위치를 다시 확인해 보세요. 첫 번째 코드는 <head> 안쪽, 두 번째 코드는 <body> 바로 아래에 있어야 합니다.
8. 처음 이용하는 분들을 위한 확인 포인트
블로그스팟에 GTM을 설치할 때는 코드 자체보다 위치와 특수기호가 더 중요합니다. 아래 내용만 확인해도 대부분의 실수를 줄일 수 있습니다.
| 확인할 부분 | 체크 내용 |
|---|---|
| GTM ID | GTM-XXXXXXX 부분을 내 ID로 바꿨는지 확인 |
| & 기호 | &l=이 아니라 &l= 형태인지 확인 |
| 첫 번째 코드 위치 | <head> 안쪽에 들어갔는지 확인 |
| 두 번째 코드 위치 | <body> 바로 아래에 들어갔는지 확인 |
| 백업 | 수정 전 테마 HTML을 따로 저장했는지 확인 |
가장 흔한 실수는 GTM ID를 한 곳만 바꾸는 것입니다. 첫 번째 코드와 두 번째 코드에 들어가는 ID가 서로 다르면 추적이 제대로 되지 않을 수 있습니다.
9. 실수 줄이는 스마트 팁
GTM 코드를 설치할 때는 한 번에 여러 코드를 넣지 않는 것이 좋습니다. 먼저 GTM 기본 코드만 넣고 저장한 뒤, 정상적으로 연결되는지 확인해 보세요. 그다음 GA4나 다른 태그를 GTM 안에서 추가하면 문제 원인을 찾기가 훨씬 쉽습니다.
또 하나 기억할 점은 블로그스팟 테마를 바꾸면 기존에 넣어둔 코드가 사라질 수 있다는 것입니다. 테마를 변경하거나 새 템플릿을 적용했다면 GTM 코드가 그대로 남아 있는지 다시 확인하는 것이 좋습니다.
- 코드 수정 전에는 반드시 테마 HTML 백업하기
- GTM ID는 두 코드 모두 같은지 확인하기
- 저장 오류가 나면 & 기호부터 확인하기
- 테마 변경 후에는 GTM 코드가 남아 있는지 재확인하기
- GA4 연결은 GTM 설치 확인 후 진행하기
처음에는 복잡해 보이지만 원리는 단순합니다. 블로그스팟은 XML 문법에 민감하고, GTM 코드는 일부 특수기호를 포함한다는 점만 이해하면 됩니다.
10. 마무리하며
블로그스팟 구글 태그 매니저 설치가 어렵게 느껴지는 이유는 대부분 코드 자체보다 XML 파싱 에러 때문입니다. 하지만 오류의 원인을 알고 나면 해결 방법은 생각보다 간단합니다.
핵심은 세 가지입니다. 첫째, <head> 안에는 GTM 첫 번째 코드를 넣습니다. 둘째, <body> 바로 아래에는 noscript 코드를 넣습니다. 셋째, 첫 번째 코드 안의 & 기호는 블로그스팟에 맞게 & 형태로 수정합니다.
이 글을 저장해두고 테마를 수정할 때마다 함께 확인해 보시면 좋습니다. 주변에 블로그스팟을 처음 시작하는 분이 있다면 이 내용을 공유해 주셔도 도움이 될 수 있습니다.
