@phygitallabs/tapquest-core 6.7.9 → 6.7.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phygitallabs/tapquest-core",
-  "version": "6.7.9",
+  "version": "6.7.11",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/modules/data-tracking/GtagConsentSync.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { usePhygitalConsent } from "@phygitallabs/phygital-consent";
+import posthog from "posthog-js";
 import { useEffect } from "react";
+import { useSessionReplay } from "../session-replay";
 
 type GtagConsent = (
   command: "consent",
@@ -9,46 +11,91 @@ type GtagConsent = (
   params: Record<string, string>
 ) => void;
 
+/** Consent Mode v2: block analytics and ad tags until user accepts. */
 const GTAG_CONSENT_DENIED = {
   analytics_storage: "denied",
   ad_storage: "denied",
+  ad_user_data: "denied",
+  ad_personalization: "denied",
 } as const;
 
 const GTAG_CONSENT_GRANTED_ANALYTICS = {
   analytics_storage: "granted",
 } as const;
 
+const GTAG_CONSENT_GRANTED_ADS = {
+  ad_storage: "granted",
+  ad_user_data: "granted",
+  ad_personalization: "granted",
+} as const;
+
+function pushConsentUpdate(params: Record<string, string>) {
+  if (typeof window === "undefined") return;
+  const w = window as Window & { gtag?: GtagConsent; dataLayer?: unknown[] };
+  if (typeof w.gtag === "function") {
+    w.gtag("consent", "update", params);
+  } else {
+    w.dataLayer = w.dataLayer || [];
+    (w.dataLayer as unknown[]).push(["consent", "update", params]);
+  }
+}
+
 /**
- * Sets gtag consent default to denied on mount and updates to granted
- * when user has accepted analytics (must be under PhygitalConsentProvider).
+ * Syncs cookie consent to GA, GTM, PostHog, OpenReplay, and Google AdSense.
+ * - On mount: sets gtag/GTM consent default to denied.
+ * - When analytics allowed: grants analytics_storage (GA/GTM), opts in PostHog, starts OpenReplay.
+ * - When advertising allowed: grants ad_storage, ad_user_data, ad_personalization (AdSense).
+ * Must be used under PhygitalConsentProvider; for OpenReplay also under SessionReplayProvider.
  * Renders nothing.
  */
 export function GtagConsentSync() {
-  const consent = usePhygitalConsent();
-  const isAnalyticsAllowed = (consent as { isAnalyticsAllowed?: boolean }).isAnalyticsAllowed ?? false;
+  const consent = usePhygitalConsent() as {
+    isAnalyticsAllowed?: boolean;
+    isAdvertisingAllowed?: boolean;
+  };
+  const isAnalyticsAllowed = consent.isAnalyticsAllowed ?? false;
+  const isAdvertisingAllowed = consent.isAdvertisingAllowed ?? false;
+  const { initTracker, startTracking } = useSessionReplay();
 
+  // Default: deny all consent (run once on mount)
   useEffect(() => {
     if (typeof window === "undefined") return;
     const w = window as Window & { dataLayer?: unknown[]; gtag?: GtagConsent };
     w.dataLayer = w.dataLayer || [];
-    const gtag = w.gtag;
-    if (typeof gtag === "function") {
-      gtag("consent", "default", { ...GTAG_CONSENT_DENIED });
+    if (typeof w.gtag === "function") {
+      w.gtag("consent", "default", { ...GTAG_CONSENT_DENIED });
     } else {
-      w.dataLayer.push(["consent", "default", { ...GTAG_CONSENT_DENIED }]);
+      (w.dataLayer as unknown[]).push(["consent", "default", { ...GTAG_CONSENT_DENIED }]);
     }
   }, []);
 
+  // GA / GTM: grant analytics when user accepted analytics
+  useEffect(() => {
+    if (!isAnalyticsAllowed) return;
+    pushConsentUpdate({ ...GTAG_CONSENT_GRANTED_ANALYTICS });
+  }, [isAnalyticsAllowed]);
+
+  // Google AdSense: grant ad consent when user accepted advertising
+  useEffect(() => {
+    if (!isAdvertisingAllowed) return;
+    pushConsentUpdate({ ...GTAG_CONSENT_GRANTED_ADS });
+  }, [isAdvertisingAllowed]);
+
+  // PostHog: opt in when analytics allowed
   useEffect(() => {
-    if (!isAnalyticsAllowed || typeof window === "undefined") return;
-    const w = window as Window & { gtag?: GtagConsent; dataLayer?: unknown[] };
-    const gtag = w.gtag;
-    if (typeof gtag === "function") {
-      gtag("consent", "update", { ...GTAG_CONSENT_GRANTED_ANALYTICS });
-    } else if (Array.isArray(w.dataLayer)) {
-      w.dataLayer.push(["consent", "update", { ...GTAG_CONSENT_GRANTED_ANALYTICS }]);
+    if (!isAnalyticsAllowed) return;
+    const ph = posthog as { opt_in_capturing?: () => void };
+    if (typeof ph.opt_in_capturing === "function") {
+      ph.opt_in_capturing();
     }
   }, [isAnalyticsAllowed]);
 
+  // OpenReplay: init and start when analytics allowed
+  useEffect(() => {
+    if (!isAnalyticsAllowed) return;
+    initTracker();
+    startTracking();
+  }, [isAnalyticsAllowed, initTracker, startTracking]);
+
   return null;
 }

package/src/modules/data-tracking/GtagGtmScriptToggle.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { usePhygitalConsent } from "@phygitallabs/phygital-consent";
+import { useEffect } from "react";
+
+/** Selectors for gtag / GTM scripts in the DOM */
+const SCRIPT_SELECTORS =
+  'script[src*="googletagmanager.com"], script[src*="google-analytics.com"], script[src*="gtag/js"]';
+
+const GTM_SCRIPT_SELECTOR = 'script[src*="googletagmanager.com/gtm.js"]';
+const GTAG_SCRIPT_SELECTOR =
+  'script[src*="gtag/js"], script[src*="googletagmanager.com/gtag"]';
+
+/** Detect if gtag/GTM scripts are present in the DOM */
+export function detectGtagGtmInDom(): {
+  gtag: boolean;
+  gtm: boolean;
+  any: boolean;
+  gtagScripts: HTMLScriptElement[];
+  gtmScripts: HTMLScriptElement[];
+} {
+  if (typeof document === "undefined") {
+    return { gtag: false, gtm: false, any: false, gtagScripts: [], gtmScripts: [] };
+  }
+  const gtagScripts = Array.from(document.querySelectorAll<HTMLScriptElement>(GTAG_SCRIPT_SELECTOR));
+  const gtmScripts = Array.from(document.querySelectorAll<HTMLScriptElement>(GTM_SCRIPT_SELECTOR));
+  return {
+    gtag: gtagScripts.length > 0,
+    gtm: gtmScripts.length > 0,
+    any: gtagScripts.length > 0 || gtmScripts.length > 0,
+    gtagScripts,
+    gtmScripts,
+  };
+}
+
+export interface GtagGtmScriptToggleProps {
+  /** When true, scripts stay. When false, detected GA/GTM scripts are removed from DOM. */
+  enabled?: boolean;
+}
+
+/**
+ * Detects GA/GTM scripts in the DOM and removes them when enabled is false.
+ * When enabled is true, does nothing (scripts remain if already in the page).
+ * No config: only detect and toggle (remove) based on condition.
+ * Renders nothing.
+ */
+export function GtagGtmScriptToggle({ enabled = false }: GtagGtmScriptToggleProps) {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    if (!enabled) {
+      const toRemove = document.querySelectorAll<HTMLScriptElement>(SCRIPT_SELECTORS);
+      toRemove.forEach((el) => {
+        el.parentNode?.removeChild(el);
+      });
+      const w = window as Window & { gtag?: unknown; dataLayer?: unknown[] };
+      if (w.dataLayer && Array.isArray(w.dataLayer)) {
+        w.dataLayer.length = 0;
+      }
+      w.gtag = undefined;
+    }
+  }, [enabled]);
+
+  return null;
+}
+
+/** Reads consent from PhygitalConsentProvider; removes GA/GTM scripts when analytics not allowed. */
+export function GtagGtmScriptToggleFromConsent() {
+  const consent = usePhygitalConsent() as { isAnalyticsAllowed?: boolean };
+  const enabled = consent.isAnalyticsAllowed ?? false;
+
+  return <GtagGtmScriptToggle enabled={enabled} />;
+}

package/src/modules/data-tracking/hooks/index.ts

@@ -3,93 +3,159 @@ import posthog from "posthog-js";
 import { useSessionReplay } from "../../../modules/session-replay";
 
 declare global {
-    interface Window {
-        dataLayer: unknown[];
-    }
+  interface Window {
+    dataLayer: unknown[];
+    gtag?: GtagConsent;
+  }
 }
 
-declare function gtag(
-    command: "event",
-    eventName: string,
-    eventParameters: Record<string, any>
-): void;
+type GtagConsent = (
+  command: "consent",
+  action: "default" | "update",
+  params: Record<string, string>
+) => void;
 
+const GTAG_ANALYTICS_GRANTED = { analytics_storage: "granted" } as const;
+const GTAG_ADS_GRANTED = {
+  ad_storage: "granted",
+  ad_user_data: "granted",
+  ad_personalization: "granted",
+} as const;
 
 // GTM
 const pushEventToDataLayer = (event: string, data: Record<string, any>) => {
-    try {
-        window.dataLayer = window.dataLayer || [];
-
-        (window.dataLayer as Record<string, unknown>[]).push({
-            event,
-            ...data,
-        });
-
-    } catch (error) {
-        console.error(error);
-    }
+  try {
+    if (typeof window === "undefined") return;
+    window.dataLayer = window.dataLayer || [];
+    (window.dataLayer as Record<string, unknown>[]).push({ event, ...data });
+  } catch (error) {
+    console.error(error);
+  }
 };
 
-// GA
+// GA event (gtag may be loaded by GA script)
 const pushEventToGA = (eventName: string, eventData: Record<string, any>) => {
-    if (typeof gtag != "function") {
-        console.error("gtag is not a function");
-        return;
-    }
-    gtag("event", eventName, eventData);
+  if (typeof window === "undefined") return;
+  const w = window as Window & { gtag?: (a: string, b: string, c?: Record<string, any>) => void };
+  if (typeof w.gtag === "function") {
+    w.gtag("event", eventName, eventData);
+  }
 };
 
 // Posthog
 const pushEventToPosthog = (eventName: string, eventData: Record<string, any>) => {
-    posthog.capture(eventName, eventData);
+  posthog.capture(eventName, eventData);
 };
 
+/** Consent flags from PhygitalConsentProvider (isAdvertisingAllowed may be added in newer versions). */
+interface ConsentFlags {
+  isAnalyticsAllowed: boolean;
+  isAdvertisingAllowed?: boolean;
+}
+
 function useDataTracking() {
-    const { setUserId, setMetadata } = useSessionReplay();
-    const consent = usePhygitalConsent();
-    const isAnalyticsAllowed = (consent as { isAnalyticsAllowed?: boolean }).isAnalyticsAllowed ?? false;
-
-    const trackEvent = (eventName: string, eventData: Record<string, any>, useTools?: ("gtm" | "ga" | "posthog")[]) => {
-        console.log("trackEvent ", eventName, eventData);
-        
-        useTools = useTools || ["gtm"];
-
-        if (useTools.includes("gtm") && typeof window !== "undefined") {
-            pushEventToDataLayer(eventName, eventData);
-        }
-        if (useTools.includes("ga") && isAnalyticsAllowed && typeof gtag == "function") {
-            pushEventToGA(eventName, eventData);
-        }
-        if (useTools.includes("posthog") && typeof posthog == "function") {
-            pushEventToPosthog(eventName, eventData);
-        }
-    };
-
-    const trackUserIdentify = (userInfo: Record<string, any>) => {
-        posthog.identify(userInfo.email, {
-            email: userInfo.email,
-            name: userInfo.name,
-            avatar: userInfo.avatar,
-            uid: userInfo.uid,
-          });
-
-        setUserId(userInfo.id);
-
-        setMetadata({
-            user_email: userInfo.email
-        })
+  const { initTracker, startTracking, setUserId, setMetadata } = useSessionReplay();
+  const consent = usePhygitalConsent() as unknown as ConsentFlags;
+  const isAnalyticsAllowed = consent.isAnalyticsAllowed ?? false;
+  const isAdvertisingAllowed = consent.isAdvertisingAllowed ?? false;
+
+  /** Enable GA (gtag analytics_storage). No-op if analytics consent is denied. */
+  const toggleGA = () => {
+    if (!isAnalyticsAllowed || typeof window === "undefined") return;
+    const w = window as Window & { gtag?: GtagConsent; dataLayer?: unknown[] };
+    if (typeof w.gtag === "function") {
+      w.gtag("consent", "update", { ...GTAG_ANALYTICS_GRANTED });
+    } else if (Array.isArray(w.dataLayer)) {
+      w.dataLayer.push(["consent", "update", { ...GTAG_ANALYTICS_GRANTED }]);
+    }
+  };
+
+  /** Enable GTM consent for analytics. No-op if analytics consent is denied. */
+  const toggleGTM = () => {
+    if (!isAnalyticsAllowed || typeof window === "undefined") return;
+    const w = window as Window & { gtag?: GtagConsent; dataLayer?: unknown[] };
+    if (typeof w.gtag === "function") {
+      w.gtag("consent", "update", { ...GTAG_ANALYTICS_GRANTED });
+    } else {
+      w.dataLayer = w.dataLayer || [];
+      (w.dataLayer as unknown[]).push(["consent", "update", { ...GTAG_ANALYTICS_GRANTED }]);
     }
+  };
 
-    const trackLogoutEvent = () => {
-        posthog.capture("user_signed_out");
+  /** Opt-in PostHog capturing. No-op if analytics consent is denied. */
+  const togglePostHog = () => {
+    if (!isAnalyticsAllowed) return;
+    if (typeof (posthog as { opt_in_capturing?: () => void }).opt_in_capturing === "function") {
+      (posthog as { opt_in_capturing: () => void }).opt_in_capturing();
     }
+  };
+
+  /** Init and start OpenReplay. No-op if analytics consent is denied. */
+  const toggleOpenReplay = () => {
+    if (!isAnalyticsAllowed) return;
+    initTracker();
+    startTracking();
+  };
+
+  /** Enable Google AdSense (gtag ad consent). No-op if advertising consent is denied. */
+  const toggleGoogleAdSense = () => {
+    if (!isAdvertisingAllowed || typeof window === "undefined") return;
+    const w = window as Window & { gtag?: GtagConsent; dataLayer?: unknown[] };
+    if (typeof w.gtag === "function") {
+      w.gtag("consent", "update", { ...GTAG_ADS_GRANTED });
+    } else if (Array.isArray(w.dataLayer)) {
+      w.dataLayer.push(["consent", "update", { ...GTAG_ADS_GRANTED }]);
+    }
+  };
 
-    return {
-        trackEvent,
-        trackUserIdentify,
-        trackLogoutEvent
-    };
+  const trackEvent = (
+    eventName: string,
+    eventData: Record<string, any>,
+    useTools?: ("gtm" | "ga" | "posthog")[]
+  ) => {
+    useTools = useTools || ["gtm"];
+    if (useTools.includes("gtm") && typeof window !== "undefined") {
+      pushEventToDataLayer(eventName, eventData);
+    }
+    if (useTools.includes("ga") && isAnalyticsAllowed) {
+      pushEventToGA(eventName, eventData);
+    }
+    if (useTools.includes("posthog") && isAnalyticsAllowed && typeof posthog?.capture === "function") {
+      pushEventToPosthog(eventName, eventData);
+    }
+  };
+
+  const trackUserIdentify = (userInfo: Record<string, any>) => {
+    if (!isAnalyticsAllowed) return;
+    if (typeof posthog?.identify === "function") {
+      posthog.identify(userInfo.email, {
+        email: userInfo.email,
+        name: userInfo.name,
+        avatar: userInfo.avatar,
+        uid: userInfo.uid,
+      });
+    }
+    setUserId(userInfo.id);
+    setMetadata({ user_email: userInfo.email });
+  };
+
+  const trackLogoutEvent = () => {
+    if (!isAnalyticsAllowed) return;
+    if (typeof posthog?.capture === "function") {
+      posthog.capture("user_signed_out");
+    }
+  };
+
+  return {
+    trackEvent,
+    trackUserIdentify,
+    trackLogoutEvent,
+    toggleGA,
+    toggleGTM,
+    togglePostHog,
+    toggleOpenReplay,
+    toggleGoogleAdSense,
+  };
 }
 
 export { useDataTracking };
-

package/src/modules/data-tracking/index.ts

@@ -1,2 +1,3 @@
 export * from "./GtagConsentSync";
-export * from "./hooks";
+export * from "./GtagGtmScriptToggle";
+export * from "./hooks";

package/src/modules/session-replay/providers/SessionReplayProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useReducer } from "react";
+import React, { createContext, useReducer } from "react";
 import { v4 as uuidV4 } from "uuid";
 
 import {
@@ -172,11 +172,11 @@ export const SessionReplayProvider: React.FC<SessionReplayProviderProps> = ({
     const setUserId = (userId: string) => dispatch({ type: "setUserId", payload: userId })
     const setMetadata = (metadata: Record<string, any>) => dispatch({ type: "setMetadata", payload: metadata })
 
-    // init and start tracker
-    useEffect(() => {
-        initTracker();
-        startTracking();
-    }, []);
+    // // init and start tracker
+    // useEffect(() => {
+    //     initTracker();
+    //     startTracking();
+    // }, []);
 
     return <TrackerContext.Provider value={{
         initTracker,