Installation

Add your site in the dashboard and copy the snippet with your ID. Here are the steps for each framework.

HTML

Paste the snippet inside the <head> of every page.

<script
  defer
  data-site="st_YOUR_ID"
  src="https://in.datatrack.dev/js/script.js">
</script>

Next.js

File: app/layout.tsx. In the App Router root layout, using next/script. It loads once and detects client-side navigations.

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          data-site="st_YOUR_ID"
          src="https://in.datatrack.dev/js/script.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Astro

File: src/layouts/Layout.astro. In your base layout, inside the <head>. is:inline stops Astro from processing and bundling it. If you use View Transitions, the script detects page changes.

<head>
  <script
    is:inline
    defer
    data-site="st_YOUR_ID"
    src="https://in.datatrack.dev/js/script.js">
  </script>
</head>

WordPress

File: functions.php (child theme). Add it to your child theme's functions.php, or paste the HTML snippet into the header with a plugin like WPCode.

add_action('wp_head', function () {
  echo '<script defer data-site="st_YOUR_ID" src="https://in.datatrack.dev/js/script.js"></script>';
});

Shopify

File: layout/theme.liquid. In Online Store → Themes → Edit code, inside the <head> of theme.liquid.

<script
  defer
  data-site="st_YOUR_ID"
  src="https://in.datatrack.dev/js/script.js">
</script>

Nuxt

File: nuxt.config.ts. Add it as a global app script.

export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: "https://in.datatrack.dev/js/script.js", defer: true, "data-site": "st_YOUR_ID" }],
    },
  },
});

Custom events

window.datatrack?.track("signup", { plan: "pro" });