Guides / Getting insights and analytics / Search analytics / Click-through and conversion analytics

Send Click and Conversion Events with Vue InstantSearch

You are reading the documentation for Vue InstantSearch v2. Read our migration guide to learn how to upgrade from v1 to v2. You can still find the v1 documentation here.

This guide describes how to use Algolia Insights with Vue InstantSearch.

Install the Search-Insights Library

To make use of analytics, the search-insights library has to be added to your application.

The Insights library can either be loaded via jsDelivr CDN or from your own static fileserver. If you choose the latter, you have to update the ALGOLIA_INSIGHTS_SRC variable to point to the URL of the file on your own fileserver. We recommend loading the library by adding this snippet in the <head> of your HTML file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@1.3.1";

  !function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e[s]=e[s]||function(){
  (e[s].queue=e[s].queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0],
  i.async=1,i.src=n,c.parentNode.insertBefore(i,c)
  }(window,document,"script",ALGOLIA_INSIGHTS_SRC,"aa");


  // Initialize library
  aa('init', {
    appId: 'APPLICATION_ID',
    apiKey: 'SEARCH_API_KEY'
  });
</script>

jsDelivr is a third-party CDN. We are not able to provide support regarding third party services.

Connect InstantSearch with the Insights client for JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <ais-instant-search
    index-name="instant_search"
    :search-client="searchClient"
    :insights-client="insightsClient"
  >
    <ais-configure :clickAnalytics="true" />
  </ais-instant-search>
</template>

<script>
export default {
  data() {
    return {
      insightsClient: window.aa,
    };
  },
};
</script>

When sending an event to Algolia, you need to include the queryID of the related search. However, by default, the search response does not contain a queryID. To retrieve it, the custom search parameter clickAnalytics must be set to true by adding it when instantiating the search.

To add a queryID to your search response, enable the clickAnalytics: true search parameter using the ais-configure widget.

Hook as user action to an Insights event

You will often send events when the user interacts with search results. You could send these events from the ais-hits or the ais-infinite-hits widget.

In this example we set up the ais-hits widget.

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <ais-hits>
    <div slot-scope="{ items, insights }">
      <div v-for="item in items">
        <h1>{{item.name}}</h1>
        <button @click="insights('clickedObjectIDsAfterSearch', { eventName: 'Add to favorite', objectIDs: [item.objectID] })">
          Add to favorite
        </button>
      </div>
    </div>
  </ais-hits>
</template>

Or your conversion event:

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <ais-hits>
    <div slot-scope="{ items, insights }">
      <div v-for="item in items">
        <h1>{{item.name}}</h1>
        <button @click="insights('convertedObjectIDsAfterSearch', { eventName: 'Add to cart', objectIDs: [item.objectID] })">
          Add to cart
        </button>
      </div>
    </div>
  </ais-hits>
</template>

Insights events (click, conversion, view) used for analytics and/or personalization do not take immediate effect. The delay can range from 10 to 60 minutes depending on how long after the search they are sent. For precise times, see our page on when Insights events take effect.

When sending a conversion event, you’re not always on the search page (for example, you could be on a product detail page). Therefore, you need to pass the queryID to the detail page.

Did you find this page helpful?