> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate Google Analytics

> Get insights from user searches in your Vue InstantSearch app.

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:

<Steps>
  <Step title="Set up Google Analytics">
    See [Set up the Google tag with gtag.js](https://developers.google.com/tag-platform/gtagjs).
  </Step>

  <Step title="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.

    ```js JavaScript icon="code" theme={"system"}
    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() {},
      };
    }
    ```
  </Step>

  <Step title="Inject the middleware into the InstantSearch lifecycle">
    ```html Vue theme={"system"}
    <template>
      <ais-instantsearch
        :search-client="searchClient"
        index-name="instant_search"
        :middlewares="middlewares"
      >
        <!-- ... -->
      </ais-instantsearch>
    </template>

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