Display content with inline segmentation
On this page
AI Personalization is a beta feature according to Algolia’s Terms of Service (“Beta Services”).
Inline segmentation lets you display personalized content to users based on their profile affinities. It checks the user profile against a set of conditions and renders content if the user matches the segment.
Inline segmentation is useful for:
- Promoting brand stores
- Highlighting product categories
- Showcasing category-based recommendations
- Suggesting relevant search filters
Before you begin
This guide assumes that you’re familiar with React and fetching a user profile.
It also assumes that you’ve configured AI Personalization.
Preview
Storefront displaying inline segmentation for users who like Apple
Create a reusable segment component
First, create a reusable <PersonalizationSegment> component:
1
2
3
4
5
6
7
8
9
10
11
import { usePersonalizationProfileContext } from "./PersonalizationProfileContext";
export function usePersonalizationSegment({ segment }) {
const userProfile = usePersonalizationProfileContext();
return segment(userProfile)
}
export function PersonalizationSegment({ segment, children, fallback = null }) {
const userBelongsToSegment = usePersonalizationSegment({ segment });
return userBelongsToSegment ? children : fallback;
}
Refer to the usePersonalizationProfileContext() React Hook to access the user profile.
Implement dynamic inline segmentation
Use the <PersonalizationSegment> component to conditionally render content based on user affinities:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Page() {
return (
<PersonalizationSegment
segment={(userProfile) => {
return userProfile.affinities.some(
(affinity) =>
affinity.name === 'brand' &&
affinity.value === 'Apple' &&
affinity.score >= 10
);
}}
>
<BannerApple />
</PersonalizationSegment>
);
}
function App({ userProfile }) {
return (
<PersonalizationProfileProvider userProfile={userProfile}>
<Page />
</PersonalizationProfileProvider>
);
}
In this example, the <BannerApple> component only renders if the user has an affinity for the brand “Apple” with a score of 10 or higher.
Add fallback content (optional)
You can provide fallback content for users who don’t match the segment:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Page() {
return (
<PersonalizationSegment
segment={(userProfile) => {
return userProfile.affinities.some(
(affinity) =>
affinity.name === 'brand' &&
affinity.value === 'Apple' &&
affinity.score >= 10
);
}}
fallback={<BannerGeneric />}
>
<BannerApple />
</PersonalizationSegment>
);
}
Support static segment declarations (optional)
For more flexibility, you can declare segments statically. This is useful when you need to load serialized segments from an external source.
Define static segments
Store your static segment definitions:
1
2
3
4
5
6
7
8
9
10
// segments.js
export const appleSegment = {
conditions: [
{
name: 'brand',
value: 'Apple',
score: 10,
},
],
}
Update the segment component
Modify the <PersonalizationSegment> component to handle both dynamic and static segments:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { usePersonalizationProfileContext } from './PersonalizationProfileContext';
function checkUserBelongsToSegment(userProfile, segment) {
return segment.conditions.every((condition) =>
userProfile.affinities.some(
(affinity) =>
affinity.name === condition.name &&
affinity.value === condition.value &&
affinity.score >= condition.score
)
);
}
export function usePersonalizationSegment({ segment }) {
const userProfile = usePersonalizationProfileContext();
return typeof segment === 'function'
? segment(userProfile)
: checkUserBelongsToSegment(userProfile, segment);
}
export function PersonalizationSegment({ segment, children, fallback = null }) {
const userBelongsToSegment = usePersonalizationSegment({ segment });
return userBelongsToSegment ? children : fallback;
}
Use static segments in your app
Now you can use static segments in your <PersonalizationSegment>:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { appleSegment } from './segments';
function Page() {
return (
<PersonalizationSegment segment={appleSegment}>
<BannerApple />
</PersonalizationSegment>
);
}
function App({ userProfile }) {
return (
<PersonalizationProfileProvider userProfile={userProfile}>
<Page />
</PersonalizationProfileProvider>
);
}
