Next.js 的 sendGTMEvent 不会提交到 Google Analytics

Question

Next.js 的 sendGTMEvent 不会提交到 Google Analytics

我正在尝试学习如何从 Next.js 项目向 Google Analytics 提交自定义事件。该文档说我应该使用sendGTMEvent：

https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries

当我使用时sendGTMEvent，它会添加一个项目来执行dataLayer，但实际上没有任何内容传输到 Google Analytics。我在 Google Analytics 中没有看到任何提及我的自定义事件的信息。这是我的代码：

/// app/layout.tsx
import GoogleAnalytics from './GoogleAnalytics'

export default async function RootLayout({
  children
}: {
  children: React.ReactNode
}) {

  return (
    <html>
      <body>
        <GoogleAnalytics />
        <main className="">{children}</main>
      </body>
    </html>
  )
}

Run Code Online (Sandbox Code Playgroud)

/// app/GoogleAnalytics.tsx
'use client'

import { GoogleTagManager } from '@next/third-parties/google'

const gtmId : string = process.env.NEXT_PUBLIC_GOOGLE_ID ? process.env.NEXT_PUBLIC_GOOGLE_ID : ""

function GA() {

  return <GoogleTagManager gtmId={gtmId} />
}

export default GA

Run Code Online (Sandbox Code Playgroud)

/// app/Form.tsx
'use client'

import { sendGTMEvent } from '@next/third-parties/google'


export default function Form() {
setInterval(() => {
  if( typeof window === "undefined" ) {
    return null
  }
    dataLayer.push({'event':'MyTest1','conversionValue':25});
    sendGTMEvent({ event: 'MyTest2', value: 'hello-world' })
    console.log('submitting' )
}, 3000);

  return <div>Hello World</div>
}

Run Code Online (Sandbox Code Playgroud)

当我访问浏览器时http://localhost:3000，我看到这个词Hello World，这意味着我的网站加载正确。当我打开时Chrome Developer Tools>Console，我发现每 3 秒submitting就会看到该单词。我可以看到dataLayer随着更多记录添加到数组中，数组的长度不断增长。

但我没有看到我的 JavaScript 尝试向 Google 发送数据。除了初始页面加载之外，该Chrome Developer Tools>Network选项卡显示向 Google 提交任何内容的尝试为零。

我尝试阅读有关该主题的文档和博客，但我不清楚应该调用什么函数来实际“发送信息”到 GA？

补充笔记：

当我访问 Google Analytics 并查看实时仪表板时，我没有看到任何提及MyTest1或MyTest2在此小部件中的内容：

我尝试单击每一行以进一步深入，但找不到任何提及MyTest1或MyTest2

Answer 1

BNa*_*ruk 1

首先。dataLayer 只是一个数组。它本身不做任何事情。你需要一些东西来听它的push方法。有相当多的图书馆这样做。特别是GTM。因此，当您调试时，您看到数组发生变化但没有网络请求，这是 GTM 问题的明显迹象，因此您的下一个调试步骤是检查 GTM 的内部逻辑。

从 Next 或任何其他前端框架的角度来看，它都做得很好。数据层是典型前端职责和分析世界开始的地方。所以问题绝对不在 Next 中，除非它不加载 GTM 库，但你会注意到这一点，所以应该没问题。

GTM 是一个大型套件，可以根据需要自动加载 gtag.js 或许多其他库，并且对前端完全透明。需要注意的是，必须有人通过 GTM 的 UI 来设置事件逻辑。这不是什么大事，但肯定需要一些时间。请在此处阅读有关 GTM 的更多信息。

最有可能的是，您只是缺少 GTM 设置。您应该去那里，确保您去的 GTM 套件具有正确的 ID。无论你的gtmIdcons中有什么。或者只是打开 Elements 并查看 dom 脚本片段中的 id，它应该具有类似于 GTM-XXXXXX 的代码。好的，一旦你到达那里，请确保它没有现有的分析逻辑，如果它确实是一个空容器，那么：

制作 Google Tag 类型的标签。在那里提供您的 GA4 衡量 ID，Tag ID以便将事件发送到正确的 GA4 媒体资源。在那里设置页面加载触发器。“页面视图”类型的“所有页面”。这将有效地在每个页面上加载与您的 GA4 媒体资源相匹配的 gtag 库。
创建数据层事件 (DLE) 类型的触发器，并在触发器中为其MyTest1命名。
制作 GA4 事件代码。将步骤 1 中的配置标记设置为配置参考。
将您的 GTM 容器发布到生产环境。

完毕！现在，每次推送MyTest1事件时，您都应该看到对 Google 的“收集”端点的网络请求，其中包含有关页面的基本通用数据。

当然，您还可以执行更多操作，例如配置增强型电子商务事件或发送自定义维度。您可以在我上面发布的链接中看到这一点。谷歌试图用他们的文档涵盖所有用例。

归档时间：	1 年，10 月前
查看次数：	587 次
最近记录：	1 年，9 月前