Nuxt.js 中的 Gtag

问题描述

在我的 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'
        },],

但我真的遇到了无法向分析控制台获取任何内容的问题。

这是来自谷歌的 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>

我哪里错了？

谢谢大家

解决方法

来自您正在学习的教程：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);
}