> 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/page-tracker.md).

# Page tracker

{% 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 %}

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

```javascript
import { configure } from "vue-gtag";
import router from './router'

configure({
  tagId: "GA_MEASUREMENT_ID",
  pageTracker: {
    router,
  }
})

```

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 screen\_view

Now, it will use screen\_view events for tracking instead of the default page

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

configure({
  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.

```javascript
import { configure } from "vue-gtag";
import router from './router'

configure({
  tagId: "GA_MEASUREMENT_ID",
  pageTracker: {
    router,
    template: (to) => ({
      page_title: 'awesome page',
      page_path: to.path
    })
  }
})
```

## Exclude routes 

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

```javascript
import { configure } from "vue-gtag";
import router from './router'

configure({
  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.

```javascript
import { configure } from "vue-gtag";
import router from './router'

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

## Route path types

Use route full path 

```javascript
import { configure } from "vue-gtag";
import router from './router'

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

Prepend router base path

```javascript
import { configure } from "vue-gtag";
import router from './router'

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