[ 살펴보기 ] Google Analytics

성공적인 business 운영을 위해선 단순히 application을 개발하고 운영하는 것을 넘어 application에서의 user behavior data를 수집하고 분석하여 수집된 data를 기반으로 markting 계획 또는 UX 개선을 통해 지속적으로 business에 긍정적인 변화를 더할 수 있어야 한다. Application에서 user behavior 관련 data를 수집하고 분석하기 위해 google analytics를 적용하는 방법을 살펴보자. 해당 포스트는 Google Analytics 4를 살펴본다.

property

보통 service는 website 또는 mobile app과 같이 다양한 platform을 통해 제공된다. 이 때 website, mobile app에서 user data는 각각의 stream ( 아래서 살펴본다 )을 통해 수집되는데 이를 모두 포함하고 있는 container가 property다.

예를 들어 모자를 판매하는 쇼핑몰과 신발을 판매하는 쇼핑몰을 각각 운영 중이라면 모자를 판매하는 쇼핑몰에 대한 property를 생성해서 해당 property를 통해 모자 판매 쇼핑몰의 user data를 tracking할 수 있고 신발을 판매하는 쇼핑몰에 대한 property를 별도로 생성하여 해당 property에서 신발 판매 쇼핑몰의 user data를 별도로 tracking할 수 있다.

stream

google analytics에서 steam이란 website, mobile app과 같이 user data가 수집되는 data source를 말한다. 하나의 property에 소속된 여러 stream을 통해 website, mobile app에서 data를 수집하여 servicer가 제공하는 다른 platform에서의 user data를 통합적으로 확인할 수 있다. Google analytics에서 사용할 수 있는 stream type은 다음과 같다.

Web stream : website에서 page 방문, button click과 같은 user interaction data를 수집한다
IOS App stream : ios mobile aplication에서 발생하는 user interaction data를 수집한다.
Android stream : android mobile applicaton에서 발생하는 user interaction data를 수집한다.

event

google analytics에서 event란 user가 data resource ( website, mobile app 등 )에서 발생 시키는 특정 행위를 말한다. 예를 들어 user가 특정 페이지에 방문하거나 특정 버튼을 click하는 행위 등 다양한 user interaction이 event가 될 수 있다. google analytics에서 event는 크게 automativally collected event, Enhanced measurement event, Recommended event, Custom event로 분류된다. 각각의 event를 보다 자세히 살펴보자.

Automatically collected event

Autometically collected event는 이름에서도 알 수 있듯이 google analytics에서 자동으로 수집하는 event를 말한다. 자동 수집 event의 모든 list는 documentation을 통해서 확인할 수 있으며 그 중 일부는 다음과 같다. ( Reference - [GA4] Automatically collected events ) 추후에 custom event를 추가할 때 automatically collected event와 동일한 이름의 event를 추가하지 않도록 주의가 필요하다.

page_view : user가 site의 각 page를 방문할 때 수집되는 데이터
first_visit : user가 site를 처음으로 방문할 때 수집되는 데이터
session_start : session이 시작 되었을 때 수집되는 데이터

Enhanced measurement event

Enhanced measurement event는 web stream에서 수집할 수 있는 event이며 default로 자동으로 수집된다. 선호에 따라서 해당 event에 대한 data를 수집 하지 않을 수도 있다. 모든 event list는 documentation을 통해 확인할 수 있으며 그 중 일부는 다음과 같다. ( Reference - Enhanced measurement event )

scroll : user가 page의 90%이상 scroll 했을 때 수집되는 데이터
outbound_click : user가 link를 통해 외부 사이트로 이동할 때 수집되는 데이터
view_search_results : user가 page에서 search를 수행하면 수집되는 데이터. url에 q, s, search, query, keyword query parameter가 있으면 default로 해당 event가 수집되며 설정을 통해 해당 event에서 수집할 추가 query parameter를 추가할 수도 있다.

Recommended event

Recommended event가 google analytics이 service domain 별로 추천하는 event다. 예를 들어 ecommerce service에는 purchase event가 있고 game service에는 tutorial_begin과 같은 event가 있다. Recommended event는 위의 두 event type과는 달리 자동으로 수집되지 않는다. 모든 event list는 documentation을 통해 확인할 수 있으며 그 중 일부는 다음과 같다. ( Reference - Recommended events )

purchase : 상품 구매가 발생했을 때 수집되는 데이터
refund : 환불이 발생했을 때 수집되는 데이터
level_up : user가 game에서 level up할 때 수집되는 데이터
tutorial_begin : user가 tutorial을 시작할 때 수집되는 데이터

Custom event

google analytics가 제공하는 event외에 별도의 event가 필요하다면 custom event를 생성하여 적용할 수 있다. custom event는 event name과 해당 event의 parameters로 구성되며 각 paremeter는 name과 value로 구성된다. 예를 들어 특정 button click을 tracking하는 custom event의 구조는 다음과 같을 수 있다.

