Published on <a href="https://blog.prototypr.io/a-b-testing-with-nginx-in-40-lines-of-code-d4f94397130a?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Nitish Phanse <img alt="" src="https://cdn-images-1.medium.com/max/486/1*vW7X8V-kG0TVtdIwmHw7hQ.png">
A/B Testing, the silver spoon that has enabled designers and product managers to get a deep insight into user behavioral patterns. On the one hand it’s allowed product managers more flexibility while conceptualizing user journeys, on the other hand it’s become a developers nightmare for being told to make 2 versions of the same component.
<blockquote>“The general concept behind <a href="https://en.wikipedia.org/wiki/A/B_testing">A/B testing</a> is to create an experiment with a control group and one or more experimental groups (called “cells” within Netflix) which receive alternative treatments. Each member belongs exclusively to one cell within a given experiment, with one of the cells always designated the “default cell”. This cell represents the control group, which receives the same experience as all Netflix members not in the test.”— Netflix blog</blockquote>
<h4>What does the present ecosystem offer.</h4>
Presently a lot of companies like Mixpanel, VWO, optimisely provide client SDKs (Javascript code) which have to be added in the head tag of the page html. The tests can then be created via a dashboard. Although the above methods give you a lot of options when it comes to button colors, component height (css attributes), it doesn’t really allow you to create two separate flows altogether. Also some of the above libraries can really hamper your page load times and can create a jittery / laggy experience for users.
<h4>Presenting NGINX</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/626/1*Lqqzohxt5sznYqtnrAh09w.png">
<a href="https://nginx.org/en/">Nginx</a> is a light web server that offers a bunch of functionality like load balancing, reverse proxying, html compression. It’s easy to setup and really offers a lot of control to developers.
Nginx is a terrific tool for distributing traffic for split tests. It’s stable, it’s blazingly fast, and configurations for typical use cases are prevalent online. More complex configuration can be accomplished after just a couple hours exploring the documentation. Small companies may not have resources to spend on paid software for A/B testing, but nginx provides an option to carry out some form of A/B testing.
<blockquote>You want to see which of the forms below will have better conversion.</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ny7aOxNtdXE88Ax8Q7B8eA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*I6fuPkJm2zwhYcYDE-4f1w.png">Version A and Version B respectively
Your hypothesis being a lesser number of form fields implies less data being inputted by the user thus leading to more conversions.
So we can define 2 buckets Version A and Version B. The former is the control group which is what is shown to 80% of the traffic where as the latter is the test group which forms the remaining 20% of the traffic. Port 7770 will host one bucket of the code where as port 7777 will host the second bucket of the code.
<img alt="" src="https://cdn-images-1.medium.com/max/412/1*pficodfp_HU6MW87VL3N6g.jpeg">
<h3>Over to some Code Now</h3>
Your nginx.conf file can be modified as shown below.
<pre>http { # ... # application version 1a upstream version_a { server server 127.0.0.1:7770; ## Can be an external ip too }</pre>
<pre> # application version 1b upstream version_b { server server 127.0.0.1:7777; ## Can be an external ip too }</pre>
<pre> split_clients "app${remote_addr}${http_user_agent}${date_gmt}" $appversion { 80% version_1a; * version_1b; }</pre>
<pre>server { # ... listen 80; location / { proxy_set_header Host $host; proxy_pass http://$appversion; } } }</pre>
Create 2 upstreams, one for each bucket.
The split_client directive helps us divert traffic along with the specified weightage to a particular upstream. The app${remote_addr}${http_user_agent}${date_gmt}appversion creates a hash based on the above parameters and is used by nginx to log a request made to either bucket. Preferably these parameters are those which are pertaining solely to a user, like user_agent, remote addr.
Ok so this will work but it doesn’t give the user a persistent experience. If i refresh my page, there is a chance i switch between buckets, and this can be a horrid user experience. Consider the above case, imagine trying to fill a 6 field form and then suddenly on refreshing seeing a 2 field form.
<h4>New Approach</h4>
<ol>
<li>Proxy pass request to either bucket</li>
<li>Set a cookie with an expiration time equal to duration of test.</li>
<li>Check for cookie existence and proxy pass to correct bucket to ensure a uniform user experience.</li>
</ol>
We will use nginxs’ map directive and map the $cookie_name variable to different buckets that we have created.
<pre>http { # ... # application version a upstream version_a { server server 127.0.0.1:7770; ## Can be an external ip too }</pre>
<pre> # application version b upstream version_b { server server 127.0.0.1:7777; ## Can be an external ip too } split_clients "app${remote_addr}${http_user_agent}${date_gmt}" $appversion { 80% version_a; * version_b; }</pre>
<pre> map $cookie_split_test_version $upstream_group { default $appversion; "version_a" "version_a"; "version_b" "version_b"; }</pre>
<pre>server { # ... listen 80; location / { add_header Set-Cookie "split_test_version=$upstream_group;Path=/;Max-Age=518400;";</pre>
<pre> proxy_set_header Host $host;</pre>
<pre> if ($upstream_group = "version_a") { proxy_pass <a href="http://127.0.0.1:7777">http://127.0.0.1:7777</a>; break; }</pre>
<pre> if ($upstream_group = "version_b") { proxy_pass <a href="http://127.0.0.1:7770">http://127.0.0.1:7770</a>; break; }</pre>
<pre> proxy_pass <a href="https://blog.prototypr.io/">http://$appversion</a>; } } }</pre>
As its a little hard to format the above code…
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LekfEbjABlUcQ05aDIoAug.png">
<h4>Conclusion</h4>
<ol>
<li>Nginx provides a very simple api to create an A/B test environment.</li>
<li>Allows for multiple buckets to be created, the example above shows 2 buckets but we can split traffic and create more buckets.</li>
<li>As the same code is hosted on 2 ports, deployment can become tricky(presently i have 2 branches a master and a test branch), whether done off a different branch or from the same one.</li>
<li>Carrying more than one A/B test can become tricky. Yes you can use the location directive and set different cookies based on the required tests, but having 2 tests (Test 1, Control: 80, Test 20 &amp; Test2 Control: 50, Test 50) is impossible. That being said at a time you should not have more than 1 A/B test per page. Else you will end up having 2^n versions of your page where n is the number of tests, and tracking conversions will be hell.</li>
<li>Tracking can now be done at a very granular level as the code bases are effectively separate.</li>
</ol>
Do let me know if i’ve made any mistake in the above. Happy to correct and learn. Hope you liked the article.
PS: Did anyone notice it is less than 40 lines of code
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d4f94397130a" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/a-b-testing-with-nginx-in-40-lines-of-code-d4f94397130a">A/B Testing with NGINX in 40 Lines of Code</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

A/B Testing with NGINX in 40 Lines of Code

Top Stories