Getting Started

This guide takes you from a new Databuddy account to your first tracked page view.

Try Databuddy with Leap

Let Leap generate a complete application that uses Databuddy for analytics.

Examples:

Create Your Account

Go to app.databuddy.cc
Sign up for a free account
Copy your Client ID from the dashboard

Install the SDK

Choose the install method for your app:

Install the official Databuddy SDK:

bash

# Using bun (recommended)
bun add @databuddy/sdk

# Using npm
npm install @databuddy/sdk

# Using yarn
yarn add @databuddy/sdk

For any website, use the script tag method:

html

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

Add Tracking

Add the <Databuddy /> component once in your root layout:

app/layout.tsxtsx

import { Databuddy } from "@databuddy/sdk/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head />
      <body>
        <Databuddy
          clientId={process.env.NEXT_PUBLIC_DATABUDDY_CLIENT_ID!}
          trackPerformance
          trackWebVitals
          trackErrors
        />
        {children}
      </body>
    </html>
  );
}

Environment Variables:

.env.localbash

NEXT_PUBLIC_DATABUDDY_CLIENT_ID=your-client-id

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

index.htmlhtml

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- Your content -->

    <!-- Databuddy Analytics -->
    <script
      src="https://cdn.databuddy.cc/databuddy.js"
      data-client-id="your-client-id"
      data-track-performance
      data-track-web-vitals
      data-track-errors
      async
    ></script>
  </body>
</html>

Verify Installation

Check that page tracking works:

Visit your website in a new browser tab
Open your Databuddy dashboard at app.databuddy.cc
Check Real-time data - you should see yourself as an active visitor
Navigate between pages - Databuddy records route changes automatically

If you see real-time data in your dashboard, congratulations! Databuddy is now tracking your website analytics.

Track Your First Custom Event

components/signup-button.tsxtsx

"use client";

import { track } from "@databuddy/sdk";

export function SignupButton() {
return (
  <button
    onClick={() =>
      track("signup_clicked", {
        location: "header",
        plan: "free",
      })
    }
    type="button"
  >
    Sign up
  </button>
);
}

index.htmlhtml

<script>
  function trackSignupClick() {
    db.track("signup_clicked", {
      location: "header",
      plan: "free",
    });
  }
</script>

<button onclick="trackSignupClick()">Sign up</button>