BlogPricingDashboardGitHubGitHub★ 841
Hook Examples

Feedback Tracking

Track user feedback (e.g., thumbs up/down on documentation pages) using both server actions and client-side hooks.

Server Action (Next.js)

tsx
"use server";

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

const client = new Databuddy({
clientId: process.env.NEXT_PUBLIC_DATABUDDY_CLIENT_ID!,
});

export async function onRateDocs(
url: string,
feedback: { opinion: "good" | "bad"; message: string }
) {
try {
  await client.track({
    name: "docs_feedback",
    properties: {
      url,
      opinion: feedback.opinion,
      message: feedback.message.trim(),
    },
  });

  await client.flush();
  return { success: true };
} catch (error) {
  console.error("Failed to track feedback:", error);
  return { success: false, error: "Failed to submit feedback" };
}
}

Client Hook Wrapper

tsx
import { track } from "@databuddy/sdk";
import { useCallback } from "react";

export function useFeedbackTracking() {
const trackFeedback = useCallback(
  (url: string, opinion: "good" | "bad", message?: string) => {
    track("feedback_submitted", {
      url,
      opinion,
      has_message: !!message,
      message_length: message?.length ?? 0,
    });
  },
  []
);

return { trackFeedback };
}

Usage

tsx
function FeedbackComponent() {
const { trackFeedback } = useFeedbackTracking();
const pathname = usePathname();

const handleFeedback = (opinion: "good" | "bad", message?: string) => {
  trackFeedback(pathname, opinion, message);
  // Submit to server action
  onRateDocs(pathname, { opinion, message: message ?? "" });
};

return (
  <div>
    <button onClick={() => handleFeedback("good")}>👍 Good</button>
    <button onClick={() => handleFeedback("bad")}>👎 Bad</button>
  </div>
);
}

What It Tracks

  • Events:
    • docs_feedback: Server-side tracking with full message
    • feedback_submitted: Client-side tracking with metadata
  • Properties:
    • url: Page URL where feedback was submitted
    • opinion: "good" or "bad"
    • message: User's feedback message (server-side only)
    • has_message: Whether user provided a message
    • message_length: Length of feedback message

Benefits

  • Content Quality: Understand which pages need improvement
  • User Satisfaction: Track overall feedback sentiment
  • Content Strategy: Identify high-performing and low-performing content

Toast Tracking

Track toast notifications automatically

Form Tracking

Track form submissions with validation state

Hooks Overview

View all available tracking hooks

How is this guide?

Edit on GitHub