You’ve built yourself a web application, and it’s doing pretty well. That’s great! If you’re like a lot of site owners, you might not be able to shake the feeling that you could be doing better. What if you tweaked that design? What if you put that button front and center, instead of hiding it below the fold? How can you tell how many customers you’re losing because your site isn’t perfect?
If you have excellent telemetry, you might be able to figure out why your customers are leaving. You can see what percentage are making it past the first page, or drop off at the signup page. What that telemetry can’t tell you is whether changing something about your site would improve your conversion rates. This is where a concept called A/B (or sometimes multivariate) testing comes in to play. In this post, we’ll talk about what A/B testing is, and how you can set it up for use with AngularJS to get the best responses from your web site’s customers.
What Is A/B Testing?
The process of A/B testing a website is actually pretty simple. The idea is that you change just one thing about your website, then measure how it performs against the current version. So, maybe you change the color of a button from blue to green. Then, you give it some time to run on the site, and you measure how it performs against the existing version. The wrinkle is, you run both of the tests at the same time. You do this by configuring your application for an A/B test, then recording both whether someone took a desired action, and which version of the test they were viewing. Over time, this tells you which version of the site is most performant. In some A/B testing frameworks, the test coordinating software will naturally move more people onto your most successful version.
Eventually, you’ll identify whether the old version of your site or the new one is the best. Pretty soon, that version will be the “normal” one, and you’ll be ready for another test. You’re on a roll!
A Decision to Make: Templates or Variables?
When A/B testing using AngularJS, there’s a specific choice you’ll need to make early on. It’s mostly personal preference, but once you make the choice, you want to stick to it. That choice is between defining your tests by creating multiple templates, or by using variables within the templates themselves.
The advantage to using templates is that it’s a little simpler. All you need to do is randomize which template loads when a user navigates to your page. Then, each page has an entirely separate template. Your tweaks to the page are represented inside the template, but it otherwise appears exactly like any normal template. The downside to templates is that they clog up your file structure with duplicate files. If you need to fix a bug on a page which is running an A/B test, but the bug isn’t in the test itself, you need to fix the bug in every version of the template.
Using variables within the templates themselves is a little more complicated. It also makes your code harder to read. You’ll have a bunch of ng-show directives littered throughout your code determining which version of the site users see. Usually, when you’re using a variable-based A/B testing platform, you’ll set a value for the user’s session, sometimes within a cookie. Then you read the value of that cookie when the page loads, to determine which version of the site to show. When your user takes the action your’e testing, you include the value of the cookie when you register success.
Important Things to Remember
As you dive into Angular A/B testing, there are some things you need to remember to ensure your tests are as successful as possible.
Define a Clear Goal
The most important step of an A/B test is to have a clear desired outcome. Sometimes, that’s really easy to identify. For instance, if the purpose of your site is to sell a product, your goal is to get people to buy the product, right? A/B tests are great at measuring things like this. They’re not so good at measuring for goals like wanting users to spend more time on a site. It’s difficult to determine which of your variations is most successful in situations like that.
Register Success
Once you know what your goal is, it’s important to make sure that you’re registering the user took that action. What good is at test if you don’t know who passed? In Angular, this means that you’re going to want to override the click handler on the element on the site that triggers a successful event. Usually, registering success is simply a matter of calling an additional function in that click handler. I can’t say which one; that will depend on what you’re using to organize your tests. Make sure you read the documentation of your chosen solution so you get the best data from your tests.
Only Test One Thing at a Time
This can feel counter-intuitive to lots of first-time A/B testers. If one test is good, lots of tests must be better, right? It’s true that you’ll likely come up with dozens of ideas for testing your website once you’ve seen your first A/B test work. That’s a good thing! You’re excited about the possibilities that Angular A/B testing brings to your site. But you don’t want to test more than one change at a time.
The reason you want to limit your changes is because you only want to test one variable at a time. You could, for instance, test whether changing the color of a button, its placement, its size and the wording it contains improve your conversion rates. While that technically can work, the reality is that all those different tests means that you’re testing dozens of variations against each other. If you try to do that all in one test at the same time, you’ll take significantly longer before you can draw reasonable conclusions about which variant is the most effective. While you’re running the test, most of your customers will visit a poorly-optimized version of your site.
Consider Using a Framework
The easiest way to kick off your A/B testing journey is to use a framework or purchased product. Systems like Adobe Target or Optimizely can feel expensive, but they make A/B testing significantly easier to start. They also come with tremendous product support, and communities that help you understand how to use their products. Products like Optimizely will also automatically optimize your tests as they run. You don’t even need to consider which of your changes is best optimized; Optimizely will automatically show it to the vast majority of your users.
If you’re looking for something that you can implement yourself, check out Sixpack. It’s an open source framework that enables you to set up A/B tests yourself. It includes a terrific built-in dashboard that provides visibility into how your tests are performing.
Angular A/B Testing Is Simple
A lot of success with A/B testing isn’t in the framework you choose, or the tech you use. It’s in how you design your tests, and how you analyze the data. Angular A/B testing really is as simple as the following three steps:
- Define a target action.
- Randomly display tweaked versions of your website to visitors.
- Record which version they saw when they take the target action.
It might feel like it should be more complicated, but it’s really not. That doesn’t mean you can’t take it to the next level. Integrating a UI testing tool like Testim’s Automated Test Tool can ensure that your pages display as they should, regardless of the version you’re visiting. If you choose a mature framework, or if you choose to continue to mature your own, you might plug in logic that automatically sends more people to the better version of the site. But getting started with Angular A/B testing is quick and easy. If you follow the recommendations in this post, you’ll find that your tests are boosting your website’s performance in no time. That means more money in your pocket!
This post was written by Eric Boersma. Eric is a software developer and development manager who’s done everything from IT security in pharmaceuticals to writing intelligence software for the US government to building international development teams for non-profits. He loves to talk about the things he’s learned along the way, and he enjoys listening to and learning from others as well.
