gtm-module icon indicating copy to clipboard operation
gtm-module copied to clipboard

Question: How to disable after init?

Open henrikhansson opened this issue 3 years ago • 3 comments

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?

henrikhansson avatar Jan 05 '21 14:01 henrikhansson

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

manniL avatar Jan 22 '21 09:01 manniL

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.

hacknug avatar Jan 25 '22 15:01 hacknug

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);
    }
  }
}

Lazac92 avatar Apr 05 '22 08:04 Lazac92