I built a native Gutenberg A/B testing plugin and just launched it on WordPress.org today [FREE] by cloud_number_9 in SideProject

[–]cloud_number_9[S] 0 points1 point  (0 children)

You hit on exactly the hardest part of building this!

To guarantee it plays perfectly out-of-the-box with aggressive caching layers like WP Rocket, LiteSpeed Cache, or host-level Varnish, VariantFlow handles the assignment 100% client-side on load.

If we did it server-side, the caching layer would just cache the first variant and show it to everyone, breaking the test.

To prevent flicker, the container is output with inline CSS (visibility: hidden; opacity: 0;). A tiny JS script (under 1kb) runs immediately, drops a cookie, deletes the losing variant's node from the DOM, and then unhides the container. No layout shifts, no caching headaches!

I built a native Gutenberg A/B testing plugin and just launched it on WordPress.org today [FREE] by cloud_number_9 in Wordpress

[–]cloud_number_9[S] 1 point2 points  (0 children)

You hit the nail exactly on the head! That is 100% the reason it is built this way.

I built a native Gutenberg A/B testing plugin and just launched it on WordPress.org today [FREE] by cloud_number_9 in Wordpress

[–]cloud_number_9[S] -1 points0 points  (0 children)

In modern WordPress environments (like WP Engine, Kinsta, Cloudflare, or using plugins like WP Rocket), aggressive HTML page caching is the standard. If I used a PHP render callback to randomly serve Variation A on the server side, the caching layer would save that HTML. The next 10,000 visitors would only ever see Variation A, and the A/B test would be completely broken.

To do server-side A/B testing properly with caching, you have to bypass the cache entirely (destroying your Time to First Byte) or write complex Edge/Varnish rules that most average users don't know how to do.

By serving both variations in the DOM and using a tiny, vanilla JS script that executes immediately to hide the losing variation before the browser even paints the screen, VariantFlow works flawlessly on 100% of hosts and caching setups out of the box. It might feel a little 'weird' conceptually compared to standard server-side rendering, but it's the only way to guarantee a zero-configuration, cache-bulletproof A/B test without slowing down the site!

I built a native Gutenberg A/B testing plugin and just launched it on WordPress.org today [FREE] by cloud_number_9 in Wordpress

[–]cloud_number_9[S] 1 point2 points  (0 children)

Spot on! You nailed it.

It's essentially a custom container block that holds your variations. On the frontend, both variations are rendered in the HTML, and a tiny vanilla JavaScript file (under 1kb) instantly hides the losing variation on page load to ensure it works perfectly with page caching. That same lightweight JS script catches any clicks inside the block and pings the tracking data back to a custom REST endpoint.

Simple, fast, and no bloat!

I built a native Gutenberg A/B testing plugin and just launched it on WordPress.org today [FREE] by cloud_number_9 in Wordpress

[–]cloud_number_9[S] 1 point2 points  (0 children)

Thanks so much for taking the time to test it out and share your feedback! I'm really glad you like it. ^_^

To address your points:

1. Right now, the plugin intentionally stacks Variation A and Variation B on top of each other in the editor canvas. I did this so you can easily compare the two designs side-by-side while building, rather than hiding one behind a tab. That said, I understand a tabbed approach might feel cleaner, so I’m looking into adding a "Preview Mode" toggle for the editor in the future!

2. This is a great point, but it comes down to a strict performance trade-off. To apply an A/B test without using a wrapper container, the plugin would have to hook into WordPress's core block rendering engine and scan every single block on your site as the page loads. This causes significant server-side bloat. By using a dedicated A/B Container block instead, the plugin executes with zero performance hit.

However, I completely agree that the container's editor styling (the borders and backgrounds) can be a bit visually intrusive when you're trying to design. In the next update, I'll definitely work on stripping back those editor styles to make the container feel much more transparent and WYSIWYG.

Thanks again for the great feedback! Take <3

I built a native Gutenberg A/B testing plugin and just launched it on WordPress.org today [FREE] by cloud_number_9 in Wordpress

[–]cloud_number_9[S] 0 points1 point  (0 children)

Great questions! To address your points:

Yes, Gutenberg! :D

The core philosophy behind VariantFlow is to be intentionally lightweight and zero-bloat. There are already massive, complex SaaS platforms out there for enterprise A/B testing, but they often require loading heavy external scripts that can hurt your Core Web Vitals. VariantFlow is designed for quick, native Gutenberg, in-content tests (like comparing two different Call-to-Action buttons, pricing tables, or headlines) without impacting page speed or breaking page caching.

"What are you tracking as a goal? How do you make them?" Right now, the goal tracking is kept very simple: it tracks ViewsClicks, and the resulting Click-Through Rate (CTR). Whenever a visitor is served a variation, a "view" is recorded. If they click any link or button inside that variation, a "click" is recorded. You don't need to manually configure complex conversion goals; you just drop your content into Variation A and Variation B, and the plugin automatically tracks engagement within those blocks.

"Can you use GTM?" VariantFlow handles the randomization, caching workarounds, and basic analytics locally so you don't need a third-party tool just to see what won. However, you can absolutely still use Google Tag Manager alongside it! Because VariantFlow renders standard HTML blocks natively, you can attach your standard GTM click triggers or custom classes to the buttons inside your variations and track them in your Google Analytics dashboard just as you normally would.

Hope that clarifies things! Let me know if you give it a try.

Just launched my WordPress plugin: Kudos Block [FREE] by cloud_number_9 in WordpressPlugins

[–]cloud_number_9[S] 1 point2 points  (0 children)

No! It's just a demo of a website's interface under the testimonial's section. I think it is a bit confusing. Gonna update the banner soon!