Programmatic classification
The Uniform tracker is responsible for classifying the visitor based on their behavior.
The Uniform tracker#
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.
- Add the following packages to your app:
@uniformdev/context
@uniformdev/context-react
- 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 aren't 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>
}
tip
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#
Coming soon
Scores updated#
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>
}