@hifilabs/pixel 0.0.10 → 0.1.0

package/dist/index.esm.d.ts

@@ -19,6 +19,38 @@ export declare const setConsent: (preferences: {
 export declare const getConsent: () => any;
 export declare const hasConsent: (type: 'analytics' | 'marketing' | 'personalization') => boolean;
 
+// GTM Integration Types
+export type GTMConsentState = 'granted' | 'denied';
+
+export interface GTMConsentConfig {
+  ad_storage: GTMConsentState;
+  ad_user_data: GTMConsentState;
+  ad_personalization: GTMConsentState;
+  analytics_storage: GTMConsentState;
+}
+
+export declare const DEFAULT_GTM_CONSENT: GTMConsentConfig;
+
+// GTMProvider Component
+export interface GTMProviderProps {
+  gtmId?: string;
+  children: React.ReactNode;
+  debug?: boolean;
+}
+
+export declare function GTMProvider(props: GTMProviderProps): JSX.Element;
+
+// useGTMConsent Hook
+export interface UseGTMConsentOptions {
+  pollInterval?: number;
+  debug?: boolean;
+}
+
+export declare function useGTMConsent(options?: UseGTMConsentOptions): {
+  syncConsent: () => void;
+  getConsentConfig: () => GTMConsentConfig;
+};
+
 // useBalanceIdentify hook - consent-aware identify wrapper
 export declare function useBalanceIdentify(): {
   /**

package/dist/index.esm.js

@@ -7,7 +7,7 @@ var __publicField = (obj, key, value) => {
 };
 
 // src/react/BalanceAnalytics.tsx
-import React, { useEffect, useRef, Suspense } from "react";
+import React2, { useEffect, useRef, Suspense } from "react";
 import { usePathname, useSearchParams } from "next/navigation";
 function BalanceAnalyticsInner() {
   const pathname = usePathname();
@@ -37,7 +37,7 @@ function BalanceAnalyticsInner() {
   return null;
 }
 function BalanceAnalytics() {
-  return /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React.createElement(BalanceAnalyticsInner, null));
+  return /* @__PURE__ */ React2.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React2.createElement(BalanceAnalyticsInner, null));
 }
 
 // src/react/useBalanceIdentify.ts
@@ -370,6 +370,154 @@ function useBalanceIdentify() {
   };
 }
 
