Send click and conversion events with InstantSearch.js

Unlock Algolia’s most powerful features by sending click and conversion events from your InstantSearch app.

What are events?

Events are actions that users take on your app or website. They unlock powerful features, such as recommendations, personalization, smarter search results, and analytics that help you optimize your user experience.

For more information, see Get started with click and conversion events.

How to send events

InstantSearch widgets can automatically send certain events if you enable the insights option when setting up your app.

For a full guide to implementing events, see Send events with InstantSearch.

Default events

With the insights middleware, your InstantSearch widgets send default events. To check the default events, go to the Events Debugger. For more information, see Validate your events.

Default click events for refinement widgets

The following widgets send click events (“Filter Applied”) when users select a refinement. Custom widgets using the connectors send the same events.

Widget	Connector
hierarchicalMenu	connectHierarchicalMenu
menu	connectMenu
menuSelect	connectMenu
ratingMenu	connectRatingMenu
refinementList	connectRefinementList
toggleRefinement	connectToggleRefinement

Numeric refinement widgets don’t send clicked events as the clickedFilters event does not apply to numeric filters. This is relevant for connectNumericMenu- and connectRange-based widgets.

Default view events for results widgets

The following widgets send view events (“Hits Viewed”) for the visible items in the search results. Custom widgets using the connectors send the same events.

Widget	Connector
autocomplete	connectAutocomplete
geoSearch	connectGeoSearch
hits	connectHits
infiniteHits	connectInfiniteHits

Default click events for results widgets

The following widgets send click events (“Hit Clicked”) when users click a search result.

Widget	Connector
hits	connectHits
infiniteHits	connectInfiniteHits

Because of technical limitations, the default click events aren’t sent when using connectHits or connectInfiniteHits. If you’re using connectors, make sure to set up click events on them.

JavaScript

function render(renderOptions, isFirstRender) {
  const { items, sendEvent, widgetParams } = renderOptions;

  widgetParams.container.innerHTML = `
    <ul>
      ${items
        .map(
          (item) =>
            `<li>
              ${instantsearch.highlight({ attribute: 'name', hit: item })}
            </li>`
        )
        .join('')}
    </ul>
  `;

  [...widgetParams.container.querySelectorAll('li')]
    .forEach((element, index) => {
      element.addEventListener('click', (event) => {
        sendEvent('click', hits[index], 'Hit Clicked');
      });
    });
}

const customHits = connectHits(render);
// or
const customInfiniteHits = connectInfiniteHits(render);