Integrate Google Analytics

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:

Set up Google Analytics

See Set up the Google tag with gtag.js.

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() {},
  };
}

Inject the middleware into the InstantSearch lifecycle

Vue

<template>
  <ais-instantsearch
    :search-client="searchClient"
    index-name="instant_search"
    :middlewares="middlewares"
  >
    <!-- ... -->
  </ais-instantsearch>
</template>

<script>
export default {
  data() {
    return {
      searchClient,
      middlewares: [googleAnalyticsMiddleware],
    };
  },
}
</script>

Guides