Skip to main content

Classification

This section provides information on how to programmatically control the classification process.

Tracker basics

The Uniform tracker is responsible for classifying the visitor based on their behavior. You need to add the tracker to your front-end application and be able to get a reference to it when you need to use it.

Add the tracker

The Context type represents the Uniform tracker. The tracker must be added to the front-end application before any classification can happen.

  1. Add the following packages to your app:

    @uniformdev/context
    @uniformdev/context-react
  2. Add the following code to the _app.js file:

    import { UniformContext } from '@uniformdev/context-react';
    import { Context } from '@uniformdev/context';

    const context = new Context({
    consent: true,
    manifest: {
    project: {},
    },
    });

    function MyApp({ Component, pageProps }) {
    return (
    <UniformContext context={context}>
    <Component {...pageProps} />
    </UniformContext>
    );
    }
    info

    You will usually read the manifest from another source. For example, you may download it to a file using the Uniform CLI and use that file to create the context object.

Get intent manifest

The intent manifest is usually retrieved as a part of the build process for the front-end application using an npm script to call the Uniform CLI. However, it can be retrieved in other ways as well.

const axios = require("axios");

axios.get('https://uniform.app/api/v2/manifest', {
params: {
preview: false,
projectId: "[!!! UNIFORM PROJECT ID !!!]",
},
headers: {
accept: "application/json",
"x-api-key": "[!!! UNIFORM API KEY !!!]",
}
}).then(response => {
const manifest = response.data;
// Do something with the manifest.
});

Get reference to the tracker

Before you can use the tracker, you must get a reference to it.

To get a reference to the tracker from inside a component, a React hook is used.

import { useEffect } from 'react';
import { useUniformContext } from '@uniformdev/context-react';

export function MyComponent() {
const { context } = useUniformContext();

useEffect(() => {
//
//Do something with the tracker...
}, []);

return <div>My component here!</div>
}

Write tracker data

The Uniform SDK provides the ability for you to add logic to your application that explicitly captures visitor activity for the purpose of classifying the visitor.

Enrichments

If you are using Uniform Canvas, any enrichments that are assigned to a component are tracked automatically. However, if you are not using Canvas, you must track enrichments in your application.

You can use the Uniform tracker to track enrichments. The following example demonstrates how to add a button that can track enrichments.

import { useUniformContext } from '@uniformdev/context-react';

export function EnrichmentTriggerButton() {
const { context } = useUniformContext();

const onClick = async (e) => {
e.preventDefault();
await context.update({
enrichments: [{
str: 10,
cat: 'colorPreference',
key: 'red',
}],
});
alert('Enrichment was set.');
}

return <button onClick={onClick}>Track enrichments</button>
}
info

This code requires the manifest has an enrichment category colorPreference with an enrichment value red.

You can also use front-end specific components to track enrichments.

You can use a React hook to track enrichments.

import { Track } from '@uniformdev/context-react';

export function TrackEnrichment() {
const behavior = [
{
str: 10,
cat: 'colorPreference',
key: 'red',
}
];
return <Track behavior={behavior} />
}
info

This code requires the manifest has an enrichment category colorPreference with an enrichment value red.

Events

An event can trigger a signal. You can use the Uniform tracker to write events. The following example demonstrates how to add a button that can write events.

import { useUniformContext } from '@uniformdev/context-react';

export function EventsTriggerButton() {
const { context } = useUniformContext();

const onClick = async (e) => {
e.preventDefault();
await context.update({
events: [
{ event: "event1" },
{ event: "event2" },
],
});
alert('2 events were sent.');
}

return <button onClick={onClick}>Send events</button>
}

Quirks

A quirk can trigger a signal. You can use the Uniform tracker to write quirk values. The following example demonstrates how to add a button that can write quirks.

import { useUniformContext } from '@uniformdev/context-react';

export function QuirksTriggerButton() {
const { context } = useUniformContext();

const onClick = async (e) => {
e.preventDefault();
await context.update({
quirks: {
city: "San Francisco",
persona: "Shopper",
},
});
alert('2 quirks were set.');
}

return <button onClick={onClick}>Set quirks</button>
}

Read tracker data

The Uniform tracker enables you to read the classification data for the current visitor.

Quirks

You can read the quirks that are currently set on the visitor.

You can use a React hook to read the quirks currently set on the visitor. This example creates a component that displays the visitor's current quirks.

import { useQuirks } from '@uniformdev/context-react';

export function ShowQuirks() {
const quirks = useQuirks();
return <div>{JSON.stringify(quirks)}</div>
}

Scores

You can read the visitor dimension (audiences, enrichments, intents, and signals) scores that are current set on the visitor.

You can use a React hook to read the scores currently set on the visitor. This example creates a component that displays the visitor's current scores.

import { useScores } from '@uniformdev/context-react';

export function ShowScores() {
const scores = useScores();
return <div>{JSON.stringify(scores)}</div>
}

Handle tracker events

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

Quirks updated

info

Coming soon.

Scores updated

info

Coming soon.

Set score decay

The Uniform tracker automatically reduces visitor dimension scores over time through a process called decay. See the score decay guide for information on how to control score decay.

Clear tracker data

This example demonstrates how to implement a "forget me" button.

import { useUniformContext } from '@uniformdev/context-react';

export function ForgetMeButton() {
const { context } = useUniformContext();

const onClick = async (e) => {
e.preventDefault();
await context.forget(true);
alert('All tracker data was cleared.');
}

return <button onClick={onClick}>Forget me</button>
}