Skip to main content

Personalization

Activate personalization

If you are using Uniform Canvas, personalization is handled automatically. However, if you are not using Canvas, you can still take advantage of personalization, you just have to add it to your front-end application yourself.

The following example adds buttons that allow the visitor to set their preferences. Personalization is configured to show different content based on the visitor's preferences.

info

This code requires the following:

  1. The Uniform tracker is added to the front-end application.
  2. Manifest has an enrichment category colorPreference with an enrichment value red.
import { 
useUniformContext,
useScores,
Personalize,
} from '@uniformdev/context-react';
import { getEnrichmentVectorKey } from '@uniformdev/context';
//
//Create 3 variants:
// 1. When red is the preferred color.
// 2. When blue is the preferred color.
// 3. When there is no preferred color.
const variants = [
{
"id": "color-preference-red",
"fields": {
"title": "Preference: red",
"description": "You prefer the color red."
},
"pz": {
"crit": [
{
"l": getEnrichmentVectorKey('colorPreference', 'red'),
"op": ">",
"r": 0
}
]
}
},
{
"id": "color-preference-blue",
"fields": {
"title": "Preference: blue",
"description": "You prefer the color blue."
},
"pz": {
"crit": [
{
"l": getEnrichmentVectorKey('colorPreference', 'blue'),
"op": ">",
"r": 0
}
]
}
},
{
"id": "default",
"fields": {
"title": "No preference",
"description": "You have no selected a preferred color."
}
}
];
//
//This component displays the preferred color
//along with buttons that allow the user to
//set their preference.
function VisitorPreference({ fields }) {
//
//Get the personalized field values.
const { title, description } = fields;
//
//Get the Uniform tracker.
const { context } = useUniformContext();
//
//Get the current scores, which is where
//the color preference is set.
const scores = useScores();
//
//Function that sets the visitor's color preference.
const setPreference = async (e, color) => {
e.preventDefault();
//
//Get the current score so you can reset the old preference.
const scoreBlue = scores[getEnrichmentVectorKey('colorPreference', 'blue')] ?? 0;
const scoreRed = scores[getEnrichmentVectorKey('colorPreference', 'red')] ?? 0;
//
//Add 10 to the score of the current preference.
//Set the score of the old preference so it will be zero.
await context.update({
enrichments: [
{
str: color == 'red' ? 10 : scoreRed * -1,
cat: 'colorPreference',
key: 'red',
},
{
str: color == 'blue' ? 10 : scoreBlue * -1,
cat: 'colorPreference',
key: 'blue',
}
],
});
alert('Enrichment was set.');
}
//
//Event handler for when the visitor selects
//red as their preferred color.
const setPreferenceRed = async (e) => {
setPreference(e, 'red');
};
//
//Event handler for when the visitor selects
//blue as their preferred color.
const setPreferenceBlue = async (e) => {
setPreference(e, 'blue');
}

return (
<div>
<div>{title}</div>
<div>
<button onClick={setPreferenceRed}>Set red</button>
</div>
<div>
<button onClick={setPreferenceBlue}>Set blue</button>
</div>
</div>
)
}
//
//This component renders the VisitorPreference
//component with the personalized props.
export function VisitorPreferences() {
return (
<Personalize variations={variants}
name="bodyPersonalized"
component={VisitorPreference} />
)
}

Handle tracker events

You can define event handlers for the events that are emitted from the Uniform tracker during the personalization process.

Personalization result

info

Coming soon.