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

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

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

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

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