Will this module use `vue-gtag` instead of `vue-analytics`?

[eggsy]

As the current module isn't maintained and throwing warnings to console, are you going to switch to vue-gtag?

[reinoldus]

More and more I am getting the feeling that modules that just wrap another vue-module without any magic around it are not so useful, since configuring vue-gtag is pretty easy. It's a bit different for something like nuxt-sentry that seems more involved.

For really simple modules like this one it would probably be better to have a tutorial somewhere in the nuxt docs.

Here is an example on how to use vue-gtag wit nuxt + gdpr consent:

// init_gtag.js
import Vue from 'vue'
import VueGtag from 'vue-gtag'

export default (context, inject) => {
  Vue.use(
    VueGtag,
    {
      config: { id: 'xxx' },
      bootstrap: false, // load on consent
    },
    context.app.router
  )

  inject('gtag', Vue.$gtag) // this is the most important line to get gtag in nuxt-content
}

// consent.js
import CookiesEuBanner from 'cookies-eu-banner'
import { bootstrap } from 'vue-gtag'

export default (context, inject) => {
  CookiesEuBanner.prototype.setCookie = function (name, value) {
    const date = new Date()
    date.setTime(date.getTime() + this.cookieTimeout)

    document.cookie =
      name +
      '=' +
      value +
      ';expires=' +
      date.toGMTString() +
      ';path=/' +
      ';secure;SameSite=Lax'
  }

  function waitForElement(selector) {
    return new Promise(function (resolve, reject) {
      const element = document.querySelector(selector)

      if (element) {
        resolve(element)
        return
      }

      const observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
          const nodes = Array.from(mutation.addedNodes)
          for (const node of nodes) {
            if (node.matches && node.matches(selector)) {
              observer.disconnect()
              resolve(node)
              return
            }
          }
        })
      })

      observer.observe(document.documentElement, {
        childList: true,
        subtree: true,
      })
    })
  }
  waitForElement('#cookies-eu-banner').then(function (element) {
    CookiesEuBanner(function () {
      // Your code to launch when user accept cookies

      const checkExist = setInterval(function () {
        try {
          bootstrap().then((gtag) => {
            console.log('gtag enabled')
            context.$gtag.set('user_properties', {
              logged_in: context.app.$auth.loggedIn,
            })
          })
          clearInterval(checkExist)
        } catch (e) {
          console.log(e)
        }
      }, 100)
    }, true)
  })
}

[marcelofern]

Definitely keen for the upgrade.