NextJS에서 react-ga를 이용해서 이벤트 등록하기

안녕하세요.

이번 포스팅에서 NextJS에서 GA 이벤트 등록에 대해서 이야기해보겠습니다. react-ga를 이용해서 GA 이벤트를 등록하는 방법이 있습니다.
ga.jsx에 react-ga 초기화를 하고 GA event를 위한 함수를 작업해주겠습니다.
ReactGA.initialize의 첫번째 param으로 GA 추적 ID를 넣어주고 두번재 param에 옵션 값을 넣어줍니다. 저는 실서비스가 아닐 경우에 디버깅을 위한 옵션을 추가해주었습니다.

// ga.jsx

import ReactGA from 'react-ga';

export function init() {
  ReactGA.initialize(process.env.GA_TRACKING_ID, {
    debug: process.env.Environment !== 'production',
    cookieDomain: 'auto'
  });
  ReactGA.set({path: window.location.pathname});
}

export function setPageview() {
  ReactGA.pageview(window.location.pathname + window.location.search);
}

export function setEvent(event) {
  ReactGA.event(event)
}

그리고 _app.jsx에 GA init 함수를 추가해주도록 하겠습니다.

import * as GA from './ga.jsx'

functino MyApp({Component, pagePros, err}) {
  GA.init()
  
  return <Component {...pageProps} err={err}/>
}

export default MyApp

그리고 페이지가 전환될때 마다 pageView를 호출하기 위해 router.events를 추가하도록 하겠습니다.

...

functino MyApp({Component, pagePros, err}) {
  GA.init()
  
  const router = useRouter()
  useEffect(() => {
    router.events.on('routeChangeComplete', () => GA.pageView())
    
    return () => {
      router.events.off('routeChangeComplete', () => GA.pageView())
    }
  }, [router.events])
  
  return <Component {...pageProps} err={err}/>
}

export default MyApp

그리고 react-ga의 event를 보면 EventArgs를 param으로 넘겨주는데 내용은 아래와 같습니다.(보통 많이 사용하는 category, action, label, value 그 외가 있습니다.)

export interface EventArgs {
  /** Typically the object that was interacted with (e.g. 'Video') */
  category: string;
  /** The type of interaction (e.g. 'play') */
  action: string;
  /** Useful for categorizing events (e.g. 'Fall Campaign') */
  label?: string;
  /** A numeric value associated with the event (e.g. 42) */
  value?: number;
  ...
}

event를 등록을 할때는 아래와 같이 사용을 하면 됩니다.

// label과 value가 없는 경우
GA.setEvent({category: '카테고리명', action: '액션명'})

// label이 있는 경우
GA.setEvent({category: '카테고리명', action: '액션명', label: '라벨명'})

// label과 value가 있는 경우
GA.setEvent({category: '카테고리명', action: '액션명', label: '라벨명', value: '값'})

 

추가로 전자상거래 이벤트 등록은 아래와 같이 다른 방법을 사용하면 됩니다.
그러면 GA 문서의 ecommerce plugin 형식으로 이벤트가 동작합니다.

// 주문 상품 추가 -> ga('ec:addProduct', ...)
ReactGA.plugin.execute('ec', 'addProduct', {
  id: '상품ID',
  name: '상품명',
  category: '카테고리',
  price: '상품가격',
  quantity: '상품개수'
})

// 주문 -> ga('ec:setAction', 'purchase', ...)
ReactGA.plugin.execute('ec', 'setAction', 'purchase', {
  id: '주문ID',
  revenue: '가격',
  name: '주문명',
  category: '카테고리'
})

// 환불 -> ga('ec:setAction', 'refund', ...)
ReactGA.plugin.execute('ec', 'setAction', 'refund', {
  id: '주문ID',
})

여기 까지 react-ga를 이용해서 GA 이벤트를 등록하는 방법에 대해서 알아봤습니다.