Google Analytics events in React

GA(Google Analytics)에서 사용자 이벤트를 통해서 원하는 데이터를 수집해 보자.

최근 변경 사항으로 GA가 업데이트 되면서 에서 데이터 수집을 위한 추적 ID(UA-XX…XX-2)가 측정 ID(G-XX..XX)로 제공 된다.

react-ga와 같은 라이브러리 등을 사용 한다면 업데이트 된 측정 ID로는 GA 데이터 수집이 안될 수 있으니 확인하고 사용해야 한다.

GA 초기화

// index.html
<script async src="https://www.googletagmanager.com/gtag/js?id=REACT_APP_GA_ID" />

위 스크립트 파일은 <header> 안에 삽입하는 코드로 REACT_APP_GA_ID은 GA 프로젝트를 생성 하면서 발급받은 측정 ID(G-XX…XX) 를 넣어 준다.

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
const analyticsId = REACT_APP_GA_ID
const initGA = () => {
  window.dataLayer = window.dataLayer || []
  gtag('js', new Date())
  gtag('config', analyticsId)
}
initGA();
ReactDOM.render(<App />, document.getElementById('root'))

GA 이벤트

GA 에서 기본적으로 수집해주는 데이터를 제외하고 직접 원하는 데이터를 수집하려면 맞춤형 이벤트를 추가 해 주어야 수집이 가능하다.

// 페이지 정보 수집
gtag('event', 'page_view', {
      page_title: '...', // 페이지 이름
      page_path: '...', // 페이지 경로
    })
// 검색 키워드 수집
gtag('event', 'search', { 
      search_term: '...' // 검색 키워드 
  })
// 컨텐츠 수집
gtag('event', 'select_content', { 
      item_id: '...', // 컨텐츠 아이디
      content_type: '...' // 컨텐츠 종류
  })

위 코드는 페이지 정보, 검색 키워드, 컨텐츠를 수집하는 맞춤 이벤트로 프로젝트 내부에서 필요한 위치에 넣어주자.

GA 데이터를 수집하는 gtag 함수의 첫번째 인자로 이벤트, 두번째는 이벤트 카테고리, 세번째는 상세 정보를 넣어준다.

page_view, search, select_content, search_term, item_id, content_type 와같은 키 값은 기본적으로 제공되는 매개변수 인데 다른 이름을 수정해서 사용하여도 데이터 수집은 가능하다.

검색 키워드 수집 결과

컨텐츠 수집 결과

이벤트를 추가해서 배포 후 사이트에 접속하게 되면 데이터가 수집된다. 다만 GA 에서 데이터 수집이 즉시 확인 되지 않을수도 있다. 약간의 시간지연 또는 누적 데이터가 어느정도 발생 하고나서 확인이 가능하기도 하다.

GA 초기화 이후에 개발자가 아닌 비개발자가 맞춤형 이벤트를 등록 하는 방법도 있다. Google 에서 제공하는 태그 관리자를 이용하면 가능하다.

• tagmanager
• Measure Google Analytics Events