Skip to content

Instantly share code, notes, and snippets.

@iremlopsum

iremlopsum/Front-end-events.md

Created January 15, 2026 14:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iremlopsum/6eba94c518a2eea69ad0e7b0b7e792a0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iremlopsum/6eba94c518a2eea69ad0e7b0b7e792a0 to your computer and use it in GitHub Desktop.
Download ZIP
Welcome file
Raw
Front-end-events.md

Analytics & Event Catalog

This document lists all tracking events emitted in this codebase via:

  • core.firebase.logEvent(name, params) – primary event name and payload.

  • trackEvent({ ... }) from context/tracking-context.tsx – Miros tracking payload that is ultimately sent via sendEventData.

For each interaction we list:

  • Event name (firebase), if present

  • Tracking payload (trackEvent) – key fields only

  • When it is sent

  • Key params / meta fields

Common tracking schema (from context/tracking-context.tsx):

  • Tracking base fields: customer_id, integration_id, session_id, page_id, device_id, widget, source, action, user_agent, user_time, meta, external_user_id.

  • Actions enum: CLICK, SCROLL, VIEW, TYPE, NAVIGATE, CHECKED, UNCHECKED, ERROR, CLOSE, CHECKOUT, LOAD_MORE, QUERIED, ADD_TO_CART, LOAD, CREATED.

1. Container / Root app events

1.1 LoadApp (container boot)

File: packages/container/src/components/LoadApp/LoadApp.tsx

  • container-load

  • When: Once per 24h per session, after integration is loaded.

  • firebase params:

  • customer_id, integration_id, session_id

  • meta.url – current page URL

  • trackEvent:

  • source: 'root', action: Actions.LOAD

  • customer_id, integration_id, session_id, meta.url

1.2 Entry mounting & inline visibility test

File: packages/container/src/Entrypoint.tsx

  • inline-recommendations-visibility-test-variant

  • When: Inline widget visibility A/B test is active and the variant hides the inline widget.

  • firebase params:

  • widget: 'container', source: 'entrypoint', action: Actions.VIEW

  • meta.description: 'Inline widget is hidden'

  • trackEvent:

  • widget: 'container', source: 'entrypoint', action: Actions.VIEW

  • meta.description: 'Inline widget is hidden'

1.3 External cart tracking bridge

File: packages/container/src/hooks/useTrackCartEvents.ts

  • external-add-item-to-cart

  • When: window dispatches ExternalAddItemToCart with item info.

  • firebase params:

  • integration_id, customer_id

  • meta – spread of event.detail (alias, price, quantity, currency?)

  • trackEvent:

  • source: 'external', action: Actions.ADD_TO_CART

  • integration_id, customer_id

  • meta – same detail payload.

  • external-checkout

  • When: window dispatches Checkout with an array of items.

  • firebase params:

  • integration_id, customer_id

  • meta – summary: total, average, quantity, currency

  • trackEvent:

  • source: 'external', action: Actions.CHECKOUT

  • meta – { items: event.detail, ...summary }.

1.4 Experiments / UX tests

PLP search test (usePLPSearchTest)

File: packages/container/src/ux-tests/plp-search-test/usePLPSearchTest.ts

  • focus_plp_search_test

  • When: PLP test textarea receives focus.

  • firebase params: {}

  • click_plp_search_test

  • When: Test button is clicked to trigger AI search.

  • firebase params:

  • action: Actions.CLICK (enum value)

  • meta_action: 'click_plp_search_test'

  • meta_search_input – value mirrored from textarea (via attribute set).

  • trackEvent:

  • source: 'mirosPLPSearchTest', action: Actions.CLICK

  • Hardcoded integration_id

  • meta.action: 'click_plp_search_test', meta.search_input – current NLP input.

PLP modal (usePLPModal)

File: packages/container/src/ux-tests/plp-modal/usePLPModal.ts

  • mirosPLPModal

  • When: User lands on PDP from Google and PLP modal logic runs; sets data-miros-nlp on ws-bubble.

  • firebase params:

  • action: 'show_plp_modal'

  • h1_text – text content of page <h1>.

  • trackEvent:

  • source: 'mirosPLPModal', action: Actions.LOAD

  • Test integration_id

  • meta.action: 'show_plp_modal', meta.h1_text.

PDP store scroll test (usePDPStoreTest)

