Written by Obinna Ekwuno✏️
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.
The problem with deploying applications
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.
Testing new features
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:
- You can use any client-side analytics library of your choice to track visitors across different versions of your site
- With the superpowers of Git branches, Netlify can build all your branches and serve them on dedicated URLs
- You can use this feature with any type of site you like, regardless of what tools or static site generator you used to create it
- You can even run a branch-based test that divides traffic between two or more deployed Git branches
- With Split Testing, users are provided with access to different branch builds invisibly (i.e., all from the same production URL)
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.
Setup and implementation
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.
Conclusion
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.
Editor's note: Seeing something wrong with this post? You can find the correct version here.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Try it for free.
The post Exploring Netlify Split Testing appeared first on LogRocket Blog.
Top comments (0)