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 { createGtag } from "vue-gtag";
import router from './router'

createGtag({
  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'

createGtag({
  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 { createGtag } from "vue-gtag";
import router from './router'

createGtag({
  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 { createGtag } from "vue-gtag";
import router from './router'

createGtag({
  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 { createGtag } from "vue-gtag";
import router from './router'

createGtag({
  tagId: "GA_MEASUREMENT_ID",
  pageTracker: {
    router,
    exclude: (to) => to.name === 'about'
  }
})

Route path types

Use route full path

import { createGtag } from "vue-gtag";
import router from './router'

createGtag({
  tagId: "GA_MEASUREMENT_ID",
  pageTracker: {
    router,
    useRouteFullPath: true
  }
})

Prepend router base path

import { createGtag } from "vue-gtag";
import router from './router'

createGtag({
  tagId: "GA_MEASUREMENT_ID",
  pageTracker: {
    router,
    useRouterBasePath: true
  }
})