InstantSearch / React / V6 / Guides

Integrate Google Analytics in %language%

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

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
11
<InstantSearch
  indexName="instant_search"
  searchClient={searchClient}
  onSearchStateChange={searchState => {
    gtag('event', 'page_view', {
      page_location: `?query=${searchState.query}`,
    })
  }}
>
  <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 StateResults reference to have an idea of the structure.

Did you find this page helpful?