Netlify is a tool I have personally come to love and appreciate, mostly because it is super easy to deploy applications, and also because of the company’s involvement with the JAMstack. Netlify does a lot of cool things, ranging from instant deployment to continuous integration.
In this article, we will focus on a specific Netlify feature: Split Testing. It’s worth noting that at the time of writing, this feature is still in beta. We will discuss how to leverage Split Testing and look at some exciting use cases.
When you have a feature you would like to include in your projects but aren’t sure how your users will respond to it, it makes sense to give them early access to the new feature or part of your site or application to generate actionable feedback on its feasibility. However, deploying applications can be a hassle, never mind managing separate instances of your site or app just so you can test out features. It doesn’t have to be so complicated, and that’s where Netlify’s Split Testing really shines.
According to the official documentation, “Netlify’s Split Testing lets you divide traffic to your site between different deploys, straight from their CDN network, without losing any download performance, and without installing any third-party JavaScript library. You can use this for A/B testing, or for launching private beta releases.” The best parts are:
To illustrate Split Testing, I’ll demonstrate a very simple feature using a project hosted on GitHub. The tool greets you with the current time, date and an African proverb after you input your name.
The new feature to be demonstrated is nothing fancy; it tells you how many characters your name has and the time in 12-hour format, all in a fancy font type.
To begin, you’ll need a Netlify account, so sign up if you haven’t already. Once you’re logged in, click on the new site from the Git icon in the top-right of your dashboard.
I already have a site previously deployed, so don’t worry if your screen doesn’t look exactly like mine. As long as you can see the New site from Git button, you’re good to go.
To deploy your site, follow the steps outlined below.
First, choose your Git provider:
Next, select your project repository:
Finally, set your build options and then deploy:
Once your site is deployed, head back to your dashboard. It should now look like mine, and you’ve successfully deployed your first Netlify-hosted site.
Now is the time to set up Split Testing. Go ahead and click on the site you want to apply this feature to. The next screen should look something like this:
Once you’ve reached the above screen, the next step is to click on Split Testing, the third menu item from the right. This takes you straight to the page where you can set up the goodness I’ve been raving about.
To activate Split Testing, click the button in the bottom-left labeled Activate branch deploys. You may run into an issue where Split Testing works on only branches with more than one branch, as shown below.
This simply means that Netflify was configured to only deploy one branch. You can fix this by navigating to Settings > Build & deploy > Continuous Deployment > Deploy contexts. Then, click Edit settings and select the radio button labeled Let me add Individual branches. You can choose to deploy all branches (including future branches) or select individual branches you would like to deploy.
Once you’ve got that sorted, head back to the Split Testing menu.
You can now choose branches you want to test and the percentage of traffic you want to allocate to these branches. Once you’re done, click the Start test button, and that’s all there is to it.
Note that you can add more than two branches for the Split Testing. Remember to stop any tests that are already running before you start a new one.
The Split Testing feature is a really handy tool. It’s straightforward and very easy to use. You can read more about how it’s implemented under the hood on Netlify’s official website. Don’t be afraid to try it out just because it’s still a beta feature. It will make your continuous integration experience so much better.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
Learn more →
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Discover how the Chakra UI MCP server integrates AI into your editor, reducing context switching and accelerating development by fetching real-time documentation, component data, and code insights directly in-app.
fetch callSkip the LangChain.js overhead: How to build a Retrieval-Augmented Generation (RAG) AI agent from scratch using just the native `fetch()` API.
Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.
Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.
