Will this module use `vue-gtag` instead of `vue-analytics`?
eggsy opened this issue · 2 comments
eggsy commented
reinoldus commented
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 commented
Definitely keen for the upgrade.