BlogPricingDashboardGitHubGitHub★ 841
Hook Examples

Feature Usage Tracking

Track feature interactions to understand which features are most popular and how users engage with your application.

Implementation

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

export function useFeatureTracking(featureName: string) {
const trackUsage = useCallback(
  (action: string, properties?: Record<string, unknown>) => {
    track("feature_used", {
      feature: featureName,
      action,
      ...properties,
    });
  },
  [featureName]
);

return { trackUsage };
}

Usage

tsx
function ExportButton() {
const { trackUsage } = useFeatureTracking("export_data");

const handleExport = async () => {
  trackUsage("export_started", { format: "csv" });
  try {
    await exportData();
    trackUsage("export_completed", { format: "csv" });
  } catch (error) {
    trackUsage("export_failed", { format: "csv", error: error.message });
  }
};

return <button onClick={handleExport}>Export</button>;
}

What It Tracks

  • Event: feature_used
  • Properties:
    • feature: Name of the feature being tracked
    • action: Specific action (e.g., "started", "completed", "failed")
    • Additional custom properties as needed

Benefits

  • Feature Adoption: Understand which features users actually use
  • Usage Patterns: Track feature usage across different user segments
  • Performance Monitoring: Track feature success/failure rates

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