@aranova/tracking-react 0.12.2 → 0.13.0

package/dist/index.mjs

@@ -17,21 +17,32 @@ function buildConsentPayload(state) {
 }
 function getConsentState() {
   if (typeof window === "undefined") return "pending";
-  const storedState = window.localStorage.getItem(CONSENT_STATE_KEY);
-  if (storedState === "granted" || storedState === "denied") return storedState;
+  try {
+    const storedState = window.localStorage.getItem(CONSENT_STATE_KEY);
+    if (storedState === "granted" || storedState === "denied") return storedState;
+  } catch {
+  }
   return "pending";
 }
 function setConsentState(state) {
   if (typeof window === "undefined") return;
-  window.localStorage.setItem(CONSENT_STATE_KEY, state);
-  window.localStorage.setItem(CONSENT_TIMESTAMP_KEY, (/* @__PURE__ */ new Date()).toISOString());
+  try {
+    window.localStorage.setItem(CONSENT_STATE_KEY, state);
+    window.localStorage.setItem(CONSENT_TIMESTAMP_KEY, (/* @__PURE__ */ new Date()).toISOString());
+  } catch {
+  }
   if (typeof window.gtag === "function")
     window.gtag("consent", "update", buildConsentPayload(state));
+  if (typeof window.fbq === "function")
+    window.fbq("consent", state === "granted" ? "grant" : "revoke");
 }
 function resetConsent() {
   if (typeof window === "undefined") return;
-  window.localStorage.removeItem(CONSENT_STATE_KEY);
-  window.localStorage.removeItem(CONSENT_TIMESTAMP_KEY);
+  try {
+    window.localStorage.removeItem(CONSENT_STATE_KEY);
+    window.localStorage.removeItem(CONSENT_TIMESTAMP_KEY);
+  } catch {
+  }
 }
 function restoreStoredConsent() {
   const consentState = getConsentState();
@@ -39,45 +50,106 @@ function restoreStoredConsent() {
   return consentState;
 }
 
-// ../tracking-core/src/payloads.ts
-function createTrackingClientContext(surface, input = {}) {
+// ../tracking-core/src/tracking.ts
+var TRACKING_COOKIE_MAX_AGE_SECONDS = 7776e3;
+var TRACKING_PARAM_KEYS = [
+  "gclid",
+  "fbclid",
+  "utm_source",
+  "utm_medium",
+  "utm_campaign",
+  "utm_term",
+  "utm_content"
+];
+function createEmptyTrackingParams() {
   return {
-    surface,
-    sdk_version: input.sdkVersion ?? null,
-    package_name: input.packageName ?? null,
-    site_origin: input.siteOrigin ?? (typeof window === "undefined" ? null : window.location.origin),
-    page_title: input.pageTitle ?? (typeof document === "undefined" ? null : document.title || null),
-    referrer: input.referrer ?? (typeof document === "undefined" ? null : document.referrer || null),
-    environment: input.environment ?? "production",
-    active_gtag_ids: input.activeGtagIds ?? null
+    gclid: null,
+    fbclid: null,
+    utm_source: null,
+    utm_medium: null,
+    utm_campaign: null,
+    utm_term: null,
+    utm_content: null
   };
 }
-function createTrackingSessionUpsertPayload(trackingParams, input, context) {
-  return {
-    session_id: input.sessionId,
-    visitor_id: input.visitorId ?? null,
-    gclid: trackingParams.gclid,
-    fbclid: trackingParams.fbclid,
-    utm_source: trackingParams.utm_source,
-    utm_medium: trackingParams.utm_medium,
-    utm_campaign: trackingParams.utm_campaign,
-    utm_term: trackingParams.utm_term,
-    utm_content: trackingParams.utm_content,
-    first_page: input.firstPage ?? null,
-    consent_state: input.consentState ?? null,
-    context
-  };
+function normalizeTrackingCookieValue(value) {
+  return typeof value === "string" && value.length > 0 ? value : null;
 }
-function createTrackingEventCreatePayload(trackingParams, input, context) {
-  return {
-    session_id: input.sessionId,
-    event_type: input.eventType,
-    gclid: trackingParams.gclid,
-    fbclid: trackingParams.fbclid,
-    page_url: input.pageUrl ?? (typeof window === "undefined" ? null : window.location.href),
-    metadata: input.metadata ?? null,
-    context
-  };
+function getTrackingParamsFromCookieReader(readCookie) {
+  return TRACKING_PARAM_KEYS.reduce((params, key) => {
+    params[key] = normalizeTrackingCookieValue(readCookie(key));
+    return params;
+  }, createEmptyTrackingParams());
+}
+function getTrackingQueryValues(searchParams) {
+  return TRACKING_PARAM_KEYS.reduce((params, key) => {
+    const value = searchParams.get(key);
+    if (typeof value === "string" && value.trim().length > 0) {
+      params[key] = value;
+    }
+    return params;
+  }, {});
+}
+var FALLBACK_STORAGE_PREFIX = "_aranova_track_";
+function fallbackKey(name) {
+  return `${FALLBACK_STORAGE_PREFIX}${name}`;
+}
+function persistCookieValue(name, value, maxAgeSeconds = TRACKING_COOKIE_MAX_AGE_SECONDS) {
+  const encoded = encodeURIComponent(value);
+  if (typeof document !== "undefined") {
+    try {
+      document.cookie = `${name}=${encoded}; Max-Age=${maxAgeSeconds}; Path=/; SameSite=Lax`;
+    } catch {
+    }
+  }
+  if (typeof window !== "undefined") {
+    try {
+      window.localStorage.setItem(fallbackKey(name), encoded);
+    } catch {
+    }
+  }
+}
+function readCookieValue(name) {
+  if (typeof document !== "undefined") {
+    const cookies = document.cookie ? document.cookie.split("; ") : [];
+    const match = cookies.find((cookie) => cookie.startsWith(`${name}=`));
+    if (match) {
+      const [, rawValue = ""] = match.split("=");
+      return normalizeTrackingCookieValue(decodeURIComponent(rawValue));
+    }
+  }
+  if (typeof window !== "undefined") {
+    try {
+      const stored = window.localStorage.getItem(fallbackKey(name));
+      if (stored) return normalizeTrackingCookieValue(decodeURIComponent(stored));
+    } catch {
+    }
+  }
+  return null;
+}
+function getCookieValueFromDocument(key) {
+  return readCookieValue(key);
+}
+function setTrackingCookie(key, value, maxAgeSeconds = TRACKING_COOKIE_MAX_AGE_SECONDS) {
+  persistCookieValue(key, value, maxAgeSeconds);
+}
+function mergeTrackingParams(primary, fallback) {
+  return TRACKING_PARAM_KEYS.reduce((merged, key) => {
+    merged[key] = primary[key] ?? fallback[key];
+    return merged;
+  }, createEmptyTrackingParams());
+}
+function persistTrackingParamsFromSearchParams(searchParams, maxAgeSeconds = TRACKING_COOKIE_MAX_AGE_SECONDS) {
+  const trackingValues = getTrackingQueryValues(searchParams);
+  Object.entries(trackingValues).forEach(([key, value]) => {
+    setTrackingCookie(key, value, maxAgeSeconds);
+  });
+  return trackingValues;
+}
+function captureTrackingParamsFromLocation(url = typeof window === "undefined" ? "" : window.location.href, maxAgeSeconds = TRACKING_COOKIE_MAX_AGE_SECONDS) {
+  const resolvedUrl = typeof window === "undefined" ? new URL(url || "https://example.invalid") : new URL(url, window.location.origin);
+  persistTrackingParamsFromSearchParams(resolvedUrl.searchParams, maxAgeSeconds);
+  return getTrackingParamsFromCookieReader(getCookieValueFromDocument);
 }
 
 // ../tracking-core/src/gtag.ts
@@ -150,70 +222,158 @@ function bootstrapMultipleGtags(gtagIds) {
   restoreStoredConsent();
 }
 
-// ../tracking-core/src/tracking.ts
-var TRACKING_COOKIE_MAX_AGE_SECONDS = 7776e3;
-var TRACKING_PARAM_KEYS = [
-  "gclid",
-  "fbclid",
-  "utm_source",
-  "utm_medium",
-  "utm_campaign",
-  "utm_term",
-  "utm_content"
-];
-function createEmptyTrackingParams() {
-  return {
-    gclid: null,
-    fbclid: null,
-    utm_source: null,
-    utm_medium: null,
-    utm_campaign: null,
-    utm_term: null,
-    utm_content: null
-  };
+// ../tracking-core/src/fbq.ts
+var FB_EVENTS_SCRIPT_HOST = "https://connect.facebook.net/en_US/fbevents.js";
+var FBC_COOKIE = "_fbc";
+var FBP_COOKIE = "_fbp";
+var META_PIXEL_ID_PATTERN = /^\d{15,16}$/;
+function isValidMetaPixelId(id) {
+  return META_PIXEL_ID_PATTERN.test(id);
+}
+function computeFbSubdomainIndex(hostname) {
+  const labels = hostname.split(".").filter(Boolean);
+  return Math.max(0, labels.length - 1);
+}
+function buildFbc(fbclid, now, hostname) {
+  const host = hostname ?? (typeof window === "undefined" ? "" : window.location.hostname);
+  return `fb.${computeFbSubdomainIndex(host)}.${now}.${fbclid}`;
+}
+function getFbcCookie() {
+  return readCookieValue(FBC_COOKIE);
+}
+function getFbpCookie() {
+  return readCookieValue(FBP_COOKIE);
+}
+function readFbclidFromUrl() {
+  if (typeof window === "undefined") return null;
+  try {
+    const value = new URL(window.location.href).searchParams.get("fbclid");
+    return value && value.trim().length > 0 ? value : null;
+  } catch {
+    return null;
+  }
 }
-function normalizeTrackingCookieValue(value) {
-  return typeof value === "string" && value.length > 0 ? value : null;
+function captureFbc(now = typeof Date === "undefined" ? 0 : Date.now()) {
+  if (typeof window === "undefined") return;
+  if (getFbcCookie()) return;
+  const fbclid = readFbclidFromUrl() ?? readCookieValue("fbclid");
+  if (!fbclid) return;
+  persistCookieValue(FBC_COOKIE, buildFbc(fbclid, now), TRACKING_COOKIE_MAX_AGE_SECONDS);
 }
-function getTrackingParamsFromCookieReader(readCookie) {
-  return TRACKING_PARAM_KEYS.reduce((params, key) => {
-    params[key] = normalizeTrackingCookieValue(readCookie(key));
-    return params;
-  }, createEmptyTrackingParams());
+function getScriptMarker2(id) {
+  return `aranova-${id}`;
 }
-function getTrackingQueryValues(searchParams) {
-  return TRACKING_PARAM_KEYS.reduce((params, key) => {
-    const value = searchParams.get(key);
-    if (typeof value === "string" && value.trim().length > 0) {
-      params[key] = value;
-    }
-    return params;
-  }, {});
+function ensureFbqFunction() {
+  const w = window;
+  if (typeof w.fbq === "function") return w.fbq;
+  const fbq = function(...args) {
+    if (fbq.callMethod) fbq.callMethod.apply(fbq, args);
+    else fbq.queue.push(args);
+  };
+  fbq.push = fbq;
+  fbq.loaded = true;
+  fbq.version = "2.0";
+  fbq.queue = [];
+  w.fbq = fbq;
+  if (!w._fbq) w._fbq = fbq;
+  return fbq;
+}
+function applyDefaultMetaConsentState() {
+  ensureFbqFunction()("consent", "revoke");
+}
+function loadFbeventsScript() {
+  if (typeof document === "undefined") return;
+  const marker = getScriptMarker2("fbq-loader");
+  const existing = document.querySelector(
+    `script[${TRACKING_SCRIPT_ATTRIBUTE}="${marker}"]`
+  );
+  if (existing) return;
+  const script = document.createElement("script");
+  script.async = true;
+  script.src = FB_EVENTS_SCRIPT_HOST;
+  script.setAttribute(TRACKING_SCRIPT_ATTRIBUTE, marker);
+  document.head.append(script);
 }
-function getCookieValueFromDocument(key) {
-  if (typeof document === "undefined") return null;
-  const cookies = document.cookie ? document.cookie.split("; ") : [];
-  const match = cookies.find((cookie) => cookie.startsWith(`${key}=`));
-  if (!match) return null;
-  const [, rawValue = ""] = match.split("=");
-  return normalizeTrackingCookieValue(decodeURIComponent(rawValue));
+function initializeMetaPixel(pixelId) {
+  const fbq = ensureFbqFunction();
+  fbq("init", pixelId);
+  fbq("track", "PageView");
 }
-function setTrackingCookie(key, value, maxAgeSeconds = TRACKING_COOKIE_MAX_AGE_SECONDS) {
-  if (typeof document === "undefined") return;
-  const encodedValue = encodeURIComponent(value);
-  document.cookie = `${key}=${encodedValue}; Max-Age=${maxAgeSeconds}; Path=/; SameSite=Lax`;
+function restoreMetaConsentState() {
+  if (typeof window === "undefined") return;
+  const state = getConsentState();
+  if (state === "granted") window.fbq?.("consent", "grant");
+  else if (state === "denied") window.fbq?.("consent", "revoke");
 }
-function persistTrackingParamsFromSearchParams(searchParams, maxAgeSeconds = TRACKING_COOKIE_MAX_AGE_SECONDS) {
-  const trackingValues = getTrackingQueryValues(searchParams);
-  Object.entries(trackingValues).forEach(([key, value]) => {
-    setTrackingCookie(key, value, maxAgeSeconds);
-  });
-  return trackingValues;
+function bootstrapMetaPixel(pixelId) {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  if (!isValidMetaPixelId(pixelId)) return;
+  applyDefaultMetaConsentState();
+  loadFbeventsScript();
+  initializeMetaPixel(pixelId);
+  restoreMetaConsentState();
+  captureFbc();
+}
+function bootstrapMultiplePixels(pixelIds) {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  const ids = Object.values(pixelIds).filter(
+    (id) => typeof id === "string" && isValidMetaPixelId(id)
+  );
+  if (ids.length === 0) return;
+  applyDefaultMetaConsentState();
+  loadFbeventsScript();
+  const fbq = ensureFbqFunction();
+  for (const id of ids) {
+    fbq("init", id);
+  }
+  fbq("track", "PageView");
+  restoreMetaConsentState();
+  captureFbc();
 }
-function captureTrackingParamsFromLocation(url = typeof window === "undefined" ? "" : window.location.href, maxAgeSeconds = TRACKING_COOKIE_MAX_AGE_SECONDS) {
-  const resolvedUrl = typeof window === "undefined" ? new URL(url || "https://example.invalid") : new URL(url, window.location.origin);
-  persistTrackingParamsFromSearchParams(resolvedUrl.searchParams, maxAgeSeconds);
-  return getTrackingParamsFromCookieReader(getCookieValueFromDocument);
+
+// ../tracking-core/src/payloads.ts
+function createTrackingClientContext(surface, input = {}) {
+  return {
+    surface,
+    sdk_version: input.sdkVersion ?? null,
+    package_name: input.packageName ?? null,
+    site_origin: input.siteOrigin ?? (typeof window === "undefined" ? null : window.location.origin),
+    page_title: input.pageTitle ?? (typeof document === "undefined" ? null : document.title || null),
+    referrer: input.referrer ?? (typeof document === "undefined" ? null : document.referrer || null),
+    environment: input.environment ?? "production",
+    active_gtag_ids: input.activeGtagIds ?? null
+  };
+}
+function createTrackingSessionUpsertPayload(trackingParams, input, context) {
+  return {
+    session_id: input.sessionId,
+    visitor_id: input.visitorId ?? null,
+    gclid: trackingParams.gclid,
+    fbclid: trackingParams.fbclid,
+    fbc: getFbcCookie(),
+    fbp: getFbpCookie(),
+    utm_source: trackingParams.utm_source,
+    utm_medium: trackingParams.utm_medium,
+    utm_campaign: trackingParams.utm_campaign,
+    utm_term: trackingParams.utm_term,
+    utm_content: trackingParams.utm_content,
+    first_page: input.firstPage ?? null,
+    consent_state: input.consentState ?? null,
+    context
+  };
+}
+function createTrackingEventCreatePayload(trackingParams, input, context) {
+  return {
+    session_id: input.sessionId,
+    event_type: input.eventType,
+    gclid: trackingParams.gclid,
+    fbclid: trackingParams.fbclid,
+    fbc: getFbcCookie(),
+    fbp: getFbpCookie(),
+    page_url: input.pageUrl ?? (typeof window === "undefined" ? null : window.location.href),
+    metadata: input.metadata ?? null,
+    context
+  };
 }
 
 // ../tracking-core/src/session.ts
@@ -544,11 +704,22 @@ function createTrackingClient(config) {
   let queue = [];
   let flushTimer = null;
   let firstPage = null;
+  let initialParams = createEmptyTrackingParams();
   let destroyed = false;
   const visitorId = getVisitorId();
   const initialSession = getOrRotateSessionId();
   let sessionId = initialSession.id;
-  if (typeof window !== "undefined") firstPage = window.location.href;
+  if (typeof window !== "undefined") {
+    firstPage = window.location.href;
+    try {
+      initialParams = captureTrackingParamsFromLocation();
+    } catch {
+    }
+    try {
+      captureFbc();
+    } catch {
+    }
+  }
   function enqueueHeartbeat() {
     const metadata = buildHeartbeatMetadata(
       config.surface,
@@ -573,7 +744,7 @@ function createTrackingClient(config) {
       enqueueHeartbeat();
     }
     sessionId = rotated.id;
-    const params = readTrackingParams();
+    const params = mergeTrackingParams(readTrackingParams(), initialParams);
     const context = buildContext(
       config.surface,
       sdkVersion,
@@ -586,6 +757,8 @@ function createTrackingClient(config) {
       visitor_id: visitorId,
       gclid: params.gclid,
       fbclid: params.fbclid,
+      fbc: getFbcCookie(),
+      fbp: getFbpCookie(),
       utm_source: params.utm_source,
       utm_medium: params.utm_medium,
       utm_campaign: params.utm_campaign,
@@ -1835,11 +2008,19 @@ var ANIMATION_KEYFRAMES = `
 }
 `;
 
-// src/GoogleAdsTracking.tsx
+// src/AdPlatformTracking.tsx
 import { useEffect as useEffect3, useMemo } from "react";
-function GoogleAdsTracking(props) {
-  const { gtagId, gtagIds } = props;
+function AdPlatformTracking({
+  gtagId,
+  gtagIds,
+  metaPixelId,
+  metaPixelIds
+}) {
   const gtagIdsKey = useMemo(() => gtagIds ? JSON.stringify(gtagIds) : "", [gtagIds]);
+  const metaPixelIdsKey = useMemo(
+    () => metaPixelIds ? JSON.stringify(metaPixelIds) : "",
+    [metaPixelIds]
+  );
   useEffect3(() => {
     if (gtagIds && Object.keys(gtagIds).length > 0) {
       bootstrapMultipleGtags(gtagIds);
@@ -1847,14 +2028,36 @@ function GoogleAdsTracking(props) {
       bootstrapGoogleAdsTracking(gtagId);
     }
   }, [gtagId, gtagIdsKey]);
+  useEffect3(() => {
+    if (metaPixelIds && Object.keys(metaPixelIds).length > 0) {
+      bootstrapMultiplePixels(metaPixelIds);
+    } else if (metaPixelId) {
+      bootstrapMetaPixel(metaPixelId);
+    }
+  }, [metaPixelId, metaPixelIdsKey]);
+  return null;
+}
+
+// src/GoogleAdsTracking.tsx
+import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
+function GoogleAdsTracking(props) {
+  const { gtagId, gtagIds } = props;
+  const gtagIdsKey = useMemo2(() => gtagIds ? JSON.stringify(gtagIds) : "", [gtagIds]);
+  useEffect4(() => {
+    if (gtagIds && Object.keys(gtagIds).length > 0) {
+      bootstrapMultipleGtags(gtagIds);
+    } else if (gtagId) {
+      bootstrapGoogleAdsTracking(gtagId);
+    }
+  }, [gtagId, gtagIdsKey]);
   return null;
 }
 
 // src/factory.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect4, useMemo as useMemo3 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect5, useMemo as useMemo4 } from "react";
 
 // package.json
-var version = "0.12.2";
+var version = "0.13.0";
 
 // ../tracking-core/src/phone-react.tsx
 import {
@@ -1862,7 +2065,7 @@ import {
   forwardRef,
   useCallback as useCallback2,
   useContext,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useState as useState3
 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -1891,7 +2094,7 @@ function usePhoneField(opts = {}) {
   const { onValueChange } = opts;
   const [value, setValue] = useState3(() => formatPhoneAsTyped(opts.defaultValue ?? "", country));
   const [touched, setTouched] = useState3(false);
-  const parsed = useMemo2(() => parsePhone(value, country), [value, country]);
+  const parsed = useMemo3(() => parsePhone(value, country), [value, country]);
   const onChange = useCallback2(
     (event) => {
       const next = formatPhoneAsTyped(event.target.value, country);
@@ -1976,11 +2179,17 @@ function createTracking(options) {
     };
   }
   const TrackingContext = createContext2(null);
-  function TrackingProvider({ gtagId, gtagIds, children }) {
+  function TrackingProvider({
+    gtagId,
+    gtagIds,
+    metaPixelId,
+    metaPixelIds,
+    children
+  }) {
     const resolvedGtagIds = gtagIds ? Object.fromEntries(
       Object.entries(gtagIds).filter((e) => e[1] != null)
     ) : gtagId ? { default: gtagId } : void 0;
-    const client = useMemo3(
+    const client = useMemo4(
       () => createTypedClient(
         getOrCreateTrackingClient({
           apiKey,
@@ -1998,15 +2207,26 @@ function createTracking(options) {
       ),
       []
     );
-    const gtagIdsKey = useMemo3(() => gtagIds ? JSON.stringify(gtagIds) : "", [gtagIds]);
-    useEffect4(() => {
+    const gtagIdsKey = useMemo4(() => gtagIds ? JSON.stringify(gtagIds) : "", [gtagIds]);
+    useEffect5(() => {
       if (gtagIds && Object.keys(gtagIds).length > 0) {
         bootstrapMultipleGtags(gtagIds);
       } else if (gtagId) {
         bootstrapGoogleAdsTracking(gtagId);
       }
     }, [gtagId, gtagIdsKey]);
-    useEffect4(() => {
+    const metaPixelIdsKey = useMemo4(
+      () => metaPixelIds ? JSON.stringify(metaPixelIds) : "",
+      [metaPixelIds]
+    );
+    useEffect5(() => {
+      if (metaPixelIds && Object.keys(metaPixelIds).length > 0) {
+        bootstrapMultiplePixels(metaPixelIds);
+      } else if (metaPixelId) {
+        bootstrapMetaPixel(metaPixelId);
+      }
+    }, [metaPixelId, metaPixelIdsKey]);
+    useEffect5(() => {
       const detachers = [];
       const rawClient = getOrCreateTrackingClient({
         apiKey,
@@ -2060,6 +2280,7 @@ function createTracking(options) {
   return { TrackingProvider, useTracking };
 }
 export {
+  AdPlatformTracking,
   AranovaApiError,
   ConsentBanner,
   DEFAULT_PHONE_COUNTRY,