Article

10min read

How to A/B Test your Landing Page: a Step-by-Step Guide

Landing pages are essential tools in your modern marketer’s toolkit.

By driving supposedly qualified visitors – who you carefully targeted on ad networks or through smart traffic acquisition strategies – to a dedicated page that shows you at your best, you increase your chances of converting them into clients or subscribers.

You’ll find numerous resources online about landing pages: how to design them, what are the best practices to follow when creating one, what you should include, what you should avoid…

But the truth is that every website has its very personal audience, with its own characteristics, that might be more sensitive to some arguments than to others. What works for your neighbors may not work for you, as they say.

Every website has its very personal audience

The only method to make sure that supposed best practices are working for you is to A/B test them.

As a reminder, A/B testing involves comparing two versions of a landing page, known as variation A and B, to see which performs better. These versions are presented randomly to users and a statistical analysis then determines which one performed better, according to predefined KPIs, such as sign up rate or click-through rate.

Pretty straightforward. But how do you actually A/B test a landing page?

As A/B testing experts, we’ve crafted this checklist to guide you through the process. We’ll use our own A/B testing software to help you visualize each step, but the process is tool agnostic and works, no matter who your vendor is.

Important considerations

Before actually setting up an A/B test, let’s tackle three important considerations.

1. What landing page should you test?

This first consideration may sound like a trivial one, especially if you only have one landing page, but most websites actually use different ones. They may have different offers and products to promote, or they may address different personas, who each have different expectations.

If you have several landing pages and a limited amount of incoming traffic on these pages, the answer is not so obvious. A/B tests take time (not to implement but to collect enough data) and require traffic. In this scenario, you should consider various parameters to select the landing pages you’ll invest in:

  • Is this landing page a strong contributor to your bottom line? (ex: net number of leads or signups)
  • Is there some issue that suggests it can perform better if solved (high bounce rate or exit rate)
  • Does it have decent traffic?

We suggest that you use methods like PIE to prioritize the landing pages that you want to test.

2. What KPI should you look at?

Once again, the answer may sound obvious. If you are promoting a web-based subscription service, like most SaaS companies do (including us :-), your sign up rate is a good candidate.

But what if you don’t attract a lot of new users and don’t get a lot of signups? Let’s say you are running a B2B business and your sales cycle is quite long. Few leads may actually go through the whole process of creating an account.

You may have to optimize for a different type of conversion. It could be micro conversions, that is to say, small steps on the path towards your primary conversion goal (macro conversion). For instance, it could be:

  • Percent of progress in the process (filling partial information like full name and email address).
  • Number of times your demo video is viewed.
  • Page scroll depth.

3. What should I test on my landing page?

This is the most common question we’ve received so far and we’ve got a lot of resources to answer it. Check it out:

Now let’s get started with actually setting up an A/B test on your landing page

1. Install the A/B testing vendor tag on your landing page

Once you’ve created an account with an A/B testing vendor, the first step is to install its JavaScript tag on your page. This simple line of code does all the magic on the client-side (your web browser): it buckets the incoming traffic to the available variations, applies your modifications through JavaScript code and sends data to collect hits to track goals. Example of AB Tasty’s code:

2. Select the type of test to run

Different type of tests to experiment on your landing pages

Most A/B testing tools let you decide on the type of test to run: standard A/B test, split test with URL redirect, multivariate test. To learn more about how to choose between these options, refer to this article.

As shown in the AB Tasty interface, you can also run server-side A/B testing which is a completely different approach used to experiment with product features, deeply tied to your back office.

3. Load the landing page inside the WYSIWYG editor

If you are a marketer and want to design your landing page variations on your own, select ‘A/B’ test during the previous step, specify the URL of the original page and just hit enter. All its content is now loaded in a graphics editor (drag and drop) for you to play with.

Edit your landing page in a WYSIWYG builder

4. Craft your landing page variations

All A/B testing tools allow for the creation of several variations per page. Create as many as you want but keep in mind that the more you have, the more traffic you’ll need to reach statistical significance (more on that later). With almost any tool, you can live edit text and styles, reorder blocks, change images, adjust element position, hide content… There are a lot of options to modify your page as you like. If you think you’ve reached a brick wall, there is still the option to edit/add custom CSS and JavaScript code.

How to setup a click tracking on a A/B test

5. Setup your goal tracking

Setting up your goals and KPIs is usually a breeze. To track CTR (click-through rates), simply point and click on the call to action to track and select the appropriate menu option. If the conversion takes place on a different page, like on a confirmation page, just enter its URL. Bonus: You can track several goals inside the same test and create advanced goals like funnel conversions or scroll page rate.

6. Setup your landing page targeting (URL targeting)

While this step may not be required if you only have one landing page and one URL, in some rare cases, you may want to extend your default targeting – the URL you specify at step 3 – to include some variants, like URL with additional tracking parameters – do utm or gclid parameters sound familiar? ;-). If your test applies the same modification on completely different pages, you can use this targeting expansion feature as well.

