GA4, GTM을 사용하는데 gtag를 모른다고?

gtag, gtag와 dataLayer.push 비교, gtag와 gtm의 구조 비교, gtag와 GTM의 차이점 정리 순으로 정리했습니다.

---

 

안녕하세요. 커피를 좋아하는 마케터 디지비션입니다.

오늘은 gtm을 이용해 데이터를 ga4에 넘기다 보면 궁금증이 드는 부분이 생길 수 있는데, 이 부분은 gtag를 이해하면 쉽게 이해할 수 있다고 합니다. 그래서 오늘은 gtag, gtm을 살펴보도록 하겠습니다!

---

 

1. gtag란 무엇일까?

---

gtag는 Global Site Tag의 약자로, 구글 마케팅 생태계(GA4, Google ADs 등)와 함께 사용할 수 있는 태그입니다. gtag는 웹 페이지에 JavaScript 코드를 삽입하여 사용자의 상호작용 및 페이지 이벤트를 모니터링하고 데이터를 Google의 분석 도구로 전송합니다.

아래는 gtag의 자바스크립트 형태입니다.

<script async src="<https://www.googletagmanager.com/gtag/js?id=SOME_ID>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){window.dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

 

gtag를 보면 데이터 레이어 푸시와 유사한 형태를 띄고 있습니다. 데이터 레이어 푸시가 뭐냐고요? 앞서 작성한 글을 참고해 보세요! https://digibition1111.tistory.com/74

데이터 레이어 푸시(Data Layer Push)가 도대체 뭘까? GTM, GA4

 

2. gtag와 dataLayer.push 비교

---

gtag와 dataLayer.push 의 코드 차이

그러나 gtag와 데이터 레이어 푸시의 차이점은 src 부분에 있습니다. 위에 보시는 바와 같이 데이터 레이어 푸시는 어떠한 주소도 적혀 있지 않습니다. 데이터 레이어 푸시에 주소가 없는 이유는 이 데이터레이어 푸시가 GTM에서 사용하기 위한 데이터를 담은 버킷이기 때문입니다.

보는 것과 같이 GTM을 설치 할 때, 구글 태그 매니저 주소가 미리 들어가 있음.

따라서 GTM 실행을 위한 스크립트는 데이터 레이어 푸시보다 앞서 진행되어 구글태그 매니저로 보내는 주소가 입력되어 있지 않습니다.

여기서 중요한 점은 둘 다 결국 구글태그매니저 서버로 보낸 다는 것입니다. 구글태그매니저 서버에서 아래 모든 행위를 만족시킬때, GA4로 데이터(이벤트 등등)를 전송시켜 줍니다.

 

3. gtag와 gtm의 구조 비교

---

출처 : https://developers.google.com/tag-platform/gtagjs/configure?hl=ko

위와 같이 gtag를 이용해 구글태그매니저 서버로 보내도 되지만, 이는 개발적인 요소가 많아 마케터가 하기엔 다소 무리가 있습니다. 그래서 마케터는 GTM이라는 쌩개발보다는 비교적 쉬운 툴을 사용합니다. 자 그럼 우리 마케터에게 구세주(?) 같은 GTM을 한 번 봐봅시다!

gtag 코드에서 본 gtm 구조

gtm속에서 gtag가 속한 부분

그림은 gtag에서 이벤트를 만들 때, GTM에서 어디에 대응하는지를 시각화한 것입니다. GTM을 사용하면 개발에 비해 간단하게 이벤트를 설정할 수 있습니다.

 

---

 

4. gtag와 GTM의 차이점 정리

• 구현 및 관리: gtag는 코드 스니펫을 웹 페이지에 직접 추가하는 방식으로 구현됩니다. GTM는 단일 코드 스니펫만 페이지에 추가한 후 대시보드에서 모든 태그 및 스크립트를 관리합니다.
• 프레임워크: gtag은 Google의 특정 추적 서비스에 대한 코드를 직접 처리하는 데 중점을 둡니다. GTM은 다양한 제3자 태그 및 사용자 정의 태그를 관리하는 데 사용됩니다.
• 유연성: GTM는 비개발자가 태그를 추가 및 관리하는데 더 유연하며, 테스트 및 배포 주기를 빠르게 만들어줍니다. gtag은 비교적 덜 유연합니다.

이와 관련하여 자세한 내용은 아래 링크를 참고하시기 바랍니다.

• Google 제품 구성 및 이벤트 데이터 전송 | 전체 사이트 태그(gtag.js) | Google for Developers
• Google 태그 API 참조 | 전체 사이트 태그(gtag.js) | Google for Developers

Google 태그 API 참조  |  전체 사이트 태그(gtag.js)  |  Google for Developers