fix(insights): pass clickAnalytics automatically (#1080)

* fix(insights): pass clickAnalytics automatically * docs(examples): remove manual clickAnalytics * make conditional * test * lint * wording changes
algolia · Feb 2, 2023 · 8048442 · 8048442
1 parent 50bdbd1
commit 8048442
Show file tree

Hide file tree

Showing 12 changed files with 225 additions and 14 deletions.
diff --git a/cypress/test-apps/js/app.tsx b/cypress/test-apps/js/app.tsx
@@ -45,7 +45,6 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
   indexName: 'instant_search_demo_query_suggestions',
   getSearchParams({ state }) {
     return recentSearchesPlugin.data.getAlgoliaSearchParams({
-      clickAnalytics: true,
       hitsPerPage: state.query ? 5 : 10,
     });
   },
@@ -86,7 +85,6 @@ autocomplete({
                 indexName: 'instant_search',
                 query,
                 params: {
-                  clickAnalytics: true,
                   attributesToSnippet: ['name:10', 'description:35'],
                   snippetEllipsisText: '…',
                 },

diff --git a/examples/playground/app.tsx b/examples/playground/app.tsx
@@ -38,7 +38,6 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
   indexName: 'instant_search_demo_query_suggestions',
   getSearchParams({ state }) {
     return recentSearchesPlugin.data.getAlgoliaSearchParams({
-      clickAnalytics: true,
       hitsPerPage: state.query ? 5 : 10,
     });
   },
@@ -80,7 +79,6 @@ autocomplete<ProductHit>({
                 indexName: 'instant_search',
                 query,
                 params: {
-                  clickAnalytics: true,
                   attributesToSnippet: ['name:10', 'description:35'],
                   snippetEllipsisText: '…',
                 },

diff --git a/examples/query-suggestions-with-hits/app.tsx b/examples/query-suggestions-with-hits/app.tsx
@@ -58,7 +58,6 @@ autocomplete<ProductHit>({
                 indexName: 'instant_search',
                 query,
                 params: {
-                  clickAnalytics: true,
                   attributesToSnippet: ['name:10'],
                   snippetEllipsisText: '…',
                 },

diff --git a/examples/recently-viewed-items/app.tsx b/examples/recently-viewed-items/app.tsx
@@ -43,7 +43,6 @@ autocomplete<ProductHit>({
                 indexName: 'instant_search',
                 query,
                 params: {
-                  clickAnalytics: true,
                   attributesToSnippet: ['name:10', 'description:35'],
                   snippetEllipsisText: '…',
                 },

diff --git a/examples/reshape/productsPlugin.tsx b/examples/reshape/productsPlugin.tsx
@@ -26,7 +26,6 @@ export const productsPlugin = {
                 indexName: 'instant_search',
                 query,
                 params: {
-                  clickAnalytics: true,
                   attributesToSnippet: ['name:10', 'description:35'],
                   snippetEllipsisText: '…',
                   hitsPerPage: 15,

diff --git a/examples/tags-in-searchbox/app.tsx b/examples/tags-in-searchbox/app.tsx
@@ -202,7 +202,6 @@ autocomplete<ProductHit | Tag<TagExtraData>>({
                 indexName: 'instant_search',
                 query,
                 params: {
-                  clickAnalytics: true,
                   attributesToSnippet: ['name:10'],
                   snippetEllipsisText: '…',
                   filters: mapToAlgoliaFilters(tagsByFacet),

diff --git a/examples/tags-with-hits/app.tsx b/examples/tags-with-hits/app.tsx
@@ -157,7 +157,6 @@ autocomplete<ProductHit | Tag<TagExtraData>>({
                 indexName: 'instant_search',
                 query,
                 params: {
-                  clickAnalytics: true,
                   attributesToSnippet: ['name:10'],
                   snippetEllipsisText: '…',
                   filters: mapToAlgoliaFilters(tagsByFacet),

diff --git a/packages/autocomplete-core/src/onInput.ts b/packages/autocomplete-core/src/onInput.ts
@@ -113,7 +113,11 @@ export function onInput<TItem extends BaseItem>({
                   ...setters,
                 })
               ).then((itemsOrDescription) =>
-                preResolve<TItem>(itemsOrDescription, source.sourceId)
+                preResolve<TItem>(
+                  itemsOrDescription,
+                  source.sourceId,
+                  store.getState()
+                )
               );
             })
           )

diff --git a/packages/autocomplete-core/src/resolve.ts b/packages/autocomplete-core/src/resolve.ts
@@ -12,7 +12,11 @@ import {
 } from '@algolia/client-search';
 import type { SearchClient } from 'algoliasearch/lite';
 
-import { BaseItem, InternalAutocompleteSource } from './types';
+import {
+  AutocompleteState,
+  BaseItem,
+  InternalAutocompleteSource,
+} from './types';
 import { mapToAlgoliaResponse } from './utils';
 
 function isDescription<TItem extends BaseItem>(
@@ -56,15 +60,36 @@ type RequestDescriptionPreResolvedCustom<TItem extends BaseItem> = {
 
 export function preResolve<TItem extends BaseItem>(
   itemsOrDescription: TItem[] | TItem[][] | RequesterDescription<TItem>,
-  sourceId: string
+  sourceId: string,
+  state: AutocompleteState<TItem>
 ):
   | RequestDescriptionPreResolved<TItem>
   | RequestDescriptionPreResolvedCustom<TItem> {
   if (isRequesterDescription<TItem>(itemsOrDescription)) {
+    const contextParameters =
+      itemsOrDescription.requesterId === 'algolia'
+        ? Object.assign(
+            {},
+            ...Object.keys(state.context).map((key) => {
+              return (state.context[key] as Record<string, unknown>)
+                ?.__algoliaSearchParameters;
+            })
+          )
+        : {};
+
     return {
       ...itemsOrDescription,
       requests: itemsOrDescription.queries.map((query) => ({
-        query,
+        query:
+          itemsOrDescription.requesterId === 'algolia'
+            ? {
+                ...query,
+                params: {
+                  ...contextParameters,
+                  ...query.params,
+                },
+              }
+            : query,
         sourceId,
         transformResponse: itemsOrDescription.transformResponse,
       })),

diff --git a/packages/autocomplete-js/src/__tests__/requester.test.ts b/packages/autocomplete-js/src/__tests__/requester.test.ts
@@ -692,4 +692,100 @@ describe('requester', () => {
       `);
     });
   });
+
+  test('allows plugins to pass extra parameters to the search client', async () => {
+    const container = document.createElement('div');
+    const panelContainer = document.createElement('div');
+
+    document.body.appendChild(panelContainer);
+
+    const searchClient = createSearchClient({
+      search: jest.fn(() =>
+        Promise.resolve(
+          createMultiSearchResponse<{ label: string }>(
+            {
+              hits: [{ objectID: '1', label: 'Hit 1' }],
+            },
+            { facetHits: [{ count: 2, value: 'Hit 2' }] }
+          )
+        )
+      ),
+    });
+
+    autocomplete({
+      container,
+      panelContainer,
+      getSources({ query }) {
+        return [
+          {
+            sourceId: 'hits',
+            getItems() {
+              return getAlgoliaResults({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    query,
+                  },
+                ],
+              });
+            },
+            templates: {
+              item({ item }) {
+                return JSON.stringify(item);
+              },
+            },
+          },
+          {
+            sourceId: 'facets',
+            getItems() {
+              return getAlgoliaFacets({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    facet: 'categories',
+                    params: {
+                      facetQuery: query,
+                    },
+                  },
+                ],
+              });
+            },
+            templates: {
+              item({ item }) {
+                return JSON.stringify(item);
+              },
+            },
+          },
+        ];
+      },
+    }).setContext({
+      myPlugin: {
+        __algoliaSearchParameters: {
+          extraParam: true,
+        },
+      },
+    });
+
+    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+
+    fireEvent.input(input, { target: { value: 'a' } });
+
+    await waitFor(() => {
+      expect(
+        panelContainer.querySelector<HTMLElement>('.aa-Panel')
+      ).toBeInTheDocument();
+    });
+
+    expect(searchClient.search).toHaveBeenCalledTimes(1);
+    expect(searchClient.search).toHaveBeenCalledWith([
+      expect.objectContaining({
+        params: expect.objectContaining({ extraParam: true }),
+      }),
+      expect.objectContaining({
+        params: expect.objectContaining({ extraParam: true }),
+      }),
+    ]);
+  });
 });
diff --git a/...es/autocomplete-plugin-algolia-insights/src/__tests__/createAlgoliaInsightsPlugin.test.ts b/...es/autocomplete-plugin-algolia-insights/src/__tests__/createAlgoliaInsightsPlugin.test.ts
@@ -1,10 +1,16 @@
 import { createAutocomplete } from '@algolia/autocomplete-core';
+import {
+  getAlgoliaFacets,
+  getAlgoliaResults,
+} from '@algolia/autocomplete-preset-algolia';
 import { noop } from '@algolia/autocomplete-shared';
 import userEvent from '@testing-library/user-event';
 import insightsClient from 'search-insights';
 
 import {
+  createMultiSearchResponse,
   createPlayground,
+  createSearchClient,
   createSource,
   runAllMicroTasks,
 } from '../../../../test/utils';
@@ -79,6 +85,88 @@ describe('createAlgoliaInsightsPlugin', () => {
     );
   });
 
+  test('sets `clickAnalytics=true` for requests to Algolia', async () => {
+    const insightsClient = jest.fn();
+    const insightsPlugin = createAlgoliaInsightsPlugin({ insightsClient });
+
+    const searchClient = createSearchClient({
+      search: jest.fn(() =>
+        Promise.resolve(
+          createMultiSearchResponse<{ label: string }>(
+            {
+              hits: [{ objectID: '1', label: 'Hit 1' }],
+            },
+            {
+              facetHits: [{ count: 2, value: 'Hit 2' }],
+            }
+          )
+        )
+      ),
+    });
+
+    const playground = createPlayground(createAutocomplete, {
+      plugins: [insightsPlugin],
+      getSources({ query }) {
+        return [
+          {
+            sourceId: 'hits',
+            getItems() {
+              return getAlgoliaResults({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    query,
+                  },
+                ],
+              });
+            },
+            templates: {
+              item({ item }) {
+                return JSON.stringify(item);
+              },
+            },
+          },
+          {
+            sourceId: 'facets',
+            getItems() {
+              return getAlgoliaFacets({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    facet: 'categories',
+                    params: {
+                      facetQuery: query,
+                    },
+                  },
+                ],
+              });
+            },
+            templates: {
+              item({ item }) {
+                return JSON.stringify(item);
+              },
+            },
+          },
+        ];
+      },
+    });
+
+    userEvent.type(playground.inputElement, 'a');
+    await runAllMicroTasks();
+
+    expect(searchClient.search).toHaveBeenCalledTimes(1);
+    expect(searchClient.search).toHaveBeenCalledWith([
+      expect.objectContaining({
+        params: expect.objectContaining({ clickAnalytics: true }),
+      }),
+      expect.objectContaining({
+        params: expect.objectContaining({ clickAnalytics: true }),
+      }),
+    ]);
+  });
+
   describe('onItemsChange', () => {
     test('sends a `viewedObjectIDs` event by default', async () => {
       const insightsClient = jest.fn();

diff --git a/packages/autocomplete-plugin-algolia-insights/src/createAlgoliaInsightsPlugin.ts b/packages/autocomplete-plugin-algolia-insights/src/createAlgoliaInsightsPlugin.ts
@@ -124,7 +124,14 @@ export function createAlgoliaInsightsPlugin(
     subscribe({ setContext, onSelect, onActive }) {
       insightsClient('addAlgoliaAgent', 'insights-plugin');
 
-      setContext({ algoliaInsightsPlugin: { insights } });
+      setContext({
+        algoliaInsightsPlugin: {
+          __algoliaSearchParameters: {
+            clickAnalytics: true,
+          },
+          insights,
+        },
+      });
 
       onSelect(({ item, state, event }) => {
         if (!isAlgoliaInsightsHit(item)) {