When using URL Redirects, there is not an "Experim...
# experimentation
l
When using URL Redirects, there is not an "Experiment Viewed" event being fired to Segment as there typically is when a normal experiment is viewed. Using react-sdk, the docs seemed to indicate that just setting up a URL Redirect as part of the experiment would automatically fire off the callback.
Copy code
const gb = new GrowthBook({
  apiHost: [redacted],
  clientKey: [redacted],
  decryptionKey: [redacted],
  trackingCallback: onExperimentViewed,
});
s
Yes, they should fire. There are some special considerations when using URL redirects with React: https://docs.growthbook.io/lib/react#url-redirect-experiments
l
None of the documentation or the examples in the Next.js repo seem to work properly.
Copy code
navigate: (url) => router.replace(url),
  navigateDelay: 0,
This has a type error and so the documentation is not currently valid. Attempted to replace with:
Copy code
navigate: async (url) => {
    await router.replace(url)
    return
  },
  navigateDelay: 0,
But no avail. This is my full client-side provider:
Copy code
import { Experiment, Result } from "@growthbook/growthbook";

import {
  GrowthBookProvider as GBProvider,
  GrowthBook,
} from "@growthbook/growthbook-react";
import { isProduction } from "@helpers/utils";
import router, { useRouter } from "next/router";
import { useEffect } from "react";
import getUUID from "src/utils/user-uuid";

const onExperimentViewed = (
  experiment: Experiment<any>,
  result: Result<any>,
) => {
  const experimentId = experiment.key;
  const variationId = result.key;

  setTimeout(() => {
    // Sometimes the window object is not available, like if
    // Segment is not allowed to load because of GDPR or whatever
    // In this case we add ?. to avoid attempting to fire this
    // if the analytics object is not available
    window?.analytics?.track("Experiment Viewed", {
      experimentId,
      variationId,
    });
  }, 2000);
};

// Create a client-side GrowthBook instance
const gb = new GrowthBook({
  apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,
  clientKey: process.env.NEXT_PUBLIC_GROWTHBOOK_CLIENT_KEY,
  decryptionKey: process.env.NEXT_PUBLIC_GROWTHBOOK_DECRYPTION_KEY,
  // Enable easier debugging of feature flags during development
  enableDevMode: true,
  trackingCallback: onExperimentViewed,
  navigate: async (url) => {
    await router.replace(url)
    return
  },
  navigateDelay: 0,
});

// Let the GrowthBook instance know when the URL changes so the active
// experiments can update accordingly
function updateGrowthBookURL() {
  gb.setURL(window.location.href);
}

const GrowthBookProvider = ({ children }: { children: React.ReactNode }) => {
  const router = useRouter();

  useEffect(() => {
    // Initialize GrowthBook and make sure the attributes are set properly
    gb.init({ streaming: false });

    // Here we set all of the various attributes that we want to send to GrowthBook to be accessible by experiments
    gb.setAttributes({
      id: getUUID(),
      enableDevMode: !isProduction(),
      url: window.location.href,
      query: window.location.search,
      host: window.location.hostname,
      path: window.location.pathname,
    });

    router.events.on("routeChangeComplete", updateGrowthBookURL);
    return () => router.events.off("routeChangeComplete", updateGrowthBookURL);
  }, []);

  return <GBProvider growthbook={gb}>{children}</GBProvider>;
};

export default GrowthBookProvider;
But when the main URL or the secondary URL are visited, no experiment events are fired.
s
Sorry this has been frustrating. I'll need to spin up a test site to see what's happening here (and get back to you), but I'm thinking that at some point in the code GrowthBook isn't receiving the correct URL. Here are some initial ideas, tho: 1. It does look like Next has a different
useRouter
import. We'll need to update our docs with this: https://nextjs.org/docs/app/api-reference/functions/use-router#migrating-from-nextrouter 2. Try using
debug: true
as an option in your GrowthBook instantiation. It'll log much more detail to the console to help you understand where data might not be passed.