Screen tracking

Track page transitions in your Vue Router app so Screeb can evaluate URL-based and page-level targeting rules for messages and surveys.

Automatic tracking via Vue Router

Screeb automatically detects URL changes in the browser. For most use cases with Vue Router's history mode, no additional setup is needed — navigation events update window.location, which Screeb monitors.

Manual event tracking per route

If you want to trigger specific Screeb events on route transitions, use Vue Router's afterEach hook:

// main.ts or router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import { ScreebPlugin } from "@screeb/sdk-vue";
import { createApp } from "vue";
import App from "./App.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [ /* your routes */ ],
});

const app = createApp(App);

app.use(ScreebPlugin, {
  websiteId: "<YOUR-CHANNEL-ID>",
  autoInit: true,
});

router.afterEach((to) => {
  import("@screeb/sdk-browser").then(({ eventTrack }) => {
    eventTrack("page_viewed", {
      path: to.fullPath,
      name: String(to.name ?? ""),
    });
  });
});

app.use(router).mount("#app");

Use within a component

Alternatively, track page views from a layout component that renders on every route change:

<!-- layouts/DefaultLayout.vue -->
<script setup lang="ts">
import { watch } from "vue";
import { useRoute } from "vue-router";
import { useScreeb } from "@screeb/sdk-vue";

const route = useRoute();
const { eventTrack } = useScreeb();

watch(
  () => route.fullPath,
  (path) => {
    eventTrack("page_viewed", { path });
  },
);
</script>