URL targeting during an A/B test setup

7. Narrow down your audience if necessary (audience targeting)

This step may be the most important of them all. Remember the whole purpose of a landing page? It’s to direct visitors to the page that best meets their expectations. And as you know, we all have different needs. What if you could craft a personalized landing page for your users based on what you know about their profile or characteristics (source, geolocation, cookies and much more)? This personalization feature is part of many A/B testing tools.

Target your A/B test on different user profiles

In this screenshot, you can see some of AB Tasty’s targeting options (here is the full list in case you’re wondering).

8. Select the percentage of traffic to be part of the test

By default, with 2 variations, each should get 50% of the total incoming traffic. But with most tools, you can specify a different allocation. A concrete use case would be a very sensitive test for which you don’t want to expose all your landing page traffic. You may set only 25% to see variation A, 25% variation B, leaving the remaining 50% untracked (they will see the original page).

Allocate a specific percentage of your landing page traffic to your A/B test

9. Connect with third-party tools

This step is also optional. You can send to other tools, like Google Analytics, the information regarding the test and the variation a user has been exposed to. This way, you can use any type of reporting tools to read your data.

Connetc your A/B test to third party tools

10. Review and acceptance test

Before you launch this A/B test on your landing page, take some time to verify how it renders in different environments, such as mobile website and different screen sizes. A/B testing solutions make it easy to debug tests on your landing pages with some neat features like a responsive editor and mobile previews. At AB Tasty, we’ve even developed a smart QR code feature to quickly launch your modified landing page on any mobile browser.

11. Launch and sit back

Congrats, you made it! It was not that complex with the right method and the appropriate tool for the job. After you click the play button, you’ll have to wait until you get enough data to properly analyze the results. That’s the next step.

12. Interpret results

This step is certainly the trickiest one. Until now, you felt pretty confident, because setting up the changes was easy. But as soon as we start talking about statistical significance, confidence interval or type I and type II errors, you’re not showing off anymore 😉

Fortunately, A/B testing vendors made a lot of progress to make the analysis easy for you. In the next screenshot, AB Tasty reports on the expected gain for your test. In this scenario, it may be that the variation offers very small uplift, but it is also possible that the absolute gain may reach as high as 136%. The remaining scenarios (gain < 2.8% or gain >136 %) have only a 5% chance of occurring.

13. Implement changes if you detect a winner

Once you’ve identified a winner, like in the scenario above, you can stop your A/B test and ask your technical team to hard code the changes on your landing pages. Using your A/B testing tool to permanently deliver hotfixes is not a sustainable solution and we recommend stopping your test as soon as you can.

14. Start again

There is always room for improvement and you probably just reached a local maximum. You should definitely keep A/B testing your landing pages. Remember that conversion rate optimization is a test and learn approach and that you should iterate for continuous improvements.

Still have some questions? Want to know more about how much you can change your landing pages? Contact us for a customized demo of our A/B testing solution.

Subscribe to
our Newsletter

bloc Newsletter EN

We will process and store your personal data to send you communications as described in our  Privacy Policy.

Article

8min read

What Lies Behind Website Optimization?

If you run a website, then you’ll know just how important it is that the site is optimized to attract traffic and generate sales (or leads) thanks to a good conversion rate.

But what do we really mean by website optimization?

Definition: Website optimization encompasses all the technical and marketing techniques used to acquire traffic, engage visitors and then convert them into prospects or buyers using a clearly defined method which meets a number of pre-defined goals.

Beyond this definition, it’s hard to distinguish between the various constituent parts of website optimization – there are so many of them.

In reality, the topic is so vast that it involves several professions and skills needed to be able to take all the website optimization and corrective actions.

From design to development and from display speed to SEO, we take you through the basics of website optimization with a three-step approach.

1. Search engine optimization (SEO)

Search Engine Optimization

SEO is a digital marketing discipline that encompasses sub-activities linked to the creation of website content based on keywords targeted in advance in the search engine of your choice.

In the US and Europe, the vast majority of SEO focuses on Google: Yahoo and its competitors have never really managed to penetrate the markets.

And “Google” means “algorithms”: the Californian company frequently updates the algorithms underpinning the “laws” that dictate if your company can boost its ranking by using this or that keyword.

Search Engine Optimization thus means your company’s ability to boost its Google ranking in a targeted, precise way: you’re looking above all to rank on keywords that will deliver qualified visitors.

While there are lots of myths around SEO, remember that the era in which people would buy low-authority links in bulk is over: Google now penalizes websites that have external links which have no relation to their sites.

In 2018, SEO is based on 3 fundamental pillars which will enable you to boost your ranking.

Website Content

The content of your site is what drives your ranking: it is what Google “crawls” your site and parses your content in order to display results in its search engine.

More than just padding out your site, creating quality content and resources allows you to engage your visitors and sell your products and solutions: along with design, it’s the most crucial aspect of your site.

