Sanity Personalization Plugin

A Sanity plugin that adds personalization capabilities to your documents through segment-based targeting.

Features

• Add segment-based personalization to any document or object type
• Custom segment selection UI
• Segment management through Sanity Studio
• TypeScript support

Installation

npm install sanity-plugin-personalization

Usage

1. Add the plugin to your sanity.config.ts:

import { defineConfig } from "sanity";
import { personalizationPlugin } from "sanity-plugin-personalization";

export default defineConfig({
  // ... other config
  plugins: [personalizationPlugin()],
});

2. Import and add the segmentField to any schema where you want personalization:

// schemas/contentBlock.ts
import { segmentField } from "sanity-plugin-personalization";

export default {
  name: "contentBlock",
  title: "Content Block",
  type: "object",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "content",
      title: "Content",
      type: "text",
    },
    segmentField, // Add personalization to this schema
  ],
};

You can also add it to document types:

// schemas/article.ts
import { segmentField } from "sanity-plugin-personalization";

export default {
  name: "article",
  title: "Article",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "body",
      title: "Body",
      type: "array",
      of: [{ type: "block" }],
    },
    segmentField, // Add personalization to this document
  ],
};

Segment Field

The segmentField provides a custom input component that allows content editors to select which user segments should see the content. The field stores an array of segment names:

interface SegmentField {
  segments: string[]; // Array of segment names like ["premium", "new-user"]
}

Client Integration

To use the personalization in your frontend application, install the client package:

npm install sanity-plugin-personalization-client

Then use the SegmentWrapper component:

import { SegmentWrapper } from 'sanity-plugin-personalization-client';

export function ContentBlock({ block }) {
  return (
    <SegmentWrapper segments={block.segments}>
      <div>{block.content}</div>
    </SegmentWrapper>
  );
}

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build plugin
npm run build

License

MIT