+// src/react/GTMProvider.tsx
+import { useEffect as useEffect4 } from "react";
+import Script from "next/script";
+
+// src/react/useGTMConsent.ts
+import { useEffect as useEffect3, useRef as useRef3, useCallback as useCallback2 } from "react";
+function useGTMConsent(options = {}) {
+  const { pollInterval = 1e3, debug = false } = options;
+  const lastConsentRef = useRef3("");
+  const log = useCallback2(
+    (...args) => {
+      if (debug) {
+        console.log("[useGTMConsent]", ...args);
+      }
+    },
+    [debug]
+  );
+  const mapPixelConsentToGTM = useCallback2(() => {
+    if (typeof window === "undefined" || !window.balance) {
+      return {
+        ad_storage: "denied",
+        ad_user_data: "denied",
+        ad_personalization: "denied",
+        analytics_storage: "denied"
+      };
+    }
+    const hasAnalytics = window.balance.hasConsent("analytics");
+    const hasMarketing = window.balance.hasConsent("marketing");
+    const analyticsState = hasAnalytics ? "granted" : "denied";
+    const marketingState = hasMarketing ? "granted" : "denied";
+    return {
+      analytics_storage: analyticsState,
+      ad_storage: marketingState,
+      ad_user_data: marketingState,
+      ad_personalization: marketingState
+    };
+  }, []);
+  const updateGTMConsent = useCallback2(
+    (consentConfig) => {
+      if (typeof window === "undefined")
+        return;
+      window.dataLayer = window.dataLayer || [];
+      if (typeof window.gtag !== "function") {
+        window.gtag = function gtag(...args) {
+          window.dataLayer.push(args);
+        };
+      }
+      window.gtag("consent", "update", consentConfig);
+      log("Pushed consent update to GTM:", consentConfig);
+    },
+    [log]
+  );
+  const syncConsent = useCallback2(() => {
+    const currentConsent = mapPixelConsentToGTM();
+    const consentKey = JSON.stringify(currentConsent);
+    if (consentKey !== lastConsentRef.current) {
+      lastConsentRef.current = consentKey;
+      updateGTMConsent(currentConsent);
+    }
+  }, [mapPixelConsentToGTM, updateGTMConsent]);
+  useEffect3(() => {
+    if (typeof window === "undefined")
+      return;
+    syncConsent();
+    const intervalId = setInterval(syncConsent, pollInterval);
+    const handleStorageChange = (e) => {
+      if (e.key === "balance_consent") {
+        log("Consent changed in another tab, syncing...");
+        syncConsent();
+      }
+    };
+    window.addEventListener("storage", handleStorageChange);
+    return () => {
+      clearInterval(intervalId);
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [syncConsent, pollInterval, log]);
+  return {
+    /**
+     * Manually trigger a consent sync
+     */
+    syncConsent,
+    /**
+     * Get current consent config
+     */
+    getConsentConfig: mapPixelConsentToGTM
+  };
+}
+
+// src/types/gtm.ts
+var DEFAULT_GTM_CONSENT = {
+  ad_storage: "denied",
+  ad_user_data: "denied",
+  ad_personalization: "denied",
+  analytics_storage: "denied"
+};
+
+// src/react/GTMProvider.tsx
+function GTMProvider({ gtmId, children, debug = false }) {
+  const resolvedGtmId = gtmId || process.env.NEXT_PUBLIC_GTM_ID;
+  useGTMConsent({ debug });
+  useEffect4(() => {
+    if (typeof window === "undefined" || !resolvedGtmId)
+      return;
+    window.dataLayer = window.dataLayer || [];
+    if (typeof window.gtag !== "function") {
+      window.gtag = function gtag(...args) {
+        window.dataLayer.push(args);
+      };
+    }
+    window.gtag("consent", "default", DEFAULT_GTM_CONSENT);
+    if (debug) {
+      console.log("[GTMProvider] Initialized with default consent:", DEFAULT_GTM_CONSENT);
+    }
+  }, [resolvedGtmId, debug]);
+  if (!resolvedGtmId) {
+    if (debug) {
+      console.log("[GTMProvider] No GTM ID configured, skipping GTM initialization");
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Script,
+    {
+      id: "gtm-script",
+      strategy: "afterInteractive",
+      dangerouslySetInnerHTML: {
+        __html: `
+            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+            })(window,document,'script','dataLayer','${resolvedGtmId}');
+          `
+      }
+    }
+  ), /* @__PURE__ */ React.createElement("noscript", null, /* @__PURE__ */ React.createElement(
+    "iframe",
+    {
+      src: `https://www.googletagmanager.com/ns.html?id=${resolvedGtmId}`,
+      height: "0",
+      width: "0",
+      style: { display: "none", visibility: "hidden" },
+      title: "GTM"
+    }
+  )), children);
+}
+
 // src/index.esm.ts
 var track = (eventName, properties) => {
   if (typeof window === "undefined")
@@ -444,6 +592,8 @@ var hasConsent = (type) => {
 };
 export {
   BalanceAnalytics,
+  DEFAULT_GTM_CONSENT,
+  GTMProvider,
   StorageManager,
   getAttribution,
   getConsent,
@@ -457,5 +607,6 @@ export {
   purchase,
   setConsent,
   track,
-  useBalanceIdentify
+  useBalanceIdentify,
+  useGTMConsent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hifilabs/pixel",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "BALANCE Pixel - Lightweight browser tracking script for artist fan analytics",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",