File: packages/container/src/ux-tests/pdp-store-test/usePDPStoreTest.ts

  • miros-on-pdp-drawer-triggered

  • When: User scrolls >500px and below-image entry button is auto-clicked once.

  • firebase params:

  • action: 'trigger_miros_on_pdp_drawer'

  • trackEvent:

  • source: 'mirosOnPDPDrawer', action: Actions.LOAD

  • Test integration_id.

PDP store product drawer (generic)

File: packages/container/src/pdp-store-test/components/ProductDrawer.tsx

  • pdp-store-test-drawer-mounted

  • When: Drawer component mounts.

  • firebase params:

  • action: 'drawer-mounted'

  • products_count, initially_expanded, use_miros_search, is_mobile.

  • trackEvent:

  • source: 'pdp-store-test', action: Actions.LOAD

  • Same meta fields.

  • pdp-store-test-drawer-closed

  • When: Drawer is closed via close control.

  • firebase params:

  • action: 'close-drawer'

  • previous_state, products_viewed, time_spent_ms.

  • trackEvent: source: 'pdp-store-test', action: Actions.CLOSE, same meta.

  • pdp-store-test-drawer-toggled

  • When: User toggles drawer pill between minimal/mid/full.

  • firebase params:

  • action: 'toggle-drawer'

  • previous_state, next_state, interaction_type: 'manual'.

  • trackEvent: source: 'pdp-store-test', action: Actions.CLICK, same meta.

  • pdp-store-test-drawer-infinite-scroll-trigger

  • When: Infinite-scroll sentinel hits viewport and more products are loaded.

  • firebase params:

  • action: 'infinite-scroll-trigger'

  • drawer_state, current_products_count, batch_number, products_per_load.

  • trackEvent: source: 'pdp-store-test', action: Actions.SCROLL, same meta.

  • pdp-store-test-drawer-expand-scroll-below-fold

  • When: Drawer auto-expands from minimal→mid when user scrolls below the fold.

  • firebase params:

  • action: 'drawer-expand-scroll'

  • previous_state: 'minimal', next_state: 'mid'

  • scroll_position, window_height, trigger: 'below-fold', engagement_phase: 'initial'.

  • trackEvent: same meta, source: 'pdp-store-test', action: Actions.SCROLL.

  • pdp-store-test-drawer-expand-scroll-near-bottom

  • When: Drawer auto-expands mid→full near page bottom.

  • firebase params:

  • Similar to above but with trigger: 'near-bottom', engagement_phase: 'deep', document_height.

  • trackEvent: same meta.

PDP store product drawer (Fashiola variant)

File: packages/container/src/pdp-store-test-fashiola/components/ProductDrawer.tsx

Events mirror the generic PDP drawer but with a different integration id and simplified state (open/closed):

  • pdp-store-test-drawer-mounted

  • pdp-store-test-drawer-closed

  • pdp-store-test-drawer-infinite-scroll-trigger

  • pdp-store-test-miros-search-ready – when the Miros search container is ready inside the drawer.

  • pdp-store-test-drawer-state-view – when the drawer is open.

Each logs detailed meta: drawer state, counts, flags (use_miros_search, cold_start, search_mode), and is mirrored with trackEvent from source: 'pdp-store-test'.

Spotlight tour (useSpotlightTour)

File: packages/container/src/ux-tests/spotlight-tour/useSpotlightTour.ts

  • mirosSpotlightTour / spotlight-test-next / spotlight-test-prev / spotlight-test-closed

  • When: Joyride callbacks fire; name depends on action.

  • firebase params:

  • action: 'spotlight_tour_user_interaction'

  • step_index, step_status, step_action.

  • trackEvent:

  • source: 'mirosSpotlightTour', action: Actions.CLICK

  • Test integration_id

  • Meta mirrors the firebase payload.

  • spotlight-test-clicked-try

  • When: "Try it out" button is clicked in spotlight tour and target element is triggered.

  • firebase params:

  • action: 'click_try_it_out', target_class – CSS selector.

  • trackEvent:

  • source: 'mirosSpotlightTour', action: Actions.CLICK, test integration_id

  • Meta: same action and target_class.

Lightbox tests (LightboxTest, LightboxTestFashiola)

Files:

  • packages/container/src/lightbox-test/LightboxTest.tsx

  • packages/container/src/lightbox-test/LightboxTestFashiola.tsx

