Add classification to your application

The Uniform tracker handles visitor classification. It's a component that runs on the visitor's device. As a result, the approach used to add the tracker to an application depends on the technology used to build the front-end.

In Uniform, the Context object handles tracking visitor activity. Adding this object to your application enables tracking.

  1. Add the following npm packages to your application:

    @uniformdev/context @uniformdev/context-react

    About this step

    This adds references to the packages for React apps that need to use Context. For more information on these packages, see npm package reference.

  2. Generate the manifest for your Uniform project.

  3. Add the following code to your app component.

    import { Context, } from "@uniformdev/context"; import { UniformContext } from "@uniformdev/context-react"; import manifest from "../lib/uniform/contextManifest.json"; const context = new Context({ }); function MyApp({ Component, pageProps, }) { return ( <Component {...pageProps} /> ); } export default MyApp;

    About this step

    This creates the context object that's used to configure how the tracker works. For more information about this component, see the Context type reference.

  4. Add the following code:

    import { Context, } from "@uniformdev/context"; import manifest from "../lib/uniform/contextManifest.json"; const context = new Context({ manifest, }); ...
  5. Add the following code:

    import { Context, } from "@uniformdev/context"; import manifest from "../lib/uniform/contextManifest.json"; const context = new Context({ defaultConsent: true, manifest, }); ...

    About this step

    For more information, see the compliance and consent capability.

  6. Add the following code:

    import { Context, } from "@uniformdev/context"; import { UniformContext } from "@uniformdev/context-react"; import manifest from "../lib/uniform/contextManifest.json"; const context = new Context({ defaultConsent: true, manifest, }); function MyApp({ Component, pageProps, }) { return ( <UniformContext context={context}> <Component {...pageProps} /> </UniformContext> ); } export default MyApp;

    About this step

    This creates a custom React context object that components in the app can use to access to the context. For more information about this component, see the Context component reference.

By adding the context to your app, you have activated the Uniform tracker. The tracker runs automatically when the app is loaded and when the route changes.

tip

If you want to be able to see the activity captured during the tracking process, you should enable Uniform developer tools.