AI Content Personalization Implementation

Implementing AI-Powered Content Personalization on Website

Personalization means showing different content to different users on the same page: different block order, different headline, different CTA, different products. AI manages variant selection based on user profile and context.

Personalization Levels

Superficial — variables in text (username, city), dynamic headlines. No ML.

Segmental — content for segments (new/experienced, B2B/B2C, region). Rules-based.

Behavioral — content based on action history: what viewed, bought, read.

Predictive — AI predicts next action and optimizes content for conversion.

User Profile

// Accumulate profile in real-time
class UserProfileManager {
  constructor(userId) {
    this.userId = userId;
    this.profileKey = `profile:${userId}`;
  }

  async trackEvent(event) {
    const updates = {};

    switch (event.type) {
      case 'page_view':
        updates[`categories.${event.category}`] = { increment: 1 };
        updates['total_sessions'] = { increment: 1 };
        break;
      case 'purchase':
        updates['purchases_count'] = { increment: 1 };
        updates['total_spent'] = { increment: event.amount };
        updates['last_purchase'] = event.timestamp;
        break;
      case 'content_read':
        updates['read_count'] = { increment: 1 };
        updates[`topics.${event.topic}`] = { increment: event.readTime };
        break;
    }

    await redis.hIncrBy(this.profileKey, updates);
    await redis.expire(this.profileKey, 86400 * 30); // 30 days
  }

  async getProfile() {
    const raw = await redis.hGetAll(this.profileKey);
    return {
      topCategories: getTopN(raw.categories, 5),
      topTopics: getTopN(raw.topics, 5),
      purchasesCount: parseInt(raw.purchases_count || 0),
      totalSpent: parseFloat(raw.total_spent || 0),
      segment: this.classifySegment(raw),
    };
  }

  classifySegment(profile) {
    if (profile.purchases_count > 10) return 'loyal';
    if (profile.purchases_count > 0) return 'buyer';
    if (profile.total_sessions > 5) return 'engaged';
    return 'new';
  }
}

Personalized Homepage

// API endpoint for personalized homepage
async function getHomepageContent(userId, context) {
  const profile = await getUserProfile(userId);
  const geo = context.country || 'US';
  const device = context.device || 'desktop';

  // Get all blocks in parallel
  const [hero, featured, recommendations, cta] = await Promise.all([
    getPersonalizedHero(profile, geo),
    getFeaturedContent(profile.topCategories),
    getPersonalizedProducts(userId, profile, 8),
    getPersonalizedCTA(profile),
  ]);

  return { hero, featured, recommendations, cta };
}

async function getPersonalizedHero(profile, geo) {
  const variants = await getHeroVariants(); // A/B variants from CMS

  // Variant selection rules
  if (profile.segment === 'loyal') {
    return variants.find(v => v.segment === 'loyal') || variants[0];
  }
  if (geo === 'CA') {
    return variants.find(v => v.geo === 'CA') || variants[0];
  }
  if (profile.topCategories.includes('sale')) {
    return variants.find(v => v.theme === 'deals') || variants[0];
  }

  return variants[0]; // default
}

LLM-Generated Personalized Text

For high-value users — dynamic headlines and descriptions:

async function generatePersonalizedHeadline(product, userProfile) {
  const cacheKey = `headline:${product.id}:${userProfile.segment}`;
  const cached = await redis.get(cacheKey);
  if (cached) return cached;

  const prompt = `
Generate product card headline (max 10 words) for user.
Product: ${product.name}, category: ${product.category}
Profile: segment=${userProfile.segment}, interests=${userProfile.topTopics.join(',')}
Tone: professional, no clichés.
Return only the headline text.
`;

  const response = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: prompt }],
    max_tokens: 30,
    temperature: 0.7,
  });

  const headline = response.choices[0].message.content.trim();
  await redis.setex(cacheKey, 3600 * 6, headline); // cache 6 hours

  return headline;
}

Dynamic CTA

const CTA_VARIANTS = {
  new: {
    text: 'Start Free',
    subtext: 'No credit card required',
    color: 'blue',
  },
  engaged: {
    text: 'Try Pro',
    subtext: '14 days free',
    color: 'green',
  },
  buyer: {
    text: 'Upgrade Plan',
    subtext: 'Unlock all features',
    color: 'purple',
  },
  loyal: {
    text: 'Referral Program',
    subtext: 'Earn per friend',
    color: 'orange',
  },
};

function PersonalizedCTA({ userId }) {
  const { profile } = useUserProfile(userId);
  const variant = CTA_VARIANTS[profile.segment] || CTA_VARIANTS.new;

  return (
    <button
      className={`cta-button cta-${variant.color}`}
      onClick={() => {
        trackCTAClick(userId, profile.segment);
        navigate(getCtaDestination(profile.segment));
      }}
    >
      {variant.text}
      <span>{variant.subtext}</span>
    </button>
  );
}

Contextual Personalization (Unauthenticated)

For anonymous users — signals from current session:

function getContextualSignals(request) {
  return {
    referrer: request.headers.referer,         // entry source
    utm_source: request.query.utm_source,       // ad channel
    utm_campaign: request.query.utm_campaign,
    geo: request.headers['cf-ipcountry'],       // Cloudflare geo
    device: detectDevice(request.headers['user-agent']),
    timeOfDay: getTimeOfDay(request.headers['x-forwarded-for']),
    entryPage: request.url,
  };
}

function getPersonalizationForAnonymous(signals) {
  // From "discount" ad → show sale banner
  if (signals.utm_campaign?.includes('sale')) {
    return { hero: 'sale', cta: 'discount' };
  }
  // Mobile + evening → show app download
  if (signals.device === 'mobile' && signals.timeOfDay === 'evening') {
    return { hero: 'mobile-app', cta: 'download' };
  }
  // B2B signal from LinkedIn
  if (signals.referrer?.includes('linkedin')) {
    return { hero: 'b2b', cta: 'demo' };
  }

  return { hero: 'default', cta: 'default' };
}

Edge Personalization (Cloudflare Workers / Vercel Edge)

For maximum speed — personalize at Edge before Origin:

// Cloudflare Worker
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const userId = getCookie(request, 'user_id');
    const segment = userId
      ? await env.KV.get(`segment:${userId}`)
      : 'anonymous';

    // Modify request to Origin with segment
    const newRequest = new Request(request.url, {
      ...request,
      headers: {
        ...Object.fromEntries(request.headers),
        'X-User-Segment': segment || 'new',
        'X-User-Geo': request.cf.country,
      },
    });

    return fetch(newRequest);
  }
};

Measuring Impact

-- Conversion by segment and personalization variant
SELECT
  p.variant,
  p.segment,
  COUNT(DISTINCT p.user_id) AS shown,
  COUNT(DISTINCT c.user_id) AS converted,
  ROUND(COUNT(DISTINCT c.user_id)::numeric / COUNT(DISTINCT p.user_id) * 100, 2) AS cvr
FROM personalization_events p
LEFT JOIN conversion_events c
  ON c.user_id = p.user_id
  AND c.created_at BETWEEN p.created_at AND p.created_at + INTERVAL '7 days'
WHERE p.created_at >= NOW() - INTERVAL '30 days'
GROUP BY p.variant, p.segment
ORDER BY cvr DESC;

Timeline

• Segmental personalization (rules) — 3–4 days
• Behavioral profile + recommendation personalization — plus 3–4 days
• LLM dynamic headline generation — plus 2 days
• Edge personalization on Cloudflare Workers — plus 2 days
• Full system with analytics, A/B, 5+ variants — 3–4 weeks