在NextJS 13应用程序目录中实现Google Analytics

Question

有人尝试在 NextJS 13 应用程序目录中实现 Google Analytics 4 (gtag) 吗？在我之前的 Vanilla JS / EJS 应用程序中，我只需要将以下代码添加到每个页面即可。所以我的理解是，在每个页面初始化时，此代码都会向谷歌分析发送 page_view 事件。

<script> src={`https://www.googletagmanager.com/gtag/js?id=GAID`} <script>
<script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'GAID', {foo: bar}); // Where bar is a variable depending on the page
</script>

我在互联网上找到了一些类似的博客，但没有在配置中实现变量的情况。我尝试了以下方法但没有成功。

在做这些之前，我已经在下一个/脚本中应用了

将此代码放入layout.tsx
将此代码放入 template.tsx 中
将此代码放入 page.tsx
将此代码放入每个页面的第一个客户端组件中。
将 gtag('js') 和 gtag('config') 集成到一个这样的函数中，并在上述页面上调用 window.configGA(bar)。

<script> src={`https://www.googletagmanager.com/gtag/js?id=GAID`} <script>
<script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   function configGA(bar) {
       gtag('js', new Date());
       gtag('config', 'GAID', {foo: bar}); // Where bar is a variable depending on the page
   }
</script>

但是，所有这些试验都只返回相同的结果：{foo: bar}，其中 bar 是整个应用程序加载的初始栏。例如，当我第一次进入主页时，有一个带有 bar1 的 page_view 事件。当我点击页面A时，它仍然给我bar1。然后无论我去哪里，它都会给我 bar1 除非我重新加载页面。

我在互联网上查到人们使用 next/router 来解决这个问题，但是 NextJS 13 中没有 next/router 所以我被困在那里......

谁能解释一下为什么会这样？

Answer 1

我将 Google Analytics 与 Next 应用程序目录结合使用的方式

/组件/GoogleAnalytics.tsx

"use client";

import Script from "next/script";
import * as gtag from "@/lib/gtag";

const GoogleAnalytics = () => {
  return (
    <>
      <Script
        strategy='afterInteractive'
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
      />
      <Script
        id='gtag-init'
        strategy='afterInteractive'
        dangerouslySetInnerHTML={{
          __html: `
                      window.dataLayer = window.dataLayer || [];
                      function gtag(){dataLayer.push(arguments);}
                      gtag('js', new Date());
                      gtag('config', '${gtag.GA_TRACKING_ID}', {
                      page_path: window.location.pathname,
                      });
                    `,
        }}
      />
    </>
  );
};

export default GoogleAnalytics;

应用程序/layout.tsx

import "@/styles/globals.css";
import GoogleAnalytics from "@/components/GoogleAnalytics";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='fr'>
      <body>
        <main>
                <GoogleAnalytics />
                    {children}
              </main>
      </body>
    </html>
  );
}

lib/gtag.ts

export const GA_TRACKING_ID: string | undefined = process.env.GA_TRACKING_ID;

export const pageview = (url: string) => {
  (window as any).gtag("config", GA_TRACKING_ID, {
    page_path: url,
  });
};

export const event = ({
  action,
  category,
  label,
  value,
}: {
  action: string;
  category: string;
  label: string;
  value: number;
}) => {
  (window as any).gtag("event", action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

在NextJS 13应用程序目录中实现Google Analytics

问题描述投票：0回答：1

1个回答

最新问题

在NextJS 13应用程序目录中实现Google Analytics

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1