Guides / Building Search UI / Going further

Send Events with Vue InstantSearch

On this page

If you’re using InstantSearch and want to send Insights events, it’s best to do so directly from your InstantSearch implementation. This guide describes how to send click, conversion, and view events with Vue InstantSearch.

Algolia uses valid search-related events for Click and Conversion Analytics. Click and Conversion Analytics form the foundation for more advanced features like A/B Testing and Dynamic Re-Ranking. Algolia uses all valid events—search-related or not—for Personalization.

Even if you aren’t planning on implementing Personalization right away, it’s helpful to consider sending events as if you were. This lets you implement Personalization later on with a robust corpus of well-formatted user data at your disposal.

To learn more about why you would want to send events and which events Algolia uses for which features, please read the guide on capturing user behaviors as events. To make sure you’re following InstantSearch best practices, read the getting started guide before sending events.

See Live Demo

Guides Getting Started with Events
Planning Which Events to Send
Implementing Events

Requirements

Installing the search-insights library

To send events using InstantSearch, you must first add the search-insights library to your application.

You can load the search-insights library with either the jsDelivr CDN or your static file server. If you choose the latter, you must update the ALGOLIA_INSIGHTS_SRC variable to point to the file URL on your file server.

Load the library by adding this snippet in the <head> of your HTML file.

Copy 
1
2
3
4
5
6
7
8

<script>
  var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@2.0.3";

  !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");
</script>
Copy 
1
2
3
4
5
6
7
8
9
10
11
12

aa('init', {
  appId: 'YourApplicationID',
  apiKey: 'YourSearchOnlyAPIKey',
});

// Since search-insights@2.0.0, cookie is not used for anonymous user token.
// If you wish to continue, you can pass `useCookie: true`.
aa('init', {
  appId: 'YourApplicationID',
  apiKey: 'YourSearchOnlyAPIKey',
  useCookie: true,
})

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

Using insights with Node.js

Copy 
$
$
$

npm install search-insights
# or
yarn add search-insights
Copy 
1
2
3

const aa = require('search-insights');
// or
import aa from 'search-insights';

Creating and connecting the insights middleware

Copy 
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

<template>
  <ais-instant-search
    :index-name="<index-name>"
    :search-client="searchClient"
    :middlewares="middlewares"
  >
    <!-- widgets -->
  </ais-instant-search>
</template>

<script>
import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares'

const insightsMiddleware = createInsightsMiddleware({
  insightsClient: aa,
})

export default {
  data() {
    return {
      // ...
      middlewares: [insightsMiddleware],
    }
  },
}
</script>

When sending a search-related event to Algolia, you need to include the queryID of the most recent search.

By default, the search response doesn’t contain a queryID. To retrieve it, you need to set the clickAnalytics parameter to true. The insights middleware handles this for you.

Setting the userToken

By default, search-insights library sets an anonymous token and stores it in a cookie. It’s best to set the userToken yourself using an internal user identifier. This lets you reliably identify users.

If you use search-insights >= 2.0.0, it doesn’t set an anonymous token automatically and no longer uses cookies by default. If you want to enable it, refer to the insightsInitParams.

Copy 
1

aa('setUserToken', yourUserToken)

If you don’t have access to that information right away, you can set it up later from your code. As soon as you’ve set it, the insights middleware ensures that every subsequent search includes a userToken.

Sending default events

When using any of the following connectors, the insights middleware automatically sends default for some user behaviors like selecting a facet or viewing a result.

Sending events from refinement widgets

If you customize a widget using connectors, the insights middleware also sends events. You can turn off this behavior or change the default payload.

Sending events from results widgets

When using any of the following connectors, the insights middleware automatically sends default view events when hits are rendered.

If you customize a widget using connectors, the insights middleware also sends events. You can turn off this behavior or change the default payload.

Sending events

Usually, you want to send events when the user interacts with search results. This means you want to send the events from either the ais-hits or the ais-infinite-hits widget.

This example sets up the ais-hits widget:

Copy 
1
2
3
4
5
6
7
8
9

<ais-hits>
  <template v-slot="{ items, sendEvent }">
    <ul>
      <li v-for="item in items" :key="item.objectID">
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </template>
</ais-hits>

Now for the payoff: sending the event.

The default slot exposes a sendEvent function.

Copy 
1
2
3
4
5
6
7

<button type="button" @click="sendEvent('click', item, 'Item Starred')">
  Star
</button>

<button type="button" @click="sendEvent('conversion', item, 'Item Ordered')">
  Order
</button>

Insights events (view, click, and conversion) don’t take immediate effect. The delay can range from a few minutes to an hour, depending on whether they’re sent after a search or not, and how long after a search they’re sent. For a better estimation, see: How long does it take for Insights events to be taken into account?.

Based on the event type you send, you need different data. For example, a conversion event doesn’t need the positions attribute, but the click event does. This is because positions determines the average click position. The integration with InstantSearch handles all this for you. InstantSearch injects

  • All the necessary data based on the event to send
  • The context of the current query.

If you intend to send these events with the Personalization feature, it’s vital to decide which events to send and when to send them. Read the guide on capturing user actions as events if you’re unsure about what events to send.

Tracking queryID on other pages

Conversion events don’t always happen on a search results page. For example, a user could buy an item from a product detail page. That means you need to pass the queryID to the detail page. The keeping track of queryID guide shows how to use query parameters to track the queryID.

How to Track the QueryID for Conversion Events

Putting everything together

Here’s a full code snippet for sending click and conversion events from within a ais-hits widget.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ais-hits>
  <template v-slot="{ items, sendEvent }">
    <ul>
      <li v-for="item in items" :key="item.objectID">
        <p>{{ item.name }}</p>
        <button
          type="button"
          @click="sendEvent('click', item, 'Item Starred')"
        >
          Star
        </button>

        <button
          type="button"
          @click="sendEvent('conversion', item, 'Item Ordered')"
        >
          Order
        </button>
      </li>
    </ul>
  </template>
</ais-hits>

Advanced insights middle customizations

The insights middleware lets you turn off default events, change the default event payloads, send events from your own custom widgets, and send events to third-party trackers. Please check the insights middleware documentation to learn how to do so.

Previous
Routing URLs
Next
Integrate Google Analytics
Did you find this page helpful?
Vue InstantSearch v4