지금까지는 GA4의 개념을 중심으로 살펴보았습니다. 이제부터는 실제 사이트(서비스)에 GA4를 설치, 적용하는 과정을 중심으로 살펴보겠습니다. 임의의 서비스나 사이트를 당장 만들 수는 없으므로, 간단하게 스크립트를 편집하여 사용할 수 있는 티스토리 블로그를 중심으로 살펴보겠습니다.
우선 본인의 티스토리 블로그를 하나 개설하고, 해당 블로그의 주소를 기억해 둡시다(____.tistory.com). 이제 우리가 GA에서 생성한 속성으로 들어가, 데이터 스트림(Data Streams)을 클릭해 스트림을 생성해 봅시다.
위와 같이 웹 사이트 URL에 블로그의 주소를 넣고, 스트림을 구분할 수 있는 이름을 작성해 줍시다. 저는 [GA4 Study WEB Test]라고 작성했습니다. 그리고 하단의 향상된 측정(Enhanced Measurement) 옵션이 있는데 이를 꺼두었습니다. 향후 이벤트 설정과 관련해 영향을 미칠 수 있는 부분이라 꺼둔 것이니 우선은 따라와 주세요.
이렇게 스트림이 완성되고 나면, 우리가 세팅해둔 GA4 속성 하나의 하부에 새로운 웹 스트림 한 개가 생성된 상태가 됩니다. 이제 아래와 같이 자동으로 여러 가지 스트림 안내 화면이 출력됩니다. 특히 중요한 것이 이 [Google Tag]입니다. 이 태그가 본인의 웹 서비스 페이지에 설치가 되어 있어야만 실제 데이터 수집이 이루어지기 때문이지요.
우리의 사이트에 적용해야 하는 JS 태그는 아래와 같습니다. 여기서 추적코드 ID는 XXXX로 수정해둔 상태이니, 각자의 ID를 확인하도록 합시다. 여기서 추적코드 ID를 기반으로 서비스(웹 페이지)에서 "유저가 어떠한 페이지 뷰나 동작을 일으키면, 이를 트리거로 해서 GA로 데이터를 보내는" 구조가 됩니다. 당연한 이야기 같겠지만, 이 동작에 대한 정의는 설치에 있어서 꽤 중요한 이슈를 생성합니다.
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXX');
</script>
자, 우리의 웹 페이지(서비스, 앱)에서 데이터를 전송하려면 위 [추적 코드]는 유저가 동작(페이지 뷰 등)을 일으키는 모든 페이지에 설치되어 있어야 합니다. 만약 어떤 쇼핑몰 사이트에 메인 페이지, 고객 정보 페이지, 상품 페이지, 장바구니 페이지, 이벤트 페이지...가 수십 수백 개가 있다고 가정해 보겠습니다. 그럼 위의 추적 코드를 이 모든 페이지에 각각 일일이 삽입해야 할까요?
이론적으로는 맞는 이야기입니다만, 실제로 이렇게 작업하지는 않습니다. 통상적으로 웹사이트는 구조상 '공통으로 참조하는 페이지'가 존재하기 마련입니다. 그러므로 이 페이지에 코드를 삽입하여 모든 페이지가 자연스럽게 추적되도록 구성하게 됩니다. 티스토리 블로그에서는, [꾸미기] > [스킨 편집] 메뉴에서 HTML 편집을 통해, <head> 태그 바로 하단에 다음과 같이 코드를 추가해 주면 자동으로 모든 페이지 추적이 시작됩니다.
'Data Literacy > Google Analytics' 카테고리의 다른 글
| 2. GA 기본 세팅(4) - Event & Parameter(★) (0) | 2023.07.18 |
|---|---|
| 2. GA 기본 세팅(3) - 디버그 뷰 적용하기 (0) | 2023.07.12 |
| 2. GA 기본 세팅(1) - 계정과 속성 생성, 데이터 스트림 2 (0) | 2023.07.07 |
| 2. GA 기본 세팅(1) - 계정과 속성 생성, 데이터 스트림 1 (0) | 2023.06.19 |
| 1. GA 기능 프리뷰(6) - 수익 창출(Monetization) 세부정보 리포트 (1) | 2023.06.14 |
