Integrate Google Analytics in InstantSearch.js

Google Analytics with InstantSearch.js

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.

The middleware listens to search state change. In the event listener, you can send events to Google Analytics or any solution. The example below uses Google Analytics.

Integrating with Google Analytics requires 2 steps:

• Set up the Google Analytics library in your page
• Implement a custom middleware

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

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

search.use(() => ({
  onStateChange({ uiState }) {
    sendEventDebounced(uiState);
  }
  subscribe() {},
  unsubscribe() {},
}))