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

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

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