vue.js - 谁能帮助实现 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 是可选的取决于您是否正在更改/更新文档的名称。

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

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