Page tracker

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