vue-gtag How to set a dimension before the first router pageview?

Hello, First of all, a big thanks for this plugin which made it easier for us to set up Google Analytics in our Vue project.

I'm using vue-gtag 1.16.1 with vue 2.6.14.

I'm trying to set a dimension (the value is retrieved from the backend) for all queries made to Google Analytics. But I can't do: ["set", {dimension1: "MY_VALUE"}] before the first: ["event", "page_view", {page_title: "MY_TITLE", page_path: "/", page_location: "http://localhost:4200/", send_page_view: true}]

I do not perform the pageview manually, they are triggered by the router. The first pageview does not contain the dimension, the following ones do.

I have tried a lot of things without success, for example:

bootstrap: false, then set(dimension), then bootstrap()...
enabled: false, then set(dimension), then this.$gtag.optIn()...

Here is the sample code from my last try:

Vue.use(VueGtag,
    {
      config: {id: 'UA-XXX'},
      bootstrap: true,
      enabled: false,
    },
    router,
);

   created(): void {
      userService.getCurrentUser().then((user) => {

        this.$gtag.set({
          dimension1: user.role,
        });

        this.$gtag.optIn();
      });
    }

Output with the Google Analytics Debugger:

Processing GTAG command: ["event", "page_view", {page_title: "MY_TITLE", page_path: "/", page_location: "http://localhost:4200/", send_page_view: true}] Processing GTAG command: ["set", {dimension1: "MY_VALUE"}]

Thanks in advance for the help 🙏🏻

Jun 11 '21 13:06 potpot59

Hi @potpot59, I might have to add a callback function before the first configuration hit. I think that would fix your issue and you wouldn't need all this