Events (both variants share the same shapes; Fashiola uses different brand copy):

  • lightbox-test-loaded

  • When: Lightbox component mounts.

  • firebase params: action: Actions.LOAD

  • trackEvent: source: 'lightbox-test', action: Actions.LOAD, test integration_id, meta.action.

  • lightbox-test-prev / lightbox-test-next

  • When: User navigates between onboarding slides.

  • firebase params: currentStep

  • trackEvent: source: 'lightbox-test', action: Actions.CLICK, meta.action and currentStep.

  • lightbox-test-get-started

  • When: User clicks primary CTA to launch Wordless Search from the lightbox.

  • firebase params: currentStep

  • trackEvent: source: 'lightbox-test', action: Actions.CLICK, meta.action and currentStep.

  • lightbox-test-closed

  • When: User closes the lightbox (via close button or Escape key).

  • firebase params: currentStep

  • trackEvent: source: 'lightbox-test', action: Actions.CLOSE, meta.action, integration_id, currentStep.

Fashiola AI chat bubble (TestEntryPoint)

File: packages/container/src/TestEntryPoint.tsx

  • fashiola_test_entrypoint_click

  • When: Custom AI chat bubble component programmatically clicks the .ai-search-bubble entrypoint.

  • firebase params: action: 'fashiola_test_entrypoint_click'.

  • trackEvent: source: 'Fashiola-test-entrypoint', action: Actions.CLICK, meta.action.

2. Wordless Search widget events

2.1 App boot & error

File: packages/widgets/wordless-search/src/App.tsx

  • wordless-search-loaded

  • When: Wordless Search widget mounts.

  • firebase params:

  • customer_id, integration_id, page_id, device_id, session_id, external_user_id

  • page_title, page_path.

  • wordless-search-error (URQL error handler)

  • When: GraphQL operations error in the widget client.

  • firebase params:

  • error – the failing operation

  • url – current page URL.

  • Also: error details are sent via sendEventData(createErrorData(...)) with action: Actions.ERROR, source: 'app', meta.error, meta.url, plus device and UA.

2.2 Entry point interactions

File: packages/widgets/wordless-search/src/pages/EntryPoint.tsx

  • entry-point-loaded-${entryPointName}

  • When: EntryPoint component mounts.

  • firebase params:

  • item (alias/attribute), mounting_id, entry_point_name, widget_configuration.

  • entrypoint-click-${entryPointName}

  • When: User clicks the entrypoint button.

  • firebase params:

  • mounting_id, alias, entry_point_name.

  • trackEvent:

  • source: 'entryButton', action: Actions.CLICK

  • session_id (new UUID), meta.name (entryPointName), meta.alias and optional meta.parent element id.

  • wordless-search-auto-open-ws

  • When: Auto-open logic opens Wordless Search once per page, based on open_ws attribute.

  • firebase params:

  • mounting_id, alias, entry_point_name, session_id.

  • trackEvent:

  • source: 'entryButton', action: Actions.CLICK

  • session_id and meta { name, alias, source: 'auto_open_ws' }.

2.3 Drawer open/close & error boundary

File: packages/widgets/wordless-search/src/pages/ResultsOverlay.tsx

  • wordless-search-drawer-closed

  • When: Drawer closes via default close action or ErrorBoundary back.

  • firebase params: {}

  • trackEvent:

  • On standard close: source: 'drawer', action: Actions.CLOSE.

  • On ErrorBoundary back: source: 'errorBoundaryBack', action: Actions.CLICK.

  • wordless-search-error

  • When: ErrorBoundary catches an error.

  • firebase params: { error }.

  • trackEvent: source: 'errorBoundary', action: Actions.ERROR, meta.error.

2.4 Search header, filters & submit

Files:

  • context/search-header/reducer.tsx

  • context/search-header/search-header-context.tsx

  • components/Header/NLPSearch.tsx

  • components/Header/FiltersDialog.tsx

  • components/FiltersTab/SizeFilters.tsx

  • components/FiltersTab/StyleFilters.tsx

  • components/Header/SearchDialogButton.tsx

  • components/Header/ActiveFilters.tsx

Debug reducer events

  • wordless-search-reducer

  • Where: Both search-header and recommendations reducers.

  • When: Any reducer action is processed.

  • firebase params:

  • action: action.type

  • state – full reducer state snapshot.

  • Purpose: Internal debugging / telemetry of state transitions.

Find recommendations & suggestions

