Concepts / Building Search UI / Plug analytics
Jan. 07, 2019

Plug analytics

You are currently reading the documentation for Vue InstantSearch V2 currently in Beta. 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
<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.0.0",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

When 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).

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>

That’s it. You’ve just leaned how to use Vue InstantSearch with Insights.

Google Analytics with Vue InstantSearch

Even though Algolia provides an analytics tailored to your search, you might want to integrate your search into your existing analytics tools. React InstantSearch doesn’t provide a built-in widget to implement analytics with other providers.

But you can follow the same strategy that we use for the routing.

Integrating with Google Analytics requires 2 steps:

  • set up the Google Analytics library in your page
  • setup the routing
  • listen within the routing

To set up Google Analytics, the best way is to actually follow the reference guide.

Once the GA library is installed on your website, you can add the following:

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-instant-search
    index-name="instant_search"
    :search-client="searchClient"
    :routing="routing"
  >
    <ais-search-box />
    <ais-hits />
  </ais-instant-search>
</template>

<script>
import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
import { simple as simpleMapping } from 'instantsearch.js/es/lib/stateMappings';
// use the existing router
const router = historyRouter();
const _write = router.write.bind(router);
// override write
router.write = routeState => {
  _write(routeState);
  const page = router.createURL(routeState);
  // send to Google analytics
  window.ga('send', 'pageView', page);
};
export default {
  data() {
    return {
      routing: {
        router,
        stateMapping: simpleMapping(),
      },
    }
  }
}
</script>

Here we only send the full URL to Google Analytics but you are free to implement your own function. You can take a look at the ais-state-results reference to have an idea of the structure.

Did you find this page helpful?