안녕하세요. 오늘은 GA를 좀 더 전략적으로 사용할 수 있는 툴인 GTM에 대한 설명과 함께, 개설부터, 설치 방법까지 알아보려고 합니다!
● GTM은 무엇일까?
GTM의 정식 명칭은 Google Tag Manager로 구글 태그 매니저라고 부르는데, 이것 또한, 구글에서 제공하는 데이터 분석을 위한 툴입니다.
GA 하나의 툴로만 잡지 못하는 여러가지 클릭이라든지, 이미지를 보는 비율 등 좀 더 세부적으로 데이터를 보기위해서는 반드시 GTM을 사용해야합니다.
GA는 중간관리자 역할을 담당하는 툴로도 많이 불리고 있는데요.
기존에 GTM을 모르던 상태에서 페이스북 픽셀이라든지, 구글 애널리틱스의 코드를 직접적으로 웹사이트에 삽입을 시켰습니다. 하지만, GTM을 사용하여 웹사이트에 GTM 코드를 넣어놓고, GTM 안에 픽셀과 애널리틱스 코드를 넣어놓으면
javascript 코드가 씌어지면서 GA태그와 픽셀 태그가 터지게끔 순서가 이루어져있습니다.
또한, GTM은 권한 부여 방식이, 계정 - 컨테이너 순으로 되어 있는데요.
컨테이너가 GA의 속성단으로 보시면 이해하시기 편할거예요.
● GTM 설치 방법
1. 구글 태그매니저 접속
2. 계정 생성 (create account)
3. 계정 이름(Account Name)과 나라 선택해주시고, Container Setup 부분에 본인이 운영하는 웹사이트를 복사붙여넣기를 해주세요.
4. GTM 코드가 뜨면, script는 Head에서 최대한 상단에 코드를 붙어넣어주시고, noscript는 body에 삽입해주세요.
5. GTM이 잘 세팅이 되었는지, 확인하는 방법으로, Google Tag Assistant를 깔아주셔서 제대로 세팅이 되었는지 확인해주시면 돼요. 초록색이랑 파란색 뜨면 잘 세팅된거니까 참고하시고, 빨간색은 에러니까 문제점을 찾아내서 해결해주셔야해요.
반응형
마치기 전에, 코드를 삽입하면서 의문이 드신 분들이 분명 존재할거라고 생각해요.
왜 <head>에서 최대한 위에 코드를 삽입하라는건지, body는 왜 삽입해야하는지? 솔직히 딱히 몰라도 상관없지만,
기왕하는거 알아가는게 좋지 않을까 싶어 한 번 제가 아는 선에서 적어봅니다.
● <head> 최대한 상단에 코드를 삽입하는 이유
기본적으로 누군가가 웹사이트에 접속을 할 때, 순서는 dom ready → window load 가 이뤄지고 나서야 사이트가 온전하게 켜집니다. 이 말을 페이스북에서는 정확하게 랜딩이 됬다고 표현을 하더라구요.
여기서 window load가 되고, GTM을 상단에 위치시키지 않고, 중단이나 하단에 위치시켰다면, load가 됬음에도 GTM이 켜지는 시간이 딜레이가 될겁니다. 사실 저도 이런 코드 삽입부분에서는 테스트를 하고 싶진 않아, 따로 해보진 않았지만, 그만큼 시간이 딜레이가 되고 그 부분을 알려주는건 tag assistant에서 태그 색깔이 판별해주었습니다.
위에서 언급한 것처럼 파란색이나 초록색이 가장 이상적으로 세팅이 되었다는 거고, 노란색이나 빨간색은 무언가 지금 이상하게 삽입이 되어있으니 수정을 하라는 신호입니다.
보통 위치를 이상하게 잡을 경우, 노란색이 뜨거나, 더 이상하면 아예 잘못삽입하면 빨간색으로 에러가 나는 경우가 있더라구요. 실제로 저 에러를 무시한 채 운영하고 있는 회사를 종종 볼 수 있었습니다.
이러한 문제로 window load가 되자마자 GTM이 터질 수 있게 최상단에 올려놓는게 가장 좋다는 점 알아두시면 좋을 것 같아요.
● <body>에 넣어야하는 이유
body에 넣은 코드를 잘 보시면 noscript라고 적혀져있습니다. 이는 평상시에는 작동을 하지 않는다는 건데요.
head부분에 정상적으로 심은 코드가 제대로 작동하지 않을 경우, body에 있는 이 noscript가 터지면서 gtm의 데이터를 수집하게끔 한다고 해요. 일명 낙하산같은 역할을 해주는 코드이죠.
정상적으로 작동할 때, 수집되는 것과는 다르게 어느정도 하자는 있다고 하지만, 아예 안터지는 것보단 낫다고 하여 이 코드까지 삽입을 하는 걸로 인지하고 있습니다.
(저도 실제로 이 코드가 터지는 걸 경험해보진 않았지만, 데이터 수집을 위한 보조장치정도라고 생각하면 편하실거예요)
이상으로 GTM(구글태그매니저)에 대한 설명과 설치방법을 마치겠습니다 :)
반응형
'광고 분석 툴 > 구글태그매니저(GTM)' 카테고리의 다른 글
| GTM(구글태그매니저)로 Element Visibility 이벤트 세팅하는 법 (0) | 2020.05.20 |
|---|---|
| GTM(구글태그매니저)를 이용하여 Hotjar 세팅하는 법 (0) | 2020.05.20 |
| GTM(구글태그매니저)로 스크롤뎁스(Scroll Depth) 이벤트 세팅하는 법 (0) | 2020.05.19 |
| GTM(구글태그매니저) 태그가 터지지 않는 이유 그리고 어떻게 해결할 수 있을까? (0) | 2020.05.19 |
| GTM(구글태그매니저)로 Click 태그 만들기 (0) | 2020.05.17 |
최근댓글