Hooks

import { useFathom } from 'react-fathom'

function MyComponent() {
  const {
    trackPageview,
    trackEvent,
    trackGoal,
    load,
    setSite,
    blockTrackingForMe,
    enableTrackingForMe,
    isTrackingEnabled,
    client,
    defaultPageviewOptions,
    defaultEventOptions,
  } = useFathom()
}

const { trackPageview } = useFathom()

// Track current page
trackPageview()

// Track with custom URL
trackPageview({ url: '/custom-page' })

// Track with referrer
trackPageview({ url: '/landing', referrer: 'https://google.com' })

const { trackEvent } = useFathom()

// Basic event
trackEvent('button-click')

// Event with value (in cents)
trackEvent('purchase', { _value: 2999 }) // $29.99

const { trackGoal } = useFathom()

// Track a goal conversion
trackGoal('SIGNUP', 0) // No value
trackGoal('PURCHASE', 4999) // $49.99

import { useTrackOnMount } from 'react-fathom'

function LandingPage() {
  useTrackOnMount({ url: '/landing' })

  return <div>Welcome!</div>
}

import { useTrackOnClick } from 'react-fathom'

function CTAButton() {
  const handleClick = useTrackOnClick({
    eventName: 'cta-click',
    _value: 100,
  })

  return <button onClick={handleClick}>Get Started</button>
}

const handleClick = useTrackOnClick({
  eventName: 'signup-click',
  callback: (e) => {
    // Do something after tracking
    router.push('/signup')
  },
})

const handleClick = useTrackOnClick({
  eventName: 'link-click',
  preventDefault: true,
  callback: () => {
    // Handle navigation manually
    window.location.href = '/external-link'
  },
})

return (
  <a href="/external-link" onClick={handleClick}>
    External Link
  </a>
)

import { useTrackOnVisible } from 'react-fathom'

function HeroSection() {
  const ref = useTrackOnVisible({
    eventName: 'hero-viewed',
  })

  return (
    <section ref={ref}>
      <h1>Welcome</h1>
    </section>
  )
}

// Track when 50% visible
const ref = useTrackOnVisible({
  eventName: 'section-viewed',
  threshold: 0.5,
})

const ref = useTrackOnVisible({
  eventName: 'pricing-viewed',
  callback: (entry) => {
    console.log('Pricing section visible!', entry.intersectionRatio)
  },
})