Skip to main content

Activate classification

Goals

In order for Uniform to be able to classify visitors, the web application must be updated to include the Uniform components that handle classification. This involves the following:

  • Install and use the Uniform CLI.
  • Understand the Uniform context manifest and how to download it.
  • Incorporate the manifest into your web application.
  • Add the Uniform context object to your web application.
  • Enable Uniform dev tools in your web application.

Adding Canvas to the home page involves making changes to the front-end application. Follow the steps that match your front-end technology.

Next.js​

tip

This section guides you through the process of activating classification by explaining each step. It takes longer to go through, but it will help you understand why each line of code is needed.

  1. Open a terminal window in the root of the repository.

  2. Enter the following command:

    npm install @uniformdev/context @uniformdev/context-react
    About this step

    This adds references to the packages for React apps that need to use Uniform.

  3. Enter the following command:

    npm install -D @uniformdev/cli
    About this step

    This adds a reference to the package with the Uniform CLI, which is a tool that enables you to interact with Uniform from a command-line interface. This is needed in order to download the Uniform context manifest, which provides the instructions that power the classification process.

  4. Edit the following file:

    /package.json
    {
      "name": "my-uniform-app",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "dev": "npm run download:manifest && next dev",
        "build": "npm run download:manifest && next build",
        "download:manifest": "uniform context manifest download --output ./contextManifest.json",
        ...
    About this step

    This adds a step to the Next.js dev and build scripts to download the context manifest from Uniform. This manifest includes information that tells Uniform how to classify visitors. Since the app doesn't make a call back to Uniform at runtime, this information is needed at build-time. All the details the app needs are provided at build-time.

  5. Enter the following command:

    npm run download:manifest
    About this step

    This command downloads the manifest immediately. The change you made previously configured the dev script so it downloads the manifest before the web app is started, but that only takes effect the next time you start the web app. The following steps expect the manifest has already been downloaded. This means you have two options: download the manifest manually, or restart the web app.

  6. Edit the following file:

    /pages/_app.js
    import manifest from "../contextManifest.json";

    import "../styles/globals.css";
    import "../styles/page.css";

    function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />;
    }

    export default MyApp;
    About this step

    This makes the manifest that was downloaded previously available in the app.

  7. Edit the following file:

    /pages/_app.js
    import { Context } from "@uniformdev/context";

    import manifest from "../contextManifest.json";

    import "../styles/globals.css";
    import "../styles/page.css";

    const context = new Context({
      manifest,
    });

    function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />;
    }

    export default MyApp;
    About this step

    This adds and assigns the manifest to the Uniform context (not to be confused with a custom React context object that makes the Uniform context object available to the app). The Uniform context maintains state for the classification process. Personalization uses this state.

  8. Edit the following file:

    /pages/_app.js
    import { Context } from "@uniformdev/context";

    import manifest from "../contextManifest.json";

    import "../styles/globals.css";
    import "../styles/page.css";

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

    import "../styles/globals.css";
    import "../styles/page.css";

    function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />;
    }

    export default MyApp;
    About this step

    This line tells Uniform to assume the visitor has given consent to have their actions classified and stored locally. Normally a web app would prompt the user to give consent (and you would programically notify Uniform that consent was granted), but since this is a learning exercise, consent is implied.

    For more information, see the section on compliance and consent.

  9. Edit the following file:

    /pages/_app.js
    import { UniformContext } from "@uniformdev/context-react";
    import { Context } from "@uniformdev/context";

    import manifest from "../contextManifest.json";

    import "../styles/globals.css";
    import "../styles/page.css";

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

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

    export default MyApp;
    About this step

    This adds a custom React context object to the app so the Uniform context object can be accessed by other components in the app.

  10. Edit the following file:

    /pages/_app.js
    import { UniformContext } from "@uniformdev/context-react";
    import { Context, enableContextDevTools } from "@uniformdev/context";

    import manifest from "../contextManifest.json";

    import "../styles/globals.css";
    import "../styles/page.css";

    const context = new Context({
      manifest,
      defaultConsent: true,
      plugins: [
        enableContextDevTools(),
      ],
    });

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

    export default MyApp;
    About this step

    This enables the browser developer tools to access state details from the Uniform context object. The browser extension depends on this.

