@magicfeedback/popup-sdk 1.1.1 → 1.1.2

package/dist/react-native.d.mts

@@ -21,10 +21,11 @@ interface KeyValueStorage {
 /**
  * Device info para el context de analytics (Technology #11–13).
  *
- * En Web enviamos `device_type` (heurística fiable) + `user_agent` crudo, y dejamos
- * que el backend derive OS/modelo/navegador del UA (como hace GA) — el parseo de UA en
- * cliente es frágil. `app_version` lo provee el cliente (una web no tiene versión de app
- * nativa). En KMP las APIs nativas dan os_version/device_model reales.
+ * En Web enviamos `device_type` + `user_agent` crudo y dejamos que el backend
+ * derive OS/navegador del UA (como hace GA). Los campos adicionales (timezone,
+ * referrer, viewport, etc.) se recogen de las APIs del navegador sin permisos.
+ * `country`/`city` se rellenan de forma asíncrona (ver geo-info.ts).
+ * En KMP las APIs nativas dan os_version/device_model reales.
  */
 interface DeviceInfo {
     device_type: 'mobile' | 'tablet' | 'desktop';
@@ -32,6 +33,16 @@ interface DeviceInfo {
     device_model?: string;
     app_version?: string;
     user_agent?: string;
+    timezone?: string;
+    referrer?: string;
+    viewport_size?: string;
+    screen_resolution?: string;
+    pixel_ratio?: number;
+    entry_type?: string;
+    page_load_ms?: number;
+    connection_type?: string;
+    country?: string;
+    city?: string;
 }
 
 /**
@@ -76,11 +87,12 @@ interface AnalyticsEnvelope {
  * INTEGRACIÓN creada en la plataforma. Se manda en streaming con `completed:false` y
  * `finished:false` (nunca se "cierra"); el backend cose por `sessionId` + `user_id`.
  *
- * Encoding (decisión 2026-06-22):
- *  - cada evento (dato recabado) → una `metric` {key: nombre_evento, value: JSON(timestamp + params)}
+ * Encoding:
+ *  - todo va en `feedback.metadata`: contexto (user_id, session_id, platform…) + eventos
+ *  - cada entrada usa `value: string[]` (array de un elemento)
+ *  - eventos: {key: nombre_evento, value: [JSON(timestamp + params)]}
  *  - identidad (user_id) → `profile` como `external-user-id`
- *  - contexto (user_id, session_id, platform, language, device, attributes) → `metadata`
- *  - `answers` vacío
+ *  - `answers` vacío, `metrics` no se usa
  *  - `text` vacío
  */
 
@@ -195,7 +207,7 @@ interface PopupRenderer {
     /** Preparar recursos si aplica */
     init?(): void;
     /** Mostrar popup */
-    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
     /** Ocultar popup */
     hide(): void;
 }
@@ -228,6 +240,10 @@ declare class DeepdotsPopups {
     private tracking;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
     private analytics;
+    /** feedbackSessionId cacheado del canal de analytics (devuelto por POST /sdk/feedback). */
+    private analyticsFeedbackSessionId;
+    /** Timer del flush periódico de analytics (cada ANALYTICS_FLUSH_INTERVAL_MS). */
+    private analyticsFlushTimer;
     /** Observador de navegación (Fase 2): emite page_view por el canal de analytics. */
     private navObserver;
     /** Tiempo activo (engagement time, #8). */
@@ -437,7 +453,7 @@ declare class ReactNativePopupRenderer implements PopupRenderer {
     private partialEmitted;
     constructor(options?: ReactNativeRendererOptions);
     init(): void;
-    show(surveyId: string, productId: string, _actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, _style?: PopupStyle, sessionId?: string, miniService?: string): void;
+    show(surveyId: string, productId: string, _actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, _style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
     hide(): void;
     /**
      * El host la conecta al `onMessage` del WebView. Traduce los mensajes del survey a

package/dist/react-native.d.ts

@@ -21,10 +21,11 @@ interface KeyValueStorage {
 /**
  * Device info para el context de analytics (Technology #11–13).
  *
- * En Web enviamos `device_type` (heurística fiable) + `user_agent` crudo, y dejamos
- * que el backend derive OS/modelo/navegador del UA (como hace GA) — el parseo de UA en
- * cliente es frágil. `app_version` lo provee el cliente (una web no tiene versión de app
- * nativa). En KMP las APIs nativas dan os_version/device_model reales.
+ * En Web enviamos `device_type` + `user_agent` crudo y dejamos que el backend
+ * derive OS/navegador del UA (como hace GA). Los campos adicionales (timezone,
+ * referrer, viewport, etc.) se recogen de las APIs del navegador sin permisos.
+ * `country`/`city` se rellenan de forma asíncrona (ver geo-info.ts).
+ * En KMP las APIs nativas dan os_version/device_model reales.
  */
 interface DeviceInfo {
     device_type: 'mobile' | 'tablet' | 'desktop';
@@ -32,6 +33,16 @@ interface DeviceInfo {
     device_model?: string;
     app_version?: string;
     user_agent?: string;
+    timezone?: string;
+    referrer?: string;
+    viewport_size?: string;
+    screen_resolution?: string;
+    pixel_ratio?: number;
+    entry_type?: string;
+    page_load_ms?: number;
+    connection_type?: string;
+    country?: string;
+    city?: string;
 }
 
 /**
@@ -76,11 +87,12 @@ interface AnalyticsEnvelope {
  * INTEGRACIÓN creada en la plataforma. Se manda en streaming con `completed:false` y
  * `finished:false` (nunca se "cierra"); el backend cose por `sessionId` + `user_id`.
  *
- * Encoding (decisión 2026-06-22):
- *  - cada evento (dato recabado) → una `metric` {key: nombre_evento, value: JSON(timestamp + params)}
+ * Encoding:
+ *  - todo va en `feedback.metadata`: contexto (user_id, session_id, platform…) + eventos
+ *  - cada entrada usa `value: string[]` (array de un elemento)
+ *  - eventos: {key: nombre_evento, value: [JSON(timestamp + params)]}
  *  - identidad (user_id) → `profile` como `external-user-id`
- *  - contexto (user_id, session_id, platform, language, device, attributes) → `metadata`
- *  - `answers` vacío
+ *  - `answers` vacío, `metrics` no se usa
  *  - `text` vacío
  */
 
@@ -195,7 +207,7 @@ interface PopupRenderer {
     /** Preparar recursos si aplica */
     init?(): void;
     /** Mostrar popup */
-    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
     /** Ocultar popup */
     hide(): void;
 }
@@ -228,6 +240,10 @@ declare class DeepdotsPopups {
     private tracking;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
     private analytics;
+    /** feedbackSessionId cacheado del canal de analytics (devuelto por POST /sdk/feedback). */
+    private analyticsFeedbackSessionId;
+    /** Timer del flush periódico de analytics (cada ANALYTICS_FLUSH_INTERVAL_MS). */
+    private analyticsFlushTimer;
     /** Observador de navegación (Fase 2): emite page_view por el canal de analytics. */
     private navObserver;
     /** Tiempo activo (engagement time, #8). */
@@ -437,7 +453,7 @@ declare class ReactNativePopupRenderer implements PopupRenderer {
     private partialEmitted;
     constructor(options?: ReactNativeRendererOptions);
     init(): void;
-    show(surveyId: string, productId: string, _actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, _style?: PopupStyle, sessionId?: string, miniService?: string): void;
+    show(surveyId: string, productId: string, _actions: PopupActions | undefined, emit: EmitFn, onClose: () => void, env?: string, userId?: string, _style?: PopupStyle, sessionId?: string, miniService?: string, analyticsFeedbackSessionId?: string): void;
     hide(): void;
     /**
      * El host la conecta al `onMessage` del WebView. Traduce los mensajes del survey a

package/dist/react-native.js

@@ -48,12 +48,13 @@ function createDefaultStorage() {
   }
   return new InMemoryStorage();
 }
-function buildSurveyIdentity(userId, sessionId, miniService = null) {
+function buildSurveyIdentity(userId, sessionId, miniService = null, analyticsFeedbackSessionId = null) {
   const profile = userId ? [{ key: "external-user-id", value: [userId] }] : [];
   const metadata = [];
   if (sessionId) metadata.push({ key: "session_id", value: [sessionId] });
   if (userId) metadata.push({ key: "user_id", value: [userId] });
   if (miniService) metadata.push({ key: "mini_service", value: [miniService] });
+  if (analyticsFeedbackSessionId) metadata.push({ key: "deepdots_analytics_feedback_session_id", value: [analyticsFeedbackSessionId] });
   return { profile, metadata };
 }
 function defaultUuid() {
@@ -1063,7 +1064,7 @@ function ensureResponsiveStyles(_popup) {
   `;
   document.head.appendChild(style);
 }
-async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService) {
+async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
   let surveyCompletedEmitted = false;
   let stylesInjected = false;
   const isDark = style?.theme === "dark";
@@ -1374,7 +1375,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
         env: env === "production" ? "prod" : "dev"
       }
     );
-    const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null);
+    const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null, analyticsFeedbackSessionId ?? null);
     formInstance = import_native.default.form(surveyId, productId, profile, metadata);
     const generateOptions = {
       addButton: false,
@@ -1787,12 +1788,12 @@ var ReactNativePopupRenderer = class {
   }
   init() {
   }
-  show(surveyId, productId, _actions, emit, onClose, env = "production", userId, _style, sessionId, miniService) {
+  show(surveyId, productId, _actions, emit, onClose, env = "production", userId, _style, sessionId, miniService, analyticsFeedbackSessionId) {
     this.emitFn = emit;
     this.onCloseFn = onClose;
     this.currentSurveyId = surveyId;
     this.partialEmitted = false;
-    const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null);
+    const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null, analyticsFeedbackSessionId ?? null);
     const html = buildSurveyHtml({ surveyId, productId, env, profile, metadata });
     if (this.options.onShow) {
       this.options.onShow({ surveyId, productId, html });
@@ -1883,14 +1884,14 @@ var BrowserPopupRenderer = class {
       document.body.appendChild(this.container);
     }
   }
-  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService) {
+  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService, analyticsFeedbackSessionId) {
     if (this.visible) return;
     if (!this.container || !document.body.contains(this.container)) this.init();
     if (!this.container) return;
     this.visible = true;
     const container = this.container;
     void Promise.resolve().then(() => (init_renderPopup(), renderPopup_exports)).then(({ renderPopup: renderPopup2 }) => {
-      renderPopup2(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService);
+      renderPopup2(container, surveyId, productId, actions, emit, onClose, env, userId, style, sessionId, miniService, analyticsFeedbackSessionId);
     });
   }
   hide() {
@@ -1932,6 +1933,12 @@ var AnalyticsManager = class {
     this.language = options.language;
     this.device = options.device;
     this.platform = options.platform ?? "web";
+    this.maxBatchSize = options.maxBatchSize ?? 20;
+    this.onFlushNeeded = options.onFlushNeeded;
+  }
+  /** Actualiza campos de device en runtime (p.ej. country/city tras resolver geo). */
+  updateDevice(partial) {
+    this.device = { ...this.device, ...partial };
   }
   /** Mezcla user attributes (se coercionan a string). Mutable en runtime. */
   setUserAttributes(attrs) {
@@ -1965,6 +1972,9 @@ var AnalyticsManager = class {
       timestamp: this.now(),
       params: Object.keys(merged).length ? merged : void 0
     });
+    if (this.events.length >= this.maxBatchSize) {
+      this.onFlushNeeded?.();
+    }
   }
   /** Mini-service activo (para inyectarlo en la metadata del survey, #33). */
   getMiniService() {
@@ -2002,44 +2012,55 @@ var AnalyticsManager = class {
 // src/analytics/feedback-payload.ts
 function pushKV(list, key, value) {
   if (value === void 0 || value === null || value === "") return;
-  list.push({ key, value: String(value) });
+  list.push({ key, value: [String(value)] });
 }
 function buildAnalyticsFeedbackBody(envelope, keys, feedbackSessionId) {
   const { context } = envelope;
-  const metrics = envelope.events.map((e) => ({
-    key: e.name,
-    value: JSON.stringify({ timestamp: e.timestamp, ...e.params ?? {} })
-  }));
   const profile = [];
   pushKV(profile, "external-user-id", envelope.userId);
   const metadata = [];
-  pushKV(metadata, "user_id", envelope.userId);
-  pushKV(metadata, "session_id", envelope.sessionId);
-  pushKV(metadata, "platform", context.platform);
-  pushKV(metadata, "language", context.language);
+  pushKV(metadata, "deepdots_user_id", envelope.userId);
+  pushKV(metadata, "deepdots_session_id", envelope.sessionId);
+  pushKV(metadata, "deepdots_platform", context.platform);
+  pushKV(metadata, "deepdots_language", context.language);
   if (context.device) {
-    pushKV(metadata, "device_type", context.device.device_type);
-    pushKV(metadata, "os_version", context.device.os_version);
-    pushKV(metadata, "device_model", context.device.device_model);
-    pushKV(metadata, "app_version", context.device.app_version);
-    pushKV(metadata, "user_agent", context.device.user_agent);
+    const d = context.device;
+    pushKV(metadata, "deepdots_device_type", d.device_type);
+    pushKV(metadata, "deepdots_os_version", d.os_version);
+    pushKV(metadata, "deepdots_device_model", d.device_model);
+    pushKV(metadata, "deepdots_app_version", d.app_version);
+    pushKV(metadata, "deepdots_user_agent", d.user_agent);
+    pushKV(metadata, "deepdots_timezone", d.timezone);
+    pushKV(metadata, "deepdots_referrer", d.referrer);
+    pushKV(metadata, "deepdots_viewport_size", d.viewport_size);
+    pushKV(metadata, "deepdots_screen_resolution", d.screen_resolution);
+    pushKV(metadata, "deepdots_pixel_ratio", d.pixel_ratio);
+    pushKV(metadata, "deepdots_entry_type", d.entry_type);
+    pushKV(metadata, "deepdots_page_load_ms", d.page_load_ms);
+    pushKV(metadata, "deepdots_connection_type", d.connection_type);
+    pushKV(metadata, "deepdots_country", d.country);
+    pushKV(metadata, "deepdots_city", d.city);
   }
   for (const [k, v] of Object.entries(context.attributes ?? {})) {
     pushKV(metadata, k, v);
   }
+  for (const e of envelope.events) {
+    metadata.push({
+      key: e.name,
+      value: [JSON.stringify({ timestamp: e.timestamp, ...e.params ?? {} })]
+    });
+  }
   return {
     feedback: {
       text: "",
       answers: [],
       metadata,
-      metrics,
       profile,
       finished: false
     },
     publicKey: keys.publicKey,
     integration: keys.integration,
     completed: false,
-    // finished: false,
     ...feedbackSessionId ? { sessionId: feedbackSessionId } : {}
   };
 }
@@ -2064,6 +2085,7 @@ function createFeedbackSink(options) {
           if (data?.sessionId && data.sessionId !== feedbackSessionId) {
             feedbackSessionId = data.sessionId;
             options.log?.("[DeepdotsAnalytics] feedbackSessionId cacheado:", feedbackSessionId);
+            options.onSessionId?.(feedbackSessionId);
           }
         } catch {
         }
@@ -2177,15 +2199,57 @@ function parseDeviceType(ua) {
   }
   return "desktop";
 }
+function getEntryType() {
+  if (typeof performance === "undefined") return void 0;
+  const entries = performance.getEntriesByType("navigation");
+  if (!entries.length) return void 0;
+  return entries[0].type;
+}
+function getPageLoadMs() {
+  if (typeof performance === "undefined") return void 0;
+  const entries = performance.getEntriesByType("navigation");
+  if (!entries.length) return void 0;
+  const load = entries[0].loadEventEnd;
+  return load > 0 ? Math.round(load) : void 0;
+}
+function getConnectionType() {
+  if (typeof navigator === "undefined") return void 0;
+  return navigator.connection?.effectiveType ?? void 0;
+}
 function collectDeviceInfo(appVersion) {
   const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
   return {
     device_type: parseDeviceType(ua),
     user_agent: ua || void 0,
-    app_version: appVersion
+    app_version: appVersion,
+    timezone: typeof Intl !== "undefined" ? Intl.DateTimeFormat().resolvedOptions().timeZone : void 0,
+    referrer: typeof document !== "undefined" && document.referrer ? document.referrer : void 0,
+    viewport_size: typeof window !== "undefined" ? `${window.innerWidth}x${window.innerHeight}` : void 0,
+    screen_resolution: typeof screen !== "undefined" ? `${screen.width}x${screen.height}` : void 0,
+    pixel_ratio: typeof window !== "undefined" ? window.devicePixelRatio : void 0,
+    entry_type: getEntryType(),
+    page_load_ms: getPageLoadMs(),
+    connection_type: getConnectionType()
   };
 }
 
+// src/analytics/geo-info.ts
+async function collectGeoInfo(fetchImpl) {
+  const f = fetchImpl ?? (typeof fetch !== "undefined" ? fetch : void 0);
+  if (!f) return null;
+  try {
+    const res = await f("https://ipapi.co/json/");
+    if (!res.ok) return null;
+    const data = await res.json();
+    const country = data.country_code || void 0;
+    const city = data.city || void 0;
+    if (!country && !city) return null;
+    return { country, city };
+  } catch {
+    return null;
+  }
+}
+
 // src/analytics/engagement-tracker.ts
 var EngagementTracker = class {
   constructor(now = () => Date.now()) {
@@ -2257,6 +2321,8 @@ var ContactManager = class {
 // src/core/deepdots-popups.ts
 var EXIT_QUEUE_STORAGE_KEY = "__deepdots_exit_popup_queue__";
 var DAY_IN_MS = 24 * 60 * 60 * 1e3;
+var ANALYTICS_MAX_BATCH_SIZE = 20;
+var ANALYTICS_FLUSH_INTERVAL_MS = 3e4;
 var DeepdotsPopups = class {
   constructor() {
     this.config = null;
@@ -2282,6 +2348,10 @@ var DeepdotsPopups = class {
     this.tracking = null;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
     this.analytics = null;
+    /** feedbackSessionId cacheado del canal de analytics (devuelto por POST /sdk/feedback). */
+    this.analyticsFeedbackSessionId = void 0;
+    /** Timer del flush periódico de analytics (cada ANALYTICS_FLUSH_INTERVAL_MS). */
+    this.analyticsFlushTimer = void 0;
     /** Observador de navegación (Fase 2): emite page_view por el canal de analytics. */
     this.navObserver = null;
     /** Tiempo activo (engagement time, #8). */
@@ -2328,14 +2398,23 @@ var DeepdotsPopups = class {
     const analyticsSink = config.analytics ? createFeedbackSink({
       baseUrl: this.baseUrl,
       keys: config.analytics,
-      log: (...a) => this.log(...a)
+      log: (...a) => this.log(...a),
+      onSessionId: (id) => {
+        this.analyticsFeedbackSessionId = id;
+      }
     }) : void 0;
     this.analytics = new AnalyticsManager({
       sink: analyticsSink,
       publicKey: config.analytics?.publicKey ?? this.config.apiKey,
       language: typeof navigator !== "undefined" ? navigator.language : void 0,
       platform: config.platform ?? "web",
-      device: config.device ?? collectDeviceInfo(config.appVersion)
+      device: config.device ?? collectDeviceInfo(config.appVersion),
+      maxBatchSize: ANALYTICS_MAX_BATCH_SIZE,
+      onFlushNeeded: () => this.flushAnalytics()
+    });
+    collectGeoInfo().then((geo) => {
+      if (geo) this.analytics?.updateDevice(geo);
+    }).catch(() => {
     });
     this.navObserver = new NavigationObserver();
     this.navObserver.onVisit((v) => this.track("page_view", { screen: v.screen, duration_seconds: v.durationSeconds }));
@@ -2476,7 +2555,9 @@ var DeepdotsPopups = class {
   /** Flush automático al ocultar/cerrar la página (no perder el lote pendiente). */
   setupAnalyticsFlush() {
     if (typeof document === "undefined" || typeof window === "undefined") return;
+    this.analyticsFlushTimer = setInterval(() => this.flushAnalytics(), ANALYTICS_FLUSH_INTERVAL_MS);
     window.addEventListener("pagehide", () => {
+      clearInterval(this.analyticsFlushTimer);
       this.navObserver?.stop();
       this.exitMiniService();
       this.flushEngagement();
@@ -2920,7 +3001,8 @@ var DeepdotsPopups = class {
     const userId = this.tracking?.getUserId() ?? this.config?.userId;
     const sessionId = this.tracking?.getSessionId() ?? void 0;
     const miniService = this.analytics?.getMiniService() ?? void 0;
-    this.log("tracking \xB7 survey identity \u2192", { userId: userId ?? null, sessionId: sessionId ?? null, miniService: miniService ?? null });
+    const analyticsFeedbackSessionId = this.analyticsFeedbackSessionId;
+    this.log("tracking \xB7 survey identity \u2192", { userId: userId ?? null, sessionId: sessionId ?? null, miniService: miniService ?? null, analyticsFeedbackSessionId: analyticsFeedbackSessionId ?? null });
     if (this.renderer) {
       this.renderer.show(
         surveyId,
@@ -2932,7 +3014,8 @@ var DeepdotsPopups = class {
         userId,
         style,
         sessionId,
-        miniService
+        miniService,
+        analyticsFeedbackSessionId
       );
       return;
     }
@@ -2950,7 +3033,8 @@ var DeepdotsPopups = class {
         userId,
         style,
         sessionId,
-        miniService
+        miniService,
+        analyticsFeedbackSessionId
       );
     });
   }