Auto tracking
If you are using VueRouter inside your application, you can simply pass the VueRouter instance as the third parameter of the
app.use method and the plugin will start tracking all your pages automaticallyimport { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import VueGtag from "vue-gtag";
import App from "./App.vue";
import Home from "./Home.vue";
import About from "./About.vue";
const router = new VueRouter({
history: createWebHashHistory(),
routes: [
{ name: 'Home', path: '/', component: Home },
{ name: 'About', path: '/about', component: About },
]
});
const app = createApp(App);
app.use(router);
app.use(VueGtag, {
config: {
id: "GA_MEASUREMENT_ID",
},
}, router); // <----- add your router here
app.mount("#app");
By default, the tracking system uses pageviews with the following template
{
page_path: '/', // route path value
page_location: 'http://localhost:8080/' // window.location.href
}
To be able to use screenview you need to first enable the feature and pass the app name using the plugin global settings
import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import VueGtag from "vue-gtag";
import App from "./App.vue";
import Home from "./Home.vue";
import About from "./About.vue";
const router = new VueRouter({
history: createWebHashHistory(),
routes: [
{ name: 'Home', path: '/', component: Home },
{ name: 'About', path: '/about', component: About },
]
});
const app = createApp(App);
app.use(router);
app.use(VueGtag, {
appName: 'My application',
pageTrackerScreenviewEnabled: true,
config: {
id: "GA_MEASUREMENT_ID",
},
}, router);
app.mount("#app");
The automatic tracker system can use a custom template, instead of the default one: this will apply whether you are using pageviews or screenviews.
import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import VueGtag from "vue-gtag";
import App from "./App.vue";
import Home from "./Home.vue";
import About from "./About.vue";
const router = new VueRouter({
history: createWebHashHistory(),
routes: [
{ name: 'Home', path: '/', component: Home },
{ name: 'About', path: '/about', component: About },
]
});
const app = createApp(App);
app.use(router);
app.use(VueGtag, {
pageTrackerTemplate(to) {
return {
page_title: 'amazing page',
page_path: to.path
}
},
config: {
id: "GA_MEASUREMENT_ID",
},
}, router);
app.mount("#app");
In this example, on every page change, we will send the exact properties inside our event.
The
pageTrackerTemplate method will have both the to and the from route instances passed as parameters.pass routes path or routes name that you want to exclude from the automatic tracking
import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import VueGtag from "vue-gtag";
import App from "./App.vue";
import Home from "./Home.vue";
import About from "./About.vue";
const router = new VueRouter({
history: createWebHashHistory(),
routes: [
{ name: 'Home', path: '/', component: Home },
{ name: 'About', path: '/about', component: About },
]
});
const app = createApp(App);
app.use(router);
app.use(VueGtag, {
pageTrackerExcludedRoutes: [
'route_path_value',
'route_name_value'
],
config: {
id: "GA_MEASUREMENT_ID",
},
}, router);
app.mount("#app");
Last modified 1yr ago