Google analytics 등록하기

등록하기

web을 기반으로 한 사용자 행동 분석 시스템입니다. 사용자의 유입, 스크롤, 검색, 클릭 등의 이벤트를 자동으로 분석합니다. 해당 사이트에 접속하면 어렵지 않게 이를 설정할 수 있습니다.

모든 등록을 마치면 해당 script를 html에 주입해주어야 합니다.

CODE / EXAMPLE

<!-- Google tag (gtag.js) -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=uniqueID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
 
  gtag('config', 'uniqueID');
</script>

Nextjs에 적용하기

nextjs 공식 문서를 확인해보면 다음과 같이 안내하고 있습니다.
공식문서의 예시는 모두 javascript를 활용하기 떄문에, type 설정을 위해서 해당 라이브러리를 설치해야 합니다.
CODE / EXAMPLE
```
npm i @types/gtag.js -D
```

nextJS 공식문서의 예시 코드를 활용하면 되겠습니다.

CODE / EXAMPLE

// lib/gata.ts
export const GA_TRACKING_ID! = process.env.NEXT_PUBLIC_GA_ID
 
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: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

문제 해결하기

현재 재가 사용하고 있는 nextJS의 버전은 13이고 app router를 사용하고 있습니다. 이러한 상황에서 _app은 page 라우터의 방식이었습니다. app router와 page router를 함께 사용할 경우 우선순위는 app router에 있기 때문에 해당 로직을 app router에 통일 시켰습니다.
이때 문제점은 페이지 이동 시 추적을 위해 사용한 { useRouter } from 'next/router' 에 있었습니다. “use client”에서는 사용할 수 없는 서버 컴포넌트였고 클라이언트 컴포넌트에서 사용하기 위해서는 { useRouter } from 'next/navigation' 에서 사용을 해야 했습니다. 하지만 더이상 **events**를 지원하지 않기에 custom hook을 통해 직접 기능 구현을 해야 했습니다. 해당 문제는 많은 분들이 겪고 있는 듯 하였습니다. (링크)

다음과 같은 방식으로 구현을 변경하였습니다. lib/gata.ts는 동일합니다.

CODE / EXAMPLE

// src/conponents/GoogleAnalytics.tsx
import Script from 'next/script';
import * as gtag from '../lib/gtag';
 
export default function GoogleAnalytics() {
  return (
    <>
      <script
        dangerouslySetInnerHTML={{
          __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
 
              gtag('config', '${