Install the SDK

One script tag, asynchronous, no build tools. Paste it once and every page view, click, and error gets captured automatically.

01Add the script tag

Paste this just before the closing </body> tag.

Copy the snippet

The loader is ~2 KB gzipped. It fetches the main SDK asynchronously, so it never blocks your critical rendering path.

index.html

<!-- Sumidata SDK -->
<script
  src="https://sdk.sumidata.io/loader.js"
  data-project-id="YOUR_PROJECT_ID"
  async></script>

Replace YOUR_PROJECT_ID

Find your project ID in the Dashboard under Settings → Project. It looks like proj_abc123xyz.

Deploy

Push the change to production. The SDK starts recording page views, clicks, scrolls, and errors immediately.

That's it. The SDK is now live. Next step: Identify users so sessions stitch to known accounts.

02Framework integration

Drop-in snippets for the frameworks you already use.

Next.js (App Router)

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://sdk.sumidata.io/loader.js"
          data-project-id="YOUR_PROJECT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Vue / Nuxt

nuxt.config.ts

export default {
  app: {
    head: {
      script: [{
        src: 'https://sdk.sumidata.io/loader.js',
        'data-project-id': 'YOUR_PROJECT_ID',
        async: true
      }]
    }
  }
}

03Troubleshooting

If the SDK doesn't seem to load, check these.

Content Security Policy

If your site has a strict CSP, add https://sdk.sumidata.io to script-src:

CSP header

Content-Security-Policy: script-src 'self' https://sdk.sumidata.io;

Ad blockers

Some ad blockers match on the word analytics or on common vendor domains. Sumidata's loader domain is generic enough to pass most filters, but if you see 0 events, check the browser Network tab for a blocked request.