Frameworks

The snippet is one script tag, so it works with any framework that can put a tag in the page. In the examples, replace YOUR_SITE_ID with the id from your Site's Settings → Install and https://supersaasanalytics.com/ with the origin shown there.

Single-page apps need nothing extra: the snippet counts every route change made through the History API as a Pageview, which covers the routers of Nuxt, Next.js, SvelteKit, Vue Router, React Router and others.

Plain HTML

Paste the snippet before the closing </body> tag of every page, or into the layout or include that every page shares:

<!doctype html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <!-- your page -->
        <script defer data-site="YOUR_SITE_ID" src="https://supersaasanalytics.com//sd.js"></script>
    </body>
</html>

The same goes for WordPress themes, static site generators and server-rendered templates.

Nuxt

Add the script to app.head in nuxt.config.ts, so it is on every page:

export default defineNuxtConfig({
    app: {
        head: {
            script: [
                { src: "https://supersaasanalytics.com//sd.js", defer: true, "data-site": "YOUR_SITE_ID" },
            ],
        },
    },
});

To send Events from a component, call window.sd in the browser only:

<script setup lang="ts">
function signUp() {
    window.sd?.("Signup", { plan: "pro" });
}
</script>

For TypeScript, declare it once:

declare global {
    interface Window {
        sd?: ((name: string, props?: Record<string, string | number | boolean>) => void) & {
            identify: (id: string) => void;
            visitorId: () => string | null;
        };
    }
}

export {};

Next.js

With the App Router, add the script to the root layout with next/script. Next.js passes the data-site attribute through to the tag:

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>
                {children}
                <Script src="https://supersaasanalytics.com//sd.js" data-site="YOUR_SITE_ID" strategy="afterInteractive" />
            </body>
        </html>
    );
}

With the Pages Router, put the same <Script> in pages/_app.tsx.

Events work the same way as in Nuxt: call window.sd?.("Signup") from a client component or an event handler.

Calls before the script loads

Because the script is deferred, window.sd does not exist until it has loaded. To call sd() earlier, add this stub before the script tag. It queues the calls, and the snippet sends them once it has reported the first Pageview:

<script>window.sd=window.sd||function(){(sd.q=sd.q||[]).push(arguments)}</script>

The stub queues Events only. sd.identify() and sd.visitorId() exist once the script has loaded.