BrightLeaf Digital Code Snippet Library
Check out our growing library of code snippets for Gravity Forms!
AB Testing Utilities
Goal
A production-ready, client-first A/B testing utility designed for WordPress. This utility handles A/B test resolution in the browser, making it fully compatible with page caching (Cloudflare, Varnish, WP Rocket). --- USAGE: GUTENBERG BLOCKS --- 1. Create two blocks in the editor (e.g., two different Buttons). 2. In the "Advanced" sidebar for BOTH blocks, add the class: abtestcontainer-{slug} Example: abtestcontainer-hero-cta 3. The first block found with that slug becomes Version A, the second becomes Version B. --- USAGE: SHORTCODES --- Wrap your content versions like this: [abtest title="my-test-slug"] [abcontent contentversion="contentversiona"] Version A Content [/abcontent] [abcontent contentversion="contentversionb"] Version B Content [/abcontent] [/abtest] --- USAGE: GRAVITY FORMS --- A. Tracking which version of your tested item (even if not on form) was seen: 1. Add a Hidden Field to your form. 2. Advanced Tab -> Enable Dynamic Population. 3. Parameter Name: abtestversion_{slug} (e.g., abtestversion_hero-cta). 4. The value saved will be "{slug}:{version}" (e.g., hero-cta:contentversionb). B. Using Merge Tags: Use {abtestversion:slug} in notifications or confirmations to display the visitor's version. --- USAGE: EXTERNAL TRACKING (GA4, etc.) --- Automatic Resolution Events: a) 'bl_abtest_resolved' — dispatched on every page where a test is resolved. Use this to set GA4 User Properties to tie the version to ALL future events. document.addEventListener('bl_abtest_resolved', function(e) { const { slug, version } = e.detail; // GA4 User Property (Ties ALL future events like clicks/purchases to this version) if (window.gtag) { gtag('set', 'user_properties', { ['ab_test_' + slug]: version }); gtag('event', 'ab_test_view', { 'test_name': slug, 'test_version': version }); } }); b) 'bl_abtest_first_resolved' — dispatched exactly once per slug when the cookie is first created. Use this to associate a user with a cohort a single time.
This code is best installed directly on your site using the Code Snippets plugin.
Loading...
Review this entry
You must be logged in to post a comment.