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 window.invoker.trackEvent() function to track events. Make sure the tracking script is loaded before calling this function.

// Track a simple event
window.invoker.trackEvent('button_click')

// Track an event with custom properties
window.invoker.trackEvent('signup', {
  plan: 'Pro',
  source: 'pricing_page',
  value: 99
})

Examples

<button onclick="window.invoker.trackEvent('cta_click', {button: 'signup'})">
  Sign Up Now
</button>

// Or with JavaScript
document.getElementById('cta-btn').addEventListener('click', () => {
  window.invoker.trackEvent('cta_click', {
    button_name: 'signup',
    page_section: 'hero'
  })
})

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.trackEvent(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