如何将 gtag.js 与 nuxt.js 一起使用？

Question

我正在尝试将 gtag.js 库与 nuxt.js 一起使用。为此，我安装了插件https://github.com/nuxt-community/google-gtag，但它对我不起作用

//nuxt.config
if(APP_ENV.gtag !== '') {
  m.modules.push([
    '@nuxtjs/google-gtag',{
    id: APP_ENV.gtag,
    config: {
      'send_page_view': false,
      'anonymize_ip': true
    },
    debug: false,
    disableAutoPageTrack: false
    }
  ])
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<a  href="#" @click.stop.prevent="onAddCartItem(false), $gtag('event','add_to_cart',{items: [{id: 'P12345'}, {name: 'P12345'}, {list_name: 'Search Results'}, {brand: 'Google'}, {category: 'Apparel/T-Shirts'}]})">В корзину</a>

Answer 1

您可以使用vue-gtag 并创建一个自定义插件以在nuxt 中激活它，如下所示：

npm 添加 vue-gtag

在你的插件文件夹中创建一个空文件 vue-gtag.js

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

Vue.use(VueGtag, {
  config: { id: "UA-174146361-1" },

})

配置你的 nuxt.config.js 以使用 Vue-Gtag

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

您的应用现在应该开始使用具有以下默认值的 vue-gtag：

{
  pageTrackerTemplate: () => {},
  onBeforeTrack: () => {},
  onAfterTrack: () => {},
  onReady: () => {},
  enabled: true,
  disableScriptLoad: false,
  bootstrap: true,
  globalObjectName: "gtag",
  globalDataLayerName: "dataLayer",
  pageTrackerEnabled: true,
  pageTrackerScreenviewEnabled: false,
  pageTrackerSkipSamePath: true,
  defaultGroupName: "default",
  includes: null,
  config: null
}

在此处从 Vue-Gtag 文档中查找更多详细信息：https://matteo-gabriele.gitbook.io/vue-gtag/