Integrate Google Analytics in React InstantSearch Hooks

Even though Algolia provides analytics that are tailored to your search implementation, you might want to integrate your search into your existing analytics tools. You can implement a custom middleware to do that.

First, you follow the steps on how to set up the Google Analytics library in your page.

Then you can create a middleware. The In the event listener, you can send events to Google Analytics or any solution.

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import debounce from 'lodash.debounce';

function googleAnalyticsMiddleware() {
  const sendEventDebounced = debounce((uiState) => {
    window.ga('set', 'page', window.location.pathname + window.location.search);
    window.ga('send', 'pageView');
  }, 3000);

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

Once the middleware is created, you can inject it into the InstantSearch lifecycle:

Copy
import { useInstantSearch } from 'react-instantsearch-hooks-web';

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

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

  return null;
}

function Search() {
  return (
    <InstantSearch searchClient={searchClient} indexName="instant_search">
      <Middleware />
    </InstantSearch>
  );
}

Send Insights events

Improve performance

Did you find this page helpful?