# Auto tracking

{% hint style="danger" %}
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.
{% endhint %}

## 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 `app.use` method and the plugin will start tracking all your pages automatically

```javascript
import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import VueGtag from "vue-gtag";
import App from "./App.vue";
import Home from "./Home.vue";
import About from "./About.vue";

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

const app = createApp(App);

app.use(router);

app.use(VueGtag, {
  config: { 
    id: "GA_MEASUREMENT_ID",
  },
}, router); // <----- add your router here

app.mount("#app");

```

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

```javascript
{
  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 { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import VueGtag from "vue-gtag";
import App from "./App.vue";
import Home from "./Home.vue";
import About from "./About.vue";

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

const app = createApp(App);

app.use(router);

app.use(VueGtag, {
  appName: 'My application',
  pageTrackerScreenviewEnabled: true,
  config: { 
    id: "GA_MEASUREMENT_ID",
  },
}, router);

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 { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import VueGtag from "vue-gtag";
import App from "./App.vue";
import Home from "./Home.vue";
import About from "./About.vue";

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

const app = createApp(App);

app.use(router);

app.use(VueGtag, {
  pageTrackerTemplate(to) {
    return {
      page_title: 'amazing page',
      page_path: to.path
    }
  },
  config: { 
    id: "GA_MEASUREMENT_ID",
  },
}, router);

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&#x20;

pass routes path or routes name that you want to exclude from the automatic tracking&#x20;

```javascript
import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import VueGtag from "vue-gtag";
import App from "./App.vue";
import Home from "./Home.vue";
import About from "./About.vue";

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

const app = createApp(App);

app.use(router);

app.use(VueGtag, {
  pageTrackerExcludedRoutes: [
    'route_path_value', 
    'route_name_value'
  ],
  config: { 
    id: "GA_MEASUREMENT_ID",
  },
}, router);

app.mount("#app");
```