Send Click and Conversion Analytics with React InstantSearch
On this page
Install the Search-Insights Library
To make use of analytics, the search-insights library has to be added to your application.
The Insights library can either be loaded via jsDelivr CDN or from your own static fileserver. If you choose the latter, you have to update the ALGOLIA_INSIGHTS_SRC variable. We recommend loading the library by adding this snippet in the <head> of your HTML file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@1.1.1";
!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=ALGOLIA_INSIGHTS_SRC,c.parentNode.insertBefore(i,c)
}(window,document,"script",0,"aa");
// Initialize library
aa('init', {
appId: 'APPLICATION_ID',
apiKey: 'SEARCH_API_KEY'
});
</script>
jsDelivr is a third-party CDN. We are not able to provide support regarding third party services.
Prepare React InstantSearch to connect with Insights client for JavaScript
When sending an event to Algolia, you need to include the queryID of the most recent search. However, by default, the search response does not contain a queryID. Therefore, in order to retrieve it, the custom search parameter clickAnalytics must be set to true and needs to be added when instantiating the search.
To enable the queryID response from the search API, React InstantSearch enables setting custom query parameters with the Configure widget:
1
2
3
4
5
6
7
8
9
10
import { InstantSearch, Configure } from 'react-instantsearch-dom';
const App = () => (
<InstantSearch
indexName="INDEX_NAME"
searchClient={searchClient}
>
<Configure clickAnalytics />
</InstantSearch>
);
Hook a user action to an Insights event
You will often send events when the user interacts with search results. You could send these events from the Hits or the InfiniteHits widget.
In this example we will set up the Hits widget.
1
2
3
4
5
6
7
8
const Hit = ({ hit }) => (
<article>
<h1>{hit.name}</h1>
<button> Add to favorite </button>
</article>
);
<Hits hitComponent={Hit} />;
Now let’s connect our Hit component with the Insights client for JavaScript by using connectHitInsights.
1
2
3
4
5
import { connectHitInsights } from 'react-instantsearch-dom';
const HitWithInsights = connectHitInsights(window.aa)(Hit);
<Hits hitComponent={HitWithInsights} />;
To send an event, use the insights method exposed by connectHitInsights in the following way:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Hit = ({ hit, insights }) => (
<article>
<h1>{hit.name}</h1>
<button
onClick={() =>
insights('clickedObjectIDsAfterSearch', {
eventName: 'Add to favorite'
})
}
>
Add to favorite
</button>
</article>
);
Or your conversion event:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Hit = ({ hit, insights }) => (
<article>
<h1>{hit.name}</h1>
<button
onClick={() =>
insights('convertedObjectIDsAfterSearch', {
eventName: 'Add to cart'
})
}
>
Add to cart
</button>
</article>
);
Insights events (click, conversion, view) used for analytics and/or personalization do not take immediate effect. The delay can range from 10 to 60 minutes depending on how long after the search they are sent. For precise times, see our page on when Insights events take effect.
When sending a conversion event, you’re not always on the search page (for example, you could be on a product detail page). Therefore, you need to pass the queryID to the detail page.
