BlogPricingDashboardGitHubGitHub★ 659

Vanilla JavaScript Setup

The Databuddy script can be used directly in vanilla JavaScript projects without any framework dependencies. This is perfect for static sites, traditional HTML pages, or any environment where you want minimal overhead.

Quick Setup

Add the script tag to your HTML before the closing </body> tag:

<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="your-client-id"
  async
></script>

The script automatically initializes and starts tracking page views.

Configuration Options

Configure the tracker using data attributes on the script tag:

<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="your-client-id"
  data-track-screen-views="true"
  data-track-performance="true"
  data-track-errors="true"
  data-enable-batching="true"
  data-batch-size="20"
  async
></script>

Available Options

trackScreenViews

Auto-track page views on navigation (default: true)

trackHashChanges

Track hash changes in URL (default: false)

trackAttributes

Track data-track attributes (default: false)

trackOutgoingLinks

Track clicks on external links (default: false)

trackSessions

Track user sessions (default: true)

trackPerformance

Include performance metrics (default: true)

trackWebVitals

Track Core Web Vitals (default: false)

trackEngagement

Track engagement metrics (default: false)

trackErrors

Track JavaScript errors (default: false)

enableBatching

Batch events before sending (default: false)

batchSize

Events per batch when batching enabled (default: 10)

samplingRate

Sample rate 0.0-1.0 (default: 1.0)

Tracking Events

Automatic Tracking

The script automatically tracks page views when enabled:

<!-- Navigate to /about -->
window.location.href = '/about'; // Automatically tracked

Manual Tracking

Use the global window.databuddy object to track custom events:

// Track a custom event
window.databuddy.track('button_click', {
  button_text: 'Sign Up',
  button_id: 'header-cta'
});

// Track with additional properties
window.databuddy.track('feature_used', {
  feature: 'export_data',
  user_tier: 'premium'
});

Screen Views

Manually track page views (useful for SPAs):

window.databuddy.screenView('/dashboard');

// With properties
window.databuddy.screenView('/dashboard', {
  section: 'analytics'
});

Using Shorthand

For convenience, use the shorter window.db alias:

window.db.track('button_click', { button_id: 'cta' });
window.db.screenView('/dashboard');

Getting Tracking IDs

The tracker provides access to anonymous and session IDs for attribution tracking:

// Get anonymous ID
const anonId = window.databuddy.anonymousId;
console.log('Anonymous ID:', anonId);

// Get session ID
const sessionId = window.databuddy.sessionId;
console.log('Session ID:', sessionId);

// Use for redirect attribution
const signupUrl = `https://app.databuddy.cc/register?anonId=${anonId}&sessionId=${sessionId}`;
window.location.href = signupUrl;

Reading from Storage

IDs are also stored in browser storage for persistence:

// Get from localStorage
const anonId = localStorage.getItem('did');

// Get from sessionStorage
const sessionId = sessionStorage.getItem('did_session');

Global Properties

Set properties that attach to all future events:

window.databuddy.setGlobalProperties({
  user_id: 'user-123',
  plan: 'premium',
  version: '2.0'
});

Session Management

Clear Session

Clear current session and generate new IDs:

window.databuddy.clear();

Flush Events

Force immediate sending of queued events:

window.databuddy.flush();

Error Tracking

Automatically track JavaScript errors:

<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="your-client-id"
  data-track-errors="true"
  async
></script>

Or track manually:

try {
  // Your code
} catch (error) {
  window.databuddy.track('error', {
    message: error.message,
    filename: error.filename,
    lineno: error.lineno,
    error_type: error.name
  });
}

Data Attributes Tracking

Track clicks on elements with data-track attributes:

<!-- Enable tracking -->
<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="your-client-id"
  data-track-attributes="true"
  async
></script>

<!-- Elements to track -->
<button data-track="button_click" data-button-text="Sign Up" data-section="header">
  Sign Up
</button>

<a href="/pricing" data-track="link_click" data-link-type="pricing">
  View Pricing
</a>

Track clicks on external links:

<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="your-client-id"
  data-track-outgoing-links="true"
  async
></script>

<!-- External links are automatically tracked -->
<a href="https://github.com/databuddy-analytics/Databuddy">GitHub</a>

Batch Events

Enable batching to reduce network requests:

<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="your-client-id"
  data-enable-batching="true"
  data-batch-size="20"
  data-batch-timeout="2000"
  async
></script>

Sampling

Reduce event volume with sampling:

<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="your-client-id"
  data-sampling-rate="0.5"
  async
></script>

Set to 0.5 to track 50% of events, 0.1 for 10%, etc.

Skip Patterns

Skip tracking on specific paths:

<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="your-client-id"
  data-skip-patterns='["/admin/**", "/internal/*"]'
  async
></script>

Opt Out

Allow users to opt out of tracking:

// User opts out
window.databuddyOptOut();

// User opts back in
window.databuddyOptIn();

Opt-out is stored in localStorage and persists across sessions.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <h1>Welcome</h1>
  
  <button onclick="trackSignup()">Sign Up</button>
  
  <!-- Databuddy Script -->
  <script
    src="https://cdn.databuddy.cc/databuddy.js"
    data-client-id="your-client-id"
    data-track-screen-views="true"
    data-track-performance="true"
    data-track-errors="true"
    data-enable-batching="true"
    async
  ></script>
  
  <script>
    function trackSignup() {
      window.databuddy.track('signup_clicked', {
        source: 'header_button',
        timestamp: Date.now()
      });
      
      // Redirect with attribution
      const anonId = window.databuddy.anonymousId;
      const sessionId = window.databuddy.sessionId;
      window.location.href = `https://app.databuddy.cc/register?anonId=${anonId}&sessionId=${sessionId}`;
    }
  </script>
</body>
</html>

Browser Compatibility

The script works in all modern browsers:

  • Chrome, Edge, Firefox, Safari (latest 2 versions)
  • Mobile browsers (iOS Safari, Chrome Mobile)
  • No Internet Explorer support

CDN URL

Use the official CDN URL for best performance:

https://cdn.databuddy.cc/databuddy.js

The script is automatically minified and gzipped for optimal performance (~15KB).

Edit on GitHub