Integrate Google Analytics in %language%
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.