feat(insights): introduce insights middleware (1/4)

.storybook/playgrounds/default.ts

@@ -1,5 +1,6 @@
 import instantsearch from '../../src/index';
 import { panel, numericMenu, hits } from '../../src/widgets';
+import { createInsightsMiddleware } from '../../src/middlewares';
 
 export const hitsItemTemplate = `
 <div
@@ -126,6 +127,14 @@ function instantSearchPlayground({
       container: pagination,
     }),
   ]);
+
+  const insights = createInsightsMiddleware({
+    insightsClient: null,
+    onEvent: props => {
+      console.log('insights onEvent', props);
+    },
+  });
+  search.EXPERIMENTAL_use(insights);
 }
 
 export default instantSearchPlayground;

package.json

@@ -93,6 +93,7 @@
     "@wdio/spec-reporter": "5.16.5",
     "@wdio/static-server-service": "5.16.5",
     "algoliasearch": "4.3.1",
+    "algoliasearch-v3": "npm:algoliasearch@3",
     "babel-eslint": "10.0.3",
     "babel-jest": "24.9.0",
     "babel-loader": "8.0.6",
@@ -141,11 +142,11 @@
   "bundlesize": [
     {
       "path": "./dist/instantsearch.production.min.js",
-      "maxSize": "64 kB"
+      "maxSize": "64.50 kB"
     },
     {
       "path": "./dist/instantsearch.development.js",
-      "maxSize": "160 kB"
+      "maxSize": "150.40 kB"
     }
   ]
 }

src/components/Hits/Hits.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Template from '../Template/Template';
 
-const Hits = ({ results, hits, cssClasses, templateProps }) => {
+const Hits = ({ results, hits, bindEvent, cssClasses, templateProps }) => {
   if (results.hits.length === 0) {
     return (
       <Template
@@ -33,6 +33,7 @@ const Hits = ({ results, hits, cssClasses, templateProps }) => {
               ...hit,
               __hitIndex: position,
             }}
+            bindEvent={bindEvent}
           />
         ))}
       </ol>
@@ -49,6 +50,8 @@ Hits.propTypes = {
   }).isRequired,
   hits: PropTypes.array.isRequired,
   results: PropTypes.object.isRequired,
+  sendEvent: PropTypes.func.isRequired,
+  bindEvent: PropTypes.func.isRequired,
   templateProps: PropTypes.object.isRequired,
 };
 

src/components/InfiniteHits/InfiniteHits.tsx

@@ -6,6 +6,7 @@ import Template from '../Template/Template';
 import { SearchResults } from 'algoliasearch-helper';
 import { Hits } from '../../types';
 import { InfiniteHitsTemplates } from '../../widgets/infinite-hits/infinite-hits';
+import { SendEventForHits, BindEventForHits } from '../../lib/utils';
 
 type InfiniteHitsCSSClasses = {
   root: string;
@@ -31,11 +32,14 @@ type InfiniteHitsProps = {
   };
   isFirstPage: boolean;
   isLastPage: boolean;
+  sendEvent: SendEventForHits;
+  bindEvent: BindEventForHits;
 };
 
 const InfiniteHits = ({
   results,
   hits,
+  bindEvent,
   hasShowPrevious,
   showPrevious,
   showMore,
@@ -86,6 +90,7 @@ const InfiniteHits = ({
               ...hit,
               __hitIndex: position,
             }}
+            bindEvent={bindEvent}
           />
         ))}
       </ol>

src/components/InfiniteHits/__tests__/InfiniteHits-test.tsx

@@ -18,6 +18,9 @@ describe('InfiniteHits', () => {
     disabledLoadMore: 'disabledLoadMore',
   };
 
+  const sendEvent = () => {};
+  const bindEvent = () => '';
+
   describe('markup', () => {
     it('should render <InfiniteHits /> on first page', () => {
       const hits: Hits = [
@@ -50,6 +53,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);
@@ -88,6 +93,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);
@@ -115,6 +122,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);
@@ -142,6 +151,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);
@@ -180,6 +191,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);
@@ -223,6 +236,8 @@ describe('InfiniteHits', () => {
           },
         },
         cssClasses,
+        sendEvent,
+        bindEvent,
       };
 
       const { container } = render(<InfiniteHits {...props} />);

src/components/Template/Template.js

@@ -28,6 +28,7 @@ class Template extends Component {
       compileOptions,
       helpers: this.props.templatesConfig.helpers,
       data: this.props.data,
+      bindEvent: this.props.bindEvent,
     });
 
     if (content === null) {
@@ -69,6 +70,7 @@ Template.propTypes = {
     }),
   }),
   useCustomCompileOptions: PropTypes.objectOf(PropTypes.bool),
+  bindEvent: PropTypes.func,
 };
 
 Template.defaultProps = {

src/connectors/autocomplete/__tests__/connectAutocomplete-test.ts

@@ -566,4 +566,154 @@ search.addWidgets([
       );
     });
   });
+
+  describe('insights', () => {
+    const createRenderedWidget = () => {
+      const searchClient = createSearchClient();
+      const render = jest.fn();
+      const makeWidget = connectAutocomplete(render);
+      const widget = makeWidget({ escapeHTML: false });
+
+      const helper = algoliasearchHelper(searchClient, '', {});
+      helper.search = jest.fn();
+
+      const initOptions = createInitOptions({ helper });
+      const instantSearchInstance = initOptions.instantSearchInstance;
+      widget.init!(initOptions);
+
+      const firstIndexHits = [
+        {
+          name: 'Hit 1-1',
+          objectID: '1-1',
+          __queryID: 'test-query-id',
+          __position: 0,
+        },
+      ];
+      const secondIndexHits = [
+        {
+          name: 'Hit 2-1',
+          objectID: '2-1',
+          __queryID: 'test-query-id',
+          __position: 0,
+        },
+        {
+          name: 'Hit 2-2',
+          objectID: '2-2',
+          __queryID: 'test-query-id',
+          __position: 1,
+        },
+      ];
+
+      const scopedResults = [
+        {
+          indexId: 'indexId0',
+          results: new SearchResults(helper.state, [
+            createSingleSearchResponse({
+              index: 'indexName0',
+              hits: firstIndexHits,
+            }),
+          ]),
+          helper,
+        },
+        {
+          indexId: 'indexId1',
+          results: new SearchResults(helper.state, [
+            createSingleSearchResponse({
+              index: 'indexName1',
+              hits: secondIndexHits,
+            }),
+          ]),
+          helper,
+        },
+      ];
+
+      widget.render!(
+        createRenderOptions({ instantSearchInstance, helper, scopedResults })
+      );
+
+      const sendEventToInsights = instantSearchInstance.sendEventToInsights as jest.Mock;
+
+      return {
+        instantSearchInstance,
+        sendEventToInsights,
+        render,
+        firstIndexHits,
+        secondIndexHits,
+      };
+    };
+
+    it('sends view event when hits are rendered', () => {
+      const { sendEventToInsights } = createRenderedWidget();
+      expect(sendEventToInsights).toHaveBeenCalledTimes(2);
+      expect(sendEventToInsights.mock.calls[0][0]).toEqual({
+        eventType: 'view',
+        insightsMethod: 'viewedObjectIDs',
+        payload: {
+          eventName: 'Hits Viewed',
+          index: 'indexName0',
+          objectIDs: ['1-1'],
+        },
+        widgetType: 'ais.autocomplete',
+      });
+      expect(sendEventToInsights.mock.calls[1][0]).toEqual({
+        eventType: 'view',
+        insightsMethod: 'viewedObjectIDs',
+        payload: {
+          eventName: 'Hits Viewed',
+          index: 'indexName1',
+          objectIDs: ['2-1', '2-2'],
+        },
+        widgetType: 'ais.autocomplete',
+      });
+    });
+
+    it('sends click event', () => {
+      const {
+        sendEventToInsights,
+        render,
+        secondIndexHits,
+      } = createRenderedWidget();
+      expect(sendEventToInsights).toHaveBeenCalledTimes(2); // two view events for each index by render
+
+      const { indices } = render.mock.calls[render.mock.calls.length - 1][0];
+      indices[1].sendEvent('click', secondIndexHits[0], 'Product Added');
+      expect(sendEventToInsights).toHaveBeenCalledTimes(3);
+      expect(sendEventToInsights.mock.calls[2][0]).toEqual({
+        eventType: 'click',
+        insightsMethod: 'clickedObjectIDsAfterSearch',
+        payload: {
+          eventName: 'Product Added',
+          index: 'indexName1',
+          objectIDs: ['2-1'],
+          positions: [0],
+          queryID: 'test-query-id',
+        },
+        widgetType: 'ais.autocomplete',
+      });
+    });
+
+    it('sends conversion event', () => {
+      const {
+        sendEventToInsights,
+        render,
+        firstIndexHits,
+      } = createRenderedWidget();
+      expect(sendEventToInsights).toHaveBeenCalledTimes(2); // two view events for each index by render
+
+      const { indices } = render.mock.calls[render.mock.calls.length - 1][0];
+      indices[0].sendEvent('conversion', firstIndexHits[0], 'Product Ordered');
+      expect(sendEventToInsights).toHaveBeenCalledTimes(3);
+      expect(sendEventToInsights.mock.calls[2][0]).toEqual({
+        eventType: 'conversion',
+        insightsMethod: 'convertedObjectIDsAfterSearch',
+        payload: {
+          eventName: 'Product Ordered',
+          index: 'indexName0',
+          objectIDs: ['1-1'],
+          queryID: 'test-query-id',
+        },
+        widgetType: 'ais.autocomplete',
+      });
+    });
+  });
 });

src/connectors/autocomplete/connectAutocomplete.ts

@@ -3,6 +3,8 @@ import escapeHits, { TAG_PLACEHOLDER } from '../../lib/escape-highlight';
 import {
   checkRendering,
   createDocumentationMessageGenerator,
+  createSendEventForHits,
+  SendEventForHits,
   noop,
   warning,
 } from '../../lib/utils';
@@ -46,6 +48,11 @@ export type AutocompleteRendererOptions = {
      * The full results object from the Algolia API.
      */
     results: SearchResults;
+
+    /**
+     * Send event to insights middleware
+     */
+    sendEvent: SendEventForHits;
   }>;
 
   /**
@@ -127,11 +134,20 @@ search.addWidgets([
             ? escapeHits(scopedResult.results.hits)
             : scopedResult.results.hits;
 
+          const sendEvent = createSendEventForHits({
+            instantSearchInstance,
+            index: scopedResult.results.index,
+            widgetType: this.$$type!,
+          });
+
+          sendEvent('view', scopedResult.results.hits);
+
           return {
             indexId: scopedResult.indexId,
             indexName: scopedResult.results.index,
             hits: scopedResult.results.hits,
             results: scopedResult.results,
+            sendEvent,
           };
         });