Prerequisites
- An Algolia account. If you don't have one already, create an account for free.
- Node & npx
Algolia will search through any set of data, as long as it’s structured. This is what we call an index
.
The items are broken down into individual records (objects
), with each object containing a set of fields (attributes
).
Exemple of a single object
, representing an e-commerce product:
{
"objectID": 1,
"name": "Samsung Galaxy",
"description": "Samsung Galaxy Express 3 4G LTE with 8GB Memory Prepaid Cell Phone",
"brand": "AT&T GoPhone",
"categories": [
"Cell Phones"
],
"price": 49.99,
"image": "https://cdn-demo.algolia.com/bestbuy-0118/4984700_sb.jpg",
"popularity": 21449
}
As you can see, this is just like plain, old JSON :)
Upload your data
You will now create a new index
from this dataset.
There are two main ways you can achieve this:
- On the Algolia Dashboard by just uploading your JSON file
- By using on the Algolia API Clients
You can follow this tutorial to upload the records contained in the file to an Algolia index.
Configure your index
An index configuration is a set of settings that define how your index will behave.
-
Ranking: The 8 Ranking Criteria
-
Relevance: Defining Relevance
-
Faceting: Faceting and How to Declare Attributes for Faceting
The goal for this workshop is to configure our index with:
- One custom ranking criteria (
popularity
): https://www.algolia.com/doc/guides/managing-results/must-do/custom-ranking/how-to/configure-custom-ranking/#using-the-dashboard - Two
attributesForFaceting
(brand
andcategories
): https://www.algolia.com/doc/guides/managing-results/refine-results/faceting/how-to/declaring-attributes-for-faceting/#using-the-dashboard
Feels free to play around and explore your newly created index from the Algolia Dashboard when you are done!
Links
Prerequisites
- Your Application ID
- Your Index Name
- Your Search API Key
You can find all of the above in the Algolia Dashboard.
If you didn't complete the previous step you can use the following:
- Application ID:
N66N7FOPGI
- Search API Key:
41bc8ab6cb33007df5f2e3e41796cfa9
- Index Name:
demo_ecommerce
InstantSearch
InstantSearch is an open-source, production-ready UI library that lets you quickly build a search interface in your front-end application. It's available in multiple flavors: Vanilla, React, Vue, Angular, iOS and Android.
For this workshop, we will use the create-instantsearch-app CLI (inspired by create-react-app
).
The CLI will help you quickly create a new React InstantSearch, it will ask you multiple questions, notably your Application ID, your Search API Key and your Index Name.
npx create-instantsearch-app my-app
IMPORTANT: Select "React InstantSearch" when asked for the tenplate to use.
When the CLI is done bootstrapping your InstantSearch app, you can start it to check that everything is okay:
cd my-app
npm start
Everything is running smoothly?
To go further, you can:
- Display the images of the records.
- Add another InstantSearch widget.
Links
Prerequisites
- Configured Index
- React InstantSearch application
Collecting user's activity data is the prerequisites for many of Algolia powerful features like Recommend, AI Re-Ranking, personalization and A/B testing
We will implement the clickedObjectIDsAfterSearch
event in our React InstantSearch application.
1. Adding the Algolia Insights library to your application.
Import the library:
<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>
Initialize the Algolia Insights client:
// Initialize the Insights client.
window.aa('init', {
appId: 'YOUR_APPLICATION_ID',
apiKey: 'YOUR_API_KEY',
});
// Set a global userToken
window.aa('setUserToken', 'user-1');
Configure your React application to pass the needed context to the insights client:
<Configure clickAnalytics />
2. Send your first event.
Now you are all setup to send your first event. Our goal is to track when one of the item on our search page is being clicked.
First step, "connect" our Hit
component in order to give him access to the Insights client.
1 - Import the connectHitInsights
import { connectHitInsights } from 'react-instantsearch-dom';
2 - "Connect" the Hit
component (injecting the Insights client)
const HitWithInsights = connectHitInsights(window.aa)(Hit);
3 - Replace the Hit
component by the HitWithInsights
one
<Hits hitComponent={HitWithInsights} />
Second step, we need to pass the objectID
of the clicked item to the Insights client.
onClick={() =>
insights('clickedObjectIDsAfterSearch', {
eventName: 'Product Clicked'
})
}
You can check and debug your event sending on the Events hub in your Algolia Dashboard.
Links
- Getting Started with Events
- Improve Results with Analytics
- Click and Conversion Analytics
- Analytic Metrics and Reports
As the Personalization feature require a reasonable number of events to be sent, this part will be presented.
- Intro video: https://www.youtube.com/watch?v=ymd7VL233TQ&t=139s
- Dashboard showcase
Links