Next.js Installation

Install EventDash in your Next.js application (App Router or Pages Router)

Security Notice

Never commit API keys to version control. Always use environment variables and ensure your .env.local file is in your .gitignore.

1
Setup Environment Variable
Add your API key to environment variables. Use a NON-PUBLIC variable to keep your API key secure.
// .env.local (NOT committed to git)
NEXT_EVENTDASH_API_KEY=ed_your_api_key_here
2
Add the Script Component
Add the EventDash script to your root layout using Next.js Script component with afterInteractive strategy
// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Script
          strategy="afterInteractive"
          data-api-key={process.env.NEXT_EVENTDASH_API_KEY}
          src="https://www.eventda.sh/tracker.js"
        />
        {children}
      </body>
    </html>
  )
}
Next Steps

After installation, you can:

  • Track custom events using HTML attributes or JavaScript SDK
  • Set up goal tracking with data-ed-goal
  • Configure scroll tracking with data-ed-scroll
  • View your analytics in the dashboard