Concepts / Getting insights and analytics / Implement click and conversion Analytics
May. 10, 2019

Implement Click and Conversion Analytics

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.

Using Algolia Insights with Vue InstantSearch

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

Loading and initializing the library

Insights library can be either loaded via jsDelivr CDN or directly bundled with your application. We recommend loading the library by adding the snippet below to your main HTML file.

1
2
3
4
5
6
7
8
9
10
<script>
  !function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e.aa=e.aa||function(){(e.aa.queue=e.aa.queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0],i.async=1,i.src="https://cdn.jsdelivr.net/npm/search-insights@1.1.1",c.parentNode.insertBefore(i,c)}(window,document,"script",0,"aa");


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

Enabling queryID response

To enable the queryID response from the search API, Vue InstantSearch enables setting custom query parameters with the ais-configure widget:

1
2
3
4
5
6
7
8
<template>
  <ais-instant-search
    index-name="instant_search"
    :search-client="searchClient"
  >
    <ais-configure clickAnalytics="true" />
  </ais-instant-search>
</template>

Reporting click and conversion events

Whether you want to trigger a click event depends on your implementation type and business logic. A good framework would be to send a click event once a user has clicked on something that indicates action inside the hit - for example, when a user clicks on a result (for click events) or when a user adds an item to a cart (for conversions).

Sending click events does not always take immediate effect, it depends on the situation. On the other hand, personalization events always take immediate effect. See our page on when click events take effect.

This example covers how to obtain the objectID and position values for reporting. This feature is not available with the built-in widgets. But you can compose the connectors to create a new component that will have access to these values. You gonna use the ais-hits for access the hits and ais-state-results to access the values to compute the position:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <ais-state-results>
    <template slot-scope="{ page, hitsPerPage, queryID }">
      <ais-hits>
        <template slot="item" slot-scope="{ item, index }">
          <button
            @click="
              clickedObjectIDsAfterSearch({
                eventName: "Add to Cart",
                index: "instant_search",
                queryID,
                objectIDs: [item.objectID],
                positions: [hitsPerPage * page + index + 1],
              })
            "
          >
            Click
          </button>
          <h1><ais-highlight :hit="item" attribute="name" /></h1>
          <p><ais-highlight :hit="item" attribute="description" /></p>
        </template>
      </ais-hits>
    </template>
  </ais-state-results>
</template>

<script>
export default {
  methods: {
    clickedObjectIDsAfterSearch(params) {
      window.aa('clickedObjectIDsAfterSearch', params);
    },
  },
};
</script>

Or your conversion event:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
  <ais-state-results>
    <template slot-scope="{ queryID }">
      <ais-hits>
        <template slot="item" slot-scope="{ item }">
          <button
            @click="
              convertedObjectIDsAfterSearch({
                eventName: "Add to favorite",
                index: "INDEX_NAME",
                queryID,
                objectIDs: [item.objectID]
              })
            "
          >
            Convert
          </button>
          <h1><ais-highlight :hit="item" attribute="name" /></h1>
          <p><ais-highlight :hit="item" attribute="description" /></p>
        </template>
      </ais-hits>
    </template>
  </ais-state-results>
</template>

<script>
export default {
  methods: {
    convertedObjectIDsAfterSearch(params) {
      window.aa('conversion', params);
    },
  },
};
</script>

When sending a conversion event, you’re not always on the search page (such as a product detail page). Therefore, you need to pass the queryID to the detail page. We wrote a guide to show you how to use localStorage to pass the queryID.

Did you find this page helpful?