Next.js

Install EventDash in your Next.js application using 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.

Setup Environment Variable

Add your API key to environment variables. Use a NON-PUBLIC variable to keep your API key secure.

bash

// .env.local (NOT committed to git)
NEXT_EVENTDASH_API_KEY=ed_your_api_key_here

Add the Script Component

Add the EventDash script to your root layout using Next.js Script component with afterInteractive strategy

typescript

// 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"
        />
        <link rel="preload" as="image" href="https://www.eventda.sh/api/crawl?key=YOUR_API_KEY" />
        {children}
      </body>
    </html>
  )
}

Name the network that fetched the page

The preload line counts crawlers that identify themselves. A middleware report also names the registry owner of an unnamed client. Put an eds_ server key in EVENTDASH_SERVER_KEY. Ordinary browser navigations are not sent. A firm on a residential proxy or shared cloud host often cannot be named. HTML installs without this middleware still only see known agents.

typescript

import { after, type NextRequest } from 'next/server'

const ASSET = /\.(?:svg|png|jpe?g|gif|webp|ico|css|js|map|woff2?)$/i

export function reportEventDashCrawlers(request: NextRequest) {
  if (request.method !== 'GET') return
  const path = request.nextUrl.pathname
  if (path.startsWith('/_next') || path.startsWith('/api') || ASSET.test(path)) return
  const userAgent = request.headers.get('user-agent') ?? ''
  if (!userAgent) return
  const known = /bot|spider|crawler|gptbot|claude|bingbot|googlebot|facebookexternalhit|twitterbot/i.test(userAgent)
  const script = /\bcurl\/|python-requests|go-http-client|headless|wget\/|scrapy/i.test(userAgent)
  const dest = request.headers.get('sec-fetch-dest')
  const mode = request.headers.get('sec-fetch-mode')
  const browser = /mozilla\/|chrome\/|safari\/|firefox\/|edg\//i.test(userAgent)
  if (browser && dest && mode && !known && !script) return
  const ip =
    request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ||
    request.headers.get('x-real-ip') ||
    ''
  const body = JSON.stringify({
    path,
    host: request.headers.get('host') ?? '',
    userAgent,
    ip,
    secFetchDest: dest ?? '',
    secFetchMode: mode ?? '',
  })
  after(() => {
    void fetch('https://www.eventda.sh/api/crawl/report', {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${process.env.EVENTDASH_SERVER_KEY ?? ''}`,
        'Content-Type': 'application/json',
      },
      body,
    })
  })
}

Call reportEventDashCrawlers(request) at the top of your existing middleware. The address is used to name the network, then dropped. Other servers can POST the same JSON with Authorization: Bearer eds_....

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