Skip to main content

Documentation Index

Fetch the complete documentation index at: https://algolia.com/llms.txt

Use this file to discover all available pages before exploring further.

This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.
Although Algolia provides analytics tailored to your search implementation, you might want to send your search data to your existing analytics tools. To do this, implement some custom middleware:
1

Set up Google Analytics

See Set up the Google tag with gtag.js.
2

Create the middleware to send events

In the event listener, send events to Google Analytics. This example debounces the event for 3 seconds but adjust this to your needs.
JavaScript
function googleAnalyticsMiddleware() {
  let timer;
  const sendEventDebounced = () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      gtag('event', 'page_view', {
        page_location: window.location.pathname + window.location.search,
      });
    }, 3000);
  });

  return {
    onStateChange() {
      sendEventDebounced();
    },
    subscribe() {},
    unsubscribe() {},
  };
}
3

Inject the middleware into the InstantSearch lifecycle

React
import { useInstantSearch } from "react-instantsearch";

function Middleware() {
  const { addMiddlewares } = useInstantsearch();

  useLayoutEffect(() => {
    return addMiddlewares(googleAnalyticsMiddleware);
  }, []);

  return null;
}

function Search() {
  return (
    <InstantSearch searchClient={searchClient} indexName="instant_search">
      <Middleware />
    </InstantSearch>
  );
}
Last modified on March 23, 2026