구글 태그 관리자 설치 How to Setup and Install Google Tag Manager on your Website
Google Tag Manager 계정 생성
가장 먼저 해야할 일은 GTM 계정을 생성하는 일이다. Google Tag Manager 공식 사이트 로 이동하여 구글 계정을 이용하여 간편하게 생성할 수 있다.
Google Tag Manager 코드
구글 태그 매니저에서 웹사이트에 붙여넣을 코드를 다음과 같이 찾을 수 있다. 미리보기와 제출 버튼 좌측의 컨테이너 ID 를 클릭하면 Google 태그 관리자 설치 팝업이 로딩된다.
아니면 관리자 > 컨테이너 > Google 태그 관리자 설치 로 이동하여 확인할 수 있다.
Google Tag Manager 컨테이너 코드 웹사이트에 추가하기
아래는 티스토리의 예로, 위의 구글 태그 관리자 설치 팝업에 나와있는 대로 다음과 같이 스크립트를 붙여넣는다. 먼저 상단 코드는 <head>에서 가능한 한 높은 위치에 코드를 붙인다.
다음으로 하단의 태그는 <body> 태그 바로 뒤에 코드를 붙여넣는다..
하단 두 번째 태그 코드는 일종의 백업 코드로 자바스크립트 없이 추적이 가능하게 해준다. 만약 사용자가 자바스크립트를 비활성화해둔 경우에도 <noscript> 태그를 통해 추적이 가능하게 한다.
Important: 위의 2개의 코드를 모두 <body> 에 위치시킬 수는 있지만, 둘 다 <head>에 추가해서는 안된다. 앞서 언급했듯이 <noscript> 파트는 iframe 을 렌더하게 되는데 이는 <head> 에서는 허용되지 않기 때문이다.
따라서 가능한 옵션은 다음과 같다.
- <script> 코드는 <head> 에, 그리고 <noscript> 코드는 <body> 에 넣는다
- <script> 와 <noscript> 코드 둘 다 <body>에 넣는다
사실 자바스크립트 활성화되지 않는 경우는 극히 일부라 <noscript> 파트는 필수는 아니다.
Google 태그 매니저 코드를 왜 <head>에 넣어야 하나?
100% 필요한 경우는 아니지만, GTM 코드의 <script> 파트는 웹사이트의 <head> 에 넣는 편이 좋다. 간단히 말해 추적에 더 효과적이기 때문이다. 페이지 상단에 위치할 수록 더 빨리 로딩된다. 특히 웹사이트가 무거운 경우, <body>에 코드가 위치해있는 경우 로딩되는데 수 초 이상 걸릴 수 있다. 웹사이트 코드 하단에 위치할수록, 런칭 속도가 더 느리게 된다는 것만 기억해야한다.
컨테이너 제출
코드 붙여넣기가 끝나면, 다시 Google 태그 관리자 계정으로 돌아와 컨테이너 제출을 진행해야한다. 제출되지 않은 GTM 컨테이너는 에러를 발생 (브라우저 콘솔에서 확인할 수 있다) 시키기 때문이다.
컨테이너가 제출되지 않았음에도 브라우저가 구글 서버로 데이터를 요청했기 때문에 반환되는 데이터는 없다. 큰 문제는 아니지만, TrackJS 와 같은 툴을 이용해 자바스크립트 에러를 추적하면 404 에러를 발견할 수 있게 될 것이다.
Google 태그 매니저 작동 여부 확인
GTM 코드 설치가 끝났으면 이제 작동 여부를 확인해야 한다. 몇 가지 확인 방법이 있다.
웹사이트 소스 코드 확인
웹사이트 마우스 우측 클릭 > 페이지 소스 보기 > gtm.js 존재 여부 검색
미리보기 및 디버그 모드 활성화
미리보기와 디버그 모드를 활성화하면 다음과 같이 미리보기 중임을 알리는 배너가 뜨게 된다. 그리고 구글 태그 매니저 컨테이너 코드가 구현된 해당 웹사이트를 새로고침하면 디버그 패널을 확인할 수 있다.
이 디버그 패널에서는 태그에 대한 자세한 정보를 보여준다.
해당 콘솔 윈도우는 미리보기하는 컴퓨터에서만 보일 뿐, 다른 방문자는 볼 수 없다.
Tag Assistant extension 활용
마지막으로 크롬 확장프로그램의 하나인 Tag Assistant 를 사용할 수 있다. 해당 확장프로그램을 설치한 후, 녹색으로 상태 표시가 되면 정상적으로 설치가 된 것이다.
