Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567



Split Testing With Netlify – DZone Web Dev

Split testing is a feature you aren’t using enough. It’s a great way to test changes with your visitors without minimizing risk. In this tutorial, we’ll learn what split testing is, why you need it, and how to set it up with Netlify.

What is Split Testing?

Split testing is the idea of creating another copy of your website that you can send users to, so you can test new features. Let’s say you have a new design you want to try out. Rather than push that new design to production where everyone can see it, you can test it with a few people.

Production Site vs. New Design

Here I have redesigned my awesome Vue blog. But I don’t want to dump the new design on everyone. I want to test it out. Here are the options I can do with split testing: I will keep the main production site with the current (light-colored design). Then I can:

  • Only send people I invite to the (private) beta site.
  • Have folks ‘opt-in’ to the beta site.
  • Push a certain amount of (public traffic) to the beta site These are all ways I can test the design without fully committing. If there are major problems with the site, I’ll find them and fix them before everyone sees them.

Enable Split Testing

The first thing I have to do is enable split testing with Netlify. To do that, I must:

Once you have created a new branch (name it whatever you like) you can push the new design to that branch. I have mine set up at staging.jeremymorgan.tech. 

Branch domains

If you enable branch subdomains, you’ll see a split-testing tab in Netlify:

Split Testing Tab in Netlify

Option 1: Invite-Only (Private Beta)

You enable invite-only testing once you’ve enabled branch subdomains. Your main traffic goes to your production site:


Main traffic goes to production site

And you can send testers to the branch subdomain:


Send testers to the branch subdomain

Easy stuff. You gather feedback, make changes and when your site is ready to go, you merge the branch.

Option 2: Opt-In (Semi-Private Beta)

Let’s say you want to make so folks can opt-in to beta if they choose, and if not they stay on your production site. To do that, you create a split test, and set 100% of your traffic to production, and 0% to the new beta site: 

Creating a 100% main split test

Now, to route people to the beta site, they will need a cookie set. Netlify uses the nf_ab cookie. If the nf_ab cookie is set to the name of the subdomain, Netlify will route the user to that branch subdomain:

Routing to the branch subdomain

So as long as the cookie is present, they will see the new version of the website (available on the staging subdomain). For example, in my Vue App, I added a button:

Which calls this method:

This code sets the cookie for anyone wanting to “try out” the beta version of the site. The ‘opt-in’ model is great for your website visitors who are feeling adventurous and want to try out your new site. You leave the production site intact for everyone else.

Option 3: Split Traffic (Public Beta)

So if you’ve created a new design or new features, and you want to ‘ease into’ deploying them, this is the way to go. In the Netlify split testing panel, simply choose a number of people to send to the new site:

Split traffic 81:19% ratio

In this example, we’re sending 19% of the total public traffic to the new website. This is random, and it could be anyone. Netlify will send a percentage of your visitors to your new site and the rest to your old or ‘production’ site. No need to worry about visitors getting a new site one day and the old one the next. Netlify will use the nf_ab cookie again to route users to the original site they visited. This is an excellent way to push out some fresh changes, look for feedback, and react. You can even set up a Blue-Green Deployment with this.

Try Out Split Testing For Yourself!

Split testing is an excellent way to test out new features without rolling the dice on full deployment. Sometimes you want to test a new design, a new feature, or do some A/B testing for advertising. These are all possible with Netlify’s split testing feature. The best part is, it’s easy to set up. You create a new branch, point a subdomain to it, and start tinkering.

Netlify makes this testing simple and easy to implement. Check it out! Questions, comments? Let me know!

Credit: Source link

Previous Next
Test Caption
Test Description goes like this