Skip to main content
The InfiniteHitsWithInsights connector provides the logic to build a custom widget that displays search results with infinite scrolling and automatic Insights tracking.
This connector is deprecated. Use the insights middleware with connectInfiniteHits instead. For more information, visit the Algolia Insights documentation.

​
Usage

import { connectInfiniteHitsWithInsights } from 'instantsearch.js/es/connectors';

const customInfiniteHitsWithInsights = connectInfiniteHitsWithInsights(
  (renderOptions, isFirstRender) => {
    const { items, showMore, isLastPage, insights, widgetParams } = renderOptions;
    const { container } = widgetParams;
    
    container.innerHTML = `
      <div class="hits">
        ${items.map(item => `
          <div class="hit" data-id="${item.objectID}">
            <h3>${item.name}</h3>
            <button class="click-btn">Track Click</button>
          </div>
        `).join('')}
      </div>
      ${!isLastPage ? '<button id="load-more">Load more</button>' : ''}
    `;
    
    // Track click events
    container.querySelectorAll('.click-btn').forEach((btn, index) => {
      btn.addEventListener('click', () => {
        insights('clickedObjectIDsAfterSearch', {
          eventName: 'Product Clicked',
          objectIDs: [items[index].objectID],
        });
      });
    });
    
    if (!isLastPage) {
      container.querySelector('#load-more').addEventListener('click', showMore);
    }
  }
);

search.addWidgets([
  customInfiniteHitsWithInsights({
    container: document.querySelector('#infinite-hits'),
  }),
]);

​
Connector Options

This connector accepts the same options as connectInfiniteHits:
​
escapeHTML
boolean
default:"true"
Whether to escape HTML tags from hits string values.
​
showPrevious
boolean
default:"false"
Enable the button to load previous results.
​
transformItems
(items: object[]) => object[]
Function to transform the items passed to the templates.
​
cache
object
Reads and writes hits from/to cache. Helps restore InfiniteHits and scroll position when users navigate back from a product page.Must implement read and write methods:
  • read({ state }): object | null
  • write({ state, hits }): void

​
Render Options

This connector provides the same render options as connectInfiniteHits, plus:
​
items
Array<Hit>
The accumulated hits for current and cached pages.
​
hits
Array<Hit>
The accumulated hits for current and cached pages.
This parameter is deprecated. Use items instead.
​
currentPageHits
Array<Hit>
The hits for the current page only.
​
results
SearchResults
The complete response from the Algolia API.
​
banner
Banner
The banner to display above the hits.
​
showMore
() => void
Loads the next page of hits.
​
showPrevious
() => void
Loads the previous results.
​
isFirstPage
boolean
Indicates whether the first page of hits has been reached.
​
isLastPage
boolean
Indicates whether the last page of hits has been reached.
​
insights
(method: string, payload: object) => void
Helper function to send Insights events. This function automatically infers query parameters from the search results.Supported methods:
  • clickedObjectIDsAfterSearch: Track clicks on search results
  • convertedObjectIDsAfterSearch: Track conversions from search results
// Track a click event
insights('clickedObjectIDsAfterSearch', {
  eventName: 'Product Clicked',
  objectIDs: ['object1'],
});

// Track a conversion event
insights('convertedObjectIDsAfterSearch', {
  eventName: 'Product Purchased',
  objectIDs: ['object1', 'object2'],
});
​
sendEvent
(eventType: string, hits: object | object[], eventName?: string) => void
Sends an event to the Insights middleware.
​
bindEvent
(eventType: string, hits: object | object[], eventName?: string) => string
Returns a string for the data-insights-event attribute.
​
widgetParams
object
The options passed to the connector.