gtm-module
gtm-module copied to clipboard
Question: How to disable after init?
Hi!
Is there any way to manually disable the gtm-module after it has been initialized? I guess
this.$gtm.init(null)
could work but it's not a very clean solution and I'm afraid it will keep the initial module.
Anyone knows how to properly disable it?
My workaround:
- Manual activation only: Check for an opt-out cookie. If not exists -> activate
- When disabling: set the opt-out cookie and do a full-reload
Is there any way to manually disable the gtm-module after it has been initialized? I guess
this.$gtm.init(null)
This will result in a 404 in your network tab which is something I don't really like.
My workaround:
1. Manual activation only: Check for an opt-out cookie. If not exists -> activate 2. When disabling: set the opt-out cookie and do a full-reload
This is good enough for me now. It makes everything work the way I expect without making things too complicated (enabling/disabling things every time a user makes a change in their cookie preferences).
It would still be really helpful to be able to disable it programatically without a page reload or anything that could be considered a workaround.
I found another way to be able to turn it off without page reload:
1. Create nuxt plugin
Create a nuxt plugin to send stats when the page loads.
/* src/plugins/gtm.js */
export default function ({ store, $gtm, route }) {
if (store.state.cookieSettings.analytics) {
$gtm.push({
event: 'nuxtRoute',
'gtm.uniqueEventId': 0,
pageTitle: document.title,
pageType: 'PageView',
pageUrl: route.path,
routeName: route.name,
});
}
}
2. Create a navigation guard
/* src/middleware/route-guard.js */
let eventId = 1; // mock google event id
let setup = false; // to init only once
export default function ({ app, store, $gtm }) {
if (!setup) {
app.router.beforeResolve((to, from, next) => {
setup = true;
if (store.state.cookieSettings.analytics) {
$gtm.push({
event: 'nuxtRoute',
'gtm.uniqueEventId': eventId,
pageTitle: document.title,
pageType: 'PageView',
pageUrl: to.path,
routeName: to.name,
});
eventId++;
}
next();
});
}
}
3. Register the plugin and the navigation guard.
/* nuxt.config.js */
plugins: [
// ...
{ src: '~/plugins/gtm.js', mode: 'client' },
],
router: {
middleware: 'route-guard',
},
Make sure, that the gtm.pageTracking
is unset or false.
4. Optional: Call the init function manually
Call the plugin on accept, to track the actual page immediately.
/* my accept cookies component */
import initGtm from '../../plugins/gtm';
export default {
methods: {
acceptCookies() {
initGtm(window.$nuxt.context);
}
}
}