Of course, the content of your site can be presented in various forms (written, visual and video) and will contain keywords you want to use to drive your ranking.

Lastly, quality content necessarily lends itself to sharing: when your content is shared, Google interprets it as a positive sign.

On-page optimization

In SEO, on-page optimization covers all the technical aspects needed to rank in Google.

Getting down to basics:

  • Your tags must be consistent and must contain your targeted keywords.
  • Your site must load quickly.
  • Your site must be responsive.
  • Your site must be HTTP Secure (HTTPS).
  • Your site architecture must be consistent and organized.

Links

This is becoming less true but links fuel SEO. In quite an intuitive way, Google takes it as a positive sign when several sites linked to your business point to yours using an external link.

When you share content or your users share your site, you make it more likely that a site will share information or talk about you: you, therefore, create external links organically.

2. Optimizing technical performance

Page speed optimization

Technical performance is the driver of your website; on it depends on the ease with which your visitors will be able to visit and interact with your site: it is, therefore, a crucial aspect of website optimization.

Complementing SEO, technical optimization also determines performance factors which will influence your site’s Google ranking.

To get straight to the point and save you time, we’ve split this section into three:

Optimizing site speed

Site speed is one of the most critical performance indicators of all: it’s estimated that you risk losing traffic when a site takes over 2.5-3 seconds to load and that the abandon rate shoots up after 5 seconds.

A site can be slowed down for any number of reasons. However, there are several (fantastic) tools that will give you a quick appraisal of the situation:

By boosting speed, you cut abandons caused by slow loading and also help to improve your SEO.

As an example, the BBC calculated that it was losing 10% of its traffic for every extra second its pages took to load (see the study).

Display on mobiles and tablets

In 2018, 52% of global traffic is generated by mobiles, on which web browsing has improved markedly in the last five years. For some sectors (including shopping), the proportion of mobile traffic can be higher still, rising to 70-80% for some sites.

Given this high rate of mobile web browsing, it’s imperative that your website is optimized (or “responsive”) for display on mobiles and tablets.

If you build landing pages, remember there are various landing page builders which offer 100% responsive templates: a good way of saving time when creating your pages.

Making sure your site is responsive therefore means building your page so that the content displayed adapts to the size of the display window the visitor uses.

For more information, see the Google guide to creating adaptive web pages.

Page errors and hosting performance

Loading errors: we’ve all experienced them. They take the form of an HTTP protocol starting 4XX or 5XX. The most common are:

  • 404 (not found)
  • 403 (forbidden)
  • 401 (unauthorized)
  • 400 (bad request)
  • 500 (internal server error)

The problem with page errors is that visitors who encounter them, they often signal the end of their visit. Using a crawler, you can identify the page errors on your site so that you can redirect visitors to useful resources. Tools like Screaming Frog or Botify might help you with this.

When it is not your site that is causing the performance problems, they might be caused by your host: i.e. the company that hosts your site data which are loaded by internet users visiting your site.

There are two ways of solving this problem:

  • Change hosting subscription (should your traffic exceed the limits included in your package).
  • Change hosting provider (if you’re hosted by an inferior low-cost solution).

3. Optimizing conversion and user experience

Conversion Rate and UX Optimization

Optimizing conversion rates covers everything you do to give visitors to your site a better browsing and interaction experience: this is a crucial aspect for any ecommerce site.

If you improve the user experience, you will naturally also improve your site’s conversion rate: users are reassured more quickly and gain a better understanding of your added value.

As well as improving your conversion rate, a good user experience (UX) will also increase customer loyalty: your users will be more likely to return and make other purchases.

To improve your UX, you should start by identifying problems by analyzing your data. Tools like Google Analytics will help you gain crucial insights into:

Of course, there are other data you can use to understand all the UX mechanisms at play on your site, but these four will help you make a start on targeting the biggest obstacles.

To take things further, you can then use a more advanced data analysis solution like AB Tasty’s. With our A/B testing tool, you’ll be able to track your users’ behavior and understand how they interact with your site using the following features:

  • User Session Recording. Record your visitors’ sessions and then view how they interact with your site to gain more insights into their behavior.
  • Heatmaps. View clearly how your visitors interact with your site using heatmaps: you’ll know where they click and where the logjams are.
  • Surveys and user feedback. Save time and ask users how they think your site could be improved!
  • Visitor Segmentation. All your customers are different: segment your site traffic to create standard profiles to which you can push content and exclusive offers.
  • Advanced A/B testing. Use A/B testing to put your hypothesis to the test: improve your pages and compare them with previous versions to find the formula that works best.

When seeking to optimize a site, people will often focus on a single type of optimization (SEO or UX, for example): this is a common mistake which will not help you to substantially boost your revenues.

In digital marketing, we take the view that the 3 types of optimization (SEO, technical, and UX) work hand in hand: there’s no use acquiring traffic if it is not qualified and if your site cannot convert it. Conversely, a technically optimized site will be of little use if it doesn’t attract qualified traffic.