谷歌分析 nextjs - Javascript (1)

📌 相关文章

📜 谷歌分析 nextjs - Javascript (1)

📅 最后修改于: 2023-12-03 15:28:12.323000 🧑 作者: Mango

使用谷歌分析在Next.js中跟踪网站流量

介绍

谷歌分析是一个用于跟踪网站流量和用户行为数据的免费工具。在Next.js中，您可以使用next/head组件在应用程序的所有页面中集成谷歌分析代码。

步骤

前往谷歌分析网站并创建新帐户。
为您的应用程序获取跟踪ID。转到跟踪信息 > 跟踪代码并复制跟踪ID。
在Next.js应用程序的head中添加以下代码：

import Head from 'next/head';

const GoogleAnalytics = () => (
  <Head>
    {/* 将 `GA_MEASUREMENT_ID` 替换为您的跟踪ID */}
    <script
      async
      src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
    />
    <script
      dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
  
          gtag('config', '${GA_MEASUREMENT_ID}');
        `,
      }}
    />
  </Head>
);

export default GoogleAnalytics;

在_document.js的render()方法中使用刚刚创建的GoogleAnalytics组件。

import Document, { Html, Head, Main, NextScript } from 'next/document';
import GoogleAnalytics from '../components/GoogleAnalytics';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <GoogleAnalytics />
          {/* 您的其他应用程序的head元素代码 */}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

结论

这是使用谷歌分析在Next.js应用程序中跟踪网站流量的简单方法。通过添加此代码，您可以获取极其有用的业务数据，以帮助您更好地了解您的用户行为并优化您的网站以提供更好的用户体验。