谁能帮助实施 Nuxt.js Google 跟踪代码管理器？

Question

嘿，我已经构建了一个 Nuxt 应用程序，但在使用包 @nuxtjs/google-tag-manager 包时遇到了问题。在下面找到。文档非常简单，我还没有找到很多示例实现。在我的 nuxt.config.js 中，我有以下设置。

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

..但不幸的是，我在 Google 跟踪代码管理器

中没有获得任何 页面浏览量

有没有人对如何最好地实施 GTM 或者对他们有用的东西有任何想法或经验？

提前致谢

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 是可选的，取决于您是否 changing/updating 文档的作者。

然后在 GTM 中创建您的 Google Analytics 代码。确保它是“pageview”类型，然后选中“在此标记中启用覆盖设置”复选框，在“更多设置>要设置的字段”下键入“page”作为字段名，“value”引用我们创建的变量。如果您想使用 to.name 变量设置页面标题，只需使用“标题”字段即可。确保在“触发”下也添加了 nuxt 路由触发器。

保存并发布所有内容或运行在 preview mode 中，您应该会看到一些浏览量。

谁能帮助实施 Nuxt.js Google 跟踪代码管理器？

Can anyone help implementing Nuxt.js Google Tag Manager?

google-tag-manager

vue.js

nuxt.js