GTM이란?
저번에는 GTAG를 직접 html 코드에 집어 넣어 삽입해 보았습니다. 하지만 이럴 경우 태그를 수정하고 싶을 때마다 직접 GTAG 코드를 수정해야 하는 어려움이 있는데요. 특히 html에 대한 이해가 낮으신 분이라면 더욱 태그를 관리하기 힘들 겁니다. 그래서 구글에서 웹사이트 html 코드에 대한 이해 없이도 쉽게 태그를 관리하고 수정할 수 있는 도구인 구글 태그 매니저(GTM)을 제공해주는데요. 이번에는 GTM을 통해 웹사이트에 태그를 삽입하는 방법에 대해 배워보겠습니다.
우선 GTM에 로그인하고 계정을 만들어줍니다. 구글 애널리틱스와 같은 구글 계정에서 쉽게 태그매니저로 들어가 생성할 수 있는데요. GTM도 마찬가지로 계정 - 컨테이너 의 구조로 하나의 계정 아래에 여러가지 사이트를 컨테이너에 담아 관리할 수 있습니다.
Google 애널리틱스
로그인 Google 애널리틱스로 이동
accounts.google.com
로그인 하고 난 뒤 [계정 만들기]를 눌러 태그 매니저 계정을 생성해줍니다.
타겟 플랫폼은 웹과 앱 그리고 AMP, Server 등이 있는데요. GTM은 html로 이루어진 웹에서 가장 잘 작동하기 때문에 주로 웹사이트를 타겟으로 사용합니다. 앱에서는 잘 작동하지 않아 앱을 등록하실 때에는 앱에 태깅하는 다른 솔루션을 사용하는 것을 권장합니다.
계정을 만들고 나면 다음과 같이 GTAG를 할 때와 비슷하게 붙여넣을 코드를 표시해줍니다. 이걸 웹사이트의 html 코드에 각각 붙여 넣어주면 되는데요. 저는 이미 이전에 GTAG를 붙여넣어놔서 GTAG 부분을 삭제하고 새로 GTM의 코드를 넣어주겠습니다.
Tistory 에서 설정 - [꾸미기] - [스킨 편집] - [html 편집] 에 들어가 마찬가지로 코드를 <head> 와 <body>에 각각 삽입해줍니다.
이렇게 삽입을 하고 적용을 눌러주면 태그 삽입이 완료됩니다! 제대로 태그가 삽입되었는지 확인하기 위해
여기 미리보기를 눌러주면 태그 어시스턴트로 넘어가면서 제대로 삽입이 되었는지 확인할 수 있습니다.
이렇게 Connected! 라고 뜨면 되는데 문제는 안에 들어가니까 Summary에서
Google Tag: GTM- not found 이렇게 자꾸 뜨는 거에요.. 그래서 왜 이런걸까 한참 찾아본 결과
제가 ADblock을 사용하고 있는데 이걸 키고 있어서 제대로 인식이 안 됐던 거에요.
밑에도 나와있듯이 by a browser extension or a consent dialog 에 의해 막혀있다고 나오죠. 혹시 비슷하게 고민하는 분이 있으시면 확장 프로그램을 끄고 시도해보세요
그래서 이렇게 화면이 뜨면 구글 태그 매니저로 태그 삽입이 제대로 된 겁니다..!
다음에는 태그와 트리거 그리고 변수가 뭔지 알아보고 직접 태그를 만들어서 삽입해 보겠습니다.
'GA4' 카테고리의 다른 글
| [GA4] GTM으로 이벤트 만들기 (0) | 2024.05.03 |
|---|---|
| [GA4] 웹사이트에 GTAG로 직접 태그 삽입하기! (0) | 2024.04.11 |
| [GA4] 구글 애널리틱스4 시작하기 - 애널리틱스 계정 만들기 (0) | 2024.04.01 |