File: context/search-header/search-header-context.tsx

  • wordless-search-find-recommendations

  • When: findRecommendations is called from header (e.g. user submits search or filters lead to recommendations).

  • firebase params:

  • searchInput – normalized search text

  • styleFilters – comma-joined

  • sizes – comma-joined.

  • wordless-search-find-suggestions

  • When: findSuggestions is used instead of recommendations.

  • firebase params: same fields as above.

  • wordless-search-submit-search-use-suggestions / wordless-search-submit-search-use-recommendations

  • When: User submits in NLPSearch and the system routes query to suggestions or recommendations.

  • firebase params: searchInput, styleFilters, sizes.

  • wordless-search-suggestion-clicked

  • File: search-header-context.tsx (on suggestion click).

  • When: User clicks a suggestion.

  • firebase params: suggestion: suggestion.name.

Filters dialog open/close and actions

File: components/Header/FiltersDialog.tsx

  • wordless-search-filters-search-clicked

  • When: Primary "Search" button in filters dialog is clicked.

  • firebase params:

  • meta.action: 'wordless-search-filters-search-clicked'

  • meta.style – array of staged style filters

  • meta.sizes – array of staged sizes.

  • trackEvent: source: 'filtersSearchButton', action: Actions.CLICK, same meta.

  • wordless-search-filters-clear-clicked (dialog)

  • When: Secondary "Clear" button in filters dialog is clicked.

  • firebase params: meta.action, meta.style, meta.sizes from current active filters.

  • trackEvent: source: 'filtersClearButton', action: Actions.CLICK, same meta.

  • wordless-search-filters-dialog-closed

  • When: Filters dialog closes via backdrop/keyboard.

  • firebase params:

  • meta.action: 'wordless-search-filters-dialog-closed'

  • meta.type: 'keypress'.

  • trackEvent: source: 'filters', action: Actions.CLOSE, meta.type.

File: components/Header/NLPSearch.tsx

  • wordless-search-filters-close-clicked (NLPSearch back button)

  • When: User closes filters dialog via back chevron in NLPSearch.

  • firebase params: meta.action only.

  • trackEvent: source: 'filtersCloseButton', action: Actions.CLICK.

  • wordless-search-filters-clear-clicked (NLPSearch clear button)

  • When: NLP search clear button clicked.

  • firebase params: meta.action.

  • trackEvent: source: 'filtersNLPClearButton', action: Actions.CLICK.

  • wordless-search-filters-input-submitted

  • When: User presses Enter in NLPSearch input.

  • firebase params:

  • meta.action: 'wordless-search-filters-input-submitted'

  • meta.value – input value.

  • trackEvent: source: 'filtersInput', action: Actions.TYPE, meta.key: 'Enter', meta.value.

File: components/Header/FiltersDialog.tsx & components/Header/ChatLikeHeader/ChatLikeHeader.tsx & components/Header/SearchDialogButton.tsx

  • wordless-search-filters-close-clicked (header close buttons)

  • When: Drawer close button in standard header or chat-like header is clicked and no exit feedback is shown.

  • firebase params: meta.action.

  • trackEvent:

  • Header close: source: 'headerCloseButton', action: Actions.CLICK.

File: components/Header/SearchDialogButton.tsx

Header active filter badge interactions:

  • wordless-search-filters-style-removed

  • When: Removing a style filter badge from the header.

  • firebase params:

  • meta.action, meta.filter.

  • trackEvent:

  • source: 'headerActiveFilterRemove', action: Actions.CLICK

  • meta.search / meta.filter_type: 'style'.

  • wordless-search-filters-search-removed

  • When: Removing a single search term badge.

  • firebase params:

  • meta.action, meta.search.

  • trackEvent: source: 'headerActiveFilterRemove', action: Actions.CLICK, meta with filter_type: 'search'.

  • wordless-search-filters-joined-search-removed

  • When: Clearing a joined search string badge.

  • firebase params: meta.action, meta.search (full string).

  • trackEvent: source: 'headerActiveFilterRemove', action: Actions.CLICK, filter_type: 'search'.

  • wordless-search-filters-style-edited (header badges)

  • When: Clicking a style badge in the header to edit.

  • firebase params: meta.action, meta.filter, meta.filter_type: 'style'.

  • trackEvent: source: 'headerActiveFilter', action: Actions.CLICK, meta with filter_type.

  • wordless-search-filters-search-edited (search term badges)

  • When: Clicking a search term badge in header.

  • firebase params: meta.action, meta.search.

  • trackEvent: source: 'headerActiveFilter', action: Actions.CLICK, meta.search, filter_type: 'search'.

  • wordless-search-filters-size-removed / wordless-search-filters-size-edited

  • When: Removing or editing size badges in header.

  • firebase params: meta.action, meta.size.

  • trackEvent: source: 'headerActiveFilterRemove' or source: 'headerActiveFilter', action: Actions.CLICK, meta.size, filter_type: 'size'.

  • wordless-search-filters-search-dialog-button-clicked

  • When: Small filters dialog button (icon button) is clicked.

  • firebase params: meta.action.

  • trackEvent: source: 'headerSearchDialogButton', action: Actions.CLICK.

