Next.js

{/* a plain script element, not next/script: the tag must reach the
    browser exactly as the console wrote it, with its integrity value */}
<script
  defer
  src={tracker.src}
  integrity={tracker.integrity}
  crossOrigin="anonymous"
  data-website-id={tracker.siteId}
/>

// the tracker tag's attributes, read on the server from the environment and
// the release manifest, so tests can use their own site id and gateway. a
// tenant writes the values from the console into app/layout.js instead.
import manifest from "tracker/releases/manifest.json";

function required(name) {
  const value = process.env[name];
  if (!value) throw new Error(`missing env ${name}`);
  return value;
}

export function trackerTag() {
  const version = required("SA_TRACKER_VERSION");
  const entry = manifest.versions.find((r) => r.version === version);
  if (!entry) throw new Error(`tracker version ${version} is not in the release manifest`);
  return {
    src: `${required("SA_GATEWAY_ORIGIN")}/v/${version}/sdk.js`,
    integrity: entry.integrity,
    siteId: required("SA_SITE_ID"),
  };
}

<script defer src="https://in.analytics.example/v/1.1.0/sdk.js" integrity="sha384-lxlitLtIMAeT/K3ieev+MeMGxZe7oceuWLOy8GZAjK7TMKS2Uh9UPmfGLBczUPsq" crossorigin="anonymous" data-website-id="3f6a0c2e-9b1d-4e7a-8c5f-1d2e3f4a5b6c"></script>

// a click handler needs a client component. the tracker may be blocked by the
// visitor, so the call is optional.
export function TrackButton() {
  return (
    <button
      type="button"
      id="manual"
      onClick={() => void window.umami?.track("manual-call", { source: "nextjs" })}
    >
      Track by call
    </button>
  );
}