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

来自您正在关注的教程：Track page views。

您需要将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);
}

Nuxt.js 中的 Gtag

Gtag in Nuxt.js

vue.js

nuxt.js

gtag.js