Contrary to the popular belief, landing page customization and testing is not limited to eCommerce or business websites. If you're running a niche blog, testing of the homepage and other key pages can help you come up with a better design and a better copy to get more engagement with the visitors. Though there are dozens of different software solutions to test web pages for better conversions, the basic principles for the same are more or less the same—in every case. In this comprehensive tutorial, we're going to use free and powerful 
Before we dive into the actual page testing process, let's quickly brush up the basics. It'll help us grasp the fundamentals which in turn will allow us to get more out of the entire testing process.
To test custom landing pages with maximum flexibility, a self-hosted website is a prerequisite. Sites running on hosted platforms often don't give you enough freedom to add 3rd party scripts. Let's move ahead and start with the basic page testing concepts.
Landing Page Testing Fundamentals
Before you start your very first landing-page testing process, few things need to be considered—beforehand. Although, you may be familiar with most of the pointers discussed here, making a checklist of the same, certainly helps. So, here we go!- Weed out clutter before testing: If you're going to test and optimize a landing page, it's quite natural that you're going to add all the important elements on the page.
But sometimes, we get carried away in excitement adding all the bells and whistles in hope to retain prospects for a longer period of time on the page.
Do not fall in this trap and go for the minimalistic design approach. A clutter-free design is one of the important prerequisites for a successful landing page testing process. - Ensure a blazing fast design: A clutter-free design should be further augmented with fast page load times. A sluggish landing page despite having a good copy and layout may result in a poor test dataset. And, deducing the real issue in such a case can be tricky.
- Use a powerful web analytics program: Though page testing software tracks a good deal and accumulate enough data, a standard web analytics program should be in place too.
It'll help you track and gather additional details to get a much richer dataset to act upon. The more comfortable you're with your web analytics program, the more you'll find the testing process, easy. - Be clear about the goals: Before you begin the testing process, the page goal or goals should be tabulated on a paper. And, each of the goals should be quantifiable in a clear and precise manner.
- Be clear about the target audience: Unless you're not aware of the demographics of your target audience, a successful page testing campaign cannot be implemented.
During the testing phase, you may need to segregate inbound traffic on the basis of demographic data to correctly assess the type of prospects you should target in the long run. - Decide between A/B or multivariate testing: Broadly, landing page testing can be divided into these two types. We're going to discuss each one of them in this tutorial.
Briefly, A/B testing is a simpler version testing one or two variants. And, multivariate testing involves testing of multiple page sections or elements.
A/B Testing Process with Google Optimize
To start with A/B testing, two different versions of the same landing page. One of them might be your preferred version and the second one will be against which—the first one will be tested.Make sure you're using Google Chrome to be able to use all the features of Google Optimize. You also need to install the Optimize Extension for Google Chrome to work with all the available options.
Make sure the primary page is live and accessible on the website. Its variant's design should be on your papers—beforehand. Now it's time to log in to your Google Optimize account.
Step 1: If you've not created an account for testing, create one using the 'CREATE ACCOUNT' button.
Step 2: Next, click the + button and provide your website's address for creating a container. If your website uses the
www prefix, include that too. Click the 'CREATE' button.Step 3: Click the 'LET'S GO button to get the following screen.
Here, you can provide the experience name. I'll recommend using the title of the page you want to test. Thereafter, provide the URL of the page that needs to be tested.
And last but not the least, make sure the A/B test option is selected. Finish with clicking the 'CREATE' button.
Step 4: The next step involves creation of variants for the page you're testing. Click the 'ADD VARIANT' button to kick start the process. Provide the variant name of your choice so that you can easily distinguish it from the original version. Click the 'DONE' button to go to the next step.
Step 5: Now is the time to specify the change or difference in the variant page. To do so, click the 'EDIT' button for the variant.
The edit screen will open the original page with all the tools and options to make substantial visible changes in the design and appearance. An example is shown below.
The first thing to remember is that the changes made on this screen don't change the original page residing on your web server. The optimize service simply gather the details of the design change which is injected within the variant, dynamically.
Once you've made the changes, click the 'DONE' button.
Step 6: The default targeting rule can be left—intact. It simply triggers the testing routine whenever a visitor tries to access the URL of the page we're testing.
Custom targeting rules are beyond the scope of this tutorial and therefore we'll skip it—altogether. If you still want to try it out, I'll recommend starting with one of the demographically-based segregation rules.
Step 7: The next important step is to connect your test container with your website's Google Analytics property. It'll facilitate the transfer of all the measurement data to the Google Analytics account. To do so, click the 'LINK TO ANALYTICS' button.
Select the Google Analytics property associated with the website you're testing. Finish this step by clicking the 'LINK' button.
At this point, you'll get the code snippet you need to add to the website where the test page resides. This code snippet can vary depending on the type of Google Analytics tracking script you're already using on your website.
If you're using Universal Analytics (analytics.js) tracking code, the following modified snippet will be used for the test page.
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', 'auto');
ga('require', 'GTM-XXXXXX');
ga('send', 'pageview');
</script>Here, you have to replace
UA-XXXXXXX-X with the Google Analytics tracking ID and GTM-XXXXXX should be replaced with the Google Optimize container ID.And, if you're using Global Site Tag (gtag.js) tracking code, use the following snippet for the test page.
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>Once again, in this case too, you need to do two replacements. Replace
GA_TRACKING_ID with the Google Analytics tracking ID and OPT_CONTAINER_ID with the Google Optimize container ID.In both the cases, this modified tracking script should be inserted right after the
<head> tag within the webpage you're going to test.Step 8: And, last but not least, is the configuration of the test's objective. In most cases, one of the predefined objectives fulfill the requirements. But, a user can create custom objectives too either using custom event-tracking or through custom page view capture through regular expressions.
To get started, click the 'ADD EXPERIMENT OBJECTIVE' link and select the 'Choose from list option. If required, you can set multiple objectives.
Rest of the settings can be left in their default state. There're two simple steps left to complete the experiment's setup.
Step 9: Before attempting to start the experiment, we must validate the tracking script installation.
To start the validation process, click the 'RUN DIAGNOSTICS' link. Once verified, click the 'START' button to complete the setup and to start the experiment.
After 24 hours, you can view the experiment statistics within the reporting tab. By default, the experiment will run for 90 days. You can also specify a custom duration to match with your needs.
Multivariate Testing Process with Google Optimize
The next one is a bit complicated but a much flexible testing process called—multivariate testing. Here, you combine multiple distinct sections on a page to test the layout, design, and copy at the granular level.The more sections you're testing on a web page, the more traffic you need for each of the combinations. If you're running a low-traffic website, do not go for multivariate testing.
Let's get started and see how to do this type of testing through Google Optimize.
Most of the steps for this test are exactly the same as the ones included in A/B testing. These similar steps are already explained in the previous section.
Therefore, those steps will be skipped here and only the multivariate-specific steps will be explained.
So, while creating a new experience within the Google Optimize dashboard, choose the Multivariate test option. You can give an appropriate name to this experience.
After providing the URL of the page to be tested, finish the process by clicking the 'CREATE' button.
The next step is the most important one. Here you specify different sections and their variants to be included in the test. Give an appropriate name to the variants as shown below.
Use the 'CREATE SECTION' and 'CREATE VARIANT' links to create and customize the page elements you want to test. I'll advice to limit the number of sections to 3 for a single test campaign.
Here, you can see the combinations that'll be tested. Naturally, we need decent traffic for each test case to accumulate enough data to work upon. Once again, I'll remind against going with the test of too many sections for low to medium traffic websites.
Next important setting is the configuration of one or more targeting rules. Use the 'ADD RULE' link to create such rules. Here's an example.
The targeting rules (shown above) clearly state that only those visits will be considered for the test where the visitor is landing on the about page and he is using Microsoft Edge web browser.
Similarly, you can create your own custom targeting rules as per your requirements. Rest of the settings are quite similar to those required for A/B testing. We've already discussed these settings in the previous section. Therefore, I'm skipping the details of those steps.
Miscellaneous Page Testing Tips and Guidelines
Before we finish, let's once go through some of the best practices and important guidelines to help you test your custom landing pages—in a better way.Some of the pointers mentioned below are just the summary of the detailed steps mentioned in this article. Let's get started!
- Embrace minimalism and fast page load times when it comes to designing custom landing pages.
- Get familiar and comfortable with Google Analytics.
- Unless you don't have decent traffic on your website, stay away from multivariate testing.
- Extensively do event tracking while doing page testing.
- Your test goal should be to optimize the USP of the page.
- Do not get obsessed with this process. You obviously can never achieve 100% results.