Search button clicks (when no active filters):

  • wordless-search-filters-search-button-clicked

  • File: SearchDialogButton.tsx

  • When: Main header search button is clicked to open filters.

  • firebase params: meta.action.

  • trackEvent: source: 'headerSearchButton', action: Actions.CLICK.

Size & style option clicks

File: components/FiltersTab/SizeFilters.tsx

  • wordless-search-filters-size-clicked

  • When: User toggles a size filter chip.

  • firebase params:

  • meta.action: 'wordless-search-filters-size-clicked'

  • meta.size

  • meta.type: 'added' | 'removed'.

  • trackEvent:

  • source: 'filtersSize', action: Actions.CLICK, same meta.size & type.

File: components/FiltersTab/StyleFilters.tsx

  • wordless-search-filters-style-clicked

  • When: User toggles an NLP style keyword chip.

  • firebase params:

  • meta.action

  • meta.value – style keyword

  • meta.type: 'added' | 'removed'.

  • trackEvent:

  • source: 'filtersNLP', action: Actions.CLICK, same meta.

File: components/Header/ActiveFilters.tsx

  • wordless-search-filters-size-removed (inside dialog context)

  • When: Removing a staged size filter from ActiveSizes inside filters dialog.

  • firebase params: meta.action, meta.size.

  • trackEvent: source: 'filtersRemoveButton', action: Actions.CLICK, meta.filter, filter_type: 'size'.

  • wordless-search-filters-style-removed / wordless-search-filters-style-edited (dialog badges)

  • When: Removing or editing staged style filters from dialog.

  • firebase params: meta.action, meta.filter, filter_type: 'style'.

  • trackEvent: source: 'filtersRemoveButton' or source: 'filtersNLPEdit', action: Actions.CLICK.

2.5 Recommendations data & list

File: hooks/useRecommendationsData.ts

  • wordless-search-recommendations-queried

  • When: Recommendations GraphQL query returns and operation.key is present.

  • firebase params:

  • meta.action: 'wordless-search-recommendations-queried'

  • meta.query: operation.variables

  • meta.recommendations: [id...] array.

  • trackEvent:

  • source: 'recommendations', action: Actions.QUERIED

  • meta.query and meta.recommendations.

File: context/recommendations-context/recommendations-context.tsx (popstate navigation)

  • wordless-search-recommendations-navigation-clicked

  • When: User presses back while drawer is open and navigation is enabled.

  • firebase params:

  • meta.action: 'wordless-search-recommendations-navigation-clicked'

  • meta.type: event.type.

  • trackEvent:

  • source: 'recommendations', action: Actions.NAVIGATE | Actions.CLOSE

  • meta.type depending on whether there is history.

File: components/Recommendations/List.tsx

  • wordless-search-list-scrolled

  • When: Scroll end is detected on the list (debounced).

  • firebase params (meta):

  • start, end scroll positions

  • type: 'scrollend'

  • scroll_start_time, scroll_end_time

  • scrolled_to_end, scrolled_to_start

  • viewport_items – items visible in viewport.

  • trackEvent:

  • source: 'suggestions' | 'recommendations'

  • action: Actions.SCROLL

  • Same scroll meta.

  • wordless-search-list-item-clicked

  • When: User clicks either a suggestion or recommendation card.

  • firebase params (meta):

  • item_id, engine, rank (1-based), click_position.

  • trackEvent:

  • source: 'suggestionItem' | 'recommendationItem'

  • action: Actions.CLICK

  • Same meta.

2.6 Selected item, zoom & history

Files:

  • components/Selected/ZoomInButton.tsx

  • components/Selected/SelectedCard.tsx

  • components/Selected/DynamicCard.tsx

  • components/Selected/SelectedItem.tsx

  • components/History.tsx

  • widgets/util/detail-action.tsx

