如何让Google Analytics GA4识别我的带有VUE-gtag的Nuxt网站?

2022-02-25 00:00:00 google-analytics vue.js nuxt.js gtag.js

我有一个要使用Google Analytics跟踪的Nuxt.jsWeb客户端。
我这样使用vue-gtag:

/plugins/vue-gtag.js

import Vue from 'vue'
import VueGtag from 'vue-gtag'
export default ({ app }) => {
  Vue.use(
    VueGtag,
    {
      config: { id: process.env.GTAG }, // this is defined in my Netlify env variables together with my backend API which works
      appName: 'SleepRescue',
      bootstrap: true,
      enabled: true,
      pageTrackerScreenviewEnabled: true,
    },
    app.router
  )
}

nuxt.config.js

plugins: [
  ...
  { src: '~/plugins/vue-gtag' },
  ...
]

我还定义了自定义事件,如下所示:

async registerUser() {
  this.$gtag.event('sign_up', {
    event_category: 'engagement',
    event_label: 'method',
  })
  ...
}

请随时查看plugin、我的Nuxt config和给定的example of a custom tag。

不幸的是,我的Google Analytics仪表板无法识别任何流量,似乎也无法识别我定义的任何标记。我已经尝试从多台机器和IP访问我的网站,但仍然没有流量。如果我进入GA帐户->;Admin->;数据流,我可以在";网站&下看到我的网站,但它显示";在过去48小时内未收到数据";。如果我单击它,那么我将能够看到G-*ID作为测量ID,我认为只要它与我的VueGtag ID中的匹配,它就应该可以工作。

有人知道这里可能出了什么问题吗?


解决方案

以下是GA3和GA4的区别列表:https://cxl.com/blog/ga4/
不确定仍然使用GA3是否会破坏交易。

选中可能完全支持GA4的this solution。

另外,如果你不是Google的铁杆粉丝,想使用更开源的东西,你可以查看Plausible,甚至可以试试Debbie的detailed setup here。

相关文章