# 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");
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://matteo-gabriele.gitbook.io/vue-gtag/master/auto-tracking.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.