Detail & context menu

File: widgets/util/detail-action.tsx

  • detail-action-clicked

  • When: Primary "view details" button is clicked or tapped.

  • firebase params:

  • meta.action: 'detail-action-clicked'

  • meta.item_id (if present)

  • meta.type – event.type (click, touchend, etc.).

  • trackEvent:

  • source: 'selectedItemDetails'

  • action: Actions.CLICK

  • meta.item_id, meta.type.

  • detail-action-context-menu-clicked

  • When: Context menu (right-click) on detail link.

  • firebase params:

  • meta.action, meta.item_id, meta.type.

  • trackEvent:

  • source: 'selectedItemDetails', action: Actions.VIEW, meta.item_id, type.

Selected item close & cart

Files: SelectedCard.tsx, DynamicCard.tsx

  • wordless-search-selected-item-close-clicked

  • When: Selected item close button clicked (large/compact preview).

  • firebase params:

  • meta.action

  • meta.minimized – whether the card was scrolled/minimized.

  • trackEvent:

  • source: 'selectedItemClose', action: Actions.CLICK, same meta.

  • wordless-search-selected-item-shopping-cart-clicked

  • When: Cart action button on selected item is clicked (both static and dynamic cards).

  • firebase params:

  • meta.action

  • meta.item_id

  • meta.variation: 'largeCard'

  • meta.url – cart/url path

  • meta.type – DOM event type.

  • trackEvent:

  • source: 'selectedItemShoppingCart'

  • action: Actions.CLICK or Actions.ADD_TO_CART depending on whether already in cart

  • Same meta.

  • wordless-search-selected-item-select-size-clicked

  • When: User cancels size-selection dialog in cart flow.

  • firebase params: meta.action.

  • trackEvent: source: 'selectedItemSelectSize', action: Actions.CLICK.

  • wordless-search-selected-item-image-zoom-clicked

  • File: ZoomInButton.tsx

  • When: Zoom icon on selected image is clicked.

  • firebase params: meta.action.

  • trackEvent: source: 'selectedItemImageZoom', action: Actions.CLICK.

  • wordless-search-selected-item-image-clicked

  • File: SelectedItem.tsx (DynamicCard image click in scroll-mode).

  • When: User taps selected item image in scroll-enabled layouts.

  • firebase params:

  • meta.action

  • meta.list_scrolled – boolean.

  • trackEvent: source: 'selectedItemImage', action: Actions.CLICK, same meta; toggles scrolled state.

  • List scroll hiding selected item – scroll effect itself is logged as wordless-search-list-scrolled (see above), not a separate event here.

History bar

File: components/History.tsx

  • wordless-search-history-navigate-button-clicked

  • When: Back/scroll button on history bar is clicked.

  • firebase params:

  • meta.action

  • meta.history_item – id of target item.

  • trackEvent: source: 'historyNavigateButton', action: Actions.CLICK, same meta.

  • wordless-search-history-cart-button-clicked

  • When: History cart button is clicked.

  • firebase params:

  • meta.action

  • meta.cart_items – list of alias ids from SHOPPING_CART.

  • trackEvent: source: 'historyCartButton', action: Actions.CLICK, same meta.

  • wordless-search-history-image-clicked

  • When: User clicks a history thumbnail image.

  • firebase params:

  • meta.action

  • meta.history_item – selected item id.

  • trackEvent: source: 'historyImage', action: Actions.CLICK, meta includes navigate flag if navigation occurs.

2.7 Onboarding title & tooltip

Files:

  • components/OnboardingTitle/OnboardingTitle.tsx

  • components/Tooltip/OnboardingTooltip.tsx

  • wordless-search-onboarding-card-viewed

  • When: Onboarding title card first renders for a non-onboarded user.

  • firebase params: meta.action only.

  • trackEvent: source: 'onboardingCard', action: Actions.VIEW.

  • wordless-search-onboarding-tooltip-viewed

  • When: Onboarding tooltip appears (default and layout-split variants).

  • firebase params: meta.action.

  • trackEvent: source: 'onboardingTooltip', action: Actions.VIEW.

  • wordless-search-onboarding-tooltip-closed

  • When: Tooltip is closed either by clicking the tooltip or its close button.

  • firebase params:

  • meta.action

  • meta.type: 'tooltip' | 'button'.

  • trackEvent:

  • source: 'onboardingTooltip', action: Actions.CLICK, meta.type.

