Analytics Provider

1"use client";
2 
3import { useEffect } from "react";
4import Script from "next/script";
5 
6import { getExperimentVariant, trackEvent } from "@/lib/analytics";
7 
8export { trackEvent, getExperimentVariant };
9 
10type AnalyticsProviderProps = {
11  children?: React.ReactNode;
12};
13 
14/**
15 * Loads optional Plausible/GA scripts and exposes experiment tracking.
16 * Set NEXT_PUBLIC_PLAUSIBLE_DOMAIN or NEXT_PUBLIC_GA_ID in env.
17 */
18export function AnalyticsProvider({ children }: AnalyticsProviderProps) {
19  const plausibleDomain = process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN;
20  const rawGaId = process.env.NEXT_PUBLIC_GA_ID ?? "";
21  // Only allow Measurement ID shape (G-XXXXXXXX) to avoid script injection.
22  const gaId = /^G-[A-Z0-9]+$/i.test(rawGaId) ? rawGaId : undefined;
23 
24  useEffect(() => {
25    trackEvent("page_view", { path: window.location.pathname });
26  }, []);
27 
28  return (
29    <>
30      {plausibleDomain ? (
31        <Script
32          defer
33          data-domain={plausibleDomain}
34          src="https://plausible.io/js/script.js"
35          strategy="afterInteractive"
36        />
37      ) : null}
38      {gaId ? (
39        <>
40          <Script
41            src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
42            strategy="afterInteractive"
43          />
44          <Script id="ga-init" strategy="afterInteractive">
45            {`window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','${gaId}');`}
46          </Script>
47        </>
48      ) : null}
49      {children}
50    </>
51  );
52}
53 
54export function useExperiment(experimentId: string, variants: string[], weights?: number[]) {
55  useEffect(() => {
56    getExperimentVariant({ id: experimentId, variants, weights });
57  }, [experimentId, variants, weights]);
58}