@envive-ai/react-hooks 0.3.22 → 0.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-hooks",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "description": "React hooks for connecting to Envive AI services.",
   "keywords": [
     "react",

package/src/application/models/featureGates.ts

@@ -27,4 +27,5 @@ export enum FeatureGates {
   IsAiSuggestionsVariantEnabled = 'is_ai_suggestions_variant_enabled',
   IsAiSuggestionsVariantAEnabled = 'is_ai_suggestions_variant_a_enabled',
   IsAiSuggestionsVariantBEnabled = 'is_ai_suggestions_variant_b_enabled',
+  IsVoiceInputEnabled = 'is_voice_input_enabled',
 }

package/src/atoms/chat/chatState.ts

@@ -26,6 +26,7 @@ export const initializedAtom = atom<boolean>(false);
 export const chatIsOpenAtom = atom<boolean>(false);
 export const requestFailureAtom = atom<boolean>(false);
 export const formSubmitAtom = atom<FormSubmittedAttributes>();
+export const listeningToSpeechAtom = atom<boolean>(false);
 export const chatOnToggleAtom = atom(
   null,
   (

package/src/contexts/hardcopyContext/hardcopyContext.tsx

@@ -219,10 +219,18 @@ export const HardcopyProvider: React.FC<HardcopyProviderProps> = ({
   const { featureFlagService } = useFeatureFlagService();
   const getHardcopyFromBackend = useCallback(
     async (request: HardcopyRequest): Promise<HardcopyResponse> => {
-      if (hardcopyOverride?.[request.widgetType]) {
+      const fallbackWidgetType =
+        request.widgetType === WidgetTypeV3.ProductCardV3
+          ? WidgetTypeV3.ImagePromptCardV3
+          : request.widgetType;
+
+      const overrideEntry =
+        hardcopyOverride?.[request.widgetType] ?? hardcopyOverride?.[fallbackWidgetType];
+      if (overrideEntry) {
         logger.logDebug('using hardcopy override', request.widgetType);
-        return hardcopyOverride[request.widgetType]!;
+        return overrideEntry;
       }
+
       const overrideConfigVersion =
         getQueryParam('spiffy_config_version') ||
         getQueryParam('envive_config_version') ||

package/src/contexts/salesAgentContext/chatAPI.ts

@@ -14,6 +14,7 @@ import {
 import { hasParsedVariantInfoAtom } from 'src/atoms/app';
 import { analyticsContextAtom } from 'src/atoms/app/variant';
 import { formSubmitAtom, replyEventCategoryAtom } from 'src/atoms/chat';
+import { suggestionsAtom } from 'src/atoms/chat/chatState';
 import { queueUserEventAtom } from 'src/atoms/chat/messageQueue';
 import { useWidgetInteraction } from 'src/hooks/WidgetInteraction';
 import {
@@ -56,6 +57,7 @@ export const useSalesAgentChatAPI = (widget?: WidgetInteractionComponent) => {
   const context = useAtomValue(analyticsContextAtom);
   const hasParsedVariantInfo = useAtomValue(hasParsedVariantInfoAtom);
   const queueUserEvent = useSetAtom(queueUserEventAtom);
+  const setSuggestions = useSetAtom(suggestionsAtom);
   const setReplyEventCategory = useSetAtom(replyEventCategoryAtom);
   const setFormSubmit = useSetAtom(formSubmitAtom);
   const { trackEvent } = useAmplitude();
@@ -164,9 +166,10 @@ export const useSalesAgentChatAPI = (widget?: WidgetInteractionComponent) => {
           content: suggestion.content,
         },
       };
+      setSuggestions([]);
       queueUserEvent(event);
     },
-    [queueUserEvent, trackEvent, context],
+    [queueUserEvent, setSuggestions, trackEvent, context],
   );
   const onTypedMessageSubmitted = useCallback(
     ({
@@ -229,9 +232,10 @@ export const useSalesAgentChatAPI = (widget?: WidgetInteractionComponent) => {
           userTyped,
         },
       };
+      setSuggestions([]);
       queueUserEvent(event);
     },
-    [queueUserEvent, trackEvent, context],
+    [queueUserEvent, setSuggestions, trackEvent, context],
   );
   const onFormResponseSubmitted = useCallback(
     (form: FormSubmittedAttributes) => {

package/src/contexts/typesV3.ts

@@ -156,6 +156,7 @@ type LookAndFeelConfig = {
   chatHeaderLogoLightSrc: string;
   widgetLogoSrc: string;
   hideWidgetLogo: boolean;
+  voiceInputEnabled?: boolean;
   elementRadius: number;
   imageAspectRatio: ImageAspectRatio;
   buttonColors: ButtonColors;

package/src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent.ts

@@ -1,6 +1,10 @@
+import { useAtomValue } from 'jotai';
 import { RefObject, useEffect, useRef } from 'react';
-import { useIntersection } from 'src/hooks/Intersection/useIntersection';
+import { pageVariantInfoAtom } from 'src/atoms/app';
 import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { PageVariantInfo } from 'src/contexts/pageContext/types';
+import { useIntersection } from 'src/hooks/Intersection/useIntersection';
+import { extractPageContext } from 'src/hooks/WidgetInteraction/utils';
 import {
   EnviveMetricsEventName,
   SpiffyMetricsEventName,
@@ -23,6 +27,7 @@ export const useTrackComponentVisibleEvent = (
   const isVisible = useIntersection(element, rootMargin);
   const hasTrackedEvent = useRef(false);
   const { trackEvent } = useAmplitude();
+  const variantInfo = useAtomValue(pageVariantInfoAtom);
 
   useEffect(() => {
     if (!enabled || hasTrackedEvent.current) {
@@ -37,7 +42,10 @@ export const useTrackComponentVisibleEvent = (
         eventName: EnviveMetricsEventName.WidgetRendered,
         eventProps: {
           ...eventProps,
-          'trigger.widget': eventProps?.widget_type,
+          trigger: {
+            widget: eventProps?.widget_type,
+          },
+          context: variantInfo ? extractPageContext(variantInfo as PageVariantInfo) : null,
         },
       });
       hasTrackedEvent.current = true;

package/src/hooks/WidgetInteraction/types.ts

@@ -62,6 +62,8 @@ export enum WidgetInteractionType {
   REVIEW_CARD_CLICKED = 'review_card_clicked',
   MESSAGE_SUBMITTED = 'message_submitted',
   MANUAL_SCROLL_TO_BOTTOM = 'manual_scroll_to_bottom',
+  VOICE_TRANSCRIPTION_STARTED = 'voice_transcription_started',
+  VOICE_TRANSCRIPTION_COMPLETED = 'voice_transcription_completed',
 }
 
 export enum InteractionClass {
@@ -85,6 +87,8 @@ export const INTERACTION_TYPE_CLASS: Record<WidgetInteractionType, InteractionCl
   [WidgetInteractionType.REVIEW_CARD_CLICKED]: InteractionClass.INTENTIONAL,
   [WidgetInteractionType.MESSAGE_SUBMITTED]: InteractionClass.INTENTIONAL,
   [WidgetInteractionType.MANUAL_SCROLL_TO_BOTTOM]: InteractionClass.PASSIVE,
+  [WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED]: InteractionClass.INTENTIONAL,
+  [WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED]: InteractionClass.INTENTIONAL,
 };
 
 export type URL = {
@@ -151,6 +155,10 @@ export type MessageSubmitted = {
   message_submitted: Request;
 };
 
+export type VoiceTranscription = {
+  transcription: string;
+};
+
 export type WidgetInteractionData =
   | SuggestionScrolled
   | SuggestionClicked
@@ -161,4 +169,5 @@ export type WidgetInteractionData =
   | ArticleLinkClicked
   | ProductCardClicked
   | ReviewCardClicked
-  | MessageSubmitted;
+  | MessageSubmitted
+  | VoiceTranscription;

package/src/services/ga4ProjectionService/__tests__/ga4ProjectionService.test.ts

@@ -28,34 +28,46 @@ describe('projectToGA4', () => {
   });
 
   describe('Widget Rendered', () => {
-    it('should push filtered and flattened props', () => {
+    it('should push renamed GA4 fields from nested input', () => {
       projectToGA4(EnviveMetricsEventName.WidgetRendered, {
-        'context.page_type': 'pdp',
-        'context.page_id': 'product-123',
-        'trigger.widget': 'floating_button',
-        'trigger.interaction_id': 'abc-123',
+        trigger: { widget: 'floating_button' },
+        context: { page_type: 'pdp', page_id: 'product-123' },
       });
 
       expect(window.dataLayer).toHaveLength(1);
       expect(window.dataLayer[0]).toEqual({
         event: 'envive_widget_rendered',
-        context_page_type: 'pdp',
-        context_page_id: 'product-123',
-        trigger_widget: 'floating_button',
+        page_type: 'pdp',
+        page_id: 'product-123',
+        widget: 'floating_button',
       });
     });
 
-    it('should exclude fields not in allowedFields', () => {
+    it('should also accept flat dot-notation input', () => {
       projectToGA4(EnviveMetricsEventName.WidgetRendered, {
         'context.page_type': 'pdp',
         'context.page_id': 'product-123',
         'trigger.widget': 'floating_button',
-        'trigger.interaction_id': 'should-be-dropped',
+        'trigger.interaction_id': 'abc-123',
+      });
+
+      expect(window.dataLayer[0]).toEqual({
+        event: 'envive_widget_rendered',
+        page_type: 'pdp',
+        page_id: 'product-123',
+        widget: 'floating_button',
+      });
+    });
+
+    it('should exclude fields not in fieldProjections', () => {
+      projectToGA4(EnviveMetricsEventName.WidgetRendered, {
+        trigger: { widget: 'floating_button', interaction_id: 'should-be-dropped' },
+        context: { page_type: 'pdp', page_id: 'product-123' },
         'some.random_field': 'also-dropped',
       });
 
       const pushed = window.dataLayer[0];
-      expect(pushed).not.toHaveProperty('trigger_interaction_id');
+      expect(pushed).not.toHaveProperty('interaction_id');
       expect(pushed).not.toHaveProperty('some_random_field');
     });
   });
@@ -63,97 +75,146 @@ describe('projectToGA4', () => {
   describe('page_id sanitization', () => {
     it('should keep page_id for pdp page type', () => {
       projectToGA4(EnviveMetricsEventName.WidgetRendered, {
-        'context.page_type': 'pdp',
-        'context.page_id': 'product-123',
-        'trigger.widget': 'floating_button',
+        trigger: { widget: 'floating_button' },
+        context: { page_type: 'pdp', page_id: 'product-123' },
       });
 
-      expect(window.dataLayer[0]).toHaveProperty('context_page_id', 'product-123');
+      expect(window.dataLayer[0]).toHaveProperty('page_id', 'product-123');
     });
 
     it('should keep page_id for plp page type', () => {
       projectToGA4(EnviveMetricsEventName.WidgetRendered, {
-        'context.page_type': 'plp',
-        'context.page_id': 'category-456',
-        'trigger.widget': 'floating_button',
+        trigger: { widget: 'floating_button' },
+        context: { page_type: 'plp', page_id: 'category-456' },
       });
 
-      expect(window.dataLayer[0]).toHaveProperty('context_page_id', 'category-456');
+      expect(window.dataLayer[0]).toHaveProperty('page_id', 'category-456');
     });
 
     it('should omit page_id for search page type', () => {
       projectToGA4(EnviveMetricsEventName.WidgetRendered, {
-        'context.page_type': 'search',
-        'context.page_id': 'some search query',
-        'trigger.widget': 'floating_button',
+        trigger: { widget: 'floating_button' },
+        context: { page_type: 'search', page_id: 'some search query' },
       });
 
-      expect(window.dataLayer[0]).not.toHaveProperty('context_page_id');
+      expect(window.dataLayer[0]).not.toHaveProperty('page_id');
     });
 
     it('should omit page_id for homepage page type', () => {
       projectToGA4(EnviveMetricsEventName.WidgetRendered, {
-        'context.page_type': 'homepage',
-        'context.page_id': 'https://example.com',
-        'trigger.widget': 'floating_button',
+        trigger: { widget: 'floating_button' },
+        context: { page_type: 'homepage', page_id: 'https://example.com' },
       });
 
-      expect(window.dataLayer[0]).not.toHaveProperty('context_page_id');
+      expect(window.dataLayer[0]).not.toHaveProperty('page_id');
     });
 
     it('should omit page_id for other page type', () => {
       projectToGA4(EnviveMetricsEventName.WidgetRendered, {
-        'context.page_type': 'other',
-        'context.page_id': 'https://example.com/about',
-        'trigger.widget': 'floating_button',
+        trigger: { widget: 'floating_button' },
+        context: { page_type: 'other', page_id: 'https://example.com/about' },
       });
 
-      expect(window.dataLayer[0]).not.toHaveProperty('context_page_id');
+      expect(window.dataLayer[0]).not.toHaveProperty('page_id');
     });
   });
 
   describe('Widget Interaction', () => {
-    it('should push base fields and flatten dot keys', () => {
+    it('should push renamed GA4 fields (flat dot-notation input)', () => {
       projectToGA4(EnviveMetricsEventName.WidgetInteraction, {
         'context.page_type': 'pdp',
         'context.page_id': 'product-123',
         'trigger.widget': 'chat_overlay',
         'trigger.widget_interaction': 'link_clicked',
+        'trigger.interaction_class': 'intentional',
       });
 
       expect(window.dataLayer[0]).toEqual({
         event: 'envive_widget_interaction',
-        context_page_type: 'pdp',
-        context_page_id: 'product-123',
-        trigger_widget: 'chat_overlay',
-        trigger_widget_interaction: 'link_clicked',
+        page_type: 'pdp',
+        page_id: 'product-123',
+        widget: 'chat_overlay',
+        interaction_type: 'link_clicked',
+        interaction_class: 'intentional',
       });
     });
 
-    it('should extract collapse_source from widget_interaction_data for widget_collapsed', () => {
+    it('should project from real Amplitude nested-object props', () => {
+      projectToGA4(EnviveMetricsEventName.WidgetInteraction, {
+        trigger: {
+          widget: 'floating_button',
+          widget_interaction: 'widget_clicked',
+          interaction_id: '604a2e2c-9848-41dd-a2b1-cb5b8612ec08',
+          interaction_class: 'intentional',
+        },
+        context: {
+          page_id: 'hsa-fsa-eligible',
+          page_type: 'plp',
+        },
+        'environment.execution_context': 'bundle',
+        'org.short_name': 'dermalogica',
+      });
+
+      expect(window.dataLayer[0]).toEqual({
+        event: 'envive_widget_interaction',
+        page_type: 'plp',
+        page_id: 'hsa-fsa-eligible',
+        widget: 'floating_button',
+        interaction_type: 'widget_clicked',
+        interaction_class: 'intentional',
+      });
+    });
+
+    it('should omit page_id for non-pdp/plp page types (nested input)', () => {
+      projectToGA4(EnviveMetricsEventName.WidgetInteraction, {
+        trigger: { widget: 'floating_button', widget_interaction: 'widget_clicked' },
+        context: { page_type: 'homepage', page_id: 'https://example.com' },
+      });
+
+      expect(window.dataLayer[0]).not.toHaveProperty('page_id');
+      expect(window.dataLayer[0]).toHaveProperty('page_type', 'homepage');
+    });
+
+    it('should extract interaction_collapse_source from widget_interaction_data for widget_collapsed', () => {
       projectToGA4(EnviveMetricsEventName.WidgetInteraction, {
         'context.page_type': 'pdp',
         'context.page_id': 'product-123',
         'trigger.widget': 'chat_overlay',
         'trigger.widget_interaction': 'widget_collapsed',
-        'trigger.widget_interaction_data': { collapse_source: 'close_button' },
+        'trigger.widget_interaction_data': {
+          widget_collapsed: { collapse_source: 'close_button' },
+        },
+      });
+
+      expect(window.dataLayer[0]).toHaveProperty('interaction_collapse_source', 'close_button');
+    });
+
+    it('should extract interaction_collapse_source from nested real-data trigger object', () => {
+      projectToGA4(EnviveMetricsEventName.WidgetInteraction, {
+        trigger: {
+          widget: 'floating_button',
+          widget_interaction: 'widget_collapsed',
+          interaction_class: 'navigational',
+          widget_interaction_data: { widget_collapsed: { collapse_source: 'swipe' } },
+        },
+        context: { page_type: 'pdp', page_id: 'product-123' },
       });
 
-      expect(window.dataLayer[0]).toHaveProperty('trigger_collapse_source', 'close_button');
+      expect(window.dataLayer[0]).toHaveProperty('interaction_collapse_source', 'swipe');
+      expect(window.dataLayer[0]).toHaveProperty('interaction_class', 'navigational');
     });
 
-    it('should extract product_id from widget_interaction_data for product_card_clicked', () => {
+    it('should extract interaction_product_id from widget_interaction_data for product_card_clicked', () => {
       projectToGA4(EnviveMetricsEventName.WidgetInteraction, {
         'context.page_type': 'pdp',
         'context.page_id': 'product-123',
         'trigger.widget': 'chat_overlay',
         'trigger.widget_interaction': 'product_card_clicked',
-        'trigger.widget_interaction_data': { product_id: 'sku-789', url: 'https://example.com' },
+        'trigger.widget_interaction_data': { product_card_clicked: { product_id: 'sku-789' } },
       });
 
       const pushed = window.dataLayer[0];
-      expect(pushed).toHaveProperty('trigger_product_id', 'sku-789');
-      expect(pushed).not.toHaveProperty('url');
+      expect(pushed).toHaveProperty('interaction_product_id', 'sku-789');
     });
 
     it('should extract suggestion_id from widget_interaction_data for suggestion_scrolled', () => {
@@ -162,10 +223,10 @@ describe('projectToGA4', () => {
         'context.page_id': 'product-123',
         'trigger.widget': 'chat_overlay',
         'trigger.widget_interaction': 'suggestion_scrolled',
-        'trigger.widget_interaction_data': { suggestion_id: 'sug-456' },
+        'trigger.widget_interaction_data': { suggestion_scrolled: { suggestion_id: 'sug-456' } },
       });
 
-      expect(window.dataLayer[0]).toHaveProperty('trigger_suggestion_id', 'sug-456');
+      expect(window.dataLayer[0]).toHaveProperty('interaction_suggestion_id', 'sug-456');
     });
 
     it('should drop widget_interaction_data for unwhitelisted interactions', () => {
@@ -281,8 +342,8 @@ describe('projectToGA4', () => {
 
       expect(window.dataLayer[0]).toEqual({
         event: 'envive_page_context_evaluated',
-        context_page_type: 'pdp',
-        context_page_id: 'product-123',
+        page_type: 'pdp',
+        page_id: 'product-123',
         context_supported: true,
         context_ready: true,
         context_page_variant_id: 'variant-A',
@@ -300,8 +361,8 @@ describe('projectToGA4', () => {
       });
 
       const pushed = window.dataLayer[0];
-      expect(pushed).not.toHaveProperty('context_page_id');
-      expect(pushed).toHaveProperty('context_page_type', 'search');
+      expect(pushed).not.toHaveProperty('page_id');
+      expect(pushed).toHaveProperty('page_type', 'search');
     });
   });
 

package/src/services/ga4ProjectionService/ga4EventSchema.ts

@@ -34,6 +34,11 @@ export type WidgetInteractionDataProjection = Record<string, Record<string, stri
 export interface GA4ProjectedEventConfig {
   gaEventName: string;
   allowedFields: readonly string[];
+  /**
+   * When present, used instead of `allowedFields` to both filter and rename fields.
+   * Key: the desired GA4 parameter name. Value: the source dot-notation key in eventProps.
+   */
+  fieldProjections?: Record<string, string>;
   widgetInteractionDataProjections?: WidgetInteractionDataProjection;
 }
 
@@ -44,34 +49,36 @@ export interface GA4ExcludedEventConfig {
 export type GA4EventSchemaEntry = GA4ProjectedEventConfig | GA4ExcludedEventConfig;
 
 const WIDGET_INTERACTION_DATA_PROJECTIONS: WidgetInteractionDataProjection = {
-  widget_collapsed: { trigger_collapse_source: 'collapse_source' },
-  product_card_clicked: { trigger_product_id: 'product_id' },
-  suggestion_scrolled: { trigger_suggestion_id: 'suggestion_id' },
+  widget_collapsed: { interaction_collapse_source: 'widget_collapsed.collapse_source' },
+  product_card_clicked: { interaction_product_id: 'product_card_clicked.product_id' },
+  suggestion_scrolled: { interaction_suggestion_id: 'suggestion_scrolled.suggestion_id' },
 };
 
 export const GA4_EVENT_SCHEMA: Record<EnviveMetricsEventName, GA4EventSchemaEntry> = {
   [EnviveMetricsEventName.WidgetRendered]: {
     gaEventName: 'envive_widget_rendered',
-    allowedFields: [
-      'context.page_type',
-      'context.page_id',
-      'trigger.widget',
-      'trigger.widget_role',
-      'context.surface',
-    ],
+    allowedFields: [],
+    fieldProjections: {
+      page_type: 'context.page_type',
+      page_id: 'context.page_id',
+      surface: 'context.surface',
+      widget: 'trigger.widget',
+      widget_role: 'trigger.widget_role',
+    },
   },
 
-  // This event is not currently implemented
   [EnviveMetricsEventName.WidgetInteraction]: {
     gaEventName: 'envive_widget_interaction',
-    allowedFields: [
-      'context.page_type',
-      'context.page_id',
-      'trigger.widget',
-      'trigger.widget_interaction',
-      'trigger.entity_role',
-      'context.surface',
-    ],
+    allowedFields: [],
+    fieldProjections: {
+      page_type: 'context.page_type',
+      page_id: 'context.page_id',
+      surface: 'context.surface',
+      widget: 'trigger.widget',
+      interaction_type: 'trigger.widget_interaction',
+      interaction_class: 'trigger.interaction_class',
+      widget_role: 'trigger.widget_role',
+    },
     widgetInteractionDataProjections: WIDGET_INTERACTION_DATA_PROJECTIONS,
   },
 
@@ -120,14 +127,15 @@ export const GA4_EVENT_SCHEMA: Record<EnviveMetricsEventName, GA4EventSchemaEntr
   // This event is not currently implemented
   [EnviveMetricsEventName.PageViewed]: {
     gaEventName: 'envive_page_context_evaluated',
-    allowedFields: [
-      'context.page_type',
-      'context.page_id',
-      'context.supported',
-      'context.ready',
-      'context.page_variant_id',
-      'environment.envive_enabled',
-    ],
+    allowedFields: [],
+    fieldProjections: {
+      page_type: 'context.page_type',
+      page_id: 'context.page_id',
+      context_supported: 'context.supported',
+      context_ready: 'context.ready',
+      context_page_variant_id: 'context.page_variant_id',
+      environment_envive_enabled: 'environment.envive_enabled',
+    },
   },
 
   [EnviveMetricsEventName.WidgetTextRequest]: {

package/src/services/ga4ProjectionService/ga4ProjectionService.ts

@@ -17,6 +17,42 @@ const filterToSchema = (
   return result;
 };
 
+// Flatten only true top-level nested objects (keys with no dots) one level deep.
+// Keys that already contain dots are left intact so that e.g.
+// `trigger.widget_interaction_data: { ... }` is preserved for downstream extraction.
+const flattenOneLevel = (obj: Record<string, unknown>): Record<string, unknown> => {
+  const result: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (
+      !key.includes('.') &&
+      value !== null &&
+      typeof value === 'object' &&
+      !Array.isArray(value)
+    ) {
+      for (const [subKey, subValue] of Object.entries(value as Record<string, unknown>)) {
+        result[`${key}.${subKey}`] = subValue;
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+};
+
+// Apply a GA4 projection map { ga4Key: sourceKey } to extract and rename fields.
+const filterWithProjections = (
+  eventProps: Record<string, unknown>,
+  projections: Record<string, string>,
+): Record<string, unknown> => {
+  const result: Record<string, unknown> = {};
+  for (const [ga4Key, sourceKey] of Object.entries(projections)) {
+    if (sourceKey in eventProps) {
+      result[ga4Key] = eventProps[sourceKey];
+    }
+  }
+  return result;
+};
+
 // "context.page_type" → "context_page_type"
 const flattenDotKeys = (obj: Record<string, unknown>): Record<string, unknown> => {
   const result: Record<string, unknown> = {};
@@ -32,16 +68,28 @@ const flattenDotKeys = (obj: Record<string, unknown>): Record<string, unknown> =
 // Search: search query
 // Other: page url
 // We want to omit all but pdp and plp page types to provide a clear, consistent interface for merchants.
+// Handles both dot-notation keys (allowedFields path) and renamed GA4 keys (fieldProjections path).
 const sanitizePageId = (filtered: Record<string, unknown>): Record<string, unknown> => {
-  const pageType = filtered['context.page_type'];
+  const pageType = filtered['page_type'] ?? filtered['context.page_type'];
   if (pageType === 'pdp' || pageType === 'plp') {
     return filtered;
   }
   const rest = { ...filtered };
+  delete rest['page_id'];
   delete rest['context.page_id'];
   return rest;
 };
 
+const getNestedValue = (obj: Record<string, unknown>, path: string): unknown => {
+  const parts = path.split('.');
+  let current: unknown = obj;
+  for (const part of parts) {
+    if (current === null || typeof current !== 'object') return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return current;
+};
+
 // Extract whitelisted sub-fields from trigger.widget_interaction_data
 const projectWidgetInteractionData = (
   eventProps: Record<string, unknown>,
@@ -72,9 +120,10 @@ const projectWidgetInteractionData = (
 
   const data = interactionData as Record<string, unknown>;
   const result: Record<string, unknown> = {};
-  for (const [gaKey, sourceField] of Object.entries(projectionMap)) {
-    if (sourceField in data) {
-      result[gaKey] = data[sourceField];
+  for (const [gaKey, sourcePath] of Object.entries(projectionMap)) {
+    const value = getNestedValue(data, sourcePath);
+    if (value !== undefined) {
+      result[gaKey] = value;
     }
   }
   return result;
@@ -113,9 +162,14 @@ export const projectToGA4 = (
     }
 
     const config = schemaEntry;
-    const props = eventProps ?? {};
+    const props = flattenOneLevel(eventProps ?? {});
 
-    let filtered = filterToSchema(props, config.allowedFields);
+    let filtered: Record<string, unknown>;
+    if (config.fieldProjections) {
+      filtered = filterWithProjections(props, config.fieldProjections);
+    } else {
+      filtered = filterToSchema(props, config.allowedFields);
+    }
     filtered = sanitizePageId(filtered);
 
     const interactionFields = projectWidgetInteractionData(props, config);