Event Tracking

What are Events?

Events allow you to track specific user interactions on your website that aren't captured by default pageview tracking. Common use cases include:

• Button clicks (CTA buttons, download links)
• Form submissions
• Video plays
• File downloads
• External link clicks
• Newsletter signups

Tracking Events

Use the invoker global function to track events. Make sure the tracking script is loaded before calling this function.

// Track a simple event
invoker('event', 'Button Click')

// Track an event with custom properties
invoker('event', 'Signup', {
  props: {
    plan: 'Pro',
    source: 'pricing_page'
  }
})

Examples

<button onclick="invoker('event', 'CTA Click', {props: {button: 'signup'}})">
  Sign Up Now
</button>

// Or with JavaScript
document.getElementById('cta-btn').addEventListener('click', () => {
  invoker('event', 'CTA Click', {
    props: {
      button: 'signup',
      page: window.location.pathname
    }
  })
})

Event Properties

Properties allow you to add additional context to your events. Some guidelines:

• Property values should be strings or numbers
• Keep property names short and descriptive
• Use consistent naming conventions across events
• Avoid storing personally identifiable information (PII)

Viewing Event Data

Event data is available in the Events section of your dashboard:

1. Navigate to your site dashboard
2. Click "Events" in the sidebar
3. View event counts and trends
4. Click on an event to see property breakdowns

React Integration

// Create a tracking hook
function useTrackEvent() {
  const trackEvent = (name: string, props?: Record<string, string | number>) => {
    if (typeof window !== 'undefined' && window.invoker) {
      window.invoker('event', name, { props })
    }
  }
  return trackEvent
}

// Use in components
function SignupButton() {
  const trackEvent = useTrackEvent()

  const handleClick = () => {
    trackEvent('Signup Click', { location: 'header' })
    // ... handle signup
  }

  return <button onClick={handleClick}>Sign Up</button>
}

Best Practices

• Name events clearly: Use action-oriented names like "Button Click" or "Form Submit"
• Be consistent: Use the same event names for similar actions across your site
• Don't over-track: Focus on meaningful interactions, not every click
• Use properties wisely: Add context that helps you analyze the data
• Test your events: Check the dashboard to verify events are being tracked correctly