new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5ZMD4VM'); [GA4] 3. 데이터 수집 프로세스
본문 바로가기
Tracking Tool/Google analytics4

[GA4] 3. 데이터 수집 프로세스

by BAESY 2024. 3. 26.

 
지난 글에는 GA4의 연혁과 주요 변경점을 알아보았는데요, 
이번에는 GA 데이터 수집 프로세스와 가입 및 추적코드 삽입 과정을 실습해보도록 하겠습니다.

데이터 수집 프로세스

사용자가 웹사이트를 방문할 때, 짧은 시간에 웹사이트 로드를 서버에 요청하게 됩니다. 요청이 완료되면 사이트는 사용자에게 웹페이지를 보여주게 되는데요, 이 웹페이지 내에서 사용자는 다양한 상호작용을 하게 됩니다.
 

웹 페이지 내의 상호작용 = Hit
상호작용 데이터 = Event

 
이벤트가 발생하게 된다면 우리는 이를 어떻게 수집하고, 추적할 수 있는 걸까요? 

gtag.js, GATC(Google Analytics Tracking Code)

GATC(Google Analytics Tracking Code)는 웹 사이트에 삽입되는 추적코드입니다. 흔히 gtag라고도 하는데요, 이를 웹 사이트 내 삽입하여 추적 가능한 환경을 만들어줘야합니다. 
추적 코드가 삽입된 웹 사이트는 페이지 로드시 코드를 실행하게 되는데요, 이를 통해 이후에 발생하는 상호작용들을 일련의 과정을 거쳐 수집할 수 있게 됩니다. 수집된 데이터는 GA4 서버로 전송이 되고, 데이터베이스에서 처리 과정을 거쳐 유저가 볼 수 있는 정보로 시각화되는 과정을 거치게 되는 것이죠.
 

GA 데이터 수집 프로세스 도식화

 
그렇다면 저 추적코드는 어떤 의미가 담겨있는걸까요. 

javascript 로 구성된 gtag

gtag는 javascript 언어로 구성되어있는데요, 간략한 설명은 이렇습니다.

 

출처 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

 

웹페이지의 동작을 담당하는 언어이기에, 사용자의 상호작용을 추적하는 것에 안성맞춤이겠죠. 이를 토대로 저 gtag를 설명해보겠습니다. 

유저가 웹사이트에 방문하게 되면 그 방문 데이터를 GA로 보내

 
위 그림의 빨간색 화살표에 해당하는 과정을 추적코드를 통해 실행할 수 있게 되는 것입니다.

 

 

이번 글엔 데이터가 어떻게 수집되는지 간략하게 알아보았는데요. 

다음 시간엔 HTML 편집으로 gtag를 웹사이트내에 삽입해보도록 하겠습니다. 

 

 

 

[목차]

[GA4] 1. 트래킹 툴에 대한 이해와 GA4

[GA4] 2. GA4 사용 이유와 주요 변경점

[GA4] 3. 데이터 수집 프로세스

 

 

댓글