× press ESC to close

Netlify builds, deploys, and hosts your front end.

Netlify’s Split Testing lets you divide traffic to your site between different deploys, straight from our CDN network, without losing any download performance, and without installing any third party JavaScript library.

You can use any analytics library to track visitors across different versions of your site.

Branch Split Testing

Branch Split Testing divides traffic to your site between two or more deployed Git branches. To leverage this feature, you need to use our Continuous Delivery pipeline, and our Branch Deploys.

Once you have one or more branches deployed, go to the Split Testing settings on app.netlify.com to enable your first test. Choose the branches you want to perform the test with, assign the percentage of traffic you want to send to each branch, and click “Create test”, that’s it. As soon as that’s done, we’ll start dividing traffic to your site according to the percentages you set. If you change the percentages, we’ll automatically readjust the traffic again.

start-test

You can add more than one branch to the Split Test, as long as the distribution of traffic only adds to 100% of the total traffic:

add-branch

You can also remove extra branches from the Split Test after being added, use the cross button in each branch row to do that:

remove-branch

When you’re done with your test, you can stop it by clicking the “Stop” button:

stop-test

We use cookie affinity to ensure that the same visitor always gets the same branch. This is configured out of the box to ensure that people that visit your site have a consistent experience.

Only one test can be enabled at a time. If you want to start a new test, you’ll need to stop the current test you’re running and start a new one.

Tracking split testing information

You can use any client side analytics library with our Split Testing, like Google Analytics, or Segment.

Exposing Split Test information in your site

The most important piece of information you probably want is the branch a visitor is seeing. You can access a branch information from the build environment when we build your site, and inject the name into your site.

For example, if your site uses Hugo to generate pages from templates, you can use the getenv function to retrieve this value:

{{ getenv "BRANCH" }}

If you use React, you can access the same variable from the process environment at build time:

process.env.BRANCH

You can read more about this environment variable and many others in our Continuous Deployment documentation.

Sending Split Test information to Google Analytics

Google Analytics supports dimensional data that can be associated to events. You can use this feature to send the Split Test information that you compiled in the previous build.

For example, if you’re using Google Analytics in a site built with Hugo, you can use this template to track the branch a visitor is seeing:

<script>
<!-- install Google Analytics' JS tracker before using this code -->
<!-- https://developers.google.com/analytics/devguides/collection/analyticsjs/ -->
ga('send', 'pageview', {
  'Branch':  '{{ getenv "BRANCH" }}'
});
</script>

Sending Split Test information to Segment:

Segment is a platform that allows you to multiplex tracking information and send it to different services at the same time. Their JavaScript library also supports dimensional data that you can use to send the Split Testing information.

To follow Google Analytics’ example, you can track the testing branch every time someone visits your site with a snippet like this one:

<script>
<!-- install Segment's JS tracker before using this code -->
<!-- https://segment.com/docs/sources/website/analytics.js/quickstart/#step-1-copy-the-snippet -->
analytics.track('pageview', {
  'Branch': '{{ getenv "BRANCH" }}'
});
</script>

Using Netlify Snippet Injection to track split testing information

You might want those analytics scripts only in your production environment. After all, you don’t want to send tracking information when you’re developing your site.

You can use Netlify Snippet Injection to add those scripts right when we deploy your site. Netlify Snippet Injection uses Liquid templates to expose deploy environment variables to your snippets. This gives you the ability to inject the testing branch without having to worry about which build tool you’re using.

To inject analytics scripts using Netlify Snippet Injection, go to your site’s setting dashboard, scroll to the Custom Scripts panel and click “Add Snippet”.

Following the previous Google Analytics example, you can inject this template as a custom script:

<script>
<!-- install Google Analytics' JS tracker before using this code -->
<!-- https://developers.google.com/analytics/devguides/collection/analyticsjs/ -->
ga('send', 'pageview', {
  'Branch':  '{{ BRANCH }}'
});
</script>

In that same way, you can inject this template as a custom script to use Segment:

<script>
<!-- install Segment's JS tracker before using this code -->
<!-- https://segment.com/docs/sources/website/analytics.js/quickstart/#step-1-copy-the-snippet -->
analytics.track('pageview', {
  'Branch': '{{ BRANCH }}'
});
</script>

Notice something is incorrect or outdated?

First off, great eye! We appreciate your discovery and want to ensure it gets addressed immediately. Please let us know here.

Want to get started quick?