2.8 Feedback modals (rating, exit, thank you)

Files:

  • components/Feedback/FeedbackRatingModal.tsx

  • components/Feedback/ExitFeedbackModal.tsx

  • components/Feedback/ThankTextOnlyModal.tsx

Rating modal

  • wordless-search-feedback-rating-modal-closed

  • When: Rating modal disappears without user selecting a rating.

  • firebase params: meta.action.

  • trackEvent: source: 'feedbackRatingModal', action: Actions.CLOSE.

  • wordless-search-feedback-rating-modal-clicked

  • When: User clicks one of the rating icons.

  • firebase params: meta.action, meta.rating: 'VERY_NEGATIVE' | ....

  • trackEvent: source: 'feedbackRatingModal', action: Actions.CLICK, meta.rating.

Exit feedback modal

  • wordless-search-feedback-modal-viewed

  • When: Exit feedback modal opens.

  • firebase params: meta.action.

  • trackEvent: source: 'feedbackExitModal', action: Actions.VIEW.

  • wordless-search-feedback-modal-closed

  • When: Exit feedback modal closes via:

  • Countdown timeout

  • Accessibility close

  • Skip button.

  • firebase params:

  • meta.action

  • meta.type: 'timeout' | 'a11y' | 'skip'.

  • trackEvent:

  • source: 'feedbackExitModal', action: Actions.CLOSE, meta.type (for timeout/a11y in onClose)

  • source: 'feedbackExitModalSkip', action: Actions.CLICK for the skip button.

  • wordless-search-feedback-modal-submitted

  • When: User submits a feedback reason.

  • firebase params:

  • meta.action

  • meta.reason – selected FeedbackOptions key.

  • trackEvent: source: 'feedbackExitModal', action: Actions.CHECKED, meta.reason.

  • wordless-search-feedback-other-link-clicked

  • When: User clicks the "Other" external feedback link.

  • firebase params: meta.action.

  • trackEvent: source: 'feedbackOtherLink', action: Actions.CLICK.

Thank-you text-only modal

File: ThankTextOnlyModal.tsx

  • wordless-search-feedback-thank-text-only-modal-closed

  • When: Thank-you toast closes either via close button or when progress bar completes.

  • firebase params: meta.action.

  • trackEvent:

  • source: 'feedbackThankTextOnlyModal', action: Actions.CLOSE, meta.timeout: boolean.

2.9 Miscellaneous

File: components/Selected/ZoomInButton.tsx

  • Already covered (selected-item-image-zoom-clicked).

File: context/recommendations-context/reducer.tsx & search-header/reducer.tsx

  • Debug wordless-search-reducer events; see §2.4.

3. Search widget (discovery bar) events

3.1 Entry button & dropdown

Files:

  • components/Modal/ModalEntry.tsx

  • pages/DropdownSearch/DropdownSearch.tsx

  • search-entry-button-clicked

  • When: Modal entry button is clicked.

  • firebase params: meta.action, plus spread of attribute data (e.g. page attributes).

  • trackEvent: source: 'entryButton', action: Actions.CLICK, meta attributes.

  • dropdown-search-entry-button-clicked

  • When: Dropdown search entry is clicked.

  • firebase params: meta.action, plus attribute data.

  • trackEvent: source: 'entryButton', action: Actions.CLICK, meta attributes.

  • dropdown-search-clear-button-clicked

  • When: Clear button in dropdown search clicked.

  • firebase params: meta.action, meta.query – previous search.

  • trackEvent: source: 'searchClearButton', action: Actions.CLICK, meta.query.

3.2 Search input & clear

File: components/Modal/SearchDialog.tsx (SearchInput)

  • search-input-queried

  • When: User hits Enter in modal search input.

  • firebase params: meta.action, meta.query.

  • trackEvent: source: 'searchInput', action: Actions.QUERIED, meta.query.

  • search-clear-button-clicked

  • When: Modal search clear button clicked.

  • firebase params: meta.action, meta.query (previous query).

  • trackEvent: source: 'searchClearButton', action: Actions.CLICK, meta.query.

  • search-dialog-closed

  • When: Search modal closes.

  • firebase params: meta.action, meta.query.

  • trackEvent: source: 'dialog', action: Actions.CLOSE.

3.3 History & suggestions

