Page tracker
You should not use this feature if you have "Enhanced measurement" turned on in your Data Stream options. Google will also start tracking pageviews, and you will get double hits on the same page.
If you need both features, turn off the "Page changes based on browser history events" options in the pageviews advanced settings.
If you are using VueRouter inside your application, you can simply pass your router instance, and the plugin will start tracking all your pages automatically
import { configure } from "vue-gtag";
import router from './router'
configure({
tagId: "GA_MEASUREMENT_ID",
pageTracker: {
router,
}
})
By default, the tracking system uses pageviews with the following template.
{
page_path: '/', // route path value
page_location: 'http://localhost:8080/' // window.location.href
}
Enable screen_view
Now, it will use screen_view events for tracking instead of the default page
import { createGtag } from "vue-gtag";
import router from './router'
configure({
tagId: "GA_MEASUREMENT_ID",
pageTracker: {
router,
useScreenview: true
}
})
Page tracker template
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 { configure } from "vue-gtag";
import router from './router'
configure({
tagId: "GA_MEASUREMENT_ID",
pageTracker: {
router,
template: (to) => ({
page_title: 'awesome page',
path_path: to.path
})
}
})
Exclude routes
pass routes path or routes name that you want to exclude from the automatic tracking
import { configure } from "vue-gtag";
import router from './router'
configure({
tagId: "GA_MEASUREMENT_ID",
pageTracker: {
router,
exclude: ['route_path_value', 'route_name_value']
}
})
You can also provide a custom function that returns a boolean value.
import { configure } from "vue-gtag";
import router from './router'
configure({
tagId: "GA_MEASUREMENT_ID",
pageTracker: {
router,
exclude: (to) => to.name === 'about'
}
})
Route path types
Use route full path
import { configure } from "vue-gtag";
import router from './router'
configure({
tagId: "GA_MEASUREMENT_ID",
pageTracker: {
router,
useRouteFullPath: true
}
})
Prepend router base path
import { configure } from "vue-gtag";
import router from './router'
configure({
tagId: "GA_MEASUREMENT_ID",
pageTracker: {
router,
useRouterBasePath: true
}
})
Last updated