Scripts

Databuddy Analytics

Copy for LLMs

Databuddy is a privacy-first analytics platform focused on performance and minimal data collection.

Script Stats

Transfer
10.6 KB
Decoded
29.2 KB
Loading
CDN
First-Party
Supported
Bundling
No
Privacy
No data collected
Tracked Data
Page Views Events
View source

Nuxt Config Setup

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

export default defineNuxtConfig({
  scripts: {
    registry: {
      databuddyAnalytics: {
        clientId: 'client-abc123'
      }
    }
  }
})

useScriptDatabuddyAnalytics

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

const { proxy } = useScriptDatabuddyAnalytics()

proxy.track('conversion', { value: 1 })

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

First-Party Mode

This script supports First-Party Mode which routes all traffic through your domain for improved privacy and ad blocker bypass. 

export default defineNuxtConfig({
  scripts: {
    firstParty: true,
    registry: {
      databuddyAnalytics: { clientId: 'client-abc123'}
    }
  }
})

To opt-out for this specific script: 

useScriptDatabuddyAnalytics({
  clientId: 'client-abc123',
  scriptOptions: {
    firstParty: false
  }
})

Example

Using Databuddy Analytics only in production while using the proxy to send events.

ConversionButton.vue 
<script setup lang="ts">
const { proxy } = useScriptDatabuddyAnalytics()

// noop in development, ssr
// just works in production, client
function handleAction() {
  proxy.track('conversion', { value: 1 })
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

CDN / Self-hosted

By default the registry injects https://cdn.databuddy.cc/databuddy.js. If you host the script yourself, pass scriptUrl in options to override the src.

useScriptDatabuddyAnalytics({
  scriptInput: { src: 'https://my-host/databuddy.js' },
  clientId: 'YOUR_CLIENT_ID'
})

DatabuddyAnalyticsApi

export interface DatabuddyAnalyticsApi {
  track: (eventName: string, properties?: Record<string, any>) => Promise<any> | any | void
  screenView: (path?: string, properties?: Record<string, any>) => void
  setGlobalProperties: (properties: Record<string, any>) => void
  trackCustomEvent: (eventName: string, properties?: Record<string, any>) => void
  clear: () => void
  flush: () => void
}

Config Schema

You must provide a clientId when configuring the registry for the first time. The registry supports a large set of Databuddy options which are passed to the script via data- attributes.

export const DatabuddyAnalyticsOptions = object({
  clientId: string(),
  scriptUrl: optional(string()),
  apiUrl: optional(string()),
  disabled: optional(boolean()),
  trackScreenViews: optional(boolean()),
  trackPerformance: optional(boolean()),
  trackSessions: optional(boolean()),
  trackWebVitals: optional(boolean()),
  trackErrors: optional(boolean()),
  trackOutgoingLinks: optional(boolean()),
  trackScrollDepth: optional(boolean()),
  trackEngagement: optional(boolean()),
  trackInteractions: optional(boolean()),
  trackAttributes: optional(boolean()),
  trackHashChanges: optional(boolean()),
  trackExitIntent: optional(boolean()),
  trackBounceRate: optional(boolean()),
  enableBatching: optional(boolean()),
  batchSize: optional(number()),
  batchTimeout: optional(number()),
  enableRetries: optional(boolean()),
  maxRetries: optional(number()),
  initialRetryDelay: optional(number()),
  samplingRate: optional(number()),
  sdk: optional(string()),
  sdkVersion: optional(string()),
  enableObservability: optional(boolean()),
  observabilityService: optional(string()),
  observabilityEnvironment: optional(string()),
  observabilityVersion: optional(string()),
  enableLogging: optional(boolean()),
  enableTracing: optional(boolean()),
  enableErrorTracking: optional(boolean()),
})
Edit this page
Markdown For LLMs

Crisp

Show performance-optimized Crisp in your Nuxt app.

Fathom Analytics

Use Fathom Analytics in your Nuxt app.