gtag('event', 'test_button_click', {
  button_id: 'test_button_id',
  button_text: 'test_button_text'
});

위의 예제에서 test_button_click이 event name이고 button_id, button_text가 event의 parameter다. custom event를 수집하기 위해 google analytics page에서 별도로 설정해야 하는 사항은 없으며 위와 같이 custom event name가 parameter를 전달하면 설정한 stream에서 event가 수집되는 것을 확인 할 수 있다. 다만 custom event의 name이 Automatically collected event 또는 Enhanced measurement event가 겹치지 않도록 주의하자.

또는 NextJS에서 @next/third-parties/google package를 통해 analytics를 적용하고 있다면 다음과 같이 custom event를 수집할 수 있다. ( NextJS app에서 analytics를 적용하는 방법은 아래에서 조금 더 살펴본다. )

import { sendGAEvent } from "@next/third-parties/google";

sendGAEvent("event", "custom_random_event", {
  random_info: "button click in order",
  random_extrainfo: "event from order",
});

event name은 40글자 이내여야 하며 parameter는 event당 최대 25개까지 추가할 수 있다. 그 외의 custom event의 제약사항은 documentation을 통해 확인할 수 있다. ( Reference - [GA4] Event collection limits )

Event 수집

Google analytics를 통해 data를 수집하는 방법은 google tag 그리고 google tag manager 두 가지 방법이 있다. 아래 예제에서 각각의 방법으로 data를 수집하는 방법을 살펴보자.

Google Tag ( gtag )

google tag를 기준으로 event를 collection하기 위해선 아래와 같은 코드를 page head에 추가해야 한다. gtag의 id는 생성한 stream에 따라 다르므로 아래의 코드를 그대로 추가하는 것이 아닌 생성한 stream의 id가 있는 code를 추가하도록 하자.

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

  gtag('config', 'G-AAAAAAA');
</script>

위의 코드는 google analytics page 하단 아래의 관리 아이콘 ( 기어 모양 )을 통해 관리 페이지로 이동하고 데이터 수집 및 수정에서 데이터 스트림을 선택하여 스트림 list 페이지로 이동한다.

생성한 스트림이 없다면 data tracking을 위한 스트림을 생성하고 생성된 스트림을 선택하면 상세 정보를 보여주는 sidebar가 나타난다. sidebar 아래 부분 태그 안내 보기를 선택한다.

태그 안내 보기를 선택하면 다음과 같은 sidebar를 확인할 수 있다. CMS 설치가 아닌 직접 설치를 선택하면 위에서 봤던 해당 stream을 위한 gtag code를 확인할 수 있다.

해당 gtag를 html head에 추가한다. Site의 모든 page를 tracking 해야 하므로 공통 layout head에 추가하는 것이 좋다. NextJS와 같은 framework 기반 application을 만들고 있다면 framework마다 적용할 수 있는 방법에 다소 차이가 발생할 수 있으므로 사용하는 framework의 documentation을 참고하자. 만약 NextJS application에서 google analytics를 적용한다면 우선 @next/third-parties package를 설치한다.

npm install @next/third-parties

그리고 설치한 package를 root level layout에 다음과 같이 GoogleTagManager component를 추가 해준다. gaId property에는 data를 tracking하려는 stream의 측정 id를 전달해준다. 관리 → 데이터 수집 및 수정 → 데이터 스트림에서 원하는 stream을 선택하면 측정 ID를 확인할 수 있다.

app/layout.tsx

import { GoogleTagManager } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <GoogleTagManager gaId="G-ABCD" />
      <body>{children}</body>
    </html>
  )
}

NextJS에서 analytics를 적용하는 방법은 다음 documentation을 통해 확인할 수 있다. ( Reference - Third Party Libraries - Google Analytics )

위의 예제와 같이 analytics를 site에 추가하고 analytics page에서 보고서 → 실시간 개요 페이지로 이동하면 user가 site의 각 page를 방문할 때 수집되는 데이터인 page_view event의 변동 사항을 확인할 수 있다.

또한 gtag를 적용할 때 debug mode를 적용해서 수집하는 데이터를 보다 detail하게 확인할 수도 있다.

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

  gtag('config', 'G-AAAAAAA', {'debug_mode':true});
</script>

NestJS에서는 다음과 같이 GoogleTagManager component에 debugMode property를 전달해주면 된다.

import { GoogleTagManager } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <GoogleTagManager gaId="G-ABCD" debugMode />
      <body>{children}</body>
    </html>
  )
}

위의 예제와 같이 gtag function에 debug_mode option을 true로 설정하면 DebugView에서 수집 데이터를 실시간으로 보다 detail하게 확인할 수 있다. DebugView는 GoogleAnalytics page에서 관리 ( 왼쪽 하단 기어 아이콘 ) → 데이터 표시 → DebugView를 통해 확인할 수 있다. debug mode는 점검 용도로 사용하도록 하고 production code를 배포할 때는 debug mode를 제거 하고 배포하도록 한다.

