@hifilabs/pixel 0.1.5 → 0.1.6

package/dist/browser.js

@@ -0,0 +1,554 @@
+var BalancePixel = (() => {
+  // src/browser.ts
+  (function() {
+    function parseUserAgent(ua) {
+      let device_type = "desktop";
+      if (/ipad|tablet|android(?!.*mobile)/i.test(ua))
+        device_type = "tablet";
+      else if (/mobile|iphone|android.*mobile|blackberry|iemobile/i.test(ua))
+        device_type = "mobile";
+      let browser = "Unknown";
+      if (/edg/i.test(ua))
+        browser = "Edge";
+      else if (/opr|opera/i.test(ua))
+        browser = "Opera";
+      else if (/firefox/i.test(ua))
+        browser = "Firefox";
+      else if (/chrome/i.test(ua))
+        browser = "Chrome";
+      else if (/safari/i.test(ua))
+        browser = "Safari";
+      let os = "Unknown";
+      if (/iphone|ipad/i.test(ua))
+        os = "iOS";
+      else if (/android/i.test(ua))
+        os = "Android";
+      else if (/windows/i.test(ua))
+        os = "Windows";
+      else if (/mac os/i.test(ua))
+        os = "macOS";
+      else if (/linux/i.test(ua))
+        os = "Linux";
+      else if (/cros/i.test(ua))
+        os = "ChromeOS";
+      return { device_type, browser, os };
+    }
+    let cachedDeviceInfo = null;
+    function getDeviceInfo() {
+      if (!cachedDeviceInfo) {
+        try {
+          cachedDeviceInfo = parseUserAgent(navigator.userAgent);
+        } catch {
+          cachedDeviceInfo = { device_type: "desktop", browser: "Unknown", os: "Unknown" };
+        }
+      }
+      return cachedDeviceInfo;
+    }
+    const currentScript = document.currentScript;
+    const artistId = currentScript?.dataset.artistId;
+    const projectId = currentScript?.dataset.projectId;
+    const useEmulator = currentScript?.dataset.emulator === "true";
+    const debug = currentScript?.dataset.debug === "true";
+    const heartbeatInterval = parseInt(currentScript?.dataset.heartbeatInterval || "30000", 10);
+    const heartbeatEnabled = currentScript?.dataset.heartbeat !== "false";
+    const explicitSource = currentScript?.dataset.source;
+    function detectTrackingSource() {
+      if (explicitSource)
+        return explicitSource;
+      const hasDataLayer = typeof window.dataLayer !== "undefined" && Array.isArray(window.dataLayer);
+      const hasGtag = typeof window.gtag === "function";
+      if (hasDataLayer && hasGtag) {
+        return "gtm";
+      }
+      return "pixel";
+    }
+    let trackingSource = "pixel";
+    if (!artistId) {
+      console.error("[BALANCE Pixel] Error: data-artist-id attribute is required");
+      return;
+    }
+    const SESSION_KEY = "session_id";
+    const SESSION_TIMESTAMP_KEY = "session_timestamp";
+    const ATTRIBUTION_KEY = "attribution";
+    const FAN_ID_KEY = "fan_id_hash";
+    const CONSENT_STORAGE_KEY = "balance_consent";
+    const SESSION_DURATION = 60 * 60 * 1e3;
+    const STORAGE_PREFIX = "balance_";
+    const API_ENDPOINT = useEmulator ? `http://localhost:5001/artist-os-distro/us-central1/pixelEndpoint` : `https://us-central1-artist-os-distro.cloudfunctions.net/pixelEndpoint`;
+    let sessionId = null;
+    let fanIdHash = null;
+    let consent = null;
+    let attribution = {};
+    let eventQueue = [];
+    let flushTimer = null;
+    let currentStorageTier = "session";
+    let heartbeatTimer = null;
+    let pageStartTime = 0;
+    let activeTime = 0;
+    let lastActiveTimestamp = 0;
+    let isPageVisible = true;
+    const IDLE_TIMEOUT = 2 * 60 * 1e3;
+    let lastActivityTime = Date.now();
+    let isIdle = false;
+    const log = (...args) => {
+      if (debug)
+        console.log("[BALANCE Pixel]", ...args);
+    };
+    function getStorage() {
+      try {
+        return currentStorageTier === "local" ? localStorage : sessionStorage;
+      } catch {
+        return null;
+      }
+    }
+    function storageGet(key) {
+      const storage = getStorage();
+      if (!storage)
+        return null;
+      try {
+        const fullKey = STORAGE_PREFIX + key;
+        let value = storage.getItem(fullKey);
+        if (!value && currentStorageTier === "session") {
+          try {
+            value = localStorage.getItem(fullKey);
+          } catch {
+          }
+        }
+        return value;
+      } catch {
+        return null;
+      }
+    }
+    function storageSet(key, value) {
+      const storage = getStorage();
+      if (!storage)
+        return;
+      try {
+        storage.setItem(STORAGE_PREFIX + key, value);
+      } catch {
+      }
+    }
+    function upgradeStorageTier() {
+      if (currentStorageTier === "local")
+        return;
+      log("Upgrading storage tier: session -> local");
+      try {
+        const keysToMigrate = [];
+        for (let i = 0; i < sessionStorage.length; i++) {
+          const key = sessionStorage.key(i);
+          if (key?.startsWith(STORAGE_PREFIX)) {
+            keysToMigrate.push(key);
+          }
+        }
+        for (const key of keysToMigrate) {
+          const value = sessionStorage.getItem(key);
+          if (value) {
+            localStorage.setItem(key, value);
+          }
+        }
+        for (const key of keysToMigrate) {
+          sessionStorage.removeItem(key);
+        }
+        currentStorageTier = "local";
+        log(`Storage tier upgraded, migrated ${keysToMigrate.length} items`);
+      } catch (error) {
+        console.error("[BALANCE Pixel] Storage migration failed:", error);
+      }
+    }
+    function generateUUID() {
+      if (crypto && crypto.randomUUID) {
+        return crypto.randomUUID();
+      }
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+        const r = Math.random() * 16 | 0;
+        const v = c === "x" ? r : r & 3 | 8;
+        return v.toString(16);
+      });
+    }
+    function getOrCreateSession() {
+      try {
+        const stored = storageGet(SESSION_KEY);
+        const timestamp = storageGet(SESSION_TIMESTAMP_KEY);
+        if (stored && timestamp) {
+          const age = Date.now() - parseInt(timestamp, 10);
+          if (age < SESSION_DURATION) {
+            storageSet(SESSION_TIMESTAMP_KEY, Date.now().toString());
+            return stored;
+          }
+        }
+        const newId = generateUUID();
+        storageSet(SESSION_KEY, newId);
+        storageSet(SESSION_TIMESTAMP_KEY, Date.now().toString());
+        return newId;
+      } catch (e) {
+        return generateUUID();
+      }
+    }
+    function extractUTM() {
+      const params = new URLSearchParams(window.location.search);
+      const utm = {};
+      ["source", "medium", "campaign", "content", "term"].forEach((param) => {
+        const value = params.get(`utm_${param}`);
+        if (value)
+          utm[`utm_${param}`] = value;
+      });
+      return utm;
+    }
+    function captureAttribution() {
+      try {
+        const stored = storageGet(ATTRIBUTION_KEY);
+        if (stored) {
+          attribution = JSON.parse(stored);
+          log("Loaded attribution:", attribution);
+          return;
+        }
+        const utm = extractUTM();
+        if (Object.keys(utm).length > 0) {
+          attribution = utm;
+          storageSet(ATTRIBUTION_KEY, JSON.stringify(utm));
+          log("Captured attribution:", attribution);
+        }
+      } catch (e) {
+      }
+    }
+    function loadFanId() {
+      try {
+        fanIdHash = storageGet(FAN_ID_KEY);
+      } catch (e) {
+      }
+    }
+    function loadConsent() {
+      try {
+        const stored = localStorage.getItem(CONSENT_STORAGE_KEY);
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          consent = parsed.preferences || null;
+          log("Loaded consent:", consent);
+        }
+      } catch (e) {
+      }
+    }
+    function setConsent(preferences) {
+      const previousConsent = consent;
+      consent = preferences;
+      try {
+        const storage = {
+          preferences,
+          method: "explicit",
+          version: 1
+        };
+        localStorage.setItem(CONSENT_STORAGE_KEY, JSON.stringify(storage));
+        log("Consent saved:", preferences);
+      } catch (e) {
+        console.error("[BALANCE Pixel] Could not save consent:", e);
+      }
+      if (preferences.analytics === true) {
+        upgradeStorageTier();
+      }
+      const event = buildEvent({
+        event_name: "consent_updated",
+        metadata: {
+          consent_preferences: preferences,
+          consent_method: "explicit",
+          previous_consent: previousConsent || void 0
+        }
+      });
+      enqueueEvent(event);
+    }
+    function getConsent() {
+      return consent;
+    }
+    function hasConsent(type) {
+      return consent?.[type] === true;
+    }
+    async function hashEmail(email) {
+      const normalized = email.toLowerCase().trim();
+      const encoder = new TextEncoder();
+      const data = encoder.encode(normalized);
+      const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+      const hashArray = Array.from(new Uint8Array(hashBuffer));
+      return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+    }
+    function buildEvent(partial) {
+      const deviceInfo = getDeviceInfo();
+      const base = {
+        artist_id: artistId,
+        fan_session_id: sessionId,
+        fan_id_hash: fanIdHash || void 0,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        source_url: window.location.href,
+        referrer_url: document.referrer || void 0,
+        user_agent: navigator.userAgent,
+        // Device info (parsed client-side)
+        device_type: deviceInfo.device_type,
+        browser: deviceInfo.browser,
+        os: deviceInfo.os,
+        // Tracking source (gtm, pixel, etc.) - enables filtering in artistHQ
+        tracking_source: trackingSource,
+        ...partial,
+        ...attribution
+      };
+      if (projectId && !partial.projectId) {
+        base.projectId = projectId;
+      }
+      return base;
+    }
+    function enqueueEvent(event) {
+      eventQueue.push(event);
+      log("Event queued:", event.event_name, "(queue:", eventQueue.length, ")");
+      if (eventQueue.length >= 10) {
+        flush();
+      }
+    }
+    async function flush() {
+      if (eventQueue.length === 0)
+        return;
+      const events = [...eventQueue];
+      eventQueue = [];
+      log("Flushing", events.length, "events to", API_ENDPOINT);
+      try {
+        const response = await fetch(API_ENDPOINT, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ events }),
+          keepalive: true
+          // Send even if page is closing
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        log("Events sent successfully");
+      } catch (error) {
+        console.error("[BALANCE Pixel] Failed to send events:", error);
+        if (eventQueue.length < 50) {
+          eventQueue.push(...events);
+        }
+      }
+    }
+    function startFlushTimer() {
+      if (flushTimer)
+        clearInterval(flushTimer);
+      flushTimer = window.setInterval(() => {
+        if (eventQueue.length > 0)
+          flush();
+      }, 5e3);
+    }
+    function startActiveTimeTracking() {
+      if (!lastActiveTimestamp) {
+        pageStartTime = Date.now();
+      }
+      lastActiveTimestamp = Date.now();
+      isPageVisible = true;
+      log("Active time tracking started/resumed");
+    }
+    function pauseActiveTimeTracking() {
+      if (lastActiveTimestamp && isPageVisible) {
+        activeTime += Date.now() - lastActiveTimestamp;
+      }
+      isPageVisible = false;
+      log("Active time tracking paused, accumulated:", activeTime, "ms");
+    }
+    function getCumulativeActiveTime() {
+      let total = activeTime;
+      if (isPageVisible && lastActiveTimestamp) {
+        total += Date.now() - lastActiveTimestamp;
+      }
+      return total;
+    }
+    function resetIdleTimer() {
+      lastActivityTime = Date.now();
+      if (isIdle) {
+        isIdle = false;
+        startActiveTimeTracking();
+        log("User returned from idle");
+      }
+    }
+    function sendHeartbeat() {
+      if (document.visibilityState === "hidden") {
+        log("Skipping heartbeat - tab hidden");
+        return;
+      }
+      if (Date.now() - lastActivityTime > IDLE_TIMEOUT) {
+        if (!isIdle) {
+          isIdle = true;
+          pauseActiveTimeTracking();
+          log("User idle - pausing heartbeat");
+        }
+        return;
+      }
+      const timeOnPage = getCumulativeActiveTime();
+      const timeOnPageSeconds = Math.round(timeOnPage / 1e3);
+      const event = buildEvent({
+        event_name: "engagement_heartbeat",
+        metadata: {
+          time_on_page_seconds: timeOnPageSeconds,
+          time_on_page_ms: timeOnPage,
+          heartbeat_interval_ms: heartbeatInterval,
+          is_active: isPageVisible && !isIdle
+        }
+      });
+      enqueueEvent(event);
+      log("Heartbeat sent:", timeOnPageSeconds, "seconds active");
+    }
+    function startHeartbeat() {
+      if (!heartbeatEnabled) {
+        log('Heartbeat disabled via data-heartbeat="false"');
+        return;
+      }
+      if (heartbeatTimer)
+        clearInterval(heartbeatTimer);
+      startActiveTimeTracking();
+      heartbeatTimer = window.setInterval(() => {
+        sendHeartbeat();
+      }, heartbeatInterval);
+      log("Heartbeat started with interval:", heartbeatInterval, "ms");
+    }
+    function stopHeartbeat() {
+      if (heartbeatTimer) {
+        clearInterval(heartbeatTimer);
+        heartbeatTimer = null;
+      }
+      if (heartbeatEnabled) {
+        sendHeartbeat();
+        log("Heartbeat stopped, final time sent");
+      }
+    }
+    function trackPageView(options = {}) {
+      const event = buildEvent({
+        event_name: "pageview",
+        page_title: options.title || document.title,
+        source_url: options.url || window.location.href
+      });
+      enqueueEvent(event);
+    }
+    function track(eventName, properties = {}) {
+      const event = buildEvent({
+        event_name: "custom",
+        metadata: {
+          event_type: eventName,
+          ...properties
+        }
+      });
+      enqueueEvent(event);
+    }
+    async function identify(email, traits = {}) {
+      try {
+        if (consent && consent.analytics === false) {
+          log("Identify skipped - user declined analytics consent");
+          return;
+        }
+        fanIdHash = await hashEmail(email);
+        if (consent?.analytics === true) {
+          upgradeStorageTier();
+        }
+        storageSet(FAN_ID_KEY, fanIdHash);
+        const emailParts = email.split("@");
+        const maskedEmail = emailParts[0].charAt(0) + "***@" + (emailParts[1] || "");
+        log("Fan identified:", {
+          name: traits.name || "(no name)",
+          email: maskedEmail,
+          hash: fanIdHash.substring(0, 16) + "...",
+          traits,
+          storageTier: currentStorageTier
+        });
+        const event = buildEvent({
+          event_name: "identify",
+          fan_id_hash: fanIdHash,
+          metadata: {
+            email_sha256: fanIdHash,
+            traits,
+            consent_preferences: consent || void 0,
+            storage_tier: currentStorageTier
+          }
+        });
+        enqueueEvent(event);
+      } catch (error) {
+        console.error("[BALANCE Pixel] Failed to identify:", error);
+      }
+    }
+    function purchase(revenue, currency = "USD", properties = {}) {
+      const event = buildEvent({
+        event_name: "purchase",
+        metadata: {
+          revenue,
+          currency,
+          ...properties
+        }
+      });
+      enqueueEvent(event);
+    }
+    function init() {
+      trackingSource = detectTrackingSource();
+      log("Tracking source detected:", trackingSource);
+      loadConsent();
+      if (consent?.analytics === true) {
+        currentStorageTier = "local";
+        log("Storage tier: local (analytics consent granted)");
+      } else {
+        currentStorageTier = "session";
+        log("Storage tier: session (privacy by default)");
+      }
+      sessionId = getOrCreateSession();
+      loadFanId();
+      if (!consent) {
+        consent = {
+          analytics: true,
+          marketing: true,
+          personalization: true,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        log("Default consent enabled (all tracking):", consent);
+        upgradeStorageTier();
+      }
+      captureAttribution();
+      startFlushTimer();
+      log("Initialized", {
+        artistId,
+        projectId: projectId || "(none - will track to all projects)",
+        sessionId,
+        fanIdHash,
+        consent,
+        storageTier: currentStorageTier,
+        trackingSource,
+        useEmulator,
+        endpoint: API_ENDPOINT
+      });
+      window._balanceInitialPageviewFired = true;
+      trackPageView();
+      startHeartbeat();
+      ["mousemove", "keydown", "scroll", "touchstart"].forEach((eventType) => {
+        document.addEventListener(eventType, resetIdleTimer, { passive: true });
+      });
+      window.addEventListener("beforeunload", () => {
+        stopHeartbeat();
+        flush();
+      });
+      document.addEventListener("visibilitychange", () => {
+        if (document.visibilityState === "hidden") {
+          pauseActiveTimeTracking();
+          flush();
+        } else {
+          startActiveTimeTracking();
+        }
+      });
+    }
+    window.balance = {
+      track,
+      identify,
+      page: trackPageView,
+      purchase,
+      getSessionId: () => sessionId,
+      getFanIdHash: () => fanIdHash,
+      getAttribution: () => attribution,
+      setConsent,
+      getConsent,
+      hasConsent
+    };
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", init);
+    } else {
+      init();
+    }
+    log("Pixel script loaded");
+  })();
+})();