我的应用程序包有问题.在下面找到.文档非常简单,我还没有找到很多示例实现.在我的nuxt.config.js中,我有以下几组.

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

但不幸的是,我在Google Tag Manager中没有获得Page Views

有没有人对如何最好地实施GTM或什么对他们有效有任何 idea 或经验?

提前谢谢

推荐答案

我看了一下包裹,里面有一段代码:

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'
}

The default name for the event is 'nuxtRoute'. Thus in GTM, you'll get to define a custom event trigger to trigger on the "nuxtRoute' event. Like so: enter image description here

Then you want to create two DataLayer variables in GTM that will capture pageUrl(Please note the camel case) and possibly routeName, I say routeName is optional depends on if you're changing/updating the of the document or not. enter image description here

Then create your Google Analytics tag in GTM. Make sure it is the "pageview" type, then check the "enable overriding settings in this tag" checkbox, under "more settings > fields to set" type in "page" for fieldname and for "value" reference that variable we created. If you want to set the page title using the to.name variable just use the "title" field. Make sure you add the nuxt route trigger as well under "triggering". enter image description here

保存并发布所有内容,或者在preview mode分钟内运行,你应该可以看到一些页面浏览量.

Vue.js相关问答推荐

使用插槽的VUE 3工作台

使用 Vue.js 将文件输入绑定到按钮

使用 Nuxt 动态获取文件夹中的图像路径

Vue:在表格中显示嵌套数据

可以同时使用 Tailwind css 和 Bootstrap 4 吗?

包含 Vue.js v-if 和 v-for 指令的 HTML 标签在加载时flash

如何根据生产或开发模式读取不同的 .env 文件?

数据更新后触发 Vue.js 事件

Vue 如何使用 slot 和 slot-props 测试组件

触发子函数

这是 v-on:change 的正确用法吗?

如何在 Vuex 中获取 Vue 路由参数?

所有 vue props和数据都给出错误 Property属性在 type 上不存在,带有 typescript

vue组件中导入和使用three.js库

找不到模块 'babel-core' 但已安装 @babel/core

使用 Vue 在单个文件组件中调用渲染方法

在 Vue.js 模板中调用函数

带有 Firebase 云消息传递的 Vue pwa 无法正常工作

VueJS 按键查找元素

如何在 vue 组件中使用 vuex?