feat(insights): annotate events with algoliaSource (#5580)

* feat(insights): annotate events with algoliaSource - algoliaSource is an array - default it always has "instantsearch" - if it's an "internal" event, it also has "instantsearch-internal" To be able to make this work, all internal events were changed to "xxx:internal", meaning the "skip click if two internal ones in a row" feature in createSendEventForHits was refined to click only (view for example will be sent multiple times in a tick if >20 hitsPerPage) FX-2287 * chore: bundlesize
algolia · Apr 24, 2023 · c419307 · c419307
1 parent 8fb517f
commit c419307
Show file tree

Hide file tree

Showing 33 changed files with 188 additions and 26 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
-      "maxSize": "74 kB"
+      "maxSize": "74.25 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "160 kB"
+      "maxSize": "165 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Core.min.js",
@@ -26,11 +26,11 @@
     },
     {
       "path": "packages/react-instantsearch-hooks/dist/umd/ReactInstantSearchHooks.min.js",
-      "maxSize": "43.25 kB"
+      "maxSize": "44.50 kB"
     },
     {
       "path": "packages/react-instantsearch-hooks-web/dist/umd/ReactInstantSearchHooksDOM.min.js",
-      "maxSize": "52.75 kB"
+      "maxSize": "53.50 kB"
     },
     {
       "path": "packages/react-instantsearch-dom/dist/umd/ReactInstantSearchDOM.min.js",
@@ -42,11 +42,11 @@
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
-      "maxSize": "61.50 kB"
+      "maxSize": "62 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",
-      "maxSize": "61.75 kB"
+      "maxSize": "62.25 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/cjs/index.js",

diff --git a/packages/instantsearch.js/src/connectors/autocomplete/__tests__/connectAutocomplete-test.ts b/packages/instantsearch.js/src/connectors/autocomplete/__tests__/connectAutocomplete-test.ts
@@ -778,6 +778,7 @@ search.addWidgets([
       expect(sendEventToInsights).toHaveBeenCalledTimes(2);
       expect(sendEventToInsights.mock.calls[0][0]).toEqual({
         eventType: 'view',
+        eventModifier: 'internal',
         hits: [
           {
             __position: 0,
@@ -796,6 +797,7 @@ search.addWidgets([
       });
       expect(sendEventToInsights.mock.calls[1][0]).toEqual({
         eventType: 'view',
+        eventModifier: 'internal',
         hits: [
           {
             __position: 0,

diff --git a/packages/instantsearch.js/src/connectors/autocomplete/connectAutocomplete.ts b/packages/instantsearch.js/src/connectors/autocomplete/connectAutocomplete.ts
@@ -141,7 +141,7 @@ search.addWidgets([
         const renderState = this.getWidgetRenderState(renderOptions);
 
         renderState.indices.forEach(({ sendEvent, hits }) => {
-          sendEvent('view', hits);
+          sendEvent('view:internal', hits);
         });
 
         renderFn(

diff --git a/packages/instantsearch.js/src/connectors/geo-search/__tests__/connectGeoSearch-test.ts b/packages/instantsearch.js/src/connectors/geo-search/__tests__/connectGeoSearch-test.ts
@@ -1668,6 +1668,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/geo-search/
       );
       expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
         eventType: 'view',
+        eventModifier: 'internal',
         hits: [
           {
             __position: 0,

diff --git a/packages/instantsearch.js/src/connectors/geo-search/connectGeoSearch.ts b/packages/instantsearch.js/src/connectors/geo-search/connectGeoSearch.ts
@@ -316,7 +316,7 @@ const connectGeoSearch: GeoSearchConnector = (renderFn, unmountFn = noop) => {
 
         const widgetRenderState = this.getWidgetRenderState(renderArgs);
 
-        sendEvent('view', widgetRenderState.items);
+        sendEvent('view:internal', widgetRenderState.items);
 
         renderFn(
           {

diff --git a/...stantsearch.js/src/connectors/hierarchical-menu/__tests__/connectHierarchicalMenu-test.ts b/...stantsearch.js/src/connectors/hierarchical-menu/__tests__/connectHierarchicalMenu-test.ts
@@ -1812,6 +1812,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
       );
       expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
         attribute: 'category',
+        eventModifier: 'internal',
         eventType: 'click',
         insightsMethod: 'clickedFilters',
         payload: {
@@ -1832,6 +1833,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
       ).toHaveBeenLastCalledWith({
         attribute: 'sub_category',
         eventType: 'click',
+        eventModifier: 'internal',
         insightsMethod: 'clickedFilters',
         payload: {
           eventName: 'Filter Applied',

diff --git a/packages/instantsearch.js/src/connectors/hierarchical-menu/connectHierarchicalMenu.ts b/packages/instantsearch.js/src/connectors/hierarchical-menu/connectHierarchicalMenu.ts
@@ -339,7 +339,7 @@ const connectHierarchicalMenu: HierarchicalMenuConnector =
 
           if (!_refine) {
             _refine = function (facetValue) {
-              sendEvent('click', facetValue);
+              sendEvent('click:internal', facetValue);
               helper
                 .toggleFacetRefinement(hierarchicalFacetName, facetValue)
                 .search();

diff --git a/packages/instantsearch.js/src/connectors/hits/__tests__/connectHits-test.ts b/packages/instantsearch.js/src/connectors/hits/__tests__/connectHits-test.ts
@@ -809,6 +809,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hits/js/#co
             instantSearchInstance.sendEventToInsights
           ).toHaveBeenCalledWith({
             eventType: 'view',
+            eventModifier: 'internal',
             hits: [
               {
                 __position: 0,

diff --git a/packages/instantsearch.js/src/connectors/hits/connectHits.ts b/packages/instantsearch.js/src/connectors/hits/connectHits.ts
@@ -114,7 +114,7 @@ const connectHits: HitsConnector = function connectHits(
           false
         );
 
-        renderState.sendEvent('view', renderState.hits);
+        renderState.sendEvent('view:internal', renderState.hits);
       },
 
       getRenderState(renderState, renderOptions) {

diff --git a/packages/instantsearch.js/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts b/packages/instantsearch.js/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.ts
@@ -1399,6 +1399,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/infinite-hi
             instantSearchInstance.sendEventToInsights
           ).toHaveBeenCalledWith({
             eventType: 'view',
+            eventModifier: 'internal',
             hits: [
               {
                 __position: 0,

diff --git a/packages/instantsearch.js/src/connectors/infinite-hits/connectInfiniteHits.ts b/packages/instantsearch.js/src/connectors/infinite-hits/connectInfiniteHits.ts
@@ -288,7 +288,7 @@ const connectInfiniteHits: InfiniteHitsConnector = function connectInfiniteHits(
           false
         );
 
-        sendEvent('view', widgetRenderState.currentPageHits);
+        sendEvent('view:internal', widgetRenderState.currentPageHits);
       },
 
       getRenderState(renderState, renderOptions) {

diff --git a/packages/instantsearch.js/src/connectors/menu/__tests__/connectMenu-test.ts b/packages/instantsearch.js/src/connectors/menu/__tests__/connectMenu-test.ts
@@ -1668,6 +1668,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/menu/js/#co
       expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
         attribute: 'category',
         eventType: 'click',
+        eventModifier: 'internal',
         insightsMethod: 'clickedFilters',
         payload: {
           eventName: 'Filter Applied',

diff --git a/packages/instantsearch.js/src/connectors/menu/connectMenu.ts b/packages/instantsearch.js/src/connectors/menu/connectMenu.ts
@@ -274,7 +274,7 @@ const connectMenu: MenuConnector = function connectMenu(
           _refine = function (facetValue: string) {
             const [refinedItem] =
               helper.getHierarchicalFacetBreadcrumb(attribute);
-            sendEvent!('click', facetValue ? facetValue : refinedItem);
+            sendEvent!('click:internal', facetValue ? facetValue : refinedItem);
             helper
               .toggleFacetRefinement(
                 attribute,

diff --git a/packages/instantsearch.js/src/connectors/numeric-menu/connectNumericMenu.ts b/packages/instantsearch.js/src/connectors/numeric-menu/connectNumericMenu.ts
@@ -309,7 +309,7 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu(
               attribute,
               facetValue
             );
-            connectorState.sendEvent!('click', facetValue);
+            connectorState.sendEvent!('click:internal', facetValue);
             helper.setState(refinedState).search();
           };
         }

diff --git a/packages/instantsearch.js/src/connectors/rating-menu/__tests__/connectRatingMenu-test.ts b/packages/instantsearch.js/src/connectors/rating-menu/__tests__/connectRatingMenu-test.ts
@@ -980,6 +980,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/rating-menu
       expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
         attribute: 'swag',
         eventType: 'click',
+        eventModifier: 'internal',
         insightsMethod: 'clickedFilters',
         payload: {
           eventName: 'Filter Applied',
@@ -1013,6 +1014,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/rating-menu
       expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
         attribute: 'swag',
         eventType: 'click',
+        eventModifier: 'internal',
         insightsMethod: 'clickedFilters',
         payload: {
           eventName: 'Filter Applied',

diff --git a/packages/instantsearch.js/src/connectors/rating-menu/connectRatingMenu.ts b/packages/instantsearch.js/src/connectors/rating-menu/connectRatingMenu.ts
@@ -45,7 +45,8 @@ const createSendEvent: CreateSendEvent =
       instantSearchInstance.sendEventToInsights(args[0]);
       return;
     }
-    const [eventType, facetValue, eventName = 'Filter Applied'] = args;
+    const [, facetValue, eventName = 'Filter Applied'] = args;
+    const [eventType, eventModifier] = args[0].split(':');
     if (eventType !== 'click') {
       return;
     }
@@ -55,6 +56,7 @@ const createSendEvent: CreateSendEvent =
         insightsMethod: 'clickedFilters',
         widgetType: $$type,
         eventType,
+        eventModifier,
         payload: {
           eventName,
           index: helper.getIndex(),
@@ -264,7 +266,7 @@ const connectRatingMenu: RatingMenuConnector = function connectRatingMenu(
       helper: AlgoliaSearchHelper,
       facetValue: string
     ) => {
-      sendEvent('click', facetValue);
+      sendEvent('click:internal', facetValue);
       helper.setState(getRefinedState(helper.state, facetValue)).search();
     };
 

diff --git a/...s/instantsearch.js/src/connectors/refinement-list/__tests__/connectRefinementList-test.ts b/...s/instantsearch.js/src/connectors/refinement-list/__tests__/connectRefinementList-test.ts
@@ -3274,6 +3274,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
       expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
         attribute: 'category',
         eventType: 'click',
+        eventModifier: 'internal',
         insightsMethod: 'clickedFilters',
         payload: {
           eventName: 'Filter Applied',

diff --git a/packages/instantsearch.js/src/connectors/refinement-list/connectRefinementList.ts b/packages/instantsearch.js/src/connectors/refinement-list/connectRefinementList.ts
@@ -381,7 +381,7 @@ const connectRefinementList: RefinementListConnector =
             });
 
             triggerRefine = (facetValue) => {
-              sendEvent!('click', facetValue);
+              sendEvent!('click:internal', facetValue);
               helper.toggleFacetRefinement(attribute, facetValue).search();
             };
 

diff --git a/...stantsearch.js/src/connectors/toggle-refinement/__tests__/connectToggleRefinement-test.ts b/...stantsearch.js/src/connectors/toggle-refinement/__tests__/connectToggleRefinement-test.ts
@@ -1398,6 +1398,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/toggle-refi
       expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
         attribute: 'isShippingFree',
         eventType: 'click',
+        eventModifier: 'internal',
         insightsMethod: 'clickedFilters',
         payload: {
           eventName: 'Filter Applied',

diff --git a/packages/instantsearch.js/src/connectors/toggle-refinement/connectToggleRefinement.ts b/packages/instantsearch.js/src/connectors/toggle-refinement/connectToggleRefinement.ts
@@ -53,7 +53,8 @@ const createSendEvent = ({
       instantSearchInstance.sendEventToInsights(args[0]);
       return;
     }
-    const [eventType, isRefined, eventName = 'Filter Applied'] = args;
+    const [, isRefined, eventName = 'Filter Applied'] = args;
+    const [eventType, eventModifier] = args[0].split(':');
     if (eventType !== 'click' || on === undefined) {
       return;
     }
@@ -65,6 +66,7 @@ const createSendEvent = ({
         insightsMethod: 'clickedFilters',
         widgetType: $$type,
         eventType,
+        eventModifier,
         payload: {
           eventName,
           index: helper.getIndex(),
@@ -210,7 +212,7 @@ const connectToggleRefinement: ToggleRefinementConnector =
           } = { isRefined: false }
         ) => {
           if (!isRefined) {
-            sendEvent('click', isRefined);
+            sendEvent('click:internal', isRefined);
             if (hasAnOffValue) {
               off!.forEach((v) =>
                 helper.removeDisjunctiveFacetRefinement(attribute, v)

diff --git a/packages/instantsearch.js/src/lib/__tests__/InstantSearch-test.tsx b/packages/instantsearch.js/src/lib/__tests__/InstantSearch-test.tsx
@@ -524,7 +524,7 @@ See https://www.algolia.com/doc/api-reference/widgets/configure/js/`);
       expect(insightsClient).toHaveBeenCalledTimes(1);
       expect(insightsClient).toHaveBeenCalledWith(
         'clickedObjectIDsAfterSearch',
-        { eventName: 'Add to cart' },
+        { eventName: 'Add to cart', algoliaSource: ['instantsearch'] },
         {
           headers: {
             'X-Algolia-API-Key': 'apiKey',

diff --git a/packages/instantsearch.js/src/lib/utils/__tests__/createSendEventForFacet-test.ts b/packages/instantsearch.js/src/lib/utils/__tests__/createSendEventForFacet-test.ts
@@ -96,6 +96,26 @@ If you want to send a custom payload, you can pass one object: sendEvent(customP
       });
     });
 
+    it('sends with internal eventName', () => {
+      const { sendEvent, instantSearchInstance } = createTestEnvironment();
+      sendEvent('click:internal', 'value');
+      expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledTimes(
+        1
+      );
+      expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
+        attribute: 'category',
+        eventType: 'click',
+        eventModifier: 'internal',
+        insightsMethod: 'clickedFilters',
+        payload: {
+          eventName: 'Filter Applied',
+          filters: ['category:value'],
+          index: '',
+        },
+        widgetType: 'ais.customWidget',
+      });
+    });
+
     it('sends with custom eventName', () => {
       const { sendEvent, instantSearchInstance } = createTestEnvironment();
       sendEvent('click', 'value', 'Category Clicked');

diff --git a/packages/instantsearch.js/src/lib/utils/__tests__/createSendEventForHits-test.ts b/packages/instantsearch.js/src/lib/utils/__tests__/createSendEventForHits-test.ts
@@ -113,6 +113,30 @@ describe('createSendEventForHits', () => {
     });
   });
 
+  it('sends internal view event with default eventName', () => {
+    const { sendEvent, instantSearchInstance, hits } = createTestEnvironment();
+    sendEvent('view:internal', hits[0]);
+    expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledTimes(1);
+    expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
+      eventType: 'view',
+      eventModifier: 'internal',
+      hits: [
+        {
+          __position: 0,
+          __queryID: 'test-query-id',
+          objectID: 'obj0',
+        },
+      ],
+      insightsMethod: 'viewedObjectIDs',
+      payload: {
+        eventName: 'Hits Viewed',
+        index: 'testIndex',
+        objectIDs: ['obj0'],
+      },
+      widgetType: 'ais.testWidget',
+    });
+  });
+
   it('sends view event with custom eventName', () => {
     const { sendEvent, instantSearchInstance, hits } = createTestEnvironment();
     sendEvent('view', hits[0], 'Products Displayed');
@@ -247,6 +271,32 @@ describe('createSendEventForHits', () => {
     });
   });
 
+  it('sends internal click event', () => {
+    const { sendEvent, instantSearchInstance, hits } = createTestEnvironment();
+    sendEvent('click:internal', hits[0], 'Product Clicked');
+    expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledTimes(1);
+    expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
+      eventType: 'click',
+      eventModifier: 'internal',
+      hits: [
+        {
+          __position: 0,
+          __queryID: 'test-query-id',
+          objectID: 'obj0',
+        },
+      ],
+      insightsMethod: 'clickedObjectIDsAfterSearch',
+      payload: {
+        eventName: 'Product Clicked',
+        index: 'testIndex',
+        objectIDs: ['obj0'],
+        positions: [0],
+        queryID: 'test-query-id',
+      },
+      widgetType: 'ais.testWidget',
+    });
+  });
+
   it('sends click event with more than 20 hits', () => {
     const { sendEvent, instantSearchInstance, hits } = createTestEnvironment({
       nbHits: 21,
@@ -317,6 +367,31 @@ describe('createSendEventForHits', () => {
     });
   });
 
+  it('sends internal conversion event', () => {
+    const { sendEvent, instantSearchInstance, hits } = createTestEnvironment();
+    sendEvent('conversion:internal', hits[0], 'Product Ordered');
+    expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledTimes(1);
+    expect(instantSearchInstance.sendEventToInsights).toHaveBeenCalledWith({
+      eventType: 'conversion',
+      eventModifier: 'internal',
+      hits: [
+        {
+          __position: 0,
+          __queryID: 'test-query-id',
+          objectID: 'obj0',
+        },
+      ],
+      insightsMethod: 'convertedObjectIDsAfterSearch',
+      payload: {
+        eventName: 'Product Ordered',
+        index: 'testIndex',
+        objectIDs: ['obj0'],
+        queryID: 'test-query-id',
+      },
+      widgetType: 'ais.testWidget',
+    });
+  });
+
   it('sends conversion event with more than 20 hits', () => {
     const { sendEvent, instantSearchInstance, hits } = createTestEnvironment({
       nbHits: 21,
-Original file line number
+Diff line change
@@ Expand Up / @@ -114,7 +114,7 @@ const connectHits: HitsConnector = function connectHits( @@
               false
             );
-            renderState.sendEvent('view', renderState.hits);
+            renderState.sendEvent('view:internal', renderState.hits);
           },
           getRenderState(renderState, renderOptions) {
@@ Expand Down @@