Skip to main content

Activate personalization

Goals

You have configured the instructions that control personalization. Next you need to update the web app to execute those instructions. This involves the following:

  • Defining the personalized and non-personalized content.
  • Defining the personalization criteria for the personalized content.
  • Adding the personalization component to the front-end app.

Add personalized content

You need to define the personalized content and associate rules with the content so Uniform can determine which content to use for a visitor.

Create the following file:

/content/home-variants.json
[
{
"id": "personalized-for-architecture",
"fields": {
"title": "Home",
"description": "You triggered the architecture signal."
},
"pz": {
"crit": [
{
"l": "architecturePageView",
"op": ">",
"r": 0
}
]
}
},
{
"id": "default",
"fields": {
"title": "Home",
"description": "As you navigate around, content will change."
}
}
]
About this step

This defines the content and the criteria for personalizing the body component on the home page. For more information on the format for the personalization criteria, see the section on associating personalization criteria with content.

Add new layout component

Currently the layout component is shared by all pages in the site. Since you now have content and logic that is specific to the home page, a new layout component is needed. 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. Copy the file /src/components/Layout.jsx to /src/components/HomeLayout.jsx.

  2. Open the new file in a text editor.

  3. Make the following changes:

    import Head from "next/head";

    import Body from "./Body";
    import Footer from "./Footer";

    export default function HomeLayout({ fields }) {
    const { title } = fields;
    ...
  4. Make the following changes:

    import Head from "next/head";

    import Body from "./Body";
    import Footer from "./Footer";

    import { Personalize } from '@uniformdev/context-react';
    ...
  5. Make the following changes:

    import Head from "next/head";

    import Body from "./Body";
    import Footer from "./Footer";

    import { Personalize } from '@uniformdev/context-react';
    import variants from "../../content/home-variants.json";
    ...
  6. Make the following changes:

    ...
    export default function HomeLayout({ fields }) {
    const { title } = fields;
    return (
    <div className="container">
    <Head>
    <title>{title}</title>
    <link rel="icon" href="/favicon.ico" />
    </Head>
    <Personalize
    variations={variants}
    name="bodyPersonalized"
    component={Body}
    />
    <Footer />
    </div>
    );
    }

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. Copy the file /components/Layout.vue to /components/HomeLayout.vue.

  2. Open the new file in a text editor.

  3. Make the following change:

    /components/HomeLayout.vue
    <script lang="ts" setup>
    import type { Content, Fields } from "../types";
    import Body from "./Body.vue";
    import Footer from "./Footer.vue";
    import variantsJson from "../content/home-variants.json";
    import { type PersonalizedVariant } from "@uniformdev/context";

    defineProps<{
    fields: Fields;
    content: Content;
    }>();
    const variants = variantsJson as PersonalizedVariant[];
    </script>

    <template>
    <div class="container">
    <Head>
    <Title>{{ fields.title }}</Title>
    <link rel="icon" href="/favicon.ico" />
    </Head>
    <Body :fields="fields" :content="content" />
    <Footer />
    </div>
    </template>
    About this step

    This makes the variant data available to the component.

  4. Make the following change:

    /components/HomeLayout.vue
    <script lang="ts" setup>
    import type { Content, Fields } from "../types";
    import Body from "./Body.vue";
    import Footer from "./Footer.vue";
    import variantsJson from "../content/home-variants.json";
    import { type PersonalizedVariant } from "@uniformdev/context";
    import { Personalize } from "@uniformdev/context-vue";

    defineProps<{
    fields: Fields;
    content: Content;
    }>();
    const variants = variantsJson as PersonalizedVariant[];
    </script>

    <template>
    <div class="container">
    <Head>
    <Title>{{ fields.title }}</Title>
    <link rel="icon" href="/favicon.ico" />
    </Head>
    <Personalize
    :variations="variants"
    name="bodyPersonalized"
    :component="(Body as any)"
    />
    <Footer />
    </div>
    </template>
    About this step

    This adds the personalization component, which is responsible for determining which variant's data to use.

Use new layout component

Now the personalization-enabled layout component must be added to the home page. Follow the steps that match your front-end technology.

Next.js

Edit the following file:

/pages/index.js
import HomeLayout from "../src/components/HomeLayout";

import content from "../content/content.json";

export async function getStaticProps() {
const slug = "/";
const topic = content.find((e) => e.url == slug);
return { props: { fields: topic.fields } };
}

export default function Home({ fields }) {
return <HomeLayout content={content} fields={fields} />;
}
About this step

This changes the home page so it uses the new personalization-enabled layout component.

Nuxt 3

Edit the following file:

/pages/index.vue
<script lang="ts" setup>
import content from "../content/content.json";
import HomeLayout from "../components/HomeLayout.vue";

const slug = "/";
const topic = content.find((e) => e.url == slug);
</script>

<template>
<HomeLayout :fields="topic.fields" :content="content" />
</template>
About this step

This changes the home page so it uses the new personalization-enabled layout component.