How to use gtag.js with nuxt.js?

Question

I'm trying to use the gtag.js library with nuxt.js. To do this, I installed the plugin https://github.com/nuxt-community/google-gtag, but it does not work for me

//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

You can use vue-gtag and create a custom plugin to activate it within nuxt as below:

npm add vue-gtag

in your plugins folder create an empty file vue-gtag.js

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

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

})

configure your nuxt.config.js to use Vue-Gtag

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

Your App should now start to use vue-gtag with the following defaults:

{
  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
}

Find more dtails from Vue-Gtag documentation here: https://matteo-gabriele.gitbook.io/vue-gtag/