Send click and conversion events with Vue InstantSearch
On this page
This code has been specifically created for Vue 2. Some modifications may be required for it to work correctly in Vue 3.
What are events?
Events are actions that users take on your app or website. They unlock powerful features, such as recommendations, personalization, smarter search results, and analytics that help you optimize your user experience.
For more information, see Get started with click and conversion events.
How to send events
InstantSearch widgets can automatically send certain events if you enable the insights
option when setting up your app.
For a full guide to implementing events, see Send events with InstantSearch.
Default events
With the insights
middleware, your InstantSearch widgets send default events.
To check the default events, go to the Events Debugger.
For more information, see Validate your events.
Default click
events for refinement widgets
The following widgets send click
events (“Filter Applied”) when users select a refinement.
Custom widgets use connectors to send the same events.
Widget | Connector |
---|---|
ais-hierarchical-menu |
connectHierarchicalMenu |
ais-menu |
connectMenu |
ais-menu-select |
connectMenu |
ais-rating-menu |
connectRatingMenu |
ais-refinement-list |
connectRefinementList |
ais-toggle-refinement |
connectToggleRefinement |
Numeric refinement widgets don’t send clicked
events as the clickedFilters
event does not apply to numeric filters. This is relevant for connectNumericMenu
- and connectRange
-based widgets.
Default view
events for results widgets
The following widgets send view
events (“Hits Viewed”) for the visible items in the search results.
Custom widgets using the connectors send the same events.
Widget | Connector |
---|---|
ais-autocomplete |
connectAutocomplete |
ais-hits |
connectHits |
ais-infinite-hits |
connectInfiniteHits |
Default click
events for results widgets
The following widgets send click
events (“Hit Clicked”) when users click a search result.
Widget | Connector |
---|---|
hits |
ais-hits |
infiniteHits |
ais-infinite-hits |
Because of technical limitations, the default click
events aren’t sent when using ais-hits
or ais-infinite-hits
. If you’re using connectors, make sure to set up click
events on them.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<ul>
<li v-for="item in items" :key="item.value">
<button @click="state.sendEvent('click', item, 'Hit Clicked');">
{{ item.label }}
</button>
</li>
</ul>
</template>
<script>
import { createWidgetMixin } from 'vue-instantsearch';
import { connectHitsWithInsights } from 'instantsearch.js/es/connectors';
// or
import { connectInfiniteHitsWithInsights } from 'instantsearch.js/es/connectors';
export default {
mixins: [createWidgetMixin({ connector: connectHitsWithInsights })], // or connectInfiniteHitsWithInsights
};
</script>