Feature Experimentation

// src/middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(req: NextRequest) {
  const res = NextResponse.next();

  // Only one cookie — a stable visitor ID for consistent bucketing.
  // Device type is read from the User-Agent header server-side (no cookie = GDPR safe).
  if (!req.cookies.get("optimizelyEndUserId")) {
    res.cookies.set("optimizelyEndUserId", crypto.randomUUID(), {
      maxAge: 60 * 60 * 24 * 365, // 1 year
      httpOnly: true,
      sameSite: "lax",
    });
  }

  return res;
}

// src/lib/optimizely/user.ts
import { cache } from "react";
import { OptimizelyDecideOption } from "@optimizely/optimizely-sdk";
import { getOptimizelyClient } from "./experimentation";
import { getVisitorContext } from "./visitor";

// cache() scopes to a single HTTP request's render tree.
// Every component that calls getOptimizelyUser() shares one user context.
// 1,000 concurrent visitors → 1,000 independent contexts, nothing shared.
export const getOptimizelyUser = cache(async () => {
  const [client, { userId, attributes, bucketingId }] = await Promise.all([
    getOptimizelyClient(), // one SDK instance per request (React cache() + 60s Next.js fetch cache)
    getVisitorContext(),    // reads: optimizelyEndUserId cookie, User-Agent → device, demo cookies
  ]);

  if (!client) return noOpUser; // FX unreachable → all decide() calls return { enabled: false }

  const ctx = client.createUserContext(userId, attributes);
  return {
    userId,
    bucketingId,
    //
    // decide(flagKey)                → DISABLE_DECISION_EVENT: flag evaluated, no impression fired
    // decide(flagKey, [])            → no options → impression fires, registers user in FX results
    // decide(flagKey, {bucketingId}) → override bucketing ID for account-level experiments
    // decide(flagKey, {attributes})  → merge extra attributes for this call only
    //
    decide(flagKey: string, opts?: OptimizelyDecideOption[] | DecideOpts): FxDecision { /* ... */ },
    decideAll(): Record<string, FxDecision> {
      // Always DISABLE_DECISION_EVENT — evaluate all flags without recording anything.
      return ctx.decideAll([OptimizelyDecideOption.DISABLE_DECISION_EVENT]);
    },
  };
});

// src/app/[[...slug]]/page.tsx
import { getOptimizelyUser } from "@/lib/optimizely/user";
import { getClient } from "@optimizely/cms-sdk";

async function CmsPage({ params }) {
  // Step 1 — evaluate all FX flags (userId + attributes from cookies automatically)
  const user = await getOptimizelyUser();
  const decisions = user.decideAll();

  // Step 2 — collect active variation keys (skip "off")
  const activeVariations = Object.values(decisions)
    .filter((d) => d.enabled && d.variationKey && d.variationKey !== "off")
    .map((d) => d.variationKey as string);

  // Step 3 — pass them to Graph as a variation filter
  //   includeOriginal: true → users NOT in an experiment still see original content
  const variationOption = activeVariations.length > 0
    ? {
        variation: {
          include: "SOME" as const,
          value: activeVariations,   // e.g. ["banner1", "contribute"]
          includeOriginal: true,
        },
      }
    : undefined;

  // Step 4 — Graph returns the CMS variant whose key matches, or falls back
  const client = getClient();
  const [page] = await client.getContentByPath(`/en/${slug}/`, variationOption);
  return <OptimizelyComponent content={page} />;
}

// src/app/[[...slug]]/page.tsx
// After Graph returns the page, check whether it served a CMS variation.
// If it did, call decide() with an empty options array so FX records the user
// in experiment results. The first decideAll() was routing-only (DISABLE_DECISION_EVENT).

const servedVariation = page._metadata?.variation ?? null;

if (servedVariation) {
  const exposedFlag = Object.values(decisions).find(
    (d) => d.variationKey === servedVariation
  );
  if (exposedFlag) {
    // Empty options → no DISABLE_DECISION_EVENT → impression fires to FX results
    // void discards the return value — we only care about the side effect here
    void user.decide(exposedFlag.flagKey, []);
  }
}

import { getOptimizelyUser } from "@/lib/optimizely/user";

export default async function MyPage() {
  const user = await getOptimizelyUser();

  // Evaluate without firing an impression (default: DISABLE_DECISION_EVENT)
  const decision = user.decide("subscribe_button");
  if (!decision.enabled) return null;

  // Once you know the variation will be shown, fire the impression:
  void user.decide("subscribe_button", []);

  // Variables come back typed — you cast to the type you expect
  const title = decision.variables.subscribe_title as string;
  return <Banner title={title} variation={decision.variationKey} />;
}