有人能帮助实现Nuxt.js谷歌标签管理器吗？

Question

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

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

不幸的是，..but在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中创建标签。确保它是"pageview“类型，然后选中”启用此标记中的覆盖设置“复选框，在”多个设置>字段“下为字段名设置”type in“页面，并为我们创建的变量"value”引用。如果要使用to.name变量设置页面标题，只需使用" title“字段即可。确保添加nuxt路由触发器以及在“触发”下。

​

保存和发布所有内容，或者在预览模式中运行它，您将看到一些页面视图。