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

在您的plugins文件夹中创建一个空文件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/

如何将gtag.js与nuxt.js结合使用？

1 个答案: