Invoker Analytics/Documentation
Developers

JavaScript SDK

Complete reference for the Invoker Analytics JavaScript tracking library.

Installation

Add the Invoker tracking script to your website. The script is loaded asynchronously and won't block your page rendering.

Basic Installation
<script defer data-domain="yourdomain.com"
  src="https://cdn.invoker.app/js/script.js"></script>

Replace yourdomain.com with your actual domain (without https://).

Global Object

Once loaded, the script creates a global invoker object with the following methods:

invoker.track(eventName, properties)

Track a custom event with optional properties.

Track Custom Event
// Track a simple event
invoker.track('Signup Button Clicked');

invoker.trackPageview()

Manually track a pageview. This is useful for single-page applications (SPAs) where you need to track navigation changes.

// Track a pageview manually
invoker.trackPageview();

// Track with custom URL
invoker.trackPageview('/custom-page');

invoker.goal(goalName, value)

Track a goal conversion with an optional monetary value.

// Track a goal
invoker.goal('Newsletter Signup');

// Track a goal with value
invoker.goal('Purchase', 149.99);

invoker.enable() / invoker.disable()

Enable or disable tracking. Useful for implementing user consent preferences.

// Disable tracking (e.g., user opts out)
invoker.disable();

// Re-enable tracking (e.g., user consents)
invoker.enable();

Configuration Options

Configure the tracking script using data attributes:

AttributeDescriptionDefault
data-domainYour website domain (required)-
data-apiCustom API endpoint URLDefault API
data-excludePages to exclude (comma-separated)None
data-includeOnly track these pagesAll pages
data-spaEnable SPA mode (auto-track)false

Framework Integration

React / Next.js

// In your _app.js or layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          defer
          data-domain="yourdomain.com"
          data-spa="true"
          src="https://cdn.invoker.app/js/script.js"
        />
      </body>
    </html>
  )
}

Vue.js / Nuxt

// In nuxt.config.js
export default {
  head: {
    script: [
      {
        defer: true,
        'data-domain': 'yourdomain.com',
        'data-spa': 'true',
        src: 'https://cdn.invoker.app/js/script.js'
      }
    ]
  }
}

Manual SPA Integration

If you prefer manual control over pageview tracking in your SPA:

// React example with React Router
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    // Track pageview on route change
    if (window.invoker) {
      window.invoker.trackPageview();
    }
  }, [location]);

  return <YourApp />;
}

TypeScript Support

Add type definitions for the invoker global object:

// global.d.ts
declare global {
  interface Window {
    invoker: {
      track: (event: string, props?: Record<string, unknown>) => void;
      trackPageview: (url?: string) => void;
      goal: (name: string, value?: number) => void;
      enable: () => void;
      disable: () => void;
    };
  }
}

export {};