Facts reviewed: 2026-10-20

Follow the [quickstart](/docs/quickstart/) for package availability and site setup. Put the tracker in a component mounted once by your root app. This example starts only after mounting and only when the `allowed` prop is true.

```vue
<script setup lang="ts">
import { onMounted, onBeforeUnmount, watch } from "vue";
import { useAnalytics } from "@owleye/analytics";
import { trackRules } from "@owleye/analytics/rules";

const props = defineProps<{ allowed: boolean }>();
let stopWatching: (() => void) | undefined;

onMounted(() => {
  stopWatching = watch(
    () => props.allowed,
    (allowed, _previous, onCleanup) => {
      if (!allowed) return;

      const analytics = useAnalytics("your-site-id");
      const rules = trackRules("your-site-id");
      onCleanup(() => {
        rules.stop();
        analytics.stop();
      });
    },
    { immediate: true },
  );
});

onBeforeUnmount(() => stopWatching?.());
</script>

<template></template>
```

The explicit imports distinguish Owleye Analytics's controller factory from application composables. No trackers are created during SSR. Stopping the watcher also runs its cleanup, so an app unmount or permission withdrawal removes both controllers.

The SDK already observes SPA navigation. Do not also send a page view in a route watcher. Use a separate development site or mock mode, and inspect a production build before launch.