Nextjs에 Google 애널리틱스를 추가하는 방법

구현은 간단하며 타사 라이브러리가 필요하지 않습니다.

필요할 것이예요:

Next.Js 프로젝트

Google Analytics 계정

1 프로젝트 .env.local 파일에 Google Analytics ID를 추가합니다.

먼저 Google 애널리틱스 키를 배치할 .env.local 파일을 만드는 것으로 시작합니다.

Tip: Check your .gitignore to make sure that you don't commit this file by accident. .env.local should have already been included by default in your Next.js project but check to make sure.

NEXT_PUBLIC_GOOGLE_ANALYTICS=<Your_tracking_ID>

2 프로젝트 애플리케이션에 Google Analytics 추적 코드를 삽입합니다.

이제 키가 설정되었으므로 Google 애널리틱스의 전체 사이트 태그(일명 gtag)를 브라우저 창에 삽입하고 구성해야 합니다.

Next.js 애플리케이션에서 헤드 요소에 액세스하려면 페이지 폴더에 사용자 지정 _document.js 파일을 생성해야 합니다.

import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

3 페이지뷰 및 이벤트를 추적하는 사용자 지정 기능.

Google 애널리틱스의 추적 부분으로 이동하겠습니다. 사용자의 행동을 올바르게 추적하려면 페이지 보기 및 선택적으로 애플리케이션에서 트리거된 특정 이벤트를 기록해야 합니다.

lib/ga 폴더 안에 두 가지 기능이 있는 index.js를 만듭니다. 하나는 페이지뷰를 기록하고 다른 하나는 이벤트를 기록합니다.

// log the pageview with their URL
export const pageview = (url) => {
  window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
    page_path: url,
  })
}

// log specific events happening.
export const event = ({ action, params }) => {
  window.gtag('event', action, params)
}

lib/ga/index.js

4 프로젝트 앱에서 페이지뷰를 기록합니다.

Next.js 앱에서 페이지뷰를 기록하는 가장 간단한 방법은 라우터를 구독하고 routeChangeComplete 이벤트를 수신하는 것입니다.

그렇게 하려면 _app.js 파일로 이동하고 useEffect를 사용하여 라우터에서 발생하는 새로운 이벤트를 확인하십시오. 많은 유형의 이벤트가 있지만 사용자가 새 페이지로 성공적으로 이동하는 경우(routeChangeComplete)에만 관심이 있습니다.

import { useEffect } from 'react'
import { useRouter } from 'next/router'

import * as ga from '../lib/ga'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url)
    }
    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on('routeChangeComplete', handleRouteChange)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}

export default MyApp

5 프로젝트 앱에서 특정 이벤트를 기록합니다.

이제 페이지 뷰가 추적되었으므로 애플리케이션에서 특정 이벤트를 기록하는 데 관심이 있을 수 있습니다. 다음은 Google 애널리틱스 기본 이벤트 목록입니다.

import { useState } from 'react'

import * as ga from '../lib/ga'

export default function Home() {
  const [query, setQuery] = useState("");

  const search = () => {
    ga.event({
      action: "search",
      params : {
        search_term: query
      }
    })
  }

  return (
    <div>
        <div>
          <input type="text" onChange={(event) => setQuery(event.target.value)}></input>
        </div>
        <div>
            <button onClick={() => search()}>Search</button>
        </div>
    </div>
  )
}

Reference

이 문제에 관하여(Nextjs에 Google 애널리틱스를 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ajidk16/how-toadd-google-analytics-to-nextjs-11i1

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Nextjs에 Google 애널리틱스를 추가하는 방법

Reference

좋은 웹페이지 즐겨찾기