Enrichments
This section covers how to configure, manage, and use enrichments to classify visitors.
For background information about what enrichments are and examples of how they are used, see the classification capabilities section.
Add enrichment
By adding an enrichment, you create dimensions that can be used as an input for intents and audiences.
In Uniform, open your project.
Navigate to Personalization > Enrichments.
Click the red (+) button.
About this stepIn the Uniform API, an enrichment is called an "enrichment category".
Enter the following values:
Field Description Name Name that describes the enrichment. Public ID Value that uniquely identifies the enrichment. Sort Order Numeric value that determines the order enrichments are displayed. Score Cap The maximum score for the enrichment. The tracker will not increase the enrichment value scores beyond this value. Click Save.
Click Add value.
About this stepIn the Uniform API, an enrichment value is called an "enrichment key". When enrichments are exposed in composition tools (e.g. Canvas) or native integrations they are called "enrichment tags".
Enter the following values:
Field Description Enrichment Value Name that describes the enrichment. Public ID Value that uniquely identifies the enrichment value. Sort Order Numeric value that determines the order enrichments are displayed. If no value is specified, enrichment values are sorted in alphabetical order by name. Click Save.
You can add more values if that makes sense for your requirements.
Click Publish.
About this stepEnrichments are included in the Uniform manifest, but not enrichment values. The Uniform tracker needs to know the "score cap" for the enrichment so it can classify visitors, but it does not need to the individual values.
This means you must publish changes when you add or remove enrichments, but not enrichment values.
Regenerate the Uniform manifest for any application that uses this Uniform project.
About this stepThis process can be automated using webhooks so you do not have to remember to do this manually after every change.
You can assign enrichments to compositions, and you can configure audiences and intents using the enrichment.
Delete enrichment value
In Uniform, open the enrichment with the value you want to delete.
Click the red X next to the value.
Delete enrichment
In Uniform, open the enrichment you want to delete.
Click Delete.
dangerDeleting an enrichment will delete the enrichment and all enrichment values associated with it.
About this stepIf the deleted enrichment was assigned to any composition, when you open the composition you will see a warning about an enrichment being unknown. This tells you that Uniform is storing a value for an enrichment that is not defined in Uniform. You must remove the enrichment before you are able to save any changes to the composition.
Click (X) next to the enrichment to remove this value from the composition.
Click Publish.
Regenerate the Uniform manifest for any application that uses this Uniform project.
About this stepThis process can be automated using webhooks so you do not have to remember to do this manually after every change.
Track enrichments
The tracker automatically captures certain information because it is included in the manifest. For example, if a signal is configured for a query string parameter, when the conditions for the signal are met, the signal is captured.
This does not happen in the case of enrichments, because while the limits for an enrichment are included in the manifest, the conditions for when an enrichment should be applied are not. For this reason, enrichments must be tracked explictly when relevant.
If you are using Uniform Canvas and have assigned enrichments directly to a composition, enrichments are tracked automatically. The steps in this section are required if you are tracking enrichments that come from another source, such as from a headless CMS.
Context must be activated in your app. See activating classification for details.
- React
Open the component that you want to track. To make these instructions easier to follow, the following component is used as an example:
export const MyComponent = ({
title,
description,
}) => {
return (
<div>
<div>{title}</div>
<div>{description}</div>
</div>
)
};About this stepTracking can be added to any component. In a web app, tracking is often added to the component that represents a page. However, you might have component-specific tracking. In that case, tracking would be added to a lower-level component.
Add the following code:
const enrichments = [{cat:"1", key:"1", str:50}];
About this stepThis object describes the enrichment that should be written. The Uniform tracker expects the enrichment to be defined in a specific format. For more information on this format, see the product reference.
Add the following code:
import {
Track,
} from "@uniformdev/context-react";
export const MyComponent = ({
title,
description,
}) => {
return (
<Track behavior={enrichments}>
<div>
<div>{title}</div>
<div>{description}</div>
</div>
</Track>
)
};About this stepThis code uses the tracking component to capture the specified enrichments.
Event-triggered enrichment
There are times you might want to classify a visitor based on something the visitor did. The Uniform tracker allows you to programmatically add an enrichment.
For example, if the visitor puts a certain type of product in a cart, that might be a good indicator of the visitor's intent. The example below is a simplified version of that scenario. When the visitor clicks a button, the score for an enrichment is increased.
Context must be activated in your app. See activating classification for details.
In addition, this example expects the following manifest is used:
{
"project": {
"pz": {
"enr": {
"category": {
"cap": 100
}
}
},
"test": {}
}
}
- React (steps)
- React (complete)
This section guides you through the process of implementing the solution by explaining each step. It takes longer to go through, but it will help you understand why each line of code is needed.
Open the component that you want to track. To make these instructions easier to follow, the following component is used as an example:
export async function getStaticProps() {
return {
props: {
fields: {
title: "My Title",
description: "My Description",
category: "kitchen",
},
},
};
}
export const MyComponent = ({ title, description, category }) => {
const handleClick = (e, category) => {
e.preventDefault();
}
return (
<div>
<div>{title}</div>
<div>{description}</div>
<div>
<button onClick={(e) => handleClick(e, category)}>
Add to {category}
</button>
</div>
</div>
)
};
export default function MyPage({ fields }) {
return (
<MyComponent {...fields} />
);
}Add the following code:
import { useUniformContext } from "@uniformdev/context-react";
...
export const MyComponent = ({ title, description, category }) => {
const handleClick = (e, category) => {
e.preventDefault();
}
const { context } = useUniformContext();
return (
<div>
<div>{title}</div>
<div>{description}</div>
<div>
<button onClick={(e) => handleClick(e, category)}>
Add to {category}
</button>
</div>
</div>
)
};
...Add the following:
import { useUniformContext } from "@uniformdev/context-react";
...
export const MyComponent = ({ title, description, category }) => {
const handleClick = (e, category) => {
e.preventDefault();
context.update({
enrichments: [
{
cat: "category",
key: category,
str: 10,
},
]
});
}
const { context } = useUniformContext();
return (
<div>
<div>{title}</div>
<div>{description}</div>
<div>
<button onClick={(e) => handleClick(e, category)}>
Add to {category}
</button>
</div>
</div>
)
};
...
This section gets you to a completed solution as quickly as possible. It does not explain each line of code.
The following code represents a component with event-triggered enrichment fully implemented. The highlighted lines are specifically involved with the solution.
import { useUniformContext } from "@uniformdev/context-react";
export async function getStaticProps() {
return {
props: {
fields: {
title: "My Title",
description: "My Description",
category: "kitchen",
},
},
};
}
export const MyComponent = ({ title, description, category }) => {
const handleClick = (e, category) => {
e.preventDefault();
context.update({
enrichments: [
{
cat: "category",
key: category,
str: 10,
},
]
});
}
const { context } = useUniformContext();
return (
<div>
<div>{title}</div>
<div>{description}</div>
<div>
<button onClick={(e) => handleClick(e, category)}>
Add to {category}
</button>
</div>
</div>
)
};
export default function MyPage({ fields }) {
return (
<MyComponent {...fields} />
);
}