bootstrap() reloads Gtag everytime

[wparad]

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Description

Everytime bootstrap() is called gtag is reinjected in the application. This makes unnecessary calls to GA, etc...

Expected behavior

It should only be injected one time.

Actual behavior

GTAG script is loaded in the DOM multiple times and multiple page views are executed

Environment

Run this command in the project folder and fill in their results:

npm ls vue-gtag:

import { bootstrap } from 'vue-gtag`
await bootstrap();
$gtag.event...

[MatteoGabriele]

how you end up bootstrapping it more than once?

[wparad]

Because the documentation suggests await bootstrap() is the way to await for the module to finish loading. And I wanted to simply await bootstrap() without having to write this annoying code:

let resolveBootstrap;
const bootstrapAsync = new Promise(resolve => resolveBootstrap = resolve);
const gtagOptions = {
  config: { id: 'UA-113344067-9', params: { send_page_view: false } },
  // appName: 'Authress ',
  pageTrackerTemplate(to) {
    return {
      page_title: document.title,
      page_path: path.join('/app/', to.matched[0] ? to.matched[0].path : to.path),
      page_location: window.location.href
    };
  },
  onReady() {
    resolveBootstrap();
  }
};

await boostrapAsync

[MatteoGabriele]

well of course every time bootstrap is called the library is loaded. why are you calling bootstrap more than once?

[MatteoGabriele]

await bootstrap is not the way to check if the module is loaded: that's how you load the module if you don't want to bootstrap it at the beginning. onReady is the way to check if the module is ready: it's a bit different.

[MatteoGabriele]

https://matteo-gabriele.gitbook.io/vue-gtag/custom-installation#bootstrap-later