Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to set a dimension before the first router pageview?

See original GitHub issue

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 🙏🏻