Signature
About this widget
Starting from v4.9.0, you can use the
insights
option instead of setting up the Insights middleware yourself.createInsightsMiddleware
creates an insights middleware to help you achieve the following:
- Set the
userToken
for insights purposes (Click Analytics, Personalization, etc.) - Automatically send events from built-in widgets. You can turn this off if needed
- Send events from your own custom widgets
Requirements
search-insights
v1.6.2 or later.- Vue InstantSearch v3.7.0 or later.
Examples
JavaScript
Options
The Insights client is used to send events.
It synchronizes the user token between search and analytics calls.To disable
userToken
synchronization and automatic event sending, set this to null
.Insights parameters to forward to the Insights client’s
init
method.With search-insights >= v1.7.0 and < 2.0.0
, the Insights client accepts useCookie
and userToken
parameters in the init
method.
You can pass useCookie: false
to prevent the usage of cookies to store an anonymous userToken
.
You can also pass a custom userToken
while creating insights
middleware, if you have one.With search-insights >= 2.0.0
, the default value of useCookie
is false
.You can set an authenticated user token and a user token in
insightsInitParams
.
Both tokens are passed to the Insights API for sending events.
If both are set, InstantSearch uses the authenticated user token for search queries.By default, the middleware sends events to Algolia using the provided
insightsClient
.
You can also control events and send them yourself by implementing an onEvent
method for the middleware to call instead.
This method lets you access data and filter or modify the payload.
You can also use it to send events to third-party trackers.If you want to use onEvent
to send events to third-party trackers,
but don’t want to send them to Algolia,
you can set insightsClient
to null
,
and you don’t need the search-insights
library in your application.JavaScript
Custom events
Connectors
Many of the InstantSearch connectors expose the
sendEvent
method.
If you use these connectors to create custom widgets,
you can leverage the method to send custom events.Here’s a list of connectors that expose sendEvent
and they’re exposed at the default slot of corresponding Vue InstantSearch components.connectAutocomplete
:ais-autocomplete
connectHierarchicalMenu
:ais-hierarchical-menu
connectHits
:ais-hits
connectInfiniteHits
:ais-infinite-hits
connectMenu
:ais-menu
andais-menu-select
connectNumericMenu
:ais-numeric-menu
connectRange
:ais-range-input
connectRatingMenu
:ais-rating-menu
connectRefinementList
:ais-refinement-list
connectToggleRefinement
:ais-toggle-refinement
Vue