Programmatic classification

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.

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

    This example includes a hard-coded manifest. Your code should use the manifest for your Uniform project. For information on how to retrieve the manifest, see the manifest guide.

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

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

import { useEffect } from 'react'; import { useUniformContext } from '@uniformdev/context-react'; export function MyComponent() { const { context } = useUniformContext(); useEffect(() => { // //Do something with the tracker when the component is loaded. }, []); return <div>My component here!</div> }

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.

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.

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

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

You can set quirks in code that runs during server-side rendering.

  1. Add the following file to the root of your application:

    createUniformContext.js

    import { Context, enableContextDevTools } from "@uniformdev/context"; import { NextCookieTransitionDataStore } from "@uniformdev/context-next"; import manifest from "./contextManifest.json"; export function createUniformContext(serverContext) { return new Context({ defaultConsent: true, manifest, transitionStore: new NextCookieTransitionDataStore({ serverContext, }), plugins: [enableContextDevTools()], }); }

  2. Add the following to your _document.js or _document.tsx file:

    import Document, { Html, Head, Main, NextScript } from "next/document"; import { enableNextSsr } from "@uniformdev/context-next"; import { createUniformContext } from "../createUniformContext"; class MyDocument extends Document { static async getInitialProps(ctx) { const context = createUniformContext(ctx); await context.update({ quirks: { location: "YOUR LOCATION", }, }); enableNextSsr(ctx, context); return await Document.getInitialProps(ctx); } render() { return ( <Html lang="en"> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); } } export default MyDocument;

    About this step

    This code demonstrates how to set the value of a quirk named location.

  3. Add the following to your _app.js or _app.tsx file:

    import { UniformContext } from "@uniformdev/context-react"; import { createUniformContext } from "../createUniformContext"; export default function App(props) { const { Component, pageProps, serverUniformContext } = props; const context = createUniformContext(serverUniformContext); return ( <UniformContext context={serverUniformContext ?? context}> <Component {...pageProps} /> </UniformContext> ); }

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

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

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

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

Coming soon

Coming soon

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.

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> }
Last modified
Next
Audiences