Hey all, I'm back with yet more integration and SRM problems. We're trying to do split URL testing but it's proving to be not as simple as "just look at the repo". Running on Next.js, I'm trying to handle all of this Growthbook stuff in middleware so we can handling the bucketing and the redirection before the client renders to avoid flashing. I'm using

@growthbook/growthbook

Node SDK alongside Segment to make a node call when the middleware loads. It fetches or creates an ID (at this point matching with Segment's anonymous ID), then sets up Growthbook, gets the features/experiments, and then performs the redirect. However I'm only getting about half of the traffic redirecting to the other URL. Code in 🧵

Glad you're making progress on this, but sorry you're still having trouble. Is it the case that a user will always land on

/features

and then either continue to that URL or be redirected to

/features-overview

depending on the experiment result? Isn't the expected result that half of the traffic would redirected and half not? Or what am I missing? Oh, and Flags isn't a requirement.

Okay I ended up spending a lot of time on this this last week and I've got a solution that seems to work overall. There was actually a UUID matching issue and passing that information on through Next.js before a user had actually loaded the browser was harder than I thought. This is what it looks like now:

export default async function middleware(request: NextRequest) {

  const headers = new Headers(request.headers);

  // Get unified stable ID that consolidates all ID systems
  const { value: stableId } = await getStableId();

  let response = NextResponse.next();
  response.headers.set("x-generated-stable-id", stableId);

  const urlPath = new URL(request.url);

  const analytics = new Analytics({
    writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY,
  });

  if (!request.cookies.get("ajs_anonymous_id")) {
    response.cookies.set({
      name: "ajs_anonymous_id",
      value: stableId,
      httpOnly: false,
      secure: true,
      path: "/",
      expires: new Date(Date.now() + 400 * 24 * 60 * 60 * 1000),
    });
  }

  // Use unified stable ID for GrowthBook UUID (backward compatibility)
  if (!request.cookies.get("gbuuid")) {
    response.cookies.set({
      name: "gbuuid",
      value: stableId,
      httpOnly: false,
      secure: true,
      path: "/",
      expires: new Date(Date.now() + 400 * 24 * 60 * 60 * 1000),
    });
  }
...rest of middleware

Then for the stable ID:

import { cookies, headers } from "next/headers";

/**
 * Unified stable ID that consolidates all existing ID systems
 * Priority order: header > ajs_anonymous_id > gbuuid > new ID
 */
export const getStableId = async () => {
  const cookiesStore = await cookies();
  const headersStore = await headers();

  // First we check for header from previous middleware execution (for redirects)
  // This might happen because of a split URL redirection where
  // the stable ID needs to be passed on, but the response cookies
  // may not be set or haven't been able to be set.
  // We pass this stable ID header through and then here we
  // check for that ID. If it exists, we can properly set up all
  // the Segment and growthbook cookies
  const headerStableId = headersStore.get("x-generated-stable-id");
  if (headerStableId) {
    return { value: headerStableId };
  }

  // If we make it this far it means the header was not set, so then
  // we check for the segment ID which is stored as a cookie
  const segmentId = cookiesStore.get("ajs_anonymous_id")?.value;
  if (segmentId) {
    return { value: segmentId };
  }

  // If we make it this far it means neither the header nor the segment ID was set as a cookie, so then
  // we check for the growthbook ID which is stored as a cookie
  const gbId = cookiesStore.get("gbuuid")?.value;
  if (gbId) {
    return { value: gbId };
  }

  // Of course if there is no header, no Segment anon ID, or
  // a GB UUID, we generate a new one

  return { value: crypto.randomUUID() };
};

This sets the Segment anon ID and the GB UUID as the same (which as I understand isn't totally necessary, but that's how it's going), and now if there is a redirect we have to pass in the response with the new stable ID header in order to pass that on to the redirected URL

import { GrowthBook } from "@growthbook/growthbook";
import { configureServerSideGrowthBook } from "@lib/growthbook-server";
import { Analytics } from "@segment/analytics-node";
import { NextRequest, NextResponse } from "next/server";

export async function handleGrowthBookExperiments(
  request: NextRequest,
  stableId: string,
  analytics: Analytics,
  response: NextResponse,
): Promise<NextResponse | null> {
  configureServerSideGrowthBook();

  const gb = new GrowthBook({
    clientKey: process.env.GROWTHBOOK_CLIENT_KEY,
    enableDevMode: true,
  });

  await gb.init({ timeout: 1000 });

  await gb.setAttributes({
    id: stableId,
    url: request.url,
    query: request.nextUrl.search,
    host: request.nextUrl.hostname,
    path: request.nextUrl.pathname,
  });

  if (["/features", "/features-overview"].includes(request.nextUrl.pathname)) {
    const featureFlagId = "test-feature-flag";

    const result = gb.evalFeature(featureFlagId);

    if (!result.experimentResult) {
      return null;
    }

    analytics.track({
      anonymousId: stableId,
      event: "Experiment Viewed",
      properties: {
        experimentId: "test-feature-experiment",
        variationId: result.experimentResult.variationId,
      },
    } as any);

    if (
      request.nextUrl.pathname === "/features" &&
      result.experimentResult.variationId === 1
    ) {
      const url = request.nextUrl.clone();
      url.pathname = "/features-overview";
      const newResponse = NextResponse.redirect(url, {
        status: 302,
        headers: response.headers,
      });

      return newResponse;
    } else if (
      request.nextUrl.pathname === "/features-overview" &&
      result.experimentResult.variationId === 0
    ) {
      const url = request.nextUrl.clone();
      url.pathname = "/";
      const newResponse = NextResponse.redirect(url, {
        status: 302,
        headers: response.headers,
      });

      return newResponse;
    }
  }

  gb.destroy();
  return null;
}

Looking at the code, is it the case that you're bucketing twice for users in the variation? A user lands on

/features

, you track the exposure, then redirect them to the

/features-overview

where they're tracked again. Is that how the code's working? Can users land on

/features-overview

first? Or do they always go through

/features

first?

I have it set up so whenever you load either of those urls, you run

_const_ result = gb.evalFeature(featureFlagId);

, then based on the result of

result.experimentResult.variationId

it either keeps them on the page or redirects them. So if variationId is 0 but you're on

/features-overview

, it's redirecting, and vice versa. However the bucketing has already happened by that point.

Maybe. Where's that code in the larger scheme of things? Also, I wasn't saying users would be bucketed in both variations, but that you'd be overcounting the variant 1. 1. User lands on `/features`n. and is in the variant: analytics fire. 2. Then, the user is redirected to

/features-overview

. Won't the analytics then fire again?

In theory yes, but if

evalFeature

is doing what it's supposed to, then the variation ID will be 1 in both instances, which is de-duped later anyways as a single user.