구글 애널리틱스 적용 (with Next.js)

민순기·2021년 12월 28일

GOAL

동그라미 프로젝트에 구글 애널리틱스를 적용시킨다.

What is Google Analytics?

구글 애널리틱스(이하 GA)는 구글에서 제공하는 무료 웹 분석 툴로, 구글의 고유한 통계 및 머신러닝 기술로 사이트 및 모바일 애플리케이션 방문자들의 행동 데이터를 분석하고, 마케팅의실적이나 웹 사이트의 경험을 개선할 수 있도록 도와주는 도구!

GA를 적용시키면 현재 우리 서비스에 몇명이나 접속해있고 어떤 페이지에 접속해있는지 로깅이 실시간으로 가능하다. (넘나 편하다)

Start

[1] .env 파일에 GA_TRACKING_ID를 추가

NEXT_PUBLIC_TRACKING_ID="code"

[2] gtag.js 파일 생성.

파일 위치 src/lib/gtag.js

// lib/gtag.js
export const GA_TRACKING_ID = "xxxxxxxx";

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  window.gtag("config", GA_TRACKING_ID, {
    page_path: url,
  });
};

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

[3] _document.js파일에 GA code 추가

스크립트는 _document.js 파일의 Head 태그 아래에 추가한다.

<Head>
    <script
     dangerouslySetInnerHTML={{
      __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', `TRACKING ID 입력`, {
      page_path: window.location.pathname,
      });
      `
     }}
    />
</Head>

[4] 조회수 측정하기

pages 폴더 app.js파일에 다음과 같은 useEffect hook을 추가해주면 페이지 조회수를 측정할 수 있다.


useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])