next.js 谷歌脚本 - Javascript (1)

📌 相关文章

📜 next.js 谷歌脚本 - Javascript (1)

📅 最后修改于: 2023-12-03 14:44:34.783000 🧑 作者: Mango

Next.js 谷歌脚本 - Javascript

简介

Next.js 是一个 React 框架，它提供了一些强大的功能，如服务器渲染和静态网站生成，使得构建 Web 应用程序更加容易。在使用 Next.js 时，您可能需要将 Google Analytics 集成到您的应用程序中以收集一些分析数据。本文将向您介绍如何在 Next.js 应用程序中使用 Google Analytics 脚本。

使用步骤

以下是将 Google Analytics 集成到 Next.js 应用程序的步骤：

在 Google Analytics 中创建一个账户和属性来跟踪您的应用程序的数据。
在您的 Next.js 应用程序中安装 react-ga 模块。要安装此模块，请运行以下命令：

npm install react-ga --save

在您的应用程序中导入所需的模块，如下所示:

import ReactGA from 'react-ga'

在您的应用程序中初始化 Google Analytics，如下所示：

ReactGA.initialize('GA_TRACKING_ID')

在 GA_TRACKING_ID 中填入您的 Google Analytics 跟踪代码。您可以在 Google Analytics 界面中找到此代码。

在需要跟踪的页面中调用以下方法：

ReactGA.pageview(window.location.pathname + window.location.search)

此代码将告诉 Google Analytics 当前的页面，以便记录访问和事件数据。

最后，您需要将 Google Analytics 脚本添加到 HTML 文件中。在 Next.js 中，您可以使用 _document.js 文件来自定义 HTML。以下是 _document.js 文件的示例代码：

import Document, { Head, Main, NextScript } from 'next/document'
import { GA_TRACKING_ID } from '../lib/gtag'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <html>
        <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>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

在此文件中，您需要将 GA_TRACKING_ID 导入，并将其添加到 <script> 标签中。脚本将在应用程序加载时运行，并告诉 Google Analytics 开始收集数据。

结论

通过遵循上述步骤，您可以将 Google Analytics 集成到 Next.js 应用程序中。这样，您就可以轻松地跟踪您的应用程序的分析数据，并做出更好的决策。