Our site, built using Next.js, is currently undergoing redesign for the upcoming year. My team and I are actively seeking a solution to facilitate A/B testing through Prismic.
We have encountered challenges in finding a suitable provider that can integrate with Prismic. Our goal is to A/B test various site variations, allowing us to make informed decisions before the official release.
Could you please provide guidance on how Prismic supports A/B testing, or recomment any compatible providers that can seamlessly integrate with our Next.js site?
We've been looking for such a tool that would allow us to handle all the content inside Prismic and avoid going into another tool to create test content.
In Prismic we added an "A/B testing" tab in our page type, that contains
a content relationship allowing you to specify the variant page you want to test your page against
a boolean "is default page" that allows you to specify if that page is a default page or a variant
This way when you want to test a Page A, you can simply:
duplicate the page A and mark the duplicate as a variant ("is default page" to false)
do your edits in the variant
add the variant in the "A/B testing" tab of your page A
That's it from Prismic side.
That means the we need an API-driven tool that can connect to your analytics tool.
For our demo website we used https://www.growthbook.io. see Next.js guide here
This method offers the benefit of allowing you to perform server-side A/B testing which will preserve performance and remove any flicker which arises with client-side A/B testing.
Going one step further you can even statically build the variants of your page in advance and then redirect users on the Edge depending on their bucket using for example Edge Middleware How to run A/B tests with Next.js and Vercel – Vercel
I'm very interested in this type of “A/B test” page but I can't find it in my Prismic space.
Does the functionality still exist? If so, is there any documentation on it? If not, do you have a trusted alternative way to achieve the same result without growing the stack?
This isn't something we offer as a functionality, rather a "home-made" alternative using Prismic. The solution Alexandre offered in his post described the steps we took, and you can reproduce that on your own project if you'd like.
Tabs can be used in Custom Types to organize your fields. You can create them in any Page/Custom Type in your Slice Machine here:
They'll give you the chance to for example add fields in the static zone: this is where you'd put the content relationship Alexandre mentioned. It will keep this A/B testing tool off the Main page where your content is and give your Custom Type some structure. You can create as many as you'd like, and organize it however you wish, it won't impact the structure of the API response. If you'd like to know more, you can check out this post:
Because this is just one way to do it, there's no documentation on our version of A/B testing aside from the growthbook one shared above, but if you try it yourself and you have questions, feel free to ask them on the forum and we can take a look
