Nuxt.js 中的 Gtag

Question

我在 nuxt js 应用程序中配置 gtag 时确实遇到了麻烦。

我遵循这个指南：

https://www.carlcassar.com/articles/add-google-analytics-to-a-nuxt-js-app/

这是我的插件：

    import Vue from 'vue';
    import VueGtag from 'vue-gtag';
    
    Vue.use(VueGtag, {
        config: { id: 'G-*********' },
        appName: 'app-name',
    });

这就是我在 nuxt.confing.js 中加载它的方式

      plugins: [
        "@/plugins/aos.client",
        "@/plugins/progress-path",
        "@/plugins/vue-input-ui",
        '@plugins/vue-js-modal.js',
        "@/plugins/paypal",
        "@/plugins/autocomplete",
        "@/plugins/lazy-load",
        {
          src: './plugins/gtag.js',
          mode: 'client'
        },
      ],

但我确实面临着无法将任何内容发送到分析控制台的麻烦。

这是来自 google 的 gtag

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-*********"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'G-*********');
    </script>

我哪里错了？

感谢大家

Answer 1

来自您正在关注的教程：跟踪页面浏览量。

您需要将Vue.use函数包装在export default插件中并传递路由器：

import Vue from 'vue';
import VueGtag from 'vue-gtag';

export default ({ app }) => {
  Vue.use(VueGtag, {
    config: { id: 'G-*********' },
    appName: 'app-name',
  }, app.router);
}