AngularJS A/B Test Service & Directives

The following examples are mix of declarative and imperative A/B/n Tests that run every 20 seconds.

Headlines & Sub-Headlines ↑

One of the most common elements to A/B test on websites are headline variations. This example shows how to default an inline value that is updated with ng-bind (a one-way data binding from the $scope to view) once the A/B/n test is run.

Include Your Children When Baking Cookies

Paragraph Text ↑

Changing a whole paragraph is probably more text than you want to maintain inside a JavaScript or JSON file. This example shows how how to use the <ab-test> and <ab-variant> to A/B test a large section of content.

Aliquam eget scelerisque ipsum. Suspendisse a mi pulvinar purus ultrices malesuada. Aliquam semper, odio scelerisque feugiat consequat, orci tortor dignissim sapien, id molestie libero ligula eget massa. Nullam pulvinar gravida eros vel sollicitudin. Nullam arcu orci, sagittis ut justo vitae, vulputate tristique leo. Curabitur condimentum, nisl et aliquam tempor, quam augue hendrerit nibh, ac convallis erat elit non sem. Quisque vestibulum dignissim arcu, non dictum eros tristique eget. Faucibus, mauris a vestibulum ultricies, turpis risus feugiat tellus, non porttitor tellus velit vel risus. Nulla condimentum lacus sed mauris sodales scelerisque. Nunc fermentum, lorem sed vulputate vulputate, enim est pulvinar arcu, ac molestie massa enim sed ligula. Quisque interdum lacinia lorem, non ullamcorper nisl ornare et. Nullam nec velit nec augue cursus aliquet eu ac magna. Sed consequat nulla id eros cursus, eget tincidunt enim dapibus. Mauris ultrices risus ac felis commodo condimentum. Curabitur diam tellus, mattis vel varius a, pharetra et quam. In hac habitasse platea dictumst. Curabitur gravida, dolor eget commodo egestas, enim ante ullamcorper nulla, quis semper enim mi id quam. Proin non varius quam. Maecenas tempus tincidunt egestas. Cras sollicitudin posuere neque, et lobortis dui volutpat dictum. Fusce imperdiet sapien sit amet massa dictum venenatis. In ultrices aliquam bibendum. Phasellus non ante et quam bibendum consectetur ut in lacus. Proin lacus metus, pellentesque at massa sed, consectetur faucibus odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt faucibus urna, id auctor tellus pretium eget. Vivamus tempor vitae lectus non hendrerit. Pellentesque iaculis fermentum ligula, vel volutpat sapien lacinia id. Donec nisi lorem, cursus nec mattis vitae, pulvinar ut massa. Maecenas rutrum convallis lacus. Fusce ullamcorper, arcu id interdum varius, sapien enim egestas nisl, a tempus urna odio eu ante.

Testimonials ↑

This example shows how to A/B test using a more complex model than a simple string or number. In this case an external JSON file is used to hold the values for {{testimonial}} and {{name}}.

{{testimonial}}

— {{name}}

Social Proof ↑

Social proof, also known as informational social influence, is a psychological phenomenon where people assume the actions of others in an attempt to reflect correct behavior for a given situation. This example shows an example of A/B/n testing the impact of social media on conversion rates using {{likes}} to test different values.

Wow, you should really 
{{likes}}
  ab-test!

Media Mentions ↑

A/B test the appeal of various media outlets on your target demographics. This example uses ng-src and the {{asSeenOn}} expression to A/B testing 3 different "as seen on" media images.

ab-test is super popular! as seen on

Buttons ↑

The presentation of "calls to action" have a massive impact on how effective they are! This example A/B tests the style of the button below from a list of 7 variants.

Product Pricing ↑

Coming soon, pull requests welcome :)

Promotional ↑

Coming soon, pull requests welcome :)

Images ↑

Coming soon, pull requests welcome :)

Awards and Badges ↑

Coming soon, pull requests welcome :)