Install the tracker

Add the tracking script to plain HTML, React, Next.js, or Vue — plus click tracking options.

The tracker is a single async script tag. Drop it into the <head> of any site and it starts reporting pageviews, engagement time, scroll depth, and clicks — including SPA route changes, with no extra code.

Plain HTML

index.html

<head>
  <!-- ...the rest of your head... -->
  <script async
          src="https://quantalog-be.daorbit.in/tracker.js"
          data-site="YOUR_SITE_ID"></script>
</head>

React

Mount the script once at the app root:

App.tsx

useEffect(() => {
  const s = document.createElement("script");
  s.src = "https://quantalog-be.daorbit.in/tracker.js";
  s.async = true;
  s.dataset.site = "YOUR_SITE_ID";
  document.head.appendChild(s);
  return () => { document.head.removeChild(s); };
}, []);

Next.js

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://quantalog-be.daorbit.in/tracker.js"
          data-site={process.env.NEXT_PUBLIC_QUANTALOG_SITE_ID}
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Vue

main.ts

const s = document.createElement("script");
s.src = "https://quantalog-be.daorbit.in/tracker.js";
s.async = true;
s.dataset.site = import.meta.env.VITE_QUANTALOG_SITE_ID;
document.head.appendChild(s);

Click tracking

Buttons, links, and anything tagged with data-va-cta are tracked automatically. Control it per element or globally:

data-va-cta="signup" — give an element a stable label instead of its visible text.
data-va-ignore — skip a single element.
data-clicks="off" on the script tag — disable click tracking entirely.