任何人都可以帮助实现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

我看了看包装，在modules/packages/google-tag-manager/plugin.js里面有这段代码：

window['<%= options.layer %>'].push(to.gtm || { event: 'nuxtRoute', pageType: 'PageView', pageUrl: to.fullPath, routeName: to.name })

由此看来，数据层看起来像这样：

{
event: 'nuxtRoute',
pageType: 'PageView',
pageURL: to.fullPath,
routeName: to.name
}

因此，在GTM中，您将定义一个自定义事件触发器以在“ nuxtRoute”事件上触发。

然后，您要在GTM中创建两个DataLayer变量，这些变量将捕获pageURL并可能捕获routeName，我说routeName是可选的，取决于您是否要更改/更新文档的。

然后在GTM中创建您的Google Analytics（分析）标签。确保它是“页面浏览”类型，然后选中“更多设置>要设置的字段”下的“启用此标签中的替代设置”复选框，并在“页面”中键入我们创建的变量的字段名称和“值”引用。如果要使用to.name变量设置页面标题，请使用“标题”字段。确保在“触发”下也添加了nuxt路由触发器。

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