Skip to main content
Inline segmentation lets you display personalized content to users based on their profile affinities. It checks the user profile against a set of conditions and renders content if the user matches the segment. Inline segmentation is useful in these cases:
  • Promoting brand stores
  • Highlighting product categories
  • Showcasing category-based recommendations
  • Suggesting relevant search filters

​
Before you begin

This guide assumes that you’re familiar with React and fetching a user profile. It also assumes that you’ve configured the Advanced Personalization feature.
This feature isn’t available on every plan. Refer to your pricing plan to see if it’s included.

​
Preview

Storefront displaying inline segmentation for users who like Apple

Storefront displaying inline segmentation for users who like Apple

​
Create a reusable segment component

First, create a reusable PersonalizationSegment component:
React
import { usePersonalizationProfile } from "./PersonalizationProfileContext";

export function usePersonalizationSegment({ segment }) {
  const userProfile = usePersonalizationProfile();
  return segment(userProfile);
}

export function PersonalizationSegment({ segment, children, fallback = null }) {
  const userBelongsToSegment = usePersonalizationSegment({ segment });
  return userBelongsToSegment ? children : fallback;
}
To access the user profile, see the usePersonalizationProfile React Hook.

​
Implement dynamic inline segmentation

Use the PersonalizationSegment component to conditionally render content based on user affinities:
React
function Page() {
  return (
    <PersonalizationSegment
      segment={(userProfile) => {
        return userProfile.affinities.some(
          (affinity) =>
            affinity.name === "brand" &&
            affinity.value === "Apple" &&
            affinity.score >= 10,
        );
      }}
    >
      <BannerApple />
    </PersonalizationSegment>
  );
}

function App({ userProfile }) {
  return (
    <PersonalizationProfileProvider userProfile={userProfile}>
      <Page />
    </PersonalizationProfileProvider>
  );
}
In this example, the BannerApple component only renders if the user has an for the brand “Apple” with a score of 10 or more.

​
Optional: add fallback content

You can provide fallback content for users who don’t match the segment:
React
function Page() {
  return (
    <PersonalizationSegment
      segment={(userProfile) => {
        return userProfile.affinities.some(
          (affinity) =>
            affinity.name === "brand" &&
            affinity.value === "Apple" &&
            affinity.score >= 10,
        );
      }}
      fallback={<BannerGeneric />}
    >
      <BannerApple />
    </PersonalizationSegment>
  );
}

​
Optional: support static segment declarations

For more flexibility, you can declare segments statically. This is useful when you need to load serialized segments from an external source.

​
Define static segments

Store your static segment definitions:
JavaScript
// segments.js
export const appleSegment = {
  conditions: [
    {
      name: "brand",
      value: "Apple",
      score: 10,
    },
  ],
};

​
Update the segment component

Update the PersonalizationSegment component to handle both dynamic and static segments:
React
import { usePersonalizationProfile } from "./PersonalizationProfileContext";

function checkUserBelongsToSegment(userProfile, segment) {
  return segment.conditions.every((condition) =>
    userProfile.affinities.some(
      (affinity) =>
        affinity.name === condition.name &&
        affinity.value === condition.value &&
        affinity.score >= condition.score,
    ),
  );
}

export function usePersonalizationSegment({ segment }) {
  const userProfile = usePersonalizationProfile();
  return typeof segment === "function"
    ? segment(userProfile)
    : checkUserBelongsToSegment(userProfile, segment);
}

export function PersonalizationSegment({ segment, children, fallback = null }) {
  const userBelongsToSegment = usePersonalizationSegment({ segment });
  return userBelongsToSegment ? children : fallback;
}

​
Use static segments in your app

Now you can use static segments in your PersonalizationSegment component:
React
import { appleSegment } from "./segments";

function Page() {
  return (
    <PersonalizationSegment segment={appleSegment}>
      <BannerApple />
    </PersonalizationSegment>
  );
}

function App({ userProfile }) {
  return (
    <PersonalizationProfileProvider userProfile={userProfile}>
      <Page />
    </PersonalizationProfileProvider>
  );
}