Vue 3 support?

Hi and thank you for this plugin. While trying to add analytics on vite and vue 3 being in RC3 I was wondering if you have any plans on supporting these. Right now I’m getting:

Uncaught TypeError: Cannot set property '$gtag' of undefined

Many Thanks

[MatteoGabriele]

I have started working on version 2 of the plugin. The intention is to rewrite a better plugin using all the power of the new composition API as well which will allow the developer more control over it. you can check the branch v2 if you want, but it’s in early stages. I will provide a vue-gtag@next package when everything will be ready. Another repository is not necessary

[MatteoGabriele]

so I think I almost got a stable-ish version. I made quite a few changes and I will try to share some of them here before I finish testing, writing the doc and publish.

installation

I published the vue3 version under vue-gtag-next package

yarn add vue-gtag-next

then install the library

import { createApp } from "vue";
import App from "./App.vue";
import gtag from "vue-gtag-next";

const app = createApp(App)

app.use(gtag, {
  property: {
    id: 'UA-123456-7'
  }
})

app.mount("#app");

the property object is what in the current v2 version is the config object. ( shape is still { id: Number, params: Object } I have changed the name because of the conflict with the actual config gtag api. now property can simply be an object or an array of objects for when we want to use multiple domain tracking.

plugin options/state

default values

{
  property: null,
  isEnabled: true,
  globalObjectName: "gtag",
  dataLayerName: "dataLayer",
  resourceURL: "https://www.googletagmanager.com/gtag/js",
  preconnectOrigin: "https://www.googletagmanager.com",
  customResource: null,
  useDebugger: false,
  appName: null,
  appId: null,
  appVersion: null,
}

install automatic route tracking

I have separated the 2 features to make plugin a bit more easy to manage

install the application with vue-router

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import gtag from "vue-gtag-next";

const app = createApp(App);

app.use(router);
app.use(gtag, {
  property: {
    id: "UA-123456-7"
  }
});
app.mount("#app");

then in the router file, for example, you can use the trackRouter method, which also has option specifically for the automatic routing feature

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import { trackRouter } from "vue-gtag-next";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

trackRouter(router);

export default router;

trackRouter options

default values

{
  template: null,
  useScreenview: false,
  skipSamePath: true,
}

components

the usage in components is exactly the same: you can access the this.$gtag object

composition api

vue 3 obviously introduces the new composition api and this is actually the best part of the refactor: almost everything is reactive and it can be used and modified everywhere.

<template>
  <div>
    <div v-if="!isTracking">
      <p>Click here if you agree with the tracking policy and blablabla</p>
      <button @click="addProperty">All good</button>
    </div>
  </div>
</template>

<script>
import { isTracking, useState } from "vue-gtag-next";

export default {
  setup() {
    const { property } = useState();

    const addProperty = () => {
      property.value = {
        id: "UA-1234567-7"
      };
    };

    return {
      isTracking,
      addProperty
    };
  }
};
</script>

The useState returns refs that before could have been modified only from the plugin installation. This makes it easier, for example, to create a tracking banner and start tracking only after a user accepts the policy.

it is also possible to track using the useGtag function

<template>
  <div>
    <button @click="login">Login</button>
  </div>
</template>

<script>
import { useGtag } from "vue-gtag-next";

export default {
  setup() {
    const { event } = useGtag()
    const login = () => {
      event('login', { method: 'Google' })
    }

    return {
      login
    };
  }
};
</script>

let me know if you have any questions. it’s obviously still not ready to production and I am working on it + need to add all missing features as well