How to use AB testing with Plasmic, Next.js, and middleware?

Hello. Little question about using Plasmic for the type of AB testing mentioned here, with NextJS and Middleware: https://www.plasmic.app/blog/nextjs-ab-testing

It’s not entirely clear to us wether the variants used in this examples are available also in the basic plan? Variants are not mentioned in the Plans page, instead only AB testing, but for this, if I understand correctly, we would not be using the built-in AB testing feature.

An additional question. For the very same purpose outlined in the article I shared, we’d like to use plasmic to make a copy of our existing site - we do not actually want to rebuild it in Plasmic completely or from scratch, but simply use Plasmic to create variants without needing much coding. So, what would be our best bet to get the existing site functional as a variant within Plasmic, while still running the original site as is, as a baseline variant?

Hi @hard-working_thrush, variants are available to all users

Plasmic does not support creating A/b tests for existing pages that were created in code. If all you are changing is some text here and there throughout your page, then have you considered a solution like Google optimize?

Yeah, but the problem is the react/nextjs setup creates issues with the anti-flicker snippet and it is not possible to properly get the software to work without some massive compromise - either giving up the visual builder, always designing custom code page variants and integrating google in the process OR accepting weird flicker and possible bugs with the variant shown due to how react/nextjs work and how they might re-update a page after optimize does

I’m not sure I follow, with the middleware you should not have any post load client side rendering of a different variant, can you elaborate more on what you’re referring to? And what do you mean by the compromise of always designing custom code page variants and integrating Google in the process, what is the compromise?

Ok, i’m also not fully following here and unfortunately not a dev myself + checking this out for a client of ours. Basically they need us to design the variants with low-code/no-code capacity, so that they can then launch them. But apparently it’s not possible to do this via the google optimize builder without some great trade-off in terms of bugginess/lag, as they say the NextJS/React setup isn’t compatible with how Optimize works to inject variants OR could be made to be at the cost of a lot of delay/a blank screen when loading.

So that was where Plasmic was supposed to come in, and allow us as an agency to edit the variants before they launch them, while still connecting the AB test to Google Optimize/Analytics, where we’d be able to do the analysis. Not even entirely sure that can work. What would you do in this situation?

Plasmic AB testing was built exactly to allow you to create A/b test variants visually and deploy them in a high-performance next JS site while still integrating with Google optimize and Google analytics for experimentation and results gathering.

That I understand, but it also assumes that their site would be initially built in plasmic, which it is not, right

What plasmic doesn’t do is let you edit existing pages that were written entirely in code, but what you can do instead is register your existing react components as building blocks for use in plasmic, so that you can drag and drop them to compose pages and customize their settings

Ohhh, ok, this is interesting - will have to let them know tomorrow (amsterdam time here)

Do you have some article explaining this? i.e. how to use the react components?

What this typically means is that even though you can’t edit your full existing page, you can often quickly rebuild the whole page out of your existing react components/building blocks. For instance your different sections for hero, etc might already be available as react components.

Yeah the docs are available here https://docs.plasmic.app/learn/code-components/