有人能帮忙实现Nuxt.js Google Tag Manager吗？

Question

嗨，我构建了一个Nuxt应用程序，但在使用@nuxtjs/google-tag-manager时遇到了问题。如下所示。文档相对简单，我还没有找到很多示例实现方式。在我的 nuxt.config.js文件中有以下设置。

['@nuxtjs/google-tag-manager', {  id: process.env.GTM_ID,  layer: 'dataLayer',  pageTracking: true}],

但不幸的是，在Google标签管理器中没有获得任何页面浏览量

有人有关于如何最好实施GTM或什么对他们起作用的想法或经验吗？

提前致谢

- RuNpiXelruN

---

你在GTM中正确配置了GA标签吗？ - XTOTHEL

Answer 1

我看了一下这个包，在https://github.com/nuxt-community/gtm-module/blob/master/lib/defaults.js里有下面这段代码：

function startPageTracking(ctx) {
  ctx.app.router.afterEach((to) => {
    setTimeout(() => {
      ctx.$gtm.push(to.gtm || {
        routeName: to.name,
        pageType: 'PageView',
        pageUrl: '<%= options.routerBase %>' + to.fullPath,
        pageTitle: (typeof document !== 'undefined' && document.title) || '',
        event: '<%= options.pageViewEventName %>'
      })
    }, 250)
  })
}

从那里看，数据层看起来像这样：

{
routeName: to.name,
pageType: 'PageView',
pageUrl: '<%= options.routerBase %>' + to.fullPath,
pageTitle: (typeof document !== 'undefined' && document.title) || '',
event: '<%= options.pageViewEventName %>' //default is 'nuxtRoute'
}

事件的默认名称是“nuxtRoute”。因此，在GTM中，您将定义一个自定义事件触发器来触发“nuxtRoute”事件。操作如下：

然后，您需要在GTM中创建两个DataLayer变量，以捕获pageUrl（请注意驼峰式拼写），并可能捕获routeName。我说routeName是可选的，这取决于您是否更改/更新了文档的<title>标签。

然后，在GTM中创建您的Google Analytics标签。确保它是“pageview”类型，然后勾选“在此标签中启用覆盖设置”复选框，在“更多设置>要设置的字段”下，输入“page”作为字段名，对于“value”，引用我们创建的变量。如果您想使用to.name变量设置页面标题，请使用“title”字段。确保还在“触发”下添加nuxt路由触发器。

保存并发布所有内容，或在预览模式下运行它，您应该可以看到页面浏览量的统计。

- XTOTHEL

---

因为你正在使用Vue，我假设这是一个单页应用程序（SPA），在SPA中，“页面视图”只有在应用程序加载时才会出现传统意义上的“页面视图”。这就是为什么你要使用Nuxt，它提供了一个“事件”，用于在SPA中的路由发生变化时向GTM发出信号，表示有一个新的“屏幕”视图。然后，GTM获取该屏幕视图事件，获取URL、标题等数据层变量，并将这些数据发送到GA。 - XTOTHEL

Xhothel的回答非常准确，只是你似乎没有完全意识到GTM事件和GA事件之间的区别。以上内容将显示为分析工具中的页面浏览量。触发器类型对跟踪数据不重要 - 只要分析标签表明“页面浏览量”，你就会在GA中得到一个（虚拟）页面浏览量，无论哪个GTM事件引发它。 - Eike Pierstorff

@XTOTHEL：您的意思是什么？那里有什么记录？如何在不创建自定义触发器的情况下实现这一点在Google Tag Manager中？ - Philipp S.

在第一次加载时，我看到触发了两个页面视图。第一个来自插件，第二个来自您描述的自定义触发器。 - Philipp S.

如果你正在使用 @nuxtjs/gtm，那么 pageURL 参数现在被更名为 pageUrl！ - Skoua