在Next.js中加入谷歌分析4的方法下面是如何在基于Next.js的网站上添加Google Analytics第4版。

下面是如何在基于Next.js的网站上添加Google Analytics第4版。

创建一个Google Analytics属性，并将该属性ID保存在NEXT_PUBLIC_GOOGLE_ANALYTICS 环境变量中。

然后，你需要在pages/_app.js 文件中添加一个useEffect() 的调用，现在看起来可能是这样的。

import '/public/style.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

把它改成

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

import 'tailwindcss/tailwind.css'
import '/public/style.css'

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

  useEffect(() => {
    const handleRouteChange = url => {
      window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
        page_path: url,
      })
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

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

export default MyApp

最后，添加一个pages/_document.js 文件，创建一个Next.js自定义文件，注入Google Analytics脚本，与。

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>
    )
  }
}

注：解决方案改编自Marie Starck在mariestarck.com/add-google-…的帖子