@envive-ai/react-hooks 0.3.21 → 0.3.23

package/src/hooks/Search/useSearch.tsx

@@ -27,8 +27,8 @@ import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
 import { SearchFilterDatum, SelectFilterItem } from 'src/types/search-filter-types';
 import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
 import { FrontendConfig, SearchResponseProductAttributes } from 'src/application/models';
+import { useIntersection } from 'src/hooks/Intersection/useIntersection';
 import { SearchResultsState, getSearchResultsState } from '../utils';
-import { useTrackComponentVisibleEvent } from '../TrackComponentVisibleEvent';
 import { useSearchInput } from './useSearchInput';
 import { useNewOrgConfig } from '../NewOrgConfig';
 import { useRecommendedProducts } from './useRecommendedProducts';
@@ -292,13 +292,19 @@ export const useSearch = ({
     scrollToTop();
   }, [setProductSorting, clearFilters, scrollToTop]);
 
-  // Side Effects
-  useTrackComponentVisibleEvent(
-    SpiffyWidgets.SearchResults,
-    searchResultsRef as RefObject<HTMLElement>,
-    {},
-    SpiffyMetricsEventName.SearchComponentVisible,
-  );
+  const searchResultsVisible = useIntersection(searchResultsRef as RefObject<HTMLElement>, '0px');
+  const hasTrackedSearchComponentVisible = useRef(false);
+
+  useEffect(() => {
+    if (!searchResultsVisible || hasTrackedSearchComponentVisible.current) {
+      return;
+    }
+    hasTrackedSearchComponentVisible.current = true;
+    trackEvent({
+      eventName: SpiffyMetricsEventName.SearchComponentVisible,
+      eventProps: {},
+    });
+  }, [searchResultsVisible, trackEvent]);
 
   useEffect(() => {
     if (

package/src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent.ts

@@ -1,54 +1,55 @@
+import { useAtomValue } from 'jotai';
 import { RefObject, useEffect, useRef } from 'react';
-import { SpiffyWidgets } from 'src/application/models/spiffyWidgets';
-import { useIntersection } from 'src/hooks/Intersection/useIntersection';
+import { pageVariantInfoAtom } from 'src/atoms/app';
 import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
-import { SpiffyMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
+import { PageVariantInfo } from 'src/contexts/pageContext/types';
+import { useIntersection } from 'src/hooks/Intersection/useIntersection';
+import { extractPageContext } from 'src/hooks/WidgetInteraction/utils';
+import {
+  EnviveMetricsEventName,
+  SpiffyMetricsEventName,
+} from 'src/services/amplitudeService/amplitudeService';
 
 /**
- * Tracks a component and logs an event to Amplitude when the component is visible.
+ * Tracks a component and logs `SpiffyMetricsEventName.ChatComponentVisible` when visible.
  *
- * @param component - The component to track.
  * @param element - The element to track visibility of.
- * @param eventProps - Additional properties to include with the event.
- * @param eventName - The Amplitude event name to track (defaults to ChatComponentVisible).
+ * @param eventProps - Properties to include with the event.
+ * @param rootMargin - Root margin for the intersection observer (defaults to 0px).
+ * @param enabled - Whether tracking is enabled (defaults to true).
  */
 export const useTrackComponentVisibleEvent = (
-  component: SpiffyWidgets,
   element: RefObject<HTMLElement>,
   eventProps?: Record<string, unknown>,
-  eventName: SpiffyMetricsEventName = SpiffyMetricsEventName.ChatComponentVisible,
-) => {
-  const isVisible = useIntersection(element, '0px');
+  rootMargin: string = '0px',
+  enabled: boolean = true,
+): { isVisible: boolean } => {
+  const isVisible = useIntersection(element, rootMargin);
   const hasTrackedEvent = useRef(false);
   const { trackEvent } = useAmplitude();
-
-  const componentProps = (() => {
-    if (eventName === SpiffyMetricsEventName.ChatComponentVisible) {
-      return {
-        chat_component: component,
-        ...eventProps,
-      };
-    }
-    if (eventName === SpiffyMetricsEventName.SearchComponentVisible) {
-      return {
-        search_component: component,
-        ...eventProps,
-      };
-    }
-    // Default case for other event types
-    return {
-      component,
-      ...eventProps,
-    };
-  })();
+  const variantInfo = useAtomValue(pageVariantInfoAtom);
 
   useEffect(() => {
-    if (isVisible && !hasTrackedEvent.current) {
+    if (!enabled || hasTrackedEvent.current) {
+      return;
+    }
+    if (isVisible) {
+      trackEvent({
+        eventName: SpiffyMetricsEventName.ChatComponentVisible,
+        eventProps,
+      });
       trackEvent({
-        eventName,
-        eventProps: componentProps,
+        eventName: EnviveMetricsEventName.WidgetRendered,
+        eventProps: {
+          ...eventProps,
+          trigger: {
+            widget: eventProps?.widget_type,
+          },
+          context: variantInfo ? extractPageContext(variantInfo as PageVariantInfo) : null,
+        },
       });
       hasTrackedEvent.current = true;
     }
-  }, [isVisible, component, eventProps, eventName, componentProps, trackEvent]);
+  }, [enabled, isVisible, eventProps, trackEvent]);
+  return { isVisible };
 };

package/src/hooks/WidgetInteraction/types.ts

@@ -5,11 +5,12 @@ export interface WidgetInteractionContext {
   page_id: string;
 }
 
-interface WidgetInteractionTrigger {
+export interface WidgetInteractionTrigger {
   interaction_id?: string;
   widget: WidgetInteractionComponent;
   widget_interaction: WidgetInteractionType;
   widget_interaction_data?: WidgetInteractionData | null;
+  interaction_class?: InteractionClass;
 }
 
 export interface InternalWidgetInteraction {
@@ -61,8 +62,35 @@ 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 {
+  PASSIVE = 'passive', // No user commitment — hover, scroll, visibility triggers
+  NAVIGATIONAL = 'navigational', // Opens/closes something — often a side effect of intent
+  INTENTIONAL = 'intentional', // Deliberate user action — clicks, submits, typed queries
+}
+
+export const INTERACTION_TYPE_CLASS: Record<WidgetInteractionType, InteractionClass> = {
+  [WidgetInteractionType.QUERY_INPUT_CLICKED]: InteractionClass.INTENTIONAL,
+  [WidgetInteractionType.SUGGESTION_CLICKED]: InteractionClass.INTENTIONAL,
+  [WidgetInteractionType.WIDGET_CLICKED]: InteractionClass.INTENTIONAL,
+  [WidgetInteractionType.WIDGET_HOVERED]: InteractionClass.PASSIVE,
+  [WidgetInteractionType.WIDGET_EXPANDED]: InteractionClass.NAVIGATIONAL,
+  [WidgetInteractionType.WIDGET_COLLAPSED]: InteractionClass.NAVIGATIONAL,
+  [WidgetInteractionType.SUGGESTION_SCROLLED]: InteractionClass.PASSIVE,
+  [WidgetInteractionType.LINK_CLICKED]: InteractionClass.INTENTIONAL,
+  [WidgetInteractionType.PRODUCT_CARD_CLICKED]: InteractionClass.INTENTIONAL,
+  [WidgetInteractionType.TEXT_LINK_CLICKED]: InteractionClass.INTENTIONAL,
+  [WidgetInteractionType.ARTICLE_LINK_CLICKED]: InteractionClass.INTENTIONAL,
+  [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 = {
   url: string;
 };
@@ -127,6 +155,10 @@ export type MessageSubmitted = {
   message_submitted: Request;
 };
 
+export type VoiceTranscription = {
+  transcription: string;
+};
+
 export type WidgetInteractionData =
   | SuggestionScrolled
   | SuggestionClicked
@@ -137,4 +169,5 @@ export type WidgetInteractionData =
   | ArticleLinkClicked
   | ProductCardClicked
   | ReviewCardClicked
-  | MessageSubmitted;
+  | MessageSubmitted
+  | VoiceTranscription;

package/src/hooks/WidgetInteraction/useWidgetInteraction.ts

@@ -3,7 +3,7 @@ import { pageVariantInfoAtom } from 'src/atoms/app';
 import { useAmplitude } from 'src/contexts/amplitudeContext';
 import { PageVariantInfo } from 'src/contexts/pageContext/types';
 import { v4 as uuid } from 'uuid';
-import { InternalWidgetInteraction, WidgetInteraction } from './types';
+import { INTERACTION_TYPE_CLASS, InternalWidgetInteraction, WidgetInteraction } from './types';
 import { extractPageContext } from './utils';
 
 const getInteractionId = () => uuid();
@@ -16,6 +16,8 @@ export const useWidgetInteraction = () => {
     if (props.trigger) {
       // eslint-disable-next-line no-param-reassign
       props.trigger.interaction_id = props.trigger.interaction_id || getInteractionId();
+      props.trigger.interaction_class =
+        props.trigger.interaction_class || INTERACTION_TYPE_CLASS[props.trigger.widget_interaction];
     }
 
     const eventProps = {

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

@@ -85,10 +85,12 @@ describe('AmplitudeService', () => {
     });
   });
 
+  const validApiKey = 'abcdef1234567890abcdef1234567890';
+
   const createService = (overrides?: Partial<AmplitudeServiceConfig>) => {
     return new AmplitudeService({
       userId: 'test-user-id',
-      amplitudeApiKey: 'test-api-key',
+      amplitudeApiKey: validApiKey,
       dataResidency: 'US',
       env: 'test',
       orgId: 'test-org-id',
@@ -107,7 +109,7 @@ describe('AmplitudeService', () => {
       createService();
 
       expect(mockInit).toHaveBeenCalledWith(
-        'test-api-key',
+        validApiKey,
         'test-user-id',
         expect.objectContaining({
           serverZone: 'US',
@@ -121,7 +123,7 @@ describe('AmplitudeService', () => {
     it('should not be ready if userId is missing', () => {
       const service = new AmplitudeService({
         userId: '',
-        amplitudeApiKey: 'test-api-key',
+        amplitudeApiKey: validApiKey,
         dataResidency: 'US',
         env: 'test',
         orgId: 'test-org-id',
@@ -157,7 +159,7 @@ describe('AmplitudeService', () => {
     it('should not be ready if featureFlagService is missing', () => {
       const service = new AmplitudeService({
         userId: 'test-user-id',
-        amplitudeApiKey: 'test-api-key',
+        amplitudeApiKey: validApiKey,
         dataResidency: 'US',
         env: 'test',
         orgId: 'test-org-id',
@@ -269,7 +271,7 @@ describe('AmplitudeService', () => {
     it('should not track if client is not initialized', async () => {
       const service = new AmplitudeService({
         userId: '',
-        amplitudeApiKey: 'test-api-key',
+        amplitudeApiKey: validApiKey,
         dataResidency: 'US',
         env: 'test',
         orgId: 'test-org-id',
@@ -419,7 +421,7 @@ describe('AmplitudeService', () => {
     it('should fall back to window.localStorage when getLocalStorageItem is not provided', async () => {
       const service = new AmplitudeService({
         userId: 'test-user-id',
-        amplitudeApiKey: 'test-api-key',
+        amplitudeApiKey: validApiKey,
         dataResidency: 'US',
         env: 'test',
         orgId: 'test-org-id',
@@ -597,6 +599,67 @@ describe('AmplitudeService', () => {
     });
   });
 
+  describe('isMockApiKey', () => {
+    it('should return true when amplitudeApiKey is "mock-amplitude-key"', () => {
+      const service = createService({ amplitudeApiKey: 'mock-amplitude-key' });
+
+      expect(service.isMockApiKey).toBe(true);
+    });
+
+    it('should return false for a real API key', () => {
+      const service = createService();
+
+      expect(service.isMockApiKey).toBe(false);
+    });
+  });
+
+  describe('Mock API key behavior', () => {
+    it('should not initialize the Amplitude client when using mock API key', () => {
+      createService({ amplitudeApiKey: 'mock-amplitude-key' });
+
+      expect(mockInit).not.toHaveBeenCalled();
+      expect(mockAdd).not.toHaveBeenCalled();
+    });
+
+    it('should log a warning when mock API key is detected during initialization', () => {
+      const logWarnSpy = vi.spyOn(Logger.prototype, 'logWarn');
+
+      createService({ amplitudeApiKey: 'mock-amplitude-key' });
+
+      expect(logWarnSpy).toHaveBeenCalledWith(
+        'Mock API key detected — running in mock mode, no events will be sent to Amplitude.',
+        'mock-amplitude-key',
+      );
+    });
+
+    it('should report isReady as false when using mock API key', () => {
+      const service = createService({ amplitudeApiKey: 'mock-amplitude-key' });
+
+      expect(service.isReady).toBe(false);
+    });
+
+    it('should not track events when using mock API key', async () => {
+      const service = createService({ amplitudeApiKey: 'mock-amplitude-key' });
+
+      await service.trackEvent({
+        eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+        eventProps: { message: 'test' },
+      });
+
+      expect(mockTrack).not.toHaveBeenCalled();
+    });
+
+    it('should not call crypto.subtle.digest when using mock API key', async () => {
+      const service = createService({ amplitudeApiKey: 'mock-amplitude-key' });
+
+      await service.trackEvent({
+        eventName: SpiffyMetricsEventName.ChatUserMessageInput,
+      });
+
+      expect(mockDigest).not.toHaveBeenCalled();
+    });
+  });
+
   describe('Session replay initialization', () => {
     it('should disable session replay by default', () => {
       createService();

package/src/services/amplitudeService/amplitudeService.ts

@@ -56,6 +56,10 @@ export class AmplitudeService {
     this.initialize();
   }
 
+  get isMockApiKey(): boolean {
+    return this.config.amplitudeApiKey === 'mock-amplitude-key';
+  }
+
   get isReady(): boolean {
     return Boolean(
       this.config.userId &&
@@ -228,6 +232,14 @@ export class AmplitudeService {
       return;
     }
 
+    if (this.isMockApiKey) {
+      logger.logWarn(
+        'Mock API key detected — running in mock mode, no events will be sent to Amplitude.',
+        this.config.amplitudeApiKey,
+      );
+      return;
+    }
+
     if (!this.amplitudeClient) {
       const currentAmplitudeInstance: BrowserClient = createInstance();
 
@@ -353,6 +365,7 @@ export class AmplitudeService {
     eventGroups,
     alsoSendToGoogleAnalytics = false,
   }: TrackEventParams): Promise<void> {
+    if (this.isMockApiKey) return;
     logger.logDebug('Submitting event', eventName);
     try {
       const decoratedEventName = AmplitudeService.decorateEventName(eventName);

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');
     });
   });