vue.js - 任何人都可以帮助实施 Nuxt.js 谷歌标签管理器吗？

Question

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

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

..但不幸的是我没有 在谷歌标签管理器中获得任何页面浏览量

是否有人对如何最好地实施 GTM 或对他们有用的方法有任何想法或经验？

提前致谢

标签： vue.jsgoogle-tag-managernuxt.js

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”类型，然后选中“enable overriding settings in this tag”复选框，在“more settings > fields to set”下输入“page”作为字段名，“value”引用我们创建的变量。如果您想使用 to.name 变量设置页面标题，只需使用“title”字段。确保在“触发”下也添加了 nuxt 路由触发器。

保存并发布所有内容或在预览模式下运行它，您应该会看到一些浏览量。