fix(insights): send extra parameters only for applicable versions (#5558

) * fix(insights): send extra parameters only for applicable versions still to do: update tests * test: impact of requiring version on tests * move type
algolia · Apr 24, 2023 · 82144c0 · 82144c0
1 parent f34b204
commit 82144c0
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 52 deletions.
diff --git a/packages/instantsearch.js/src/lib/__tests__/InstantSearch-test.tsx b/packages/instantsearch.js/src/lib/__tests__/InstantSearch-test.tsx
@@ -493,7 +493,7 @@ See https://www.algolia.com/doc/api-reference/widgets/configure/js/`);
     });
 
     test('insights: options passes options to middleware', () => {
-      const insightsClient = jest.fn();
+      const insightsClient = Object.assign(jest.fn(), { version: '2.4.0' });
       const search = new InstantSearch({
         searchClient: createSearchClient(),
         indexName: 'test',
@@ -521,7 +521,7 @@ See https://www.algolia.com/doc/api-reference/widgets/configure/js/`);
 
       search.sendEventToInsights({
         insightsMethod: 'clickedObjectIDsAfterSearch',
-        payload: { eventName: 'Add to cart' },
+        payload: { eventName: 'Add to cart' } as any,
         eventType: 'click',
         widgetType: 'ais.hits',
       });

diff --git a/packages/instantsearch.js/src/lib/utils/createSendEventForHits.ts b/packages/instantsearch.js/src/lib/utils/createSendEventForHits.ts
@@ -119,7 +119,7 @@ export function _buildEventPayloadsForHits({
           widgetType,
           eventType,
           payload: {
-            eventName,
+            eventName: eventName || 'Hit Clicked',
             index,
             queryID,
             objectIDs: objectIDsByChunk[i],
@@ -138,7 +138,7 @@ export function _buildEventPayloadsForHits({
           widgetType,
           eventType,
           payload: {
-            eventName,
+            eventName: eventName || 'Hit Converted',
             index,
             queryID,
             objectIDs: objectIDsByChunk[i],

diff --git a/packages/instantsearch.js/src/middlewares/__tests__/createInsightsMiddleware.ts b/packages/instantsearch.js/src/middlewares/__tests__/createInsightsMiddleware.ts
@@ -177,7 +177,7 @@ describe('insights', () => {
       expect(document.body).toMatchInlineSnapshot(`
         <body>
           <script
-            src="https://cdn.jsdelivr.net/npm/search-insights@2.3.0/dist/search-insights.min.js"
+            src="https://cdn.jsdelivr.net/npm/search-insights@2.4.0/dist/search-insights.min.js"
           />
         </body>
       `);
@@ -220,7 +220,7 @@ describe('insights', () => {
       expect(document.body).toMatchInlineSnapshot(`
         <body>
           <script
-            src="https://cdn.jsdelivr.net/npm/search-insights@2.3.0/dist/search-insights.min.js"
+            src="https://cdn.jsdelivr.net/npm/search-insights@2.4.0/dist/search-insights.min.js"
           />
         </body>
       `);
@@ -872,7 +872,7 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
         eventType: 'click',
         payload: {
           hello: 'world',
-        },
+        } as any,
       });
       expect(analytics.viewedObjectIDs).toHaveBeenCalledTimes(0);
       expect(onEvent).toHaveBeenCalledTimes(1);
@@ -909,7 +909,7 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
         eventType: 'click',
         payload: {
           hello: 'world',
-        },
+        } as any,
       });
 
       expect(insightsClient).toHaveBeenLastCalledWith(
@@ -940,7 +940,7 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
           eventType: 'click',
           payload: {
             hello: 'world',
-          },
+          } as any,
         });
       }).toWarnDev();
       expect(insightsClient).toHaveBeenCalledTimes(numberOfCalls); // still the same

diff --git a/packages/instantsearch.js/src/middlewares/createInsightsMiddleware.ts b/packages/instantsearch.js/src/middlewares/createInsightsMiddleware.ts
@@ -9,26 +9,21 @@ import {
 
 import type {
   InsightsClient,
-  InsightsClientMethod,
+  InsightsEvent as _InsightsEvent,
+  InsightsMethod,
+  InsightsMethodMap,
   InternalMiddleware,
-  Hit,
 } from '../types';
 import type {
   AlgoliaSearchHelper,
   PlainSearchParameters,
 } from 'algoliasearch-helper';
 
-export type InsightsEvent = {
-  insightsMethod?: InsightsClientMethod;
-  payload: any;
-  widgetType: string;
-  eventType: string; // 'view' | 'click' | 'conversion', but we're not restricting.
-  hits?: Hit[];
-  attribute?: string;
-};
-
 type ProvidedInsightsClient = InsightsClient | null | undefined;
 
+export type InsightsEvent<TMethod extends InsightsMethod = InsightsMethod> =
+  _InsightsEvent<TMethod>;
+
 export type InsightsProps<
   TInsightsClient extends ProvidedInsightsClient = ProvidedInsightsClient
 > = {
@@ -46,8 +41,13 @@ export type InsightsProps<
   $$internal?: boolean;
 };
 
-const ALGOLIA_INSIGHTS_SRC =
-  'https://cdn.jsdelivr.net/npm/search-insights@2.3.0/dist/search-insights.min.js';
+const ALGOLIA_INSIGHTS_VERSION = '2.4.0';
+const ALGOLIA_INSIGHTS_SRC = `https://cdn.jsdelivr.net/npm/search-insights@${ALGOLIA_INSIGHTS_VERSION}/dist/search-insights.min.js`;
+
+export type InsightsClientWithGlobals = InsightsClient & {
+  shouldAddScript?: boolean;
+  version?: string;
+};
 
 export type CreateInsightsMiddleware = typeof createInsightsMiddleware;
 
@@ -61,8 +61,7 @@ export function createInsightsMiddleware<
     $$internal = false,
   } = props;
 
-  let insightsClient: InsightsClient & { shouldAddScript?: boolean } =
-    _insightsClient || noop;
+  let insightsClient: InsightsClientWithGlobals = _insightsClient || noop;
 
   if (_insightsClient !== null && !_insightsClient) {
     safelyRunOnBrowser(({ window }: { window: any }) => {
@@ -81,6 +80,7 @@ export function createInsightsMiddleware<
             }
             window[pointer].queue.push(args);
           };
+          window[pointer].version = ALGOLIA_INSIGHTS_VERSION;
         }
 
         insightsClient = window[pointer];
@@ -227,15 +227,29 @@ export function createInsightsMiddleware<
           immediate: true,
         });
 
-        // @ts-ignore
-        const insightsClientWithLocalCredentials = (method, payload) => {
-          return insightsClient(method, payload, {
-            headers: {
-              'X-Algolia-Application-Id': appId,
-              'X-Algolia-API-Key': apiKey,
-            },
-          });
-        };
+        type InsightsClientWithLocalCredentials = <
+          TMethod extends InsightsMethod
+        >(
+          method: TMethod,
+          payload: InsightsMethodMap[TMethod][0]
+        ) => void;
+
+        let insightsClientWithLocalCredentials =
+          insightsClient as InsightsClientWithLocalCredentials;
+
+        if (isModernInsightsClient(insightsClient)) {
+          insightsClientWithLocalCredentials = (method, payload) => {
+            const extraParams = {
+              headers: {
+                'X-Algolia-Application-Id': appId,
+                'X-Algolia-API-Key': apiKey,
+              },
+            };
+
+            // @ts-ignore we are calling this only when we know that the client actually is correct
+            return insightsClient(method, payload, extraParams);
+          };
+        }
 
         instantSearchInstance.sendEventToInsights = (event: InsightsEvent) => {
           if (onEvent) {
@@ -280,3 +294,15 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
     };
   };
 }
+
+function isModernInsightsClient(client: InsightsClientWithGlobals): boolean {
+  const [major, minor] = (client.version || '').split('.').map(Number);
+
+  /* eslint-disable @typescript-eslint/naming-convention */
+  const v3 = major >= 3;
+  const v2_4 = major === 2 && minor >= 4;
+  const v1_10 = major === 1 && minor >= 10;
+  /* eslint-enable @typescript-eslint/naming-convention */
+
+  return v3 || v2_4 || v1_10;
+}
diff --git a/packages/instantsearch.js/src/types/insights.ts b/packages/instantsearch.js/src/types/insights.ts
@@ -1,5 +1,6 @@
+import type { Hit } from './results';
 import type {
-  InsightsMethodMap,
+  InsightsMethodMap as _InsightsMethodMap,
   InsightsClient as _InsightsClient,
 } from 'search-insights';
 
@@ -11,8 +12,34 @@ export type {
   OnUserTokenChange as InsightsOnUserTokenChange,
 } from 'search-insights';
 
+export type InsightsMethodMap = _InsightsMethodMap;
 export type InsightsClientMethod = keyof InsightsMethodMap;
 
+/**
+ * Method allowed by the insights middleware.
+ */
+export type InsightsMethod =
+  | 'clickedObjectIDsAfterSearch'
+  | 'clickedObjectIDs'
+  | 'clickedFilters'
+  | 'convertedObjectIDsAfterSearch'
+  | 'convertedObjectIDs'
+  | 'convertedFilters'
+  | 'viewedObjectIDs'
+  | 'viewedFilters';
+
+/**
+ * The event sent to the insights middleware.
+ */
+export type InsightsEvent<TMethod extends InsightsMethod = InsightsMethod> = {
+  insightsMethod?: TMethod;
+  payload: InsightsMethodMap[TMethod][0];
+  widgetType: string;
+  eventType: string; // 'view' | 'click' | 'conversion', but we're not restricting.
+  hits?: Hit[];
+  attribute?: string;
+};
+
 export type InsightsClientPayload = {
   eventName: string;
   queryID: string;

diff --git a/packages/react-instantsearch-hooks/src/__tests__/insights.test.tsx b/packages/react-instantsearch-hooks/src/__tests__/insights.test.tsx
@@ -25,7 +25,7 @@ describe('insights', () => {
       <body>
         <div />
         <script
-          src="https://cdn.jsdelivr.net/npm/search-insights@2.3.0/dist/search-insights.min.js"
+          src="https://cdn.jsdelivr.net/npm/search-insights@2.4.0/dist/search-insights.min.js"
         />
       </body>
     `);

diff --git a/tests/common/widgets/hits/insights.ts b/tests/common/widgets/hits/insights.ts
@@ -22,7 +22,7 @@ export function createInsightsTests(setup: HitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -133,7 +133,7 @@ export function createInsightsTests(setup: HitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 25;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -264,7 +264,7 @@ export function createInsightsTests(setup: HitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -344,7 +344,7 @@ export function createInsightsTests(setup: HitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -428,7 +428,7 @@ export function createInsightsTests(setup: HitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -522,7 +522,7 @@ export function createInsightsTests(setup: HitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -602,7 +602,7 @@ export function createInsightsTests(setup: HitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',

diff --git a/tests/common/widgets/infinite-hits/insights.ts b/tests/common/widgets/infinite-hits/insights.ts
@@ -22,7 +22,7 @@ export function createInsightsTests(setup: InfiniteHitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -133,7 +133,7 @@ export function createInsightsTests(setup: InfiniteHitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 25;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -264,7 +264,7 @@ export function createInsightsTests(setup: InfiniteHitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -344,7 +344,7 @@ export function createInsightsTests(setup: InfiniteHitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -428,7 +428,7 @@ export function createInsightsTests(setup: InfiniteHitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -522,7 +522,7 @@ export function createInsightsTests(setup: InfiniteHitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
@@ -602,7 +602,7 @@ export function createInsightsTests(setup: InfiniteHitsSetup, act: Act) {
       const delay = 100;
       const margin = 10;
       const hitsPerPage = 2;
-      window.aa = jest.fn();
+      window.aa = Object.assign(jest.fn(), { version: '2.4.0' });
       const options = {
         instantSearchOptions: {
           indexName: 'indexName',
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,7 +25,7 @@ describe('insights', () => { @@
           <body>
             <div />
             <script
-              src="https://cdn.jsdelivr.net/npm/search-insights@2.3.0/dist/search-insights.min.js"
+              src="https://cdn.jsdelivr.net/npm/search-insights@2.4.0/dist/search-insights.min.js"
             />
           </body>
         `);
@@ Expand Down @@