Enrichments

This section covers how to configure, manage, and use enrichments to classify visitors.

tip

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.

1. In Uniform, open your project.

2. Navigate to Personalization > Enrichments.

   

3. Click the red (+) button.

   About this step

   In the Uniform API, an enrichment is called an "enrichment category".

4. 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.

5. Click Save.

   

6. Click Add value.

   About this step

   In 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".

7. 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.

8. Click Save.

   

9. You can add more values if that makes sense for your requirements.

10. Click Publish.

    About this step

    Enrichments 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.

11. Regenerate the Uniform manifest for any application that uses this Uniform project.

    About this step

    This process can be automated using webhooks so you do not have to remember to do this manually after every change.

Next steps

You can assign enrichments to compositions, and you can configure audiences and intents using the enrichment.

Delete enrichment value

1. In Uniform, open the enrichment with the value you want to delete.

2. Click the red X next to the value.

   

Delete enrichment

1. In Uniform, open the enrichment you want to delete.

2. Click Delete.

   
   danger

   Deleting an enrichment will delete the enrichment and all enrichment values associated with it.

   About this step

   If 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.

   

3. Click Publish.

4. Regenerate the Uniform manifest for any application that uses this Uniform project.

   About this step

   This 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.

tip

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.

Before you start

Context must be activated in your app. See activating classification for details.

React

1. 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 step

   Tracking 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.

2. Add the following code:

   const enrichments = [{cat:"1", key:"1", str:50}];
   About this step

   This 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.

3. 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 step

   This 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.

Before you start

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)

tip

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.

1. 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} />
     );
   }

2. 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>
     )
   };
   ...

3. 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>
     )
   };
   ...

React (complete)

tip

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} />
  );
}