Getting started

This guide takes you from a new Databuddy account to your first tracked pageview. For API schemas, machine-readable references, and integration entry points, use the developer resources hub.

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

# Using npm
npm install @databuddy/sdk

# Using yarn
yarn add @databuddy/sdk

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!}
          trackWebVitals
          trackErrors
        />
        {children}
      </body>
    </html>
  );
}

NEXT_PUBLIC_DATABUDDY_CLIENT_ID=your-client-id

Track your first custom event

"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>
);
}

For the decisions behind an integration, read the React and Next.js SDK comparison. A WordPress site has a separate installation and verification walkthrough; once tracking works, follow the UTM campaign measurement guide to test attribution.

Related

Troubleshooting

Not seeing data in your dashboard?

1. Check your Client ID: make sure it matches this website
2. Test manually: try db.track('test', {}) in your browser console
3. Check the Network tab: look for requests to basket.databuddy.cc
4. Review environment: make sure tracking isn't disabled in production