feat (api): Adds ability for click insights events to be triggered

bundlesize.config.json

@@ -6,11 +6,11 @@
     },
     {
       "path": "packages/docsearch-react/dist/umd/index.js",
-      "maxSize": "22.47 kB"
+      "maxSize": "22.57 kB"
     },
     {
       "path": "packages/docsearch-js/dist/umd/index.js",
-      "maxSize": "30.33 kB"
+      "maxSize": "30.43 kB"
     }
   ]
 }

packages/docsearch-react/src/DocSearchModal.tsx

@@ -1,4 +1,3 @@
-import type { AutocompleteState } from '@algolia/autocomplete-core';
 import { createAutocomplete } from '@algolia/autocomplete-core';
 import React from 'react';
 
@@ -14,6 +13,7 @@ import { SearchBox } from './SearchBox';
 import { createStoredSearches } from './stored-searches';
 import type {
   DocSearchHit,
+  DocSearchState,
   InternalDocSearchHit,
   StoredDocSearchHit,
 } from './types';
@@ -27,6 +27,7 @@ import {
   removeHighlightTags,
   isModifierEvent,
 } from './utils';
+import { buildInsightsClickParams } from './utils/buildInsightsClickParams';
 
 export type ModalTranslations = Partial<{
   searchBox: SearchBoxTranslations;
@@ -66,7 +67,7 @@ export function DocSearchModal({
     ...screenStateTranslations
   } = translations;
   const [state, setState] = React.useState<
-    AutocompleteState<InternalDocSearchHit>
+    DocSearchState<InternalDocSearchHit>
   >({
     query: '',
     collections: [],
@@ -130,6 +131,23 @@ export function DocSearchModal({
     [favoriteSearches, recentSearches, disableUserPersonalization]
   );
 
+  const sendItemClickEvent = React.useCallback(
+    (item: InternalDocSearchHit) => {
+      if (!state.context.algoliaInsightsPlugin || !item.__autocomplete_id)
+        return;
+
+      const insightsClickParams = buildInsightsClickParams(
+        item,
+        item.__autocomplete_id
+      );
+
+      state.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(
+        insightsClickParams
+      );
+    },
+    [state]
+  );
+
   const autocomplete = React.useMemo(
     () =>
       createAutocomplete<
@@ -476,6 +494,9 @@ export function DocSearchModal({
             translations={screenStateTranslations}
             getMissingResultsUrl={getMissingResultsUrl}
             onItemClick={(item, event) => {
+              // If insights is active, send insights click event
+              sendItemClickEvent(item);
+
               saveRecentSearch(item);
               if (!isModifierEvent(event)) {
                 onClose();

packages/docsearch-react/src/Hit.tsx

@@ -8,5 +8,9 @@ interface HitProps {
 }
 
 export function Hit({ hit, children }: HitProps) {
-  return <a href={hit.url}>{children}</a>;
+  return (
+    <a href={hit.url} onClick={(e) => e.preventDefault()}>
+      {children}
+    </a>
+  );
 }

packages/docsearch-react/src/types/DocSearchHit.ts

@@ -84,4 +84,5 @@ export declare type DocSearchHit = {
     appId: string;
     apiKey: string;
   };
+  __autocomplete_id?: number;
 };

packages/docsearch-react/src/types/DocSearchState.ts

@@ -0,0 +1,17 @@
+import type {
+  AutocompleteContext,
+  AutocompleteInsightsApi,
+  AutocompleteState,
+  BaseItem,
+} from '@algolia/autocomplete-core';
+
+interface DocSearchContext extends AutocompleteContext {
+  algoliaInsightsPlugin?: {
+    insights: AutocompleteInsightsApi;
+  };
+}
+
+export interface DocSearchState<TItem extends BaseItem>
+  extends AutocompleteState<TItem> {
+  context: DocSearchContext;
+}

packages/docsearch-react/src/types/index.ts

@@ -1,3 +1,4 @@
 export * from './DocSearchHit';
+export * from './DocSearchState';
 export * from './InternalDocSearchHit';
 export * from './StoredDocSearchHit';

packages/docsearch-react/src/utils/buildInsightsClickParams.ts

@@ -0,0 +1,22 @@
+import type { AlgoliaInsightsHit } from '@algolia/autocomplete-core';
+import type {
+  InsightsParamsWithItems,
+  ClickedObjectIDsAfterSearchParams,
+} from '@algolia/autocomplete-plugin-algolia-insights';
+
+import type { InternalDocSearchHit } from '../types';
+
+export function buildInsightsClickParams(
+  item: InternalDocSearchHit,
+  itemPosition: number
+): InsightsParamsWithItems<ClickedObjectIDsAfterSearchParams> {
+  const insightsItem = item as AlgoliaInsightsHit;
+
+  return {
+    eventName: 'Item Selected',
+    index: insightsItem.__autocomplete_indexName,
+    items: [insightsItem],
+    positions: [itemPosition],
+    queryID: insightsItem.__autocomplete_queryID,
+  };
+}