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 를 사용할 수 있다. 해당 확장프로그램을 설치한 후, 녹색으로 상태 표시가 되면 정상적으로 설치가 된 것이다.