tip

If start the front-end application, the Uniform tracker will be capturing visitor activity. If you have the browser extension installed, you will see a dimension value is set when you visit the architecture page.

Nuxt 3​

tip

This section guides you through the process of activating classification by explaining each step. It takes longer to go through, but it will help you understand why each line of code is needed.

  1. Open a terminal window in the root of the repository.

  2. Enter the following command:

    npm install @uniformdev/canvas @uniformdev/canvas-vue @uniformdev/context @uniformdev/context-vue @uniformdev/uniform-nuxt
    About this step

    Even though you are not using Uniform Canvas in this tutorial, you still must add references to these packages. The Nuxt module has dependencies on these packages.

  3. Enter the following command:

    npm install -D @uniformdev/cli npm-run-all
    About this step

    This adds a reference to the package with the Uniform CLI, which is a tool that enables you to interact with Uniform from a command-line interface. This is needed in order to download the Uniform context manifest, which provides the instructions that power the classification process.

  4. Edit the following file:

    /package.json
    {
      "name": "my-uniform-app",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "dev": "run-s download:manifest nuxt:dev",
        "nuxt:dev": "nuxt dev",
        "build": "run-s download:manifest nuxt:build",
        "nuxt:build": "nuxt build",
        "download:manifest": "uniform context manifest download --output ./contextManifest.json",
        ...
    About this step

    This adds a step to the Nuxt 3 dev and build processes to download the context manifest from Uniform. This manifest includes information that tells Uniform how to classify visitors. Since the app doesn't make a call back to Uniform at runtime, this information is needed at build-time. All the details the app needs are provided at build-time.

  5. Enter the following command:

    npm run download:manifest
    About this step

    This command downloads the manifest immediately. The change you made previously configured the dev script so it downloads the manifest before the web app is started, but that only takes effect the next time you start the web app. The following steps expect the manifest has already been downloaded. This means you have two options: download the manifest manually, or restart the web app.

  6. Edit the following file:

    /nuxt.config.ts
    import { defineNuxtConfig } from "nuxt";

    // https://v3.nuxtjs.org/api/configuration/nuxt.config
    export default defineNuxtConfig({
      css: ["~/styles/globals.css", "~/styles/page.css"],
      modules: ["@uniformdev/uniform-nuxt"],
    });
    About this step

    This adds the Uniform module.

  7. Edit the following file:

    /nuxt.config.ts
    import { defineNuxtConfig } from "nuxt";

    // https://v3.nuxtjs.org/api/configuration/nuxt.config
    export default defineNuxtConfig({
      css: ["~/styles/globals.css", "~/styles/page.css"],
      modules: ["@uniformdev/uniform-nuxt"],
      uniform: {
        projectId: process.env.UNIFORM_PROJECT_ID,
        readOnlyApiKey: process.env.UNIFORM_API_KEY,
        apiHost: process.env.UNIFORM_CLI_BASE_URL,
      },
    });
    About this step

    The Nuxt module for Uniform requires these settings. The only one that is actually used in the manifest, but the others are needed in order to pass validation checks within the Nuxt module.

  8. Edit the following file:

    /nuxt.config.ts
    import { defineNuxtConfig } from "nuxt";
    import { ManifestV2 } from "@uniformdev/context";
    import manifest from "./contextManifest.json";

    // https://v3.nuxtjs.org/api/configuration/nuxt.config
    export default defineNuxtConfig({
      css: ["~/styles/globals.css", "~/styles/page.css"],
      modules: ["@uniformdev/uniform-nuxt"],
      uniform: {
        projectId: process.env.UNIFORM_PROJECT_ID,
        readOnlyApiKey: process.env.UNIFORM_API_KEY,
        apiHost: process.env.UNIFORM_CLI_BASE_URL,
        manifest: manifest as ManifestV2,
      },
    });
    About this step

    This makes the manifest that you downloaded earlier available to the Nuxt module.

tip

If start the front-end application, the Uniform tracker will be capturing visitor activity. If you have the browser extension installed, you will see a dimension value is set when you visit the architecture page.

Last updated on