Nextjs 구글 애널리틱스 적용

Nextjs

GoogleAnalytics
방문자

2023-04-27 07:13

✍🏻 Table Of Contents

1. Google Analytics 계정 생성 2. gtag.js 생성 3. _document.js 4. _app.js

1. Google Analytics 계정 생성

Google Analytics에서 계정을 생성합니다. 계정을 생성하는 방법은 다음과 같습니다.

https://analytics.google.com/ 에 접속합니다.
계정 생성을 클릭합니다.
필요한 정보를 입력합니다.

계정을 생성하면 Tracking ID를 확인할 수 있습니다. 이는 추적 코드를 삽입할 때 사용됩니다.

2. gtag.js 생성

export const GA_TRACKING_ID = "xxxx"; // 위에서 생성한 Tracking ID 넣기


// 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,
  });
};

javascript

3. _document.js

아까 만들었던 lib/gtag.js 파일을 불러들이고

NextJS Head 태그 안에 필요한 script 코드를 넣습니다.

코드는 아래와 같습니다.

<Head>
  <script
    async
    src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
  />
  <script
    dangerouslySetInnerHTML={{
      __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '${GA_TRACKING_ID}', {
        page_path: window.location.pathname,
      });
    `,
    }}
  />
</Head>

javascript

4. _app.js

페이지 이동한 것도 파악하기 위하여 router.events 중에 'routeChangeComplete' 이벤트일 때 강제적으로 gtag의 pageview 함수를 실행시키는 코드 작성

import * as gtag from '@/lib/gtag'

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

javascript