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,5 +1,7 @@
-import type { AutocompleteState } from '@algolia/autocomplete-core';
-import { createAutocomplete } from '@algolia/autocomplete-core';
+import {
+ type AlgoliaInsightsHit,
+ createAutocomplete,
+} from '@algolia/autocomplete-core';
 import React from 'react';
 
 import { MAX_QUERY_SIZE } from './constants';
@@ -14,6 +16,7 @@ import { SearchBox } from './SearchBox';
 import { createStoredSearches } from './stored-searches';
 import type {
  DocSearchHit,
+ DocSearchState,
  InternalDocSearchHit,
  StoredDocSearchHit,
 } from './types';
@@ -66,7 +69,7 @@ export function DocSearchModal({
  ...screenStateTranslations
  } = translations;
  const [state, setState] = React.useState<
- AutocompleteState<InternalDocSearchHit>
+ DocSearchState<InternalDocSearchHit>
  >({
  query: '',
  collections: [],
@@ -130,6 +133,28 @@ export function DocSearchModal({
  [favoriteSearches, recentSearches, disableUserPersonalization]
  );
 
+ const sendItemClickEvent = React.useCallback(
+ (item: InternalDocSearchHit) => {
+ if (!state.context.algoliaInsightsPlugin || !item.__autocomplete_id)
+ return;
+
+ const insightsItem = item as AlgoliaInsightsHit;
+
+ const insightsClickParams = {
+ eventName: 'Item Selected',
+ index: insightsItem.__autocomplete_indexName,
+ items: [insightsItem],
+ positions: [item.__autocomplete_id],
+ queryID: insightsItem.__autocomplete_queryID,
+ };
+
+ state.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(
+ insightsClickParams
+ );
+ },
+ [state.context.algoliaInsightsPlugin]
+ );
+
  const autocomplete = React.useMemo(
  () =>
  createAutocomplete<
@@ -476,6 +501,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';