Google Tag Manager tag is not firing when viewing the page; we have to reload the page.

[ngocvinh208]

Description

When trying to build with Vue GTM module Google Tag Manager tag is not firing when viewing the page so we have to reload the page. I think because this is a third-party service, it only renders itself once per page load.?

Steps to reproduce

Configure it in main.js

  import VueGtm from '@gtm-support/vue2-gtm';
  export default function(Vue, { router, head, isClient }) {
  
      if( process.isClient){
          Vue.use(VueGtm, {
              id: 'GTM-PR7VTQG',
              vueRouter: router,
              enabled: true,
              debug: true,
          });
      }
    }

Configure it in my component

export default {
   name: "WpPage",
   components: {
     BlockBase: () => import('../components/BlockBase.vue'),
     MetaInfo: () => import('../components/MetaInfo.vue'),
     EventsCollective: () => import('../components/EventsCollective.vue'),
     NewsCollective: () => import('../components/NewsCollective.vue'),
     ArchivedEvents: () => import('../components/ArchivedEvents.vue'),
   },
   mounted() {
     var mainTitle = this.$page.wpPage.title;
     this.$gtm.trackView(mainTitle, window.location.pathname)
   },
 };  

Expected result

I am expecting GTM to fire the website.

Actual result

GTM tag is not firing the website

Environment

Node version: v14
Gridsome version: v0.7.20
Vue version : v2.6.12
OS: Mac

[a-kriya]

https://support.google.com/tagmanager/answer/7679322?hl=en