Vue.js / Nuxt

Integrate Besökskollen into your Vue.js app or Nuxt project.

Difficulty: Medium

Takes about 10 minutes

Vue 3 (Composition API)

Create a composable to handle tracking:

// composables/useAnalytics.ts
import { onMounted } from 'vue'

const SITE_ID = 'DIN-SAJT-ID'
const API_URL = 'https://besokskollen.se'

let initialized = false

function send(type: string, data?: Record<string, unknown>) {
  const payload = JSON.stringify({
    site: SITE_ID,
    type,
    url: window.location.href,
    path: window.location.pathname,
    ref: document.referrer || null,
    w: window.innerWidth,
    ts: Date.now(),
    ...data
  })

  if (navigator.sendBeacon) {
    navigator.sendBeacon(`${API_URL}/api/collect`, payload)
  }
}

export function useAnalytics() {
  onMounted(() => {
    if (!initialized) {
      initialized = true
      send('pageview')

      // SPA navigation
      const pushState = history.pushState
      history.pushState = function(...args) {
        pushState.apply(history, args)
        setTimeout(() => send('pageview'), 10)
      }

      window.addEventListener('popstate', () => send('pageview'))
    }
  })

  function trackEvent(name: string, props?: Record<string, unknown>) {
    send('event', { name, props: props || {} })
  }

  return { trackEvent }
}

Usage in components

<script setup>
import { useAnalytics } from '@/composables/useAnalytics'

const { trackEvent } = useAnalytics()

function handleClick() {
  trackEvent('Button Click', { buttonId: 'signup' })
}
</script>

<template>
  <button @click="handleClick">Sign up</button>
</template>

Nuxt 3

In Nuxt, you can use a plugin to load the script globally:

// plugins/analytics.client.ts
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()

  if (typeof window === 'undefined') return

  const script = document.createElement('script')
  script.defer = true
  script.setAttribute('data-site-id', config.public.savriSiteId)
  script.setAttribute('data-api', 'https://besokskollen.se')
  script.src = 'https://besokskollen.se/script.js'
  document.head.appendChild(script)
})

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      savriSiteId: process.env.SAVRI_SITE_ID || ''
    }
  }
})

Vue 2 (Options API)

For Vue 2 projects, add the script to your index.html:

<!-- public/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script defer
      data-site-id="DIN-SAJT-ID"
      data-api="https://besokskollen.se"
      src="https://besokskollen.se/script.js">
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

The script automatically handles Vue Router navigation via pushState.

Custom Events

Send custom events with the global va() function:

// I vilken komponent som helst
methods: {
  handlePurchase() {
    window.va('event', 'Purchase', {
      productId: 'abc123',
      price: 99.99
    })
  }
}

Need help?

See all integration guides →