Analytics in Vue

Installation

1. 1Install the SDK

   Vite variables exposed to the browser start with VITE_.

   npm install @racoelho/analytics

   VITE_ANALISA_SITE_KEY=YOUR_SITE_KEY

2. 2Create the instance

   In its own module, so any component can import it.

   import { Analytics } from '@racoelho/analytics'
   
   // one instance for the app; the constructor sends the first pageview
   export const analytics = new Analytics({
     siteKey: import.meta.env.VITE_ANALISA_SITE_KEY,
   })

3. 3Count route changes in main.ts

   afterEach runs once navigation is done and the URL has changed.

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   import { analytics } from './analytics'
   
   router.afterEach((to, from) => {
     // only when the path changes (a query change alone is not a new page)
     if (to.path !== from.path) analytics.pageview()
   })
   
   createApp(App).use(router).mount('#app')

Events and goals

Import analytics and call track(name, properties) — or the signup, formSubmit, purchase helpers and so on.

<script setup lang="ts">
import { analytics } from '@/analytics'

function choosePlan(plan: string) {
  analytics.track('plan_selected', { plan })
}
</script>

<template>
  <button @click="choosePlan('pro')">Choose Pro</button>
</template>

Create an event goal named plan_selected in the dashboard to see which sources lead to a plan choice.

Page navigation

The SDK counts the first load on its own but does not detect Vue Router navigation — the afterEach above handles it. Hash-mode routes (createWebHashHistory) aren’t told apart, because the SDK records the path without the #; use createWebHistory.

Check that it works

1. Open the published site in a normal window, with no ad blocker.
2. In your browser devtools, Network tab, filter by v1/i: you should see a POST with status 200 within 3 seconds (or when you leave the page).
3. In the dashboard, events show up in about 30 seconds.
4. Navigate with a <RouterLink>: each path change produces a new page_view.

Troubleshooting

Every page shows up as /

The router is in hash mode. The SDK records location.pathname, which doesn’t change with #/route. Switch to createWebHistory() (your server must serve index.html for any path).

The request returns 403 (origin_not_allowed)

Your domain isn’t in Allowed origins in the site settings. Add the exact origin — with https://, with and without www, plus test addresses like http://localhost:3000 if you want to measure in development.

No request shows up in the Network tab

The SDK honors Do Not Track by default: if your browser sends DNT, nothing is sent. Test in another browser or profile. Ad blockers can also block the script.

Pageviews show up twice

The SDK was initialized twice (for example, pasted in the theme and also added by a plugin). Keep a single instance per page.