Rybbit Analytics

Rybbit Analytics is a privacy-focused analytics solution for tracking user activity on your website without compromising your users' privacy.

The simplest way to load Rybbit Analytics globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptRybbitAnalytics composable.

Loading Globally

If you don't plan to send custom events you can use the Environment overrides to disable the script in development.

export default defineNuxtConfig({
  scripts: {
    registry: {
      rybbitAnalytics: {
        siteId: 'YOUR_SITE_ID'
      }
    }
  }
})

export default defineNuxtConfig({
  $production: {
    scripts: {
      registry: {
        rybbitAnalytics: {
          siteId: 'YOUR_SITE_ID',
        }
      }
    }
  }
})

export default defineNuxtConfig({
  scripts: {
    registry: {
      rybbitAnalytics: true,
    }
  },
  // you need to provide a runtime config to access the environment variables
  runtimeConfig: {
    public: {
      scripts: {
        rybbitAnalytics: {
          // .env
          // NUXT_PUBLIC_SCRIPTS_RYBBIT_ANALYTICS_SITE_ID=<your-site-id>
          siteId: ''
        },
      },
    },
  },
})

useScriptRybbitAnalytics

The useScriptRybbitAnalytics composable lets you have fine-grain control over when and how Rybbit Analytics is loaded on your site.

const rybbit = useScriptRybbitAnalytics({
  siteId: 'YOUR_SITE_ID'
})

Please follow the Registry Scripts guide to learn more about advanced usage.

Self-hosted Rybbit Analytics

If you are using a self-hosted version of Rybbit Analytics, you can provide a custom script source:

useScriptRybbitAnalytics({
  scriptInput: {
    src: 'https://your-rybbit-instance.com/api/script.js'
  }
  siteId: 'YOUR_SITE_ID'
})

RybbitAnalyticsApi

export interface RybbitAnalyticsApi {
  pageview: () => void
  event: (eventName: string, properties?: Record<string, any>) => void
}

Config Schema

You must provide the options when setting up the script for the first time.

export const RybbitAnalyticsOptions = object({
  siteId: string(), // required
  trackSpa: optional(boolean()),
  trackQuery: optional(boolean()),
  skipPatterns: optional(array(string())),
  maskPatterns: optional(array(string())),
  debounce: optional(number())
})

Configuration Options

• siteId (required): Your Rybbit Analytics site ID
• trackSpa: Set to false to disable automatic pageview tracking for single page applications
• trackQuery: Set to false to disable tracking of URL query strings
• skipPatterns: Array of URL path patterns to ignore
• maskPatterns: Array of URL path patterns to mask for privacy
• debounce: Delay in milliseconds before tracking a pageview after URL changes

Example

Using Rybbit Analytics only in production while tracking custom events.

<script setup lang="ts">
const { proxy } = useScriptRybbitAnalytics()

// Track a pageview manually
function trackPage() {
  proxy.rybbit.pageview()
}

// Track a custom event
function trackEvent() {
  proxy.rybbit.event('button_click', { buttonId: 'signup' })
}
</script>

<template>
  <div>
    <button @click="trackPage">
      Track Custom Page
    </button>
    <button @click="trackEvent">
      Track Custom Event
    </button>
  </div>
</template>