videocompressor

"use client";

import Script from "next/script";

type AnalyticsValue = string | number | boolean;
type AnalyticsProps = Record<string, AnalyticsValue>;

const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID?.trim();
const CLARITY_ID = process.env.NEXT_PUBLIC_CLARITY_ID?.trim();

const safeEventName = (name: string) => name.replace(/[^a-zA-Z0-9_]/g, "_").slice(0, 40);

function normalizeProps(props?: AnalyticsProps) {
  if (!props) return undefined;
  return Object.fromEntries(
    Object.entries(props).map(([key, value]) => [safeEventName(key), value]),
  ) as AnalyticsProps;
}

declare global {
  interface Window {
    plausible?: (event: string, options?: { props?: AnalyticsProps }) => void;
    dataLayer?: unknown[];
    gtag?: (command: "config" | "event" | "js", name: string | Date, params?: AnalyticsProps) => void;
    clarity?: (command: "event" | "set", key: string, value?: string) => void;
  }
}

export function trackEvent(event: string, props?: AnalyticsProps) {
  if (typeof window === "undefined") return;

  const safeEvent = safeEventName(event);
  const safeProps = normalizeProps(props);

  window.plausible?.(safeEvent, safeProps ? { props: safeProps } : undefined);
  window.gtag?.("event", safeEvent, safeProps);
  window.clarity?.("event", safeEvent);

  if (safeProps) {
    Object.entries(safeProps).forEach(([key, value]) => {
      window.clarity?.("set", `${safeEvent}_${key}`.slice(0, 64), String(value).slice(0, 120));
    });
  }
}

export function Analytics() {
  return <>
    <Script defer data-domain="videocompressor.online" src="https://plausible.io/js/script.js" />
    {GA_MEASUREMENT_ID ? <>
      <Script src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`} strategy="afterInteractive" />
      <Script id="ga4-init" strategy="afterInteractive">{`
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${GA_MEASUREMENT_ID}', { send_page_view: true });
      `}</Script>
    </> : null}
    {CLARITY_ID ? <Script id="clarity-init" strategy="afterInteractive">{`
      (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
      })(window, document, "clarity", "script", "${CLARITY_ID}");
    `}</Script> : null}
  </>;
}