Google Tag를 통해 custom event tagging은 다음과 적용 할 수 있다.

Google Tag Manager

Google Tag Manager를 사용하면 application code에 gtag를 직접 추가하지 않고도 event를 수집할 수 있는 방법을 제공한다. Google Tag Manager로 모든 event를 수집할 수 있는 것은 아니므로 주의하자. Google Tag Manager로 수집할 수 없는 event는 application code에서 gtag를 통해 수집해야 한다.

Google Tag Manager를 통해 event를 수집하기 위해서는 다음 두 가지 요소가 필요하다.

Tag : Google Tag Manager는 site에서 수집하는 event에 tag를 달아 google analytics에 전달한다.
Trigger : Tigger를 통해 tag를 언제 어디에서 google analytics로 전달할 것인지 결정한다.

이제 Google Tag Manager를 통해 tag와 trigger를 생성해 데이터를 수집하는 방법을 살펴보자. 우선 Google Tag Manager 사이트로 이동해 계정과 컨테이너를 생성해준다.

위의 page에서 container를 생성하고 생성한 container의 상세 페이지로 이동해서 tag를 생성한다.

위 페이지에서 새로 만들기 button을 선택하면 아래와 같은 화면을 볼 수 있다.

왼쪽 상단 이름 없는 태그 text를 click하면 생성할 tag의 이름을 수정할 수 있다. 그리고 태그 구성 box를 click하면 다음과 같이 tag 유형을 선택할 수 있는 list를 확인할 수 있는데 list에서 google 애널리틱스를 선택한다.

그리고 이어서 나오는 화면에서 Google 태그를 선택해준다.

그러면 다음과 같이 tag와 trigger를 구성하는 화면을 볼 수 있다.

태그 ID input box에는 tag를 통해 data를 수집하는 google analytics의 stream id를 설정해준다. 그런 다음 트리거 section을 선택하면 트리거 section 오른쪽 상단에 생기는 plus 아이콘을 통해 트리거를 추가할 수 있다.

테스트에선 아래와 같이 All Pages trigger를 추가하고 기존 선택되어 있던 Initialization - App Pages trigger는 오른쪽 (-) 아이콘을 통해 제외 시켜주겠다.

위의 설정을 마쳤으면 상단의 저장 버튼을 통해 tag를 저장해준다.

생성한 tag는 다음과 같이 tag page에서 확인할 수 있다. 여기서 중요한 사항은 tag를 생성하고 상단의 제출 버튼을 통해 제출을 해야 실제로 tag manager를 통해 data가 수집된다.

제출 버튼을 누르면 다음과 같이 tag version 정보를 설정하는 화면을 볼 수 있다. tag version 정보를 설정하고 게시 버튼을 통해 tag를 게시해준다.

이제 tag manager를 어떻게 application code에 추가하는지 살펴보자. 아래는 NextJS application에 Google Tag Manager를 적용하는 방법이다. 모든 page에서 data를 수집할 수 있도록 application root layout에 추가하며 만약 NextJS와 같은 framework를 사용하지 않거나 framework에서 제공하는 방법이 아닌 일반적인 방법을 통해 tag manager를 추가하고자 한다면 상단 screen shot에서 보이는 page에서 container id를 click하면 tag manager를 추가하는 방법을 확인할 수 있다. ( container id는 위의 screen shot에서 검은색으로 칠한 위치에 있다 )

app/layout.tsx

import { GoogleTagManager } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body>{children}</body>
    </html>
  )
}

Application code에 manager를 추가하고 생성한 tag를 제출한 뒤에 배포된 application에 접속하여 page 이동을 해보면 이동한 page 정보가 analytics를 통해 수집 되는 것을 확인할 수 있다.

이제 특정 button을 click하면 button text를 수집하는 event를 tag manager를 통해 추가해보자. 우선 button click에 대한 새로운 trigger를 생성해준다.

위의 이미지와 같이 trigger 상세 페이지에서 우측 상단 새로 만들기 버튼을 선택하면 다음과 같이 trigger를 구성할 수 있는 화면이 나온다.

위의 화면에서 trigger 구성을 선택하면 다음과 같이 trigger 유형을 선택할 수 있는 화면이 나오는데 클릭 section의 모든 요소를 선택한다.

그리고 다음과 같이 일부 클릭을 선택 후 select box에서 css 선택 도구와 일치를 선택하고 event를 추가할 element의 selector를 추가해준다. 예를 들어 필자는 특정 page의 button에 대한 selector를 추가한 상태다.

selector는 event를 추가할 element의 selector를 추가해주면 된다. element의 selector는 다음 이미지와 같이 개발자 도구에서 event를 추가할 element에서 마우스 우클릭 → copy → copy selector를 선택하면 해당 element의 selector가 copy 된다.