What are you trying to do?
Hey all! Attempting to use the split content feature on plasmic! Here’s how I have it setup per this doc (Split content setup | Learn Plasmic)
My confusion lies mainly on setup and if this is adequate enough for us to run a/b tests. Is there more setup we need in order to have a/b testing function?
What are the reproduction steps?
Setup split content per the doc I linked above!
Relevant links:
I took a glance, and it looks okay to me. What other setup were you expecting to do for A/B tests? Did you run into any issues?
@jason no matter what we do we aren’t getting the second variation to show up. We’ve tried several different devices, browsers, private mode, non private mode etc.
We are using @plasmicapp/loader-nextjs @ 1.0.358. Could that be an issue?
Is the site publicly hosted? Can you send a link? Also, are you able to see the cookie that should be set by the middleware?
@jason here’s the site url
I believe the cookie is being set!
@jason any ideas?
Hi, it’s not possible to see where you use the variation object to render your page. If you are passing the variation object also to your <PlasmicRootProvider> which is used to render the page (not only to the one in extractPlasmicQueryData). Another detail is that it’s preferred to call getActiveVariation only after maybeFetchComponentData. But from looking into your page, I am unsure whether the middleware is routing the requests or not, could you confirm that?
I also couldn’t see any A/B testing overrides in your project. Can you share the experiment, page/component, and element with the override?
Here is my middleware
import { NextRequest, NextResponse, userAgent } from "next/server"
import { getMiddlewareResponse } from "@plasmicapp/loader-nextjs/edge"
// Exclude paths that are definitely not Plasmic pages with variations
export const config = {
matcher: ["/:path((?!_next/|api/|favicon\\.ico|plasmic-host).*)"],
}
export async function middleware(req: NextRequest) {
// Only pick a variation for GET requests
if (req.method !== "GET") {
return
}
const newUrl = req.nextUrl.clone()
const PLASMIC_SEED = req.cookies.get("plasmic_seed")
const ua = userAgent(req)
const browser = ua.browser.name?.includes("Chrome")
? "Chrome"
: ua.browser.name?.includes("Safari")
? "Safari"
: "Other"
// Rewrite to a new pathname that encodes the custom traits for
// this request, as well as some randomness for A/B tests
const { pathname, cookies } = getMiddlewareResponse({
path: newUrl.pathname,
traits: {
browser,
},
cookies: {
...(PLASMIC_SEED ? { plasmic_seed: PLASMIC_SEED.value } : {}),
},
})
// Rewrite the response to use this new pathname
newUrl.pathname = pathname
const res = NextResponse.rewrite(newUrl)
// Save anything that needs to be saved in a cookie -- specifically,
// the custom trait that corresponds to the random seed. The same
// random seed will be used to pick the A/B test bucket each time
// the user visits, to ensure that a visitor will always see the
// same A/B test bucket.
cookies.forEach(cookie => {
res.cookies.set(cookie.key, cookie.value)
})
return res
}
@jason any help?
I looked at your project last week and didn’t see any overrides for your A/B tests.
Can you provide these details?
I’m definitely able to see your override with the teal color.
Highlighting @fmota’s message again. Can you share where <PlasmicRootProvider> is created in CatchallPage? I assume it’s in your <Layout> component, but I can’t see that. Are you passing the correct variation there?
It’s in my _app.tsx file
import { useRouter } from "next/router"
import localFont from "next/font/local"
import { PLASMIC } from "@/plasmic-init"
import { PlasmicRootProvider } from "@plasmicapp/loader-nextjs"
import { hotjar } from "react-hotjar"
import { useEffect } from "react"
import useEquipCookie from "@/hooks/useEquipCookie";
export const pangeaText = localFont({
src: [
{
path: "../fonts/pangea-text-regular.woff2",
weight: "400",
style: "normal",
},
{
path: "../fonts/pangea-text-semibold.woff2",
weight: "600",
style: "normal",
},
],
variable: "--pangea-text",
})
export const pangeaDisplay = localFont({
src: [
{
path: "../fonts/pangea-medium.woff2",
weight: "500",
style: "normal",
},
],
variable: "--pangea-display",
})
export default function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter()
const className = `${pangeaText.variable} ${pangeaDisplay.variable} font-sans text-teal-deep`
useEffect(() => {
import("react-hotjar").then(hotjarLib => {
hotjarLib.hotjar.initialize(2648408, 6)
})
}, [])
useEffect(() => {
document.body.className = className
}, [className])
useEquipCookie(router.query);
return (
<PlasmicRootProvider
loader={PLASMIC}
prefetchedData={pageProps.plasmicData}
prefetchedQueryData={pageProps.queryCache}
pageParams={pageProps.pageMeta?.params}
variation={pageProps.variation}
pageQuery={router.query}
skipFonts
>
<main className={className}>
<Component {...pageProps} />
</main>
</PlasmicRootProvider>
)
}```
@jason@jason posted it above!
Thanks, I think that looks fine… @fmota?
Did you see my other post about the override working? What do you think is not working so far?
@jason in our testing we’re only ever getting one variant, even when set to 50-50
@fmota thank you again for the help!
The issue was a misplaced middleware.ts (if you do not use the app router with next.js it needs to go in the src folder)
And it was important to generate all paths, to account for the new split content paths
const pageModules = await PLASMIC.fetchPages()
const paths = pageModules.flatMap(page =>
generateAllPaths(page.path).map(path => ({
params: {
catchall: path.substring(1).split("/"),
},
}))```