Create search result event (#22307)

* Create search result event

* Update Search.tsx

* actually send it

* remove comment

* Apply suggestions from code review

Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com>

* add 'required' to schema

Co-authored-by: Peter Bengtsson <mail@peterbe.com>
Co-authored-by: Peter Bengtsson <peterbe@github.com>

Author: 3 people

components/Search.tsx

@@ -88,7 +88,7 @@ export function Search({
       case 'Enter':
         // look for a link in the given hit, then visit it
         if (results === null || activeHit === 0 || !results.length) break
-        window.location.href = results[activeHit - 1]?.url
+        onGotoResult(results[activeHit - 1]?.url, activeHit)
         break
     }
   }
@@ -159,6 +159,20 @@ export function Search({
     evt.preventDefault()
   }
 
+  function onGotoResult(url: string, index: number) {
+    if (results) {
+      sendEvent({
+        type: EventType.searchResult,
+        search_result_query: Array.isArray(query) ? query[0] : query,
+        search_result_index: index,
+        search_result_total: results.length,
+        search_result_rank: (results.length - index) / results.length,
+        search_result_url: url,
+      })
+    }
+    document.location.href = url
+  }
+
   const SearchResults = (
     <>
       <div
@@ -176,6 +190,7 @@ export function Search({
           results={results}
           activeHit={activeHit}
           setActiveHit={setActiveHit}
+          onGotoResult={onGotoResult}
         />
       </div>
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
@@ -244,12 +259,14 @@ function ShowSearchResults({
   results,
   activeHit,
   setActiveHit,
+  onGotoResult,
 }: {
   isOverlay: boolean
   isLoading: boolean
   results: SearchResult[] | null
   activeHit: number
   setActiveHit: (index: number) => void
+  onGotoResult: (url: string, index: number) => void
 }) {
   const { t } = useTranslation('search')
 
@@ -286,7 +303,14 @@ function ShowSearchResults({
               onMouseEnter={() => setActiveHit(index)}
             >
               <div className={cx('py-3 px-3', isActive && 'color-border-secondary')}>
-                <a className="no-underline color-text-primary" href={url}>
+                <a
+                  className="no-underline color-text-primary"
+                  href={url}
+                  onClick={(event) => {
+                    event.preventDefault()
+                    onGotoResult(url, index)
+                  }}
+                >
                   {/* Breadcrumbs in search records don't include the page title. These fields may contain <mark> elements that we need to render */}
                   <div
                     className={'d-block opacity-60 text-small pb-1'}

components/lib/events.ts

@@ -38,6 +38,7 @@ export enum EventType {
   exit = 'exit',
   link = 'link',
   search = 'search',
+  searchResult = 'searchResult',
   navigate = 'navigate',
   survey = 'survey',
   experiment = 'experiment',
@@ -58,6 +59,11 @@ type SendEventProps = {
   link_url?: string
   search_query?: string
   search_context?: string
+  search_result_query?: string
+  search_result_index?: number
+  search_result_total?: number
+  search_result_rank?: number
+  search_result_url?: string
   navigate_label?: string
   survey_token?: string // Honeypot, doesn't exist in schema
   survey_vote?: boolean
@@ -260,7 +266,7 @@ export default function initializeEvents() {
   initPrintEvent()
   // survey event in ./survey.js
   // experiment event in ./experiment.js
-  // search event in ./search.js
+  // search and search_result event in ./search.js
   // redirect event in middleware/record-redirect.js
   // preference event in ./display-tool-specific-content.js
 }

lib/hydro.js

@@ -8,6 +8,7 @@ const SCHEMAS = {
   exit: 'docs.v0.ExitEvent',
   link: 'docs.v0.LinkEvent',
   search: 'docs.v0.SearchEvent',
+  searchResult: 'docs.v0.SearchResultEvent',
   navigate: 'docs.v0.NavigateEvent',
   survey: 'docs.v0.SurveyEvent',
   experiment: 'docs.v0.ExperimentEvent',

lib/schema-event.js

@@ -257,6 +257,48 @@ const searchSchema = {
   },
 }
 
+const searchResultSchema = {
+  type: 'object',
+  additionalProperties: false,
+  required: [
+    'type',
+    'context',
+    'search_result_query',
+    'search_result_index',
+    'search_result_total',
+    'search_result_rank',
+    'search_result_url',
+  ],
+  properties: {
+    context,
+    type: {
+      type: 'string',
+      pattern: '^searchResult$',
+    },
+    search_result_query: {
+      type: 'string',
+      description: 'The query the user searched for.',
+    },
+    search_result_index: {
+      type: 'number',
+      description: 'The order position of the user selected search result.',
+    },
+    search_result_total: {
+      type: 'number',
+      description: 'The total number of search results we returned for the query.',
+    },
+    search_result_rank: {
+      type: 'number',
+      description:
+        'The rank score of the order position of the search result, example: `(total - index) / total`.',
+    },
+    search_result_url: {
+      type: 'string',
+      description: 'The destination url of the search result the user selected.',
+    },
+  },
+}
+
 const navigateSchema = {
   type: 'object',
   additionalProperties: false,
@@ -425,6 +467,7 @@ export default {
     exitSchema,
     linkSchema,
     searchSchema,
+    searchResultSchema,
     navigateSchema,
     surveySchema,
     experimentSchema,