Personalizing search facets

AI Personalization is a beta feature according to Algolia’s Terms of Service (“Beta Services”).

Facets let your users narrow down search results by using specific categories or filters. Using AI Personalization, you can personalize search facets to suit each user’s preferences. This approach allows users to refine their search, focusing on results that align closely with their interests.

This guide shows how to use AI Personalization and InstantSearch to personalize search facets.

Before you begin

This guide assumes that you’re familiar with React InstantSearch and fetching a user profile.

It also assumes that you’ve configured AI Personalization.

Preview

Implementation

Start by creating the usePersonalizedItems function. This function helps you rank a list of facets to display the most relevant ones to users. It does this by taking into account their preferences.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { usePersonalizationProfileContext } from "./PersonalizationProfileContext";

function usePersonalizedItems(attribute) {
  const { affinities } = usePersonalizationProfileContext();

  const affinitiesMatchingAttribute = affinities.filter(
    (affinity) => affinity.name === attribute
  );

  const affinityScoreByValue = affinitiesMatchingAttribute.reduce(
    (acc, affinity) => {
      acc[affinity.value] = affinity.score;
      return acc;
    },
    {}
  );

  return {
    getPersonalizedItems: (items) => {
      return items
        .filter((item) => Boolean(affinityScoreByValue[item.value]))
        .map((item) => ({
          ...item,
          affinityScore: affinityScoreByValue[item.value],
        }))
        .sort((a, b) => b.affinityScore - a.affinityScore);
    },
  };
}

The following steps outline how this works:

• Fetch the user’s affinities. The function retrieves the user’s affinities from the personalization context.

• Filter affinities. It keeps only affinities that match the specified attribute.

• Create affinity scores. It builds a mapping of the scores for the filtered affinities.

• Personalize facets. It exposes a function which filters, scores and sorts facets by their affinity scores in descending order.

Then, you can use the usePersonalizedItems function in your application:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { RefinementList } from "react-instantsearch";

function PersonalizedRefinementList({ attribute }) {
  const { getPersonalizedItems } = usePersonalizedItems(attribute);

  return (
    <RefinementList
      limit={500}
      transformItems={(items) => {
        return getPersonalizedItems(items);
      }}
    />
  );
}

To complete the process of personalizing search facets, render the <RefinementList> and implement the following strategies:

• Over-fetch items. Items are over-fetched by setting the limit to 500. This large pool of items increases the likelihood of meeting the user’s personal preferences.

• Transform the items. The transformItems prop gives you complete control over the list of items displayed by <RefinementList>. It lets you transform the large pool of items into a personalized list relevant to the user before they are shown on the screen.

These strategies can also be used to personalize search facets with the <Menu> widget.