File: components/SearchHistory/SearchHistory.tsx

  • search-history-item-clicked

  • When: User clicks a previous search term.

  • firebase params:

  • meta.action

  • meta.historyTerm – term text.

  • trackEvent: source: 'searchHistory', action: Actions.CLICK, meta.historyTerm.

File: components/AutoCompleteSuggestions/AutoCompleteSuggestions.tsx

  • search-suggestion-clicked

  • When: User clicks an autocomplete suggestion.

  • firebase params:

  • meta.action

  • meta.suggestion – suggestion text.

  • trackEvent: source: 'autoCompleteSuggestion', action: Actions.CLICK, meta.suggestion.

3.4 Results, view results & not-found

Files:

  • components/ResultsGrid/ResultItem.tsx

  • components/ViewResultsButton/ViewResultsButton.tsx

  • components/SearchNotFound.tsx

  • search-item-clicked

  • When: User clicks a search result card (image or description).

  • firebase params: meta.action, meta.item_id.

  • trackEvent: source: 'searchItem', action: Actions.CLICK, meta.item_id.

  • search-view-results-button-clicked

  • When: "View all results" button clicked.

  • firebase params: meta.action, meta.query.

  • trackEvent: source: 'viewResultsButton', action: Actions.CLICK, meta.query.

  • search-not-found

  • When: No results are found for current query.

  • firebase params: meta.action, meta.query.

  • trackEvent: source: 'searchNotFound', action: Actions.VIEW, meta.query.

3.5 Dropdown results

File: pages/DropdownSearch/DropdownSearch.tsx

This page wires together the above events (history, results grid, clear button, view results); no additional unique logEvent names beyond those documented above.

4. Inline recommendations widget events

Files:

  • widgets/inline-recommendations/src/hooks/useSuggestionsData.ts

  • widgets/inline-recommendations/src/hooks/useRecommendationsData.ts

  • widgets/inline-recommendations/src/components/ResultItem.tsx

  • widgets/inline-recommendations/src/pages/InlineResults.tsx

4.1 Suggestions & recommendations queries

  • inline-suggestions-queried

  • When: Inline suggestions GraphQL query returns (NLP + suggestions enabled).

  • firebase params (meta):

  • action: 'inline-suggestions-queried'

  • query: suggestionsQuery

  • suggestions: [id...].

  • trackEvent:

  • source: 'suggestions', action: Actions.QUERIED, same meta.

  • inline-recommendations-queried

  • When: Inline recommendations GraphQL query returns.

  • firebase params (meta):

  • action: 'inline-recommendations-queried'

  • query: recommendationsQuery

  • recommendations: [id...].

  • trackEvent:

  • source: 'inlineRecommendations', action: Actions.QUERIED, same meta.

4.2 Card view & clicks

File: components/ResultItem.tsx (inline)

  • inline-recommendations-view

  • When: Inline card enters viewport (first time) if observe is true.

  • firebase params:

  • meta.action

  • meta.item_id, meta.item_name, meta.item_price.

  • trackEvent: source: 'inlineCard', action: Actions.VIEW.

  • inline-recommendations-image-clicked

  • When: User clicks card image.

  • firebase params:

  • meta.action

  • meta.item_id, meta.item_name, meta.item_price.

  • trackEvent: source: 'recommendationImage', action: Actions.CLICK, meta.item_id, meta.url.

4.3 Expand button

File: pages/InlineResults.tsx

  • inline-recommendations-expand-button-clicked

  • When: User clicks "expand" to load/show more items in inline grid.

  • firebase params:

  • meta.action

  • meta.target_items – desired item count for next expansion

  • meta.valid_items – current number of items.

  • trackEvent: action: Actions.CLICK, source: 'expandingButton'.

5. Summary of trackEvent usage (without firebase name)

Some interactions use trackEvent only (no explicit firebase logEvent):

  • All generic tracking via useTracking in context/tracking-context.tsx funnels into sendEventData.

  • Many components (e.g. useTrackCartEvents, suggestions/recommendations hooks, history, feedback, spotlight/lightbox tests) always send a paired trackEvent alongside core.firebase.logEvent using the same semantic source/action/meta described above.

If you need a programmatic schema, the authoritative shapes are:

  • Tracking type & Actions enum in context/tracking-context.tsx.

  • Per-widget source values documented above (entryButton, drawer, recommendations, filtersSize, searchItem, inlineCard, etc.).

This catalog should give you full coverage of named firebase events and their corresponding tracking payloads, grouped by where and why they are emitted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment