Skip to main content

Documentation Index

Fetch the complete documentation index at: https://algolia.com/llms.txt

Use this file to discover all available pages before exploring further.

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:
1

Set up Google Analytics

See Set up the Google tag with gtag.js.
2

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

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>
Last modified on March 12, 2026