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:
Whether to escape HTML tags from hits string values.
Enable the button to load previous results.
transformItems
(items: object[]) => object[]
Function to transform the items passed to the templates.
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 | nullwrite({ state, hits }): void
Render Options
This connector provides the same render options as connectInfiniteHits, plus:
The accumulated hits for current and cached pages.
The accumulated hits for current and cached pages.This parameter is deprecated. Use items instead.
The hits for the current page only.
The complete response from the Algolia API.
The banner to display above the hits.
Loads the next page of hits.
Loads the previous results.
Indicates whether the first page of hits has been reached.
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 resultsconvertedObjectIDsAfterSearch: 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.
The options passed to the connector.