@phygitallabs/tapquest-core 6.7.12 → 6.7.13

package/package.json

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

package/src/modules/data-tracking/{GtagConsentSync.tsx → DataTrackingConsentSync.tsx}

@@ -1,9 +1,8 @@
 "use client";
 
 import { usePhygitalConsent } from "@phygitallabs/phygital-consent";
-import posthog from "posthog-js";
 import { useEffect } from "react";
-import { useSessionReplay } from "../session-replay";
+import { useDataTracking } from "./hooks";
 
 type GtagConsent = (
   command: "consent",
@@ -19,27 +18,6 @@ const GTAG_CONSENT_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]);
-  }
-}
-
 /**
  * Syncs cookie consent to GA, GTM, PostHog, OpenReplay, and Google AdSense.
  * - On mount: sets gtag/GTM consent default to denied.
@@ -48,14 +26,14 @@ function pushConsentUpdate(params: Record<string, string>) {
  * Must be used under PhygitalConsentProvider; for OpenReplay also under SessionReplayProvider.
  * Renders nothing.
  */
-export function GtagConsentSync() {
+export function DataTrackingConsentSync() {
   const consent = usePhygitalConsent() as {
     isAnalyticsAllowed?: boolean;
     isAdvertisingAllowed?: boolean;
   };
   const isAnalyticsAllowed = consent.isAnalyticsAllowed ?? false;
   const isAdvertisingAllowed = consent.isAdvertisingAllowed ?? false;
-  const { initTracker, startTracking } = useSessionReplay();
+  const { togglePostHog, toggleOpenReplay, toggleGoogleAdSense, pauseGoogleAdSense } = useDataTracking();
 
   // Default: deny all consent (run once on mount)
   useEffect(() => {
@@ -69,33 +47,26 @@ export function GtagConsentSync() {
     }
   }, []);
 
-  // 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
+  // Google AdSense: grant ad consent when allowed, revoke (pause) when denied
   useEffect(() => {
-    if (!isAdvertisingAllowed) return;
-    pushConsentUpdate({ ...GTAG_CONSENT_GRANTED_ADS });
-  }, [isAdvertisingAllowed]);
+    if (isAdvertisingAllowed) {
+      toggleGoogleAdSense();
+    } else {
+      pauseGoogleAdSense();
+    }
+  }, [isAdvertisingAllowed, toggleGoogleAdSense, pauseGoogleAdSense]);
 
   // PostHog: opt in when analytics allowed
   useEffect(() => {
     if (!isAnalyticsAllowed) return;
-    const ph = posthog as { opt_in_capturing?: () => void };
-    if (typeof ph.opt_in_capturing === "function") {
-      ph.opt_in_capturing();
-    }
-  }, [isAnalyticsAllowed]);
+    togglePostHog();
+  }, [isAnalyticsAllowed, togglePostHog]);
 
   // OpenReplay: init and start when analytics allowed
   useEffect(() => {
     if (!isAnalyticsAllowed) return;
-    initTracker();
-    startTracking();
-  }, [isAnalyticsAllowed, initTracker, startTracking]);
+    toggleOpenReplay();
+  }, [isAnalyticsAllowed, toggleOpenReplay]);
 
   return null;
 }

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

@@ -21,6 +21,11 @@ const GTAG_ADS_GRANTED = {
   ad_user_data: "granted",
   ad_personalization: "granted",
 } as const;
+const GTAG_ADS_DENIED = {
+  ad_storage: "denied",
+  ad_user_data: "denied",
+  ad_personalization: "denied",
+} as const;
 
 // GTM
 const pushEventToDataLayer = (event: string, data: Record<string, any>) => {
@@ -59,21 +64,75 @@ function useDataTracking() {
   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[] };
+  /** Load GA script and grant analytics consent. No-op if analytics consent is denied or script already loaded. */
+  const loadGA = (gaId: string) => {
+    if (!isAnalyticsAllowed || typeof window === "undefined" || !gaId) return;
+    const w = window as Window & {
+      gtag?: (...args: unknown[]) => void;
+      dataLayer?: unknown[];
+    };
+
+    // Load gtag.js script if not already present
+    const scriptId = `ga-script-${gaId}`;
+    if (!document.getElementById(scriptId)) {
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.async = true;
+      script.src = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(gaId)}`;
+      document.head.appendChild(script);
+
+      // Initialize gtag
+      w.dataLayer = w.dataLayer || [];
+      w.gtag = function () {
+        // eslint-disable-next-line prefer-rest-params
+        (w.dataLayer as unknown[]).push(arguments);
+      };
+      w.gtag("js", new Date());
+      w.gtag("config", gaId);
+    }
+
+    // Grant analytics consent
     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;
+  /** Load GTM script and grant analytics consent. No-op if analytics consent is denied or script already loaded. */
+  const loadGTM = (gtmId: string) => {
+    if (!isAnalyticsAllowed || typeof window === "undefined" || !gtmId) return;
     const w = window as Window & { gtag?: GtagConsent; dataLayer?: unknown[] };
+
+    // Load GTM script if not already present
+    const scriptId = `gtm-script-${gtmId}`;
+    if (!document.getElementById(scriptId)) {
+      w.dataLayer = w.dataLayer || [];
+      (w.dataLayer as Record<string, unknown>[]).push({
+        "gtm.start": new Date().getTime(),
+        event: "gtm.js",
+      });
+      const script = document.createElement("script");
+      script.id = scriptId;
+      script.async = true;
+      script.src = `https://www.googletagmanager.com/gtm.js?id=${encodeURIComponent(gtmId)}`;
+      document.head.appendChild(script);
+
+      // Inject <noscript> iframe fallback into <body>
+      const noscriptId = `gtm-noscript-${gtmId}`;
+      if (!document.getElementById(noscriptId)) {
+        const noscript = document.createElement("noscript");
+        noscript.id = noscriptId;
+        const iframe = document.createElement("iframe");
+        iframe.src = `https://www.googletagmanager.com/ns.html?id=${encodeURIComponent(gtmId)}`;
+        iframe.height = "0";
+        iframe.width = "0";
+        iframe.style.display = "none";
+        iframe.style.visibility = "hidden";
+        noscript.appendChild(iframe);
+        document.body.insertBefore(noscript, document.body.firstChild);
+      }
+    }
+
+    // Grant analytics consent
     if (typeof w.gtag === "function") {
       w.gtag("consent", "update", { ...GTAG_ANALYTICS_GRANTED });
     } else {
@@ -108,6 +167,17 @@ function useDataTracking() {
     }
   };
 
+  /** Pause Google AdSense by revoking ad consent (sets ad_storage, ad_user_data, ad_personalization to denied). */
+  const pauseGoogleAdSense = () => {
+    if (typeof window === "undefined") return;
+    const w = window as Window & { gtag?: GtagConsent; dataLayer?: unknown[] };
+    if (typeof w.gtag === "function") {
+      w.gtag("consent", "update", { ...GTAG_ADS_DENIED });
+    } else if (Array.isArray(w.dataLayer)) {
+      w.dataLayer.push(["consent", "update", { ...GTAG_ADS_DENIED }]);
+    }
+  };
+
   const trackEvent = (
     eventName: string,
     eventData: Record<string, any>,
@@ -150,11 +220,12 @@ function useDataTracking() {
     trackEvent,
     trackUserIdentify,
     trackLogoutEvent,
-    toggleGA,
-    toggleGTM,
+    loadGA,
+    loadGTM,
     togglePostHog,
     toggleOpenReplay,
     toggleGoogleAdSense,
+    pauseGoogleAdSense,
   };
 }
 

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

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

package/src/providers/ServicesProvider.tsx

@@ -5,8 +5,7 @@ import { RewardServiceProvider } from "@phygitallabs/reward";
 import { AchievementServiceProvider } from "@phygitallabs/achievement";
 import { GenerateCertificateServiceProvider } from "@phygitallabs/generate-certificate";
 import { PhygitalConsentProvider } from "@phygitallabs/phygital-consent";
-import { GtagConsentSync } from "../modules/data-tracking";
-import { GtagGtmScriptToggleFromConsent } from "../modules/data-tracking";
+import { DataTrackingConsentSync } from "../modules/data-tracking";
 
 import serviceApiUrl from "../constants/service";
 import { APIConfig, ServiceConfig } from "../types/service";
@@ -152,8 +151,7 @@ export const ServicesProvider: React.FC<ServicesProviderProps> = ({
                 },
               }}
             >
-              <GtagConsentSync />
-              <GtagGtmScriptToggleFromConsent/>
+              <DataTrackingConsentSync />
               {children}
             </PhygitalConsentProvider>
           </GenerateCertificateServiceProvider>

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

@@ -1,73 +0,0 @@
-"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} />;
-}