Frameworks & CMS

The snippet is plain JavaScript and works on any site. What changes from one stack to another is where to put it so that it loads on every page, exactly once.

Replace YOUR_PROJECT_ID with the ID shown in Settings → Installation.

Install for your stack

Pick your framework. Your choice is remembered on the other pages of this documentation.

App Router: in the root layout, with next/script.

JSX

// app/layout.jsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="sublim" strategy="afterInteractive">
          {`(function(){
            window.sublim=window.sublim||function(){(sublim.q=sublim.q||[]).push(arguments)};
            sublim.o={projectId:'YOUR_PROJECT_ID'};
            var d=document,s=d.createElement('script');
            s.src='https://cdn.sublimanalytics.com/loader.js';s.async=1;
            d.getElementsByTagName('head')[0].appendChild(s);
          })();`}
        </Script>
      </body>
    </html>
  );
}

Pages Router: put the same <Script> in pages/_app.jsx.

Prefer a typed import? Use the npm package instead.

Plain HTML

The snippet itself, for any template:

HTML

<script>
  (function(){
    window.sublim=window.sublim||function(){(sublim.q=sublim.q||[]).push(arguments)};
    sublim.o={projectId:'YOUR_PROJECT_ID'};
    var d=document,s=d.createElement('script');
    s.src='https://cdn.sublimanalytics.com/loader.js';s.async=1;
    d.getElementsByTagName('head')[0].appendChild(s);
  })();
</script>

Single-page apps

Whatever the framework, client-side navigations (history.pushState, back/forward) are tracked as pageviews automatically. Apps that route with the URL hash (#/page) need hashMode: true. See Pageviews & SPAs.