본문 바로가기
  • ㄹㅇ
GA4

[GA4] 웹사이트에 GTAG로 직접 태그 삽입하기!

by 한강석 2024. 4. 11.

저번에 GA4가 웹사이트나 앱에서 사용자의 데이터를 수집해 분석하는 도구라고 말씀드렸습니다

이번에는 어떻게 웹사이트나 앱에서 데이터를 얻어오는지 배워보고 직접 Tistory에 GTM으로 태그를 삽입해 데이터를 끌어오는 과정까지 해보겠습니다

 

 

구글 태그란?

구글 태그는 다양한 구글 제품 및 서비스에 정보를 제공하기 위해 웹사이트에 추가하는 태그입니다. 구글 Ads와 구글 애널리틱스 양쪽으로 데이터를 전송하여 웹사이트의 유저 정보와 광고 효과를 측정할 수 있습니다. 웹사이트에 태그를 달아 사용자가 이동할 때마다 태그를 통해 사용자의 행동 정보를 기록합니다. 광고의 경우에는 광고를 보고 나서 어떤 행동을 하는지. 어느 정도 머무르고 실제 구매까지 이어지는 고객은 몇 명인지 등의 정보를 얻을 수 있습니다. 웹사이트에 태그를 삽입하는 방법은 2가지가 있습니다.

 

첫번째로 GTAG(구글 태그)를 웹사이트에 직접 삽입하는 방법입니다. 이는 웹사이트에 대한 지식이 어느 정도가 있어야 합니다. 웹사이트를 구성하는 코드를 열고 거기에 직접 태그를 하나하나 다는 방식이죠. 하지만 웹사이트에 대한 지식이 없는분들도 쉽게 웹사이트에 태그를 삽입할 수 있도록 도와주는 시스템이 있습니다. 그게 바로 GTM입니다. 

 

두번째로 GTM(구글 태그 매니저)는 웹 사이트의 소스 코드를 수정하지 않고 모든 태그를 쉽게 관리할 수 있도록 구글에서 제공하는 솔루션입니다. 만약 본인이 따로 웹사이트를 운영하고 있고 여기에 태그를 삽입하고 싶다면 구글 태그 매니저를 통해 태그를 삽입하는 것이 훨씬 간편할 것입니다. 

 

저는 따로 운영하고 있는 사이트가 없어서 지금 이 티스토리 블로그에 태그를 삽입하는 것으로 진행해 보겠습니다. 구글 애널리틱스에서 몇 가지 웹사이트를 대상으로 "웹사이트 작성 도구로 설치" 라는 기능을 제공합니다. 대표적으로 wordpress, Wix 등이 있습니다. 이러면 코드 변경 없이도 쉽게 태그를 삽입 가능합니다. 티스토리는 해당이 안되기 때문에 직접 삽입으로 코드를 넣어줘야 합니다. 

 

일단 웹사이트를 데이터 스트림에 등록해야 합니다. 데이터 스트림을 만들었다는 전제 하에 태그 삽입부터 진행하겠습니다. 

 

1. 애널리틱스 홈에서 [관리] 에 들어갑니다. 

2. 속성 - 데이터 수집 및 수정에서 데이터 스트림을 클릭합니다. 

 

데이터 스트림

아직 태그를 삽입하지 않았기에 이런 경고 문구가 뜰 겁니다. 여기서 [태그 안내 보기]를 클릭해줍니다. 

직접 설치 탭에 들어오면 다음과 같이 구글 태그를 복사할 수 있는 페이지가 표시됩니다.

 

이 코드를 복사해서 웹사이트의 html 코드에 직접 삽입해주면 됩니다. 

티스토리에서는 [꾸미기 -> 스킨 편집] 에 들어가면 HTML 소스를 볼 수 있습니다. 여기서 html의 <head>와  </head> 사이에 복사한 코드를 붙여넣어주면 됩니다. 

이렇게 태그를 넣고 저장해주면 잠시 후부터 구글 애널리틱스에서 태그를 통해 얻은 웹사이트 데이터를 받아볼 수 있습니다. 

 

이런 식으로 실시간 데이터를 얻을 수 있습니다. 유의미한 데이터가 쌓이면 이를 분석해 볼 수 있겠죠?