Framework integrations

The snippet is a single <script> tag, so every framework integration is really just “where does this framework want head content.” The one exception is frameworks that inject the tag asynchronously via JavaScript rather than rendering a literal <script> element up front. That case is covered in the Next.js tab below.

<!-- in <head>, or right before </body> -->
<script src="https://cdn.analytics.canarycoders.es/lytics.js" data-domain="myapp.com" defer></script>

Add it directly to index.html. Vite serves that as static HTML, so the tag reaches the browser unmodified:

<head>
  <meta charset="UTF-8" />
  <script src="https://cdn.analytics.canarycoders.es/lytics.js" data-domain="myapp.com" defer></script>
</head>

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script
          src="https://cdn.analytics.canarycoders.es/lytics.js"
          data-domain="myapp.com"
          strategy="afterInteractive"
        />
        {children}
      </body>
    </html>
  );
}

next/script can insert the tag asynchronously depending on strategy, and the snippet only reads data-* attributes off document.currentScript, which is only reliably set for a synchronously-executing <script>. If pageviews don’t show up, set the pre-init global before the script runs instead. It takes precedence in exactly this situation:

<Script id="canarylytics-config" strategy="beforeInteractive">
  {`window.lytics = { domain: "myapp.com" };`}
</Script>
<Script src="https://cdn.analytics.canarycoders.es/lytics.js" strategy="afterInteractive" />

---
---
<html lang="en">
  <head>
    <script src="https://cdn.analytics.canarycoders.es/lytics.js" data-domain="myapp.com" defer></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Add it to the root route’s head config:

export const Route = createRootRoute({
  head: () => ({
    // ...meta, links, etc.
    scripts: [
      { src: "https://cdn.analytics.canarycoders.es/lytics.js", defer: true, "data-domain": "myapp.com" },
    ],
  }),
  // ...
});

For any framework not listed here: if it can render a literal <script> tag into the document <head>, this snippet works. It has zero dependencies and doesn’t care what rendered the page around it.

SSR appsRails, Django, Express, Remix, and other server-rendered frameworks.

SPAs & client-side routingIf the app uses a client-side router.

Framework integrations

Related