> For the complete documentation index, see [llms.txt](https://matteo-gabriele.gitbook.io/vue-gtag/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://matteo-gabriele.gitbook.io/vue-gtag/master/auto-tracking.md).

# Auto tracking

## Enable auto-tracking

If you are using [VueRouter](https://github.com/vuejs/vue-router) inside your application, you can simply pass the VueRouter instance as the third parameter of the Vue.use method and the plugin will start tracking all your pages automatically

```javascript
import Vue from "vue";
import VueRouter from 'vue-router';
import App from "./App.vue";
import VueGtag from "vue-gtag";

const router = new VueRouter({
  routes: [
    { name: 'Home', path: '/' },
    { name: 'About', path: '/about' },
  ]
});

Vue.use(VueGtag, {
  config: { id: "UA-1234567-1" }
}, router);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

```

By default, the tracking system uses pageviews with the following template

```javascript
{
  page_title: 'home', // route name value
  page_path: '/', // route path value
  page_location: 'http://localhost:8080/' // window.location.href
}
```

## Enable screenviews

To be able to use screenview you need to first enable the feature and pass the app name using the plugin global settings

```javascript
import Vue from "vue";
import VueRouter from 'vue-router';
import App from "./App.vue";
import VueGtag from "vue-gtag";

const router = new VueRouter({
  routes: [
    { name: 'Home', path: '/' },
    { name: 'About', path: '/about' },
  ]
});

Vue.use(VueGtag, {
  config: { id: "UA-1234567-1" },
  appName: 'My application',
  pageTrackerScreenviewEnabled: true
}, router);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");
```

## 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.

```javascript
import Vue from "vue";
import VueRouter from 'vue-router';
import App from "./App.vue";
import VueGtag from "vue-gtag";

const router = new VueRouter({
  routes: [
    { name: 'Home', path: '/' },
    { name: 'About', path: '/about' },
  ]
});

Vue.use(VueGtag, {
  config: { id: "UA-1234567-1" },
  pageTrackerTemplate(to) {
    return {
      page_title: 'amazing page',
      page_path: to.path
    }
  }
}, router);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");
```

In this example, on every page change, we will send the exact properties inside our event.

{% hint style="info" %}
The `pageTrackerTemplate` method will have both the `to` and the `from` route instances passed as parameters.
{% endhint %}

## Exclude routes 

pass routes path or routes name that you want to exclude from the automatic tracking 

```javascript
import Vue from "vue";
import VueRouter from 'vue-router';
import App from "./App.vue";
import VueGtag from "vue-gtag";

const router = new VueRouter({
  routes: [...]
});

Vue.use(VueGtag, {
  pageTrackerExcludedRoutes: ['route_path_value', 'route_name_value']
  config: { id: "UA-1234567-1" },
}, router);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");
```