Create, track & compare variations in design and content in your site’s templates.
A/B Testing is a method of presenting variations in content or design around calls to action and tracking which perform better. Variations could be subtle: “Click Here!” vs. “Click This Link”, or “Learn More” vs. “Buy Now!” Variations can include drastically different color schemes, design elements or imagery.
A/B Test makes it easy to create test cases in ExpressionEngine simply by wrapping your variations in a few tags. As those variations are displayed, and as users interact with links or forms within, activity is automatically tracked and results displayed in your ExpressionEngine Control Panel.
Download NowTo install:
Creating and tracking tests is simple. First, include a reference to a recent version of jQuery in your template’s head.
<head> <!-- Other stuff... --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> </head>
Then open and close a test and give it a name somewhere in your template’s body. Each test should have a unique name as this pulls your results together.
{exp:ab_test name="Demo Test"}
<!-- Test cases -->
{/exp:ab_test}
Inside your test, define cases. Each case needs a unique name within this test.
{exp:ab_test name="Demo Test"} {case name="Red"} <div style="color: red"> <a href="http://markjreeves.com">Click Here</a> </div> {/case} {case name="Blue"} <div style="color: blue"> <a href="http://markjreeves.com">Click Here</a> </div> {/case} {/exp:ab_test}
That’s all it takes. Each time one of your cases are displayed, you’ll see your display count increase. Each time a link is clicked within that case, or a form submitted, you’ll see its hits increase.
You’ll find your reports under: Add-Ons > Modules > A/B Test in ExpressionEngine 2.
At present, all links and forms within each case will be tracked. Note that your output will be wrapped in a div#ab_test for JavaScript targeting (and this could impact your layout & markup).
Caveat: We have received feedback that forms that are dynamically generated with JavaScript, such as those from third party websites, inside of A/B Test tags, are not tracked. We do not have a solution for this at this time. A/B Test uses JavaScript to track clicks and form submits based on markup it can find within the div it outputs. HTML code generated when the page is loaded may not be picked up. Your mileage may vary.
Feedback is not only welcome, it’s appreciated! Email feedback AT markjreeves DOT com.
Feel free to use A/B Test Beta on sites that you manage, as you wish. It’s not supported and not for redistribution. I definitely plan on taking it further, with an official 1.0 release, shiny reports and an EE 1.6.9-compatible version.
As of 5/11/2010, front-end/tag code tested in Firefox 3.6.3 (Mac), Safari 4.0.5 (Mac), IE7.0 (XP). Validation in other browsers would be most appreciated!
© 2010 Mark J. Reeves