Invoker - Website Visitor Analytics

Basic Installation

The simplest way to install Invoker Analytics is to add the tracking script to your HTML. Place this code just before the closing </head> tag:

HTML Script Tag

<script
  defer
  data-domain="your-domain.com"
  src="https://api.invoker.app/js/script.js"
></script>

Replace your-domain.com with your actual domain (without https:// or www).

Framework-Specific Installation

Next.js (App Router - Recommended)

Add the script to your root layout file. This ensures tracking works across all pages including client-side navigations.

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          data-domain="your-domain.com"
          src="https://api.invoker.app/js/script.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Next.js (Pages Router)

For the Pages Router, add the script in your custom _app.tsx:

// pages/_app.tsx
import type { AppProps } from 'next/app'
import Script from 'next/script'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        defer
        data-domain="your-domain.com"
        src="https://api.invoker.app/js/script.js"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

Using Environment Variables

For better configuration management, use environment variables:

// .env.local
NEXT_PUBLIC_ANALYTICS_DOMAIN=your-domain.com

// app/layout.tsx
<Script
  defer
  data-domain={process.env.NEXT_PUBLIC_ANALYTICS_DOMAIN}
  src="https://api.invoker.app/js/script.js"
  strategy="afterInteractive"
/>

SPA Considerations

Invoker Analytics automatically tracks client-side navigation in Single Page Applications (SPAs). The script listens for popstate events and pushState/replaceState calls to track page changes without full page reloads.

No additional configuration is needed for SPAs. The script automatically detects and tracks route changes.

Configuration Options

The tracking script supports several configuration options via data attributes:

Attribute	Required	Description
`data-domain`	Yes	Your website domain (e.g., example.com)
`data-api`	No	Custom API endpoint (for self-hosted instances)
`data-exclude`	No	Comma-separated paths to exclude from tracking
`defer`	Recommended	Loads script without blocking page render

Verifying Installation

After installing the script, verify it's working correctly:

Open your website in a browser
Open the browser's Developer Tools (F12)
Go to the Network tab and filter by "script.js"
Refresh the page and verify the script loads with a 200 status
Check your Invoker dashboard for incoming pageviews

Troubleshooting

Script not loading

Ensure the script tag is placed in the <head> section
Check for any Content Security Policy (CSP) blocking the script
Verify your domain matches exactly what's in your Invoker settings

Pageviews not appearing

Wait a few minutes - data may take up to 5 minutes to appear
Check if ad blockers are blocking the request
Ensure you're not viewing from a blocked IP or country
Verify the domain in data-domain matches your site in the dashboard

Content Security Policy (CSP)

If you have a strict CSP, add these directives:

script-src 'self' https://api.invoker.app;
connect-src 'self' https://api.invoker.app;

Installation Guide