Integrate UTM tracking and define funnels from your stack.

Pick your integration flow

Same building blocks below, arranged for what you're actually integrating — pick the one closest to your case.

A static page (your own HTML, a page builder) with no app behind it — you want a trackable link and clicks on specific buttons, with zero JavaScript to write.

<!-- Plain HTML: drop the file in /public and include it -->
<script>window.UTM_TRACKER_ENDPOINT = "https://api.didsar.ir/api/events";</script>
<script src="/utm-tracker.js" defer></script>

<!-- or configure on the tag itself -->
<script src="/utm-tracker.js" data-endpoint="https://api.didsar.ir/api/events" defer></script>
  1. Create a campaign to get your short link — the panel (Campaigns → New) or script it.
  2. Install the tracker script — a plain <script> tag in your page's <head>.
  3. Add data-utm-action to the buttons you want tracked — see declarative click tracking.
  4. Send a test event and confirm it arrives — the button is in the tracker section below.

Reference & full setup

Add the tracker script in Next.js / React

Copy utm-tracker.js into your app's /public folder (or link straight to this server's copy), then load it. Set the endpoint to your UTM backend's /api/events URL.

Next.js (App Router)

// app/layout.tsx — load the tracker on every page
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {/* point it at your UTM backend's /events endpoint */}
        <Script id="utm-endpoint" strategy="beforeInteractive">
          {`window.UTM_TRACKER_ENDPOINT = "https://api.didsar.ir/api/events";`}
        </Script>
        <Script src="/utm-tracker.js" strategy="afterInteractive" />
        {children}
      </body>
    </html>
  );
}

Plain React SPA (Vite, CRA, …)

No next/script outside Next.js — just inject the tag yourself.

// A tiny hook for a plain React SPA (Vite, CRA, etc. — no next/script)
import { useEffect } from "react";

export function useUtmTracker(endpoint) {
  useEffect(() => {
    window.UTM_TRACKER_ENDPOINT = endpoint;
    const s = document.createElement("script");
    s.src = "/utm-tracker.js";
    s.defer = true;
    document.body.appendChild(s);
    return () => s.remove();
  }, [endpoint]);
}

// In your root component:
useUtmTracker("https://api.didsar.ir/api/events");

The script auto-captures utm_* params from the landing URL, stores them, and sends a page_view automatically.

← Back to campaigns

Integration docs — track UTM events and define funnels from your stack · Didsar