Installation

Add the Abner tracking script to your website in under a minute.

Basic installation

Add the following script tag to your website's <head> section. Replace YOUR_SITE_ID with the site ID from your Abner dashboard.

<script defer data-site="YOUR_SITE_ID" src="https://www.abner.app/abner.js"></script>

The script is under 2KB, loaded asynchronously with defer, and has zero impact on your page load performance or Lighthouse score.

Single-page application (SPA) support

Abner automatically detects client-side navigation in SPAs built with React, Vue, Next.js, Nuxt, SvelteKit, and other frameworks. It listens for pushState and popstate events to track page transitions without any extra configuration.

No additional setup is required. Just add the script tag and it works.

Framework-specific guides

Next.js / React

Add the script to your app/layout.tsx or pages/_document.tsx:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <script defer data-site="YOUR_SITE_ID" src="https://www.abner.app/abner.js" />
      </head>
      <body>{children}</body>
    </html>
  )
}

Nuxt / Vue

Add the script to your nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: 'https://www.abner.app/abner.js', defer: true, 'data-site': 'YOUR_SITE_ID' }
      ]
    }
  }
})

Static HTML

Paste the script tag directly into the <head> of every page, or into a shared layout/template file.

Verifying the installation

After adding the script:

  1. Open your website in a browser.
  2. Go to your Abner dashboard — you should see a pageview appear within seconds.
  3. Optionally, open your browser's Developer Tools > Network tab and confirm a request to ingest.abner.app/api/ingest/ with a 202 status code.

Content Security Policy (CSP)

If your site uses a Content Security Policy, add the following directives:

script-src 'self' https://www.abner.app;
connect-src 'self' https://www.abner.app;