import UmamiAnalytics from '@danielgtmn/umami-react';

function App() {
  return (
    <div>
      <UmamiAnalytics
        url="https://analytics.example.com"
        websiteId="your-website-id"
      />
      {/* Your app content */}
    </div>
  );
}

import UmamiAnalytics from '@danielgtmn/umami-react';

function App() {
  return (
    <div>
      <UmamiAnalytics />
      {/* Your app content */}
    </div>
  );
}

<UmamiAnalytics
  url="https://analytics.example.com"
  websiteId="your-website-id"
  lazyLoad={true}
/>

<UmamiAnalytics
  url="https://analytics.example.com"
  websiteId="your-website-id"
  debug={true}
/>

<UmamiAnalytics
  url="https://analytics.example.com"
  websiteId="your-website-id"
  domains={['example.com', 'app.example.com']}
/>

<UmamiAnalytics
  url="https://analytics.example.com"
  websiteId="your-website-id"
  scriptAttributes={{
    'data-cache': 'true',
    'data-host-url': 'https://custom-host.com'
  }}
/>

import { useUmami } from '@danielgtmn/umami-react';

function MyComponent() {
  const { track } = useUmami();

  const handleClick = () => {
    track('button-click', { button: 'header-cta' });
  };

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

import { useUmami } from '@danielgtmn/umami-react';

function MyComponent() {
  const { trackPageview } = useUmami();

  const handlePageview = () => {
    trackPageview({
      url: '/custom-page',
      title: 'Custom Page Title',
      referrer: document.referrer,
    });
  };

  return (
    <button onClick={handlePageview}>
      Track Pageview
    </button>
  );
}

import { useUmami } from '@danielgtmn/umami-react';

function MyComponent() {
  const { trackPageviewWithUTM } = useUmami();

  const handleUTMPageview = () => {
    trackPageviewWithUTM({
      utm_source: 'newsletter',
      utm_medium: 'email',
      utm_campaign: 'spring-sale',
      utm_term: 'discount',
      utm_content: 'header-link',
    });
  };

  return (
    <button onClick={handleUTMPageview}>
      Track UTM Pageview
    </button>
  );
}

import { useUmami, UTMFetcher } from '@danielgtmn/umami-react';

function MyComponent() {
  const { trackPageviewAsync } = useUmami();

  // Define your UTM fetcher function
  const fetchUTMData: UTMFetcher = async (utmId: string) => {
    const response = await fetch(`/api/utm/${utmId}`);
    const data = await response.json();
    
    return {
      utm_source: data.source,
      utm_medium: data.medium,
      utm_campaign: data.campaign,
      utm_term: data.term,
      utm_content: data.content,
    };
  };

  const handleAsyncPageview = async () => {
    // This will fetch UTM data from your backend and track the pageview
    await trackPageviewAsync('unique-utm-id-123', fetchUTMData, {
      // Optional additional data
      custom_property: 'custom_value',
    });
  };

  return (
    <button onClick={handleAsyncPageview}>
      Track Async UTM Pageview
    </button>
  );
}

const {
  track,                    // Original event tracking
  trackPageview,           // Manual pageview tracking
  trackPageviewWithUTM,    // Pageview with UTM parameters
  trackPageviewAsync       // Async UTM fetching + pageview
} = useUmami();

import { PageviewData, UTMFetcher } from '@danielgtmn/umami-react';

// PageviewData interface
const pageviewData: PageviewData = {
  url: '/custom-page',
  title: 'Page Title',
  referrer: 'https://example.com',
  utm_source: 'google',
  utm_medium: 'cpc',
  utm_campaign: 'summer-sale',
  utm_term: 'shoes',
  utm_content: 'ad-1',
  utm_id: 'unique-id-123',
  // Any additional custom properties
  custom_field: 'custom_value',
};

// UTMFetcher function type
const myUTMFetcher: UTMFetcher = async (utmId: string) => {
  // Your implementation
  return {
    utm_source: 'backend-source',
    utm_medium: 'backend-medium',
    // ... other UTM parameters
  };
};

<UmamiAnalytics
  url="https://analytics.example.com"
  websiteId="your-website-id"
  scriptAttributes={{
    'data-auto-track': 'false'
  }}
/>

// This will gracefully handle network errors
await trackPageviewAsync('utm-id', failingFetcher, {
  fallback_source: 'direct',
});

import UmamiAnalytics, { UmamiAnalyticsProps, UmamiConfig } from '@danielgtmn/umami-react';

const config: UmamiAnalyticsProps = {
  url: 'https://analytics.example.com',
  websiteId: 'your-website-id',
  debug: true,
  lazyLoad: true,
};

<UmamiAnalytics {...config} />

// pages/_app.tsx or app/layout.tsx
import UmamiAnalytics from '@danielgtmn/umami-react';

export default function App({ Component, pageProps }) {
  return (
    <>
      <UmamiAnalytics
        url="https://analytics.example.com"
        websiteId="your-website-id"
      />
      <Component {...pageProps} />
    </>
  );
}

// src/App.tsx
import UmamiAnalytics from '@danielgtmn/umami-react';

function App() {
  return (
    <div className="App">
      <UmamiAnalytics
        url="https://analytics.example.com"
        websiteId="your-website-id"
      />
      {/* Your app content */}
    </div>
  );
}