Integrate Google Analytics

Get insights from user searches in your React InstantSearch app.

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>
     );
   }