NextJS에서 gtag를 이용한 GA 이벤트 등록하기

2022. 4. 26. 20:21ㆍWEB.DEV/React|NextJS

반응형

안녕하세요.
이전 포스팅에서는 react-ga를 이용해서 GA 이벤트를 등록하는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 gtag를 이용해서 GA 이벤트를 등록하는 방법에 대해서 알아보겠습니다.

먼저 _app.jsx에 next/head를 추가하고 gtag 스크립트를 추가해주겠습니다.

// _app.jsx

import Head from 'next/head'

function MyApp({Component, pageProps, err}) {
  
  return <>
  	<Head>
      <script
        async
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA}`}
      />
      <script
        dangerouslySetInnerHTML={{
          __html: `window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', '${process.env.GA_TRACKING_ID}', {
			page_path: window.location.pathname + window.location.search,
		  });`,
        }}
      />
    </Head>
    
    <Component {...pageProps} err={err}/>
  </>
}

export default MyApp

그리고 페이지가 이동 할때 마다 PageView 이벤트를 발생하게 하기 위해서 router.events를 추가해서 PageView 이벤트를 추가해주도록 하겠습니다.

...

function MyApp({Component, pagePros, err}) {
  const router = useRouter()
  useEffect(() => {
    router.events.on('routeChangeComplete', pageViewHandler)
    
    return () => {
      router.events.off('routeChangeComplete', pageViewHandler)
    }
  }, [router.events])
  
  ...
}

export default MyApp

function pageViewHandler() {
  if(window.gtag) {
    window.gtag('config', process.env.GA, {
      page_path: window.location.pathname + window.loation.search
    })
  }
}

 여기까지 작업을 하면 페이지가 이동 되는 트랙킹까지 되는것을 확인 할 수 있습니다.

추가로 GA 이벤트 추가는 https://developers.google.com/analytics/devguides/collection/gtagjs/events 링크에 나와 있는 대로 추가를 해주면 됩니다.

gtag('event', <action>, {
  event_category: <category>,
  event_label: <label>,
  value: <value>
});

 

그리고 전자상거래 관련된 이벤트는 https://developers.google.com/analytics/devguides/collection/gtagjs/enhanced-ecommerce 링크를 보고 추가를 하시면 됩니다.

아래의 이벤트를 등록해서 상품 검색 후 노출되는 페이지 혹은 메인등과 같은 페이지에서 상품이 노출되는 수를 측정을 합니다.

// 제품 노출수 측정하는 이벤트
gtag('event', 'view_item_list', {
  items: [
    {
      id: '상품ID',
      name: '상품명',
      list_name: '상품이 노출된 목록 정의',
      brand: '브랜드명',
      category: '상품 카테고리',
      variant: '상품 옵션',
      list_position: '목록에서의 상품 위치',
      quantity: '상품 개수',
      price: '상품 가격'
    }
  ]
})

아래의 이벤트를 등록해서 노출된 상품이 어디에서 클릭이 얼마나 되었는지 측정을 합니다.

// 제품 클릭 수 측정
gtag('event', 'select_content', {
  content_type: 'product',
  items: [
    {
      id: '상품ID',
      name: '상품명',
      list_name: '상품이 노출된 목록 정의',
      brand: '브랜드명',
      category: '상품 카테고리',
      variant: '상품 옵션',
      list_position: '목록에서의 상품 위치',
      quantity: '상품 개수',
      price: '상품 가격'
    }
  ]
});

아래의 이벤트를 상품의 상세 페이지에 등록을 하여 해당 상품의 정보가 얼마나 노출되었는지 측정을 합니다.

// 제품 상세 보기
gtag('event', 'view_item', {
  items: [
    {
      id: '상품ID',
      name: '상품명',
      list_name: '상품이 노출된 목록 정의',
      brand: '브랜드명',
      category: '상품 카테고리',
      variant: '상품 옵션',
      list_position: '목록에서의 상품 위치',
      quantity: '상품 개수',
      price: '상품 가격'
    }
  ]
});

아래의 이벤트를 상품을 장바구니에 담을 때 등록을 하여 해당 상품이 장바구니에 얼마나 많이 담겼는지 측정을 합니다.

// 장바구니에 상품 추가 이벤트
gtag('event', 'add_to_cart', {
  items: [
    {
      id: '상품ID',
      name: '상품명',
      list_name: '상품이 노출된 목록 정의',
      brand: '브랜드명',
      category: '상품 카테고리',
      variant: '상품 옵션',
      list_position: '목록에서의 상품 위치',
      quantity: '상품 개수',
      price: '상품 가격'
    }
  ]
});

아래의 이벤트를 장바구니에서 상품이 삭제가 될때 등록을 하여 장바구니에서 얼마나 많이 삭제가 되었는지 측정을 합니다.

// 장바구니에 상품 삭제 이벤트
gtag('event', 'remove_from_cart', {
  items: [
    {
      id: '상품ID',
      name: '상품명',
      list_name: '상품이 노출된 목록 정의',
      brand: '브랜드명',
      category: '상품 카테고리',
      variant: '상품 옵션',
      list_position: '목록에서의 상품 위치',
      quantity: '상품 개수',
      price: '상품 가격'
    }
  ]
});

아래의 이벤트를 결제하기 버튼을 눌렀을 때 추가를 하여 사용자가 결제를 시작을 얼마나 했는지 측정을 합니다. 뒤에 결제 완료 측정과 함께 측정하여 결제를 얼마나 시도를 했고 그중에 결제 완료가 얼마나 됐는지 측정을 합니다.

// 결제 시작 이벤트
gtag('event', 'begin_checkout', {
  items: [
    {
      id: '상품ID',
      name: '상품명',
      list_name: '상품이 노출된 목록 정의',
      brand: '브랜드명',
      category: '상품 카테고리',
      variant: '상품 옵션',
      list_position: '목록에서의 상품 위치',
      quantity: '상품 개수',
      price: '상품 가격'
    }
  ]
});

아래의 이벤트를 결제 할때 등록해서 결제를 할때 어떤 옵션을 많이 사용을 했는지 측정을 합니다.

// 결제 옵션 측정 이벤트
gtag('event', 'set_checkout_option', {
  checkout_step: '결제 스텝',
  checkout_option: '결제 옵션',
  value: '값'
});

아래의 이벤트를 결제 완료 시점에 추가를 해서 결제가 얼마나 되었는지 측정을 합니다.

// 결제 완료 측정 이벤트
gtag('event', 'purchase', {
  transaction_id: '주문ID',
  affiliation: '주문 위치',
  value: '주문 전체 가격',
  currency: 'KRW',
  tax: '부가세',
  shipping: '배송비',
  items: [
    {
      id: '상품ID',
      name: '상품명',
      list_name: '상품이 노출된 목록 정의',
      brand: '브랜드명',
      category: '상품 카테고리',
      variant: '상품 옵션',
      list_position: '목록에서의 상품 위치',
      quantity: '상품 개수',
      price: '상품 가격'
    }
  ]
});

아래의 이벤트를 주문 전체 환불을 한 시점에 등록을 해서 결제가 얼마나 환불이 되었는지 측정을 합니다.

// 결제 전체 환불 이벤트 측정
gtag('event', 'refund', { transaction_id: '주문ID' })

아래의 이벤트를 하나의 주문에 여러 상품이 존재할 때 그중에 부분적으로 환불을 했을 때 등록해서 얼마나 환불이 되었는지 측정을 합니다.

// 결제 부분 환불 측정 이벤트
gtag('event', 'refund', {
  transaction_id: '주문ID',
  affiliation: '주문 위치',
  value: '주문 전체 가격',
  currency: 'KRW',
  tax: '부가세',
  shipping: '배송비',
  items: [
    {
      id: '상품ID',
      name: '상품명',
      list_name: '상품이 노출된 목록 정의',
      brand: '브랜드명',
      category: '상품 카테고리',
      variant: '상품 옵션',
      list_position: '목록에서의 상품 위치',
      quantity: '상품 개수',
      price: '상품 가격'
    }
  ]
});

이번 포스팅은 여기까지 입니다. 부족한 글 읽어 주셔서 감사합니다.

728x90
반응형
저작자표시

'WEB.DEV > React|NextJS' 카테고리의 다른 글

Nextjs에서 dotenv 사용해보기  (0) 2023.03.04
React에서 dotenv 사용해보기  (0) 2023.03.03
NextJS에서 react-ga를 이용해서 이벤트 등록하기  (0) 2022.04.25

관련글

댓글 1

티스토리툴바