Add Privatus Analytics to a Vue app

Add privacy-friendly analytics to a Vue 3 app with a snippet in index.html, track Vue Router history or hash navigation and send custom events from components.

# Add Privatus Analytics to a Vue app

> Add privacy-friendly analytics to a Vue 3 app with a snippet in index.html, track Vue Router history or hash navigation and send custom events from components.

Add the snippet to `index.html`:

```html
<script defer src="https://privatusanalytics.com/js/pa.js" data-site="pa_YOURSITEID"></script>
```

Vue Router's `createWebHistory()` uses `history.pushState`, which the
tracker follows automatically. With `createWebHashHistory()`, add
`data-spa="hash"` so hash changes count as pageviews.

## Events

```vue
<script setup>
function download() {
  window.privatus?.track('Download', { file: 'price-list.pdf' })
}
</script>
```

Or use the typed client from `@privatus/tracker` (`init()` and
`getClient()`), as shown in the [React guide](/docs/install/react). For
Nuxt, see the [Nuxt guide](/docs/install/nuxt).

> **Warning:** `@privatus/tracker` is not published on npm yet. Until it is,
> don't install a package with this name from the public registry,
> because anyone could have published it. Use the snippet above
> instead.

Als Markdown anzeigen

Add the snippet to index.html:

html

<script defer src="https://privatusanalytics.com/js/pa.js" data-site="pa_YOURSITEID"></script>

Vue Router's createWebHistory() uses history.pushState, which the tracker follows automatically. With createWebHashHistory(), add data-spa="hash" so hash changes count as pageviews.

Events#

vue

<script setup>
function download() {
  window.privatus?.track('Download', { file: 'price-list.pdf' })
}
</script>

Or use the typed client from @privatus/tracker (init() and getClient()), as shown in the React guide. For Nuxt, see the Nuxt guide.

Warning: @privatus/tracker is not published on npm yet. Until it is, don't install a package with this name from the public registry, because anyone could have published it. Use the snippet above instead.