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:

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>