Integrate Google Analytics in React InstantSearch

Google Analytics with React InstantSearch

Even though Algolia provides an analytics tailored to your search, you might want to integrate your search into your existing analytics tools. React InstantSearch doesn’t provide a built-in widget to implement analytics with other providers.

But you can follow the same strategy that we use for the routing.

Integrating with Google Analytics requires 2 steps:

• set up the Google Analytics library in your page
• setup the search state change listener

To set up Google Analytics, the best way is to actually follow the reference guide.

Once the GA library is installed on your website, you can add the following:

1
2
3
4
5
6
7
8
9
10
<InstantSearch
  indexName="instant_search"
  searchClient={searchClient}
  onSearchStateChange={searchState => {
    const page = `?query=${searchState.query}`;
    window.ga('send', 'pageView', page);
  }}
>
  <SearchBox />
</InstantSearch>

Here we only send the query to Google Analytics but you are free to implement your own function. You can take a look at the connectStateResults reference to have an idea of the structure.