Learn how to send Algolia Insights events from your autocomplete menu.
If you're using Algolia indices as sources in your autocomplete, Algolia provides Search Analytics out-of-the-box. Search Analytics includes metrics like top searches, top searches with no results, overall search counts, etc.
You may also want to capture Click and Conversion Analytics. These analytics take Algolia’s out-of-the-box Search Analytics further by providing insights into actions users take after performing a search. They're useful to better understand your user's behavior and what they need from your app. This information can ultimately drive your business.
Capturing these analytics requires sending events to Algolia when your users view, click, or convert on results. This tutorial explains how to automatically send events from your autocomplete using the
This tutorial assumes that you have:
- an autocomplete using one or more Algolia indices for your sources
If you haven't implemented an autocomplete using Algolia as a source yet, follow the Getting Started guide first. For learning purposes, you can use the demo application credentials and index provided in this tutorial.
First, begin with some boilerplate for the autocomplete implementation. Create a file called
index.js in your
src directory, and add the boilerplate below:
This boilerplate assumes you want to insert the autocomplete into a DOM element with
autocomplete as an
id. You should change the
container to match your markup. Setting
true ensures that the dropdown appears as soon as a user focuses the input.
You must set the
clickAnalytics query parameter to
true to send click and conversion events from your autocomplete.
plugins is an empty array, but you'll learn how to add the Insights plugin next.
Now, whenever the autocomplete shows products in the dropdown, the plugin sends view events with the
eventName "Items Viewed" for these products. If a user clicks a product, the plugin sends a click event, with the
eventName "Item Selected" for that product. By default, the plugin doesn't send any conversion events.
You can change any of the plugin's default behavior by using the
onActive hooks. For example, you may want to customize the
eventName to match your naming conventions or send a different events on these actions.
This snippet shows how to instantiate a plugin that sends a click event with "Product Selected from Autocomplete" as the
eventName whenever a user selects an item. You may want to do this to differentiate between click events sent from your Autocomplete vs. other parts of your search implementation.
If you're using multiple different Algolia indices in the same autocomplete, for example one for products and one for suggestions, you may want to use different
eventNames for each section. You can change this (and other parts of the event) conditionally based on the source index name:
Though the default Insights plugin doesn't send any conversion events, you may want to. For example, you may have created a template with an "Add to cart" button.
If a user adds an item to their shopping cart directly from the autocomplete, you can send a conversion event from your template. This is possible since the Insights plugin stores the Insights client in context. You can pass it to your templates like this:
Once available to your templates, you can use it to send events using Insights client methods. In this example, clicking the "Add to cart button" fires the
convertedObjectIDsAfterSearch method, sending a conversion event.
For more information on the methods and event types you can send using the Insights API, consult the Algolia Insights documentation.
To ensure that you're sending events as you expect, you can check your Algolia Insights logs or work with the Insights Validator Chrome extension. Check out the guide on validating events for more details.