Components

import { TrackPageview } from 'react-fathom'

function Dashboard() {
  return (
    <TrackPageview url="/dashboard">
      <div>Dashboard content</div>
    </TrackPageview>
  )
}

<>
  <TrackPageview url="/landing" />
  <LandingPageContent />
</>

<TrackPageview url="/campaign" referrer="https://twitter.com">
  <CampaignPage />
</TrackPageview>

import { TrackClick } from 'react-fathom'

function SignUpSection() {
  return (
    <TrackClick eventName="signup-click">
      <button>Sign Up Free</button>
    </TrackClick>
  )
}

<TrackClick eventName="plan-selected" _value={999}>
  <button>Choose Pro Plan - $9.99/mo</button>
</TrackClick>

<TrackClick eventName="docs-link-click">
  <a href="/docs">View Documentation</a>
</TrackClick>

<TrackClick eventName="card-click">
  <div className="card">
    <h3>Feature</h3>
    <p>Description</p>
  </div>
</TrackClick>

import { TrackVisible } from 'react-fathom'

function PricingSection() {
  return (
    <TrackVisible eventName="pricing-viewed">
      <section>
        <h2>Pricing</h2>
        {/* pricing content */}
      </section>
    </TrackVisible>
  )
}

<TrackVisible eventName="footer-viewed" as="footer">
  <p>Footer content</p>
</TrackVisible>

<TrackVisible eventName="section-viewed" as="section" className="my-section">
  <h2>Section Title</h2>
</TrackVisible>

// Track when 50% of the element is visible
<TrackVisible eventName="hero-viewed" threshold={0.5}>
  <div className="hero">
    <h1>Welcome</h1>
  </div>
</TrackVisible>

// Track 100px before the element enters the viewport
<TrackVisible eventName="upcoming-section" rootMargin="100px">
  <section>Content</section>
</TrackVisible>