MatteoGabriele/vue-gtag

how use it with quasar framework ?

Closed this issue · 3 comments

eeerrrttty commented

I would like more docs to.

Other thing, can i use one google tag for each route i'm using?

example:

userA/productA (this will have 1 google tag)
userA/productB (this will have another google tag)
userB/productC (this will have another google tag)

I wanna one google tag for each product, dynamicaly

CynthiaBlue commented

I'd also like to have more information about using this with Quasar Framework.

MatteoGabriele commented

This is vue-frameworks agnostic, so I do not know the specific needs of each vue framework.

MathiasVie commented

Yes, is works with quasar.
Tested with "quasar": "^2.1.0":

npm install vue-gtag --save

create a boot file in /src/boot/vue-gtag.js:

import { boot } from "quasar/wrappers";
import VueGtag from "vue-gtag";

export default boot(({ app, router }) => {
  app.use(
    VueGtag,
    {
      includes: [
        {
          id: "G-XXXXXXXX",
        },
      ],
      config: {
        id: "UA-XXXXXXX",
        params: {
          anonymize_ip: true,
        },
      },
      bootstrap: false,
    },
    router
  );
});

Register it in quasar.conf.js:

boot: ["i18n", "axios", "vue-gtag"],

I use UA and GA4 in one setup. To comply with GDPR it's deactivated by default (bootstrap: false) until the user optIn. This script handles the bootstrap process and optIn / optOut in case the user later decides to optOut from tracking:

import { bootstrap, optOut, optIn } from "vue-gtag";
  bootstrapAnalytics(payload) {
    if (payload) {
      if (!window.gtag) { // already bootstrapped?
        bootstrap().then((gtag) => {});
      }
      optIn();
    } else {
      optOut();
    }
  },
  • 👍2