Router tracking

Enable routes auto tracking

To be able to use the automatic route changes tracking, VueRouter needs to be installed and then is possible to just pass the instance to the plugin by using the trackRouter method.

import { createRouter } from "vue-router";
import { trackRouter } from "vue-gtag-next";

import Home from "../views/Home.vue";
import About from "../views/About.vue"


const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: About
  }
];

const router = createRouter({
  routes
});

trackRouter(router);

export default router;

screen_view vs page_view

By default the plugin tracks page_view events, but it's possible to enable screen_view instead by setting useScreenview to true

trackRouter(router, {
  useScreenview: true
});

Custom templates

The automatic tracking can use a custom template, instead of the default one: this will apply whether you are using pageviews or screenviews.

trackRouter(router, {
  template(to, from) {
    return {
      page_title: 'my page',
      page_path: to.path
    }
  }
});