How to add analytics to Vue

Analytics shows you how people use your Vue app. The Pieowl Web SDK works with Vue 3 and Vue Router. You get automatic page views, custom events and user identification without a Vue-specific package.

The tracker never sets a cookie, so in many cases you don't need a consent banner for your analytics. See when you still do.

Prerequisites

A Vue 3 project (Vite or Vue CLI)
A Pieowl account (start a 14-day free trial)
Your Client ID from the Pieowl dashboard

Install the SDK

The Pieowl Web SDK is a small package that runs in any browser app, Vue included. Install it with npm. pnpm and yarn work the same way.

npm install @pieowl/web

Create a Pieowl instance

Create one file for your Pieowl instance. That keeps your setup in one place and lets you import the instance anywhere.

src/lib/pieowl.ts

import { Pieowl } from '@pieowl/web';

export const pieowl = new Pieowl({
  clientId: 'YOUR_CLIENT_ID',
});

Pieowl tracks a page view each time the URL changes. This works with Vue Router's client-side navigation. What Pieowl collects by itself (page views, clicks on links to other sites, data-track clicks) is set in Settings → Site → What Pieowl counts, not in code.

Using environment variables

In production, keep your Client ID in an environment variable.

src/lib/pieowl.ts

import { Pieowl } from '@pieowl/web';

export const pieowl = new Pieowl({
  clientId: import.meta.env.VITE_PIEOWL_CLIENT_ID,
});

.env

VITE_PIEOWL_CLIENT_ID=your-client-id

Initialize on app load

Import the instance in your app's entry point so it starts when your app loads. That's all you need for automatic page views.

src/main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import './lib/pieowl'; // Start Pieowl

const app = createApp(App);
app.use(router);
app.mount('#app');

Make Pieowl available globally (optional)

If you'd rather reach Pieowl through the Vue instance than import it in each component, add it as a global property.

src/main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { pieowl } from './lib/pieowl';

const app = createApp(App);
app.config.globalProperties.$pieowl = pieowl;
app.use(router);
app.mount('#app');

Now this.$pieowl works in Options API components.

Track page views

By default, Pieowl tracks a page view each time the URL changes. This works with Vue Router out of the box.

If you want to track page views yourself, for example to add the route name, use a Vue Router afterEach hook.

src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router';
import { pieowl } from '../lib/pieowl';
import routes from './routes';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.afterEach((to) => {
  pieowl.screenView(window.location.origin + to.fullPath, {
    route_name: String(to.name),
  });
});

export default router;

If you use this, turn off Page views in Settings → Site so page views are not counted twice.

Track custom events

Import the Pieowl instance in your components to track events. track takes an event name and an optional object of properties.

Using Composition API

src/components/SignupButton.vue

<template>
  <button type="button" @click="handleClick">Sign Up</button>
</template>

<script setup lang="ts">
import { pieowl } from '../lib/pieowl';

function handleClick() {
  pieowl.track('button_clicked', {
    button_name: 'signup',
    button_location: 'hero',
  });
}
</script>

Using Options API

src/components/SignupButton.vue

<template>
  <button type="button" @click="handleClick">Sign Up</button>
</template>

<script>
import { pieowl } from '../lib/pieowl';

export default {
  methods: {
    handleClick() {
      pieowl.track('button_clicked', {
        button_name: 'signup',
        button_location: 'hero',
      });
    },
  },
};
</script>

Track form submissions

Form tracking helps you see conversion rates and where users drop off.

src/components/ContactForm.vue

<template>
  <form @submit.prevent="handleSubmit">
    <input
      v-model="email"
      type="email"
      placeholder="Enter your email"
    />
    <button type="submit">Submit</button>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { pieowl } from '../lib/pieowl';

const email = ref('');

function handleSubmit() {
  pieowl.track('form_submitted', {
    form_name: 'contact',
    form_location: 'homepage',
  });

  // Your form submission logic
}
</script>

Use data attributes for declarative tracking

You can also track clicks with data-track attributes, without writing JavaScript.

<template>
  <button
    data-track="button_clicked"
    data-button-name="signup"
    data-button-location="hero"
  >
    Sign Up
  </button>
</template>

When someone clicks this button, Pieowl sends a button_clicked event. The other data-* attributes become properties in camelCase: buttonName and buttonLocation. This needs Clicks you marked in your code to be on in Settings → Site (it is by default).

Identify users

When a user logs in, call identify to link their activity to a profile. This unlocks per-user analytics and cohorts.

src/components/UserProfile.vue

<template>
  <div>Welcome, {{ user?.firstName }}!</div>
</template>

<script setup lang="ts">
import { watch } from 'vue';
import { pieowl } from '../lib/pieowl';

interface User {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  plan: string;
  createdAt: string;
}

const props = defineProps<{ user: User | null }>();

watch(
  () => props.user,
  (user) => {
    if (user) {
      pieowl.identify({
        profileId: user.id,
        firstName: user.firstName,
        lastName: user.lastName,
        email: user.email,
        properties: {
          plan: user.plan,
          signupDate: user.createdAt,
        },
      });
    }
  },
  { immediate: true }
);
</script>

Pieowl keeps the profile ID in memory, not in a cookie or local storage. After a full page reload, call identify again. The immediate: true watcher above does that for you.

Clear user data on logout

When a user logs out, clear the profile so new events are not linked to them.

src/components/LogoutButton.vue

<template>
  <button @click="handleLogout">Logout</button>
</template>

<script setup lang="ts">
import { pieowl } from '../lib/pieowl';

const emit = defineEmits<{ logout: [] }>();

function handleLogout() {
  pieowl.clear();
  emit('logout');
}
</script>

Set global properties

Properties set with setGlobalProperties are sent with every event. Use them for things like the app version or feature flags.

src/App.vue

<script setup lang="ts">
import { onMounted } from 'vue';
import { pieowl } from './lib/pieowl';

onMounted(() => {
  pieowl.setGlobalProperties({
    app_version: '1.0.0',
    environment: import.meta.env.MODE,
  });
});
</script>

Verify your setup

Open your Vue app and visit a few pages. Click the elements that send custom events. Then open the Pieowl dashboard and check the realtime view.

No events? Check the browser console for errors. Make sure your Client ID is correct and that no ad blocker is blocking requests to api.pieowl.com. The Network tab in your browser's developer tools shows whether requests are being sent.

Next steps

The Web SDK can do more, such as profile counters and event filters. Read the Web SDK documentation for the full API.

Using Nuxt? The Nuxt guide shows how to add the script tag in nuxt.config.ts, plus bot tracking and an ad-blocker proxy.

Does Pieowl work with Vue Router?

Yes. Pieowl tracks a page view each time the URL changes, which works with Vue Router. Page views is on by default in Settings → Site. You can also track page views yourself in a router hook.

Can I use Pieowl with Vue 2?

Yes. The Pieowl Web SDK doesn't depend on Vue, so it works with Vue 2. Import the instance in your components and call its methods.

Does Pieowl use cookies?

No. The tracker never sets a cookie and stores nothing on your visitors' devices. In many cases that means no consent banner for your analytics. See Do you need a cookie banner?.

Does Pieowl help with GDPR?

Pieowl is built for GDPR: no cookies, no stored IPs. Your data is stored in the EU. Ask your legal advisor about your own setup.