React Installation

Install EventDash in your React application

Add the Script Tag

Add the EventDash script to your HTML file (typically public/index.html)

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      defer
      data-api-key="YOUR_API_KEY"
      src="https://www.eventda.sh/tracker.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Automatic Page Views

EventDash automatically tracks the initial page view and SPA route changes. No extra code is required.

// No additional code required
// Page views are tracked automatically on load and navigation.

Track Custom Events

Use the EventDash SDK to track custom events

// Component example
import { useEffect } from 'react'

function MyComponent() {
  const handleButtonClick = () => {
    if (typeof window !== 'undefined' && window.eventDash) {
      window.eventDash.track('button_clicked', {
        buttonId: 'signup-button',
        page: 'homepage'
      })
    }
  }

  return (
    <button onClick={handleButtonClick}>
      Sign Up
    </button>
  )
}

Using HTML Attributes

You can also track events using HTML data attributes without writing JavaScript

<button data-ed-goal="signup_clicked">
  Sign Up
</button>