Today we will talk about Landing page. About its structure and main elements.
As we all know the goal of the Landing page is to convert visitors into buyers or subscribers or to lead them to a certain action on a page. And this can be done by following to a certain mixture of information and calls to action in the page structure. So there should not be any elements without the purpose of converting a visitor to a buyer or a subscriber. We can divide those elements to the call to action elements and to supportive elements, but let’s start with the Landing page creation and see how it works.
Task: Create a landing page for a footwear company
Goal: Promote the 25% mark-down for Nike sneakers
So, the main elements we're going to use here now are:
1. The item that we are trying to promote or to sell. It may be represented with a picture or a line of the text with a description;
2. A sharp headline with a clear meaning that reads well;
3. And a Call to action.
I need to say that here we use predesigned pictures, so there is no information about the actual design and the work with Photoshop to be given here. Just a couple of words for the type of pictures for the items that are sold will be said. The best way is to use commercial photos that you get from advertisement campaigns. Do not try to use one from your home camera or something that your girlfriend made, unless she is good at it. The stuff you sell must look very good or you just drive visitor away from the page. And it would be good if he does not remember the brand it belongs to.
So we start from the picture. Here we have brand elements such as the logotype, the headline and copyright info. That is necessary to identify who sells those sneakers and not to be mistaken with others. Here you can see that we have shadowed the second sneaker to have some space to place additional info in there. So it’s time to tell everyone what we sell in here.
Here we go with the description text block. As you see we have it against a contrast background so the it would read well. We have a large headline, a smaller message in yellow that promotes it, and a small text info that usually noone reads, but it is necessary to make that description full and we need it here from the design point of view as well. That just makes our text block look finished and solid. So the next step is to tell how extremely it is cheap now and add a Call to action.
Here we are. The old price is not valid anymore; we have the new one which is cheaper. And we have a prominent Buy now button. It is important to have it prominent on the page, do not try to hide it. It is the most important element on the page. So everything that is important is here. But we may think about a situation when a visitor has already bought some sneakers and does not need any anymore. Or he needs sleepers now for the next month to give it to his grandma for her birthday. So we need an alternative call to action in here to propose to the visitor instead of just loosing him. And it may be a subscription form. It works well if I like the brand or the seller, and simply don’t need the current sales item but would like to stay informed about feature sales.
And here we are! A simple form is added. We have 2 calls to action in here. And probably it is a right time to test how well we have done this page.
Before we start the analysis, we need to clearly understand why we are doing it, what exactly we are analyzing and then go to how we will do it. So – why analyze? Andrey has already mentioned that we should care so much about the layout of the l/p because this is the first page that a visitor sees when he/she gets to the site. But he has not yet mentioned that the purpose of the l/p is to keep the visitor on the site and to kind of “softly impose on him” what you want him to do next. And as we are talking about e-commerce Magento sites, so the path that you would like to hint to your visitor is a path to successful purchase! So when we talk about l/p analysis and its effectiveness, what we actually want to measure is how well it converts a visitor into a customer!
And there are 3 great tools provided by Google totally free of charge:
*Google website optimizer
Google Analytics is a very popular tool, and I am sure that you all know it and most of you use it.
In GA you can set up the tracking of some goal actions, visitors perform on your site. To do this, first of all you need to define for yourself what you want to track. In e-commerce stores the action you are usually most interested in – is a purchase. But you may also want to track registrations, adding the items into the wish list, pricelist downloads, signing up for your newsletter and so on and so forth. GA allows you to create up to 20 goals within one profile.
So to set up a goal, you need to go to Admin section of your GA account and select Goals tab. Enter the name for your Goal choose the Goal Type and click save.
There are 4 types of goals in GA, URL destination goal, time on site, pages/visit and an event goal.
URL destination goal type is selected when you can consider your goal completed, when a visitor reaches particular URL on your site (shopping cart, thank you for registration or successful transaction page).
Time on site and pages per visit goal types are usually common when you are tracking the interaction of users with your site, and it is mostly good for content sections of your site – like blogs or news blocks.
Event goal type is a relatively new feature; it was invented mostly to allow tracking flash events as goals. It requires additional lines of java script code to be added to the buttons or links that you want to track. This code will call to standard GA track Page view code and if you set it as a goal in event goal type it will be reflected in your conversion reports later on.
So let’s see what we can define as a goal conversion for the landing page that Andrew drew for us.
So surely it can be a Click on “Buy Now” button or the URL this button leads to (in our case it’s most probably the shopping cart page).
As a secondary goal, we can also choose Click on “Submit” button or URL this button leads to.
So, we need to go back to our GA account and set up a URL Destination Goal to track shopping cart page views as a conversion. So, again, we are in Admin section, Goals tab, we have already given the name to our goal, chosen the URL destination type and now we need to specify the URL and a Match type.
URL is specified without a domain name (e.g. /shopping-cart/).
I will stop on Match types in a moment. This tab also offers us some optional settings, like Goal value and Goal Funnel. Goal value presupposes that you already have some raw statistics about your online store’s effectiveness and you can roughly estimate that, for instance, out of all the people that reach your shopping cart only 10% will then buy something, and you also know that the average bill at your store is $100, so by simple mathematical calculations you can estimate that on average every visitor that reaches your shopping cart is worth $10 and set this number in Goal Value field. Later on it will help you see which page brings more value or visitors from which country bring more value to your store.
Goal Funnel allows you to divide the path of your visitors to conversion into steps and have a closer look at how many abandon the funnel at each step. A typical funnel is: a shopping cart page, billing information page, checkout page and a successful transaction confirmation page. There is a sample of the funnel report from GA.
Now back to the URL destination Goal match types. There are three in GA and the Goal URL you enter will depend greatly on the match type you choose.
So for example if you choose a Head match type and enter /order/ as a goal URL. This goal will match /order/customer=1?category=2 and /order/anything after … So it is perfect for sites with dynamic URLs or for engines that add lots of identifiers to orders, users, transactions and etc. With head match you can specify the common directory or the beginning of a goal URL and everything that starts like this will be tracked as a conversion.
Exact match is pretty straightforward. It will track a conversion only if a visitor reaches the exact page you specify.
Regular Expression Match is the most flexible one. It is good for you if, for example your thank you page is almost unique for each visitor and there is no common beginning to set for a head match, or if a head match will catch some extra URLs you don’t want to be tracked as a conversion. Then you can specify in the goal URL field a part of the URL that appears somewhere in any thank you page URL your site generates and set it as a goal.
But you need to be careful, because there some characters that carry additional meaning in regular expressions like * (а catch-all sign), like ^ (caret), a $ sign or a ?. So before setting a goal URL with regular expression match you better look through GA regular expressions at this link at Google support.
When you have set everything up you need to allow some time for sufficient amount of statistics to gather and after that you will get an exhaustive and beautiful reports. You can check up your conversion reports in your GA account, Conversions section, Goals.
The chart will show you the amount of times the conversion has occurred within the time span you’ve chosen, the conversion rate of a goal, total goal value (if you have specified one) and the abandonment rate of your goal, if you have set up a goal funnel. You can also compare the data you have for example today with the data of yesterday or the data of this week with last week, this month with last month and etc.
Funnel visualization report perfectly demonstrates where visitors enter and exit the conversion process and, more importantly, it brings out the bottlenecks of the process. If we compare two funnels I have here, we will clearly see that the first site has incredibly well-optimized landing pages. It has extremely low abandonment rate. Almost all the visitors that have reached the payment page go through the funnel up to the end. And the funnel on the right shows that there are clearly some heavy layout issues at all the levels, starting from landing pages and ending up with shopping cart and the checkout form.
There is also tons of other useful info you can find in GA reports, but I need to give the word back to Andrey and he will tell us what we need to do if analytics shows us that our landing page is no good and its effectiveness leaves much to be desired.
So we’re back with the design again. And our next task is to think how we can improve this page conversion rate by means of design.
So, if I get here, I may need some additional info about what would I get from buying those sneakers. And what can I get? Well, new technologies used to produce it, some fashion style that's quite modern now. So by putting them on I'm going to look like an up-to-date guy in my neighbouhood =). And what can we do? We can add some space just below the main image and use it for additional info.
And here we are. As you see we have used comparatively small blocks of information so that it is quick to read and comprehend. And we have divided it into 3 blocks instead of having it just in plain text. This also helps understand the info in the quickest possible way. Next step of improvement it is to use that empty space below the new texts we have. And what we can do is to move the subscription form in there. Thus we may reconstruct the price block a little to have more empty space around it. And the second important thing is to separate 2 calls to action on the page. And here we are!
So we see that the form fits well in here, probably it is a bit away on the page, I still wish it would be higher on the page - closer to the middle. So we need to think more on its structure. And another good idea is to add some "trust" element in here. And what I mean is the Testimonials block. Just some words from people who have already got those sneakers or, even better, from some famous sportsmen who participate in their promotion. So here we place testimonials instead of the subscription form. Just a couple of them will be enough.
Here we are. And now we need to decide what to do with the e-mail form. As we remember it is advisable to separate calls to action on a page. So we need to look for some space for it. Or simply create some. And that may look just like this.
A nice and contrast background, just a fine placement in the middle of the page. Hope it’s going to work well in here. So, let’s continue. What I am not yet satisfied with here is the price block. I think we can highlight it somehow; we can make actual price bigger and prominent, and the old one smaller. Plus, I think we may use an additional spot on the page to tell to a visitor not just about the change in price, but how big this change is. So we did.
So now it is clear that the price is 25% less, the new price is big and prominent and, probably, that is just enough for now. Seems like it is right time to tell as many people as possible about such a mark-down for Nike sneakers. And to give this possibility to a visitor we add another action tool on the page. And it is a social media widget.
Seems like nothing happens without those icons today. They're just everywhere and we must use it as well. The best possible way to tell hundreds of people some new info. So, that was the last step in our Landing page improvement. What I need to add in here is that the construction of our page has a solid blocks structure, you see we did not use any Ajax, all active elements have direct links to other pages. Why do we need it like this? Well, simply because this way it may be easily implemented on Magento Go, quite a useful tool for such needs. That is important. So let’s see how it may work out for new coming visitors.
After we have thought of a new page layout we can also test it against the original version or against any other versions that you and your designers have invented. Google has a terrific tool created specifically for this purpose. It is called Google Website Optimizer. This tools allows you to run experiments on your site’s real visitors. Basically when you set all up and launch the GWO experiment it will randomly show different variations of your landing page to your visitors and then, after some time passes, you will see which landing page variation brought more conversions. So the tool is really a prize for an e-commerce site owner!
There are two types of experiments you can run in GWO:
A/B experiment and Multivariate Experiment.
A/B experiment allows you to compare the effectiveness of completely different pages with totally different layout. Or vice versa you may just want to test your page’s effectiveness with a button of the different color and that’s it. The main point here is that you need to have you original page and create a new one with alternative design to test it against the original (you need to make sure that this testing page is blocked from search engine bots and cannot be accessed otherwise from your site). A/B experiment is the easiest way of testing existing landing page against the new one.
Multivariate experiment allows you to test a great many of page variations at the same time during a single experiment. It is a more complex experiment and requires more time and site traffic to give meaningful results. I will get back to it a bit later.
Let’s first go through the process of a/b experiment setting up. With a/b testing you need an original page and page variations, you can create a total of 127 different alternative versions of the page. But remember that the more page variations you create the more time will have to pass for you to get meaningful results. A/b experiment is perfect for low amounts of traffic and gives faster results compared to multivariate testing.
To start the experiment you need an original landing page you want to test and alternative page or pages. Remember that for better results you need at least 100 conversions to occur per 1 page variation during the experiment.
Then you need to choose a real, live conversion page (like a “Thank you page”). You can also track clicks and events like playing the video or a PDF download as a conversion.
After you fill in the info about these URLs you can move to tagging your pages with GWO codes.
In GWO after you sign up, fill in the URLs of all those pages where Google Website Optimizer requires it and you will get the special WO java script codes you need to paste on those pages. If you do not want to bother with the codes yourself and would rather your IT team do that for you, you can click “your webmaster will install and validate the java script tags” and then WO will provide you the the link to installation instructions you can send to your webmaster. But adding the tags is basically a copy/paste work, so you can really do it quickly and easily on your own if you have at least elementary knowledge of HTML. GWO provides you the codes you need to paste into the source code of each page and tells you where to put them exactly. You will have to copy and paste 3 scripts all in all. A Control script that is pasted into the original page immediately after the opening tag, a tracking script that is pasted into each variation page immediately after the opening tag and a conversion script that is pasted into the source code of your conversion page immediately after the opening tag.
After you’ve pasted the codes you will click a “validate” button and such a little window will pop up to show you that all the pages have been validated and congratulate you on the successful a/b experiment setting.
And that’s it! You can preview the experiment before the final confirmation and voila! Ready? Steady? Launch!
The reports you will get are extremely simple and intuitive. They will show you the winning variation, or it can sometimes be an original (like here in the screenshot). You will also see the conversion rate of each page variation, the number of conversions each page brought and the percentage of observed improvement from the original page.
In this screen shot we see that there is a clear winner with observed improvement of 81% percent. But sometimes the results may be not that evident and for example 2 or 3 page variations can be winners, then you can run a follow-up an experiment, during which WO will send much lesser traffic to the original page and more to variation pages, in order to collect more statistics on them and define the ultimate winner.
Multivariate GWO experiment compares the performance of different content blocks variations in multiple locations on a page. So here you will not have to create alternative versions of your page, all the experimenting goes on the same page.
To start you will need to define the page you are going to test and divide it into sections (like heading, product image and product description for example). These sections will be the ones to vary during this experiment.
You can divide you page into up to 8 sections and create 127 content variations per each section. All in all you can test about 10 000 page combinations. For example if you divide your page into 3 sections and each section will have 3 variations you will have a total of 27 page combinations to test.
And as with a/b testing you will need a conversion page to track the effectiveness of the landing page under the experiment.
Like with a/b testing GWO will provide you with some java script codes to be pasted on the landing page under the experiment and the conversion page.
All in all you will have to copy and paste 4 types of java script tags for this kind of experiment. Already familiar to us from a/b testing control and tracking scripts for the l/p and a conversion script for the conversion page. The New ones here will be section scripts. That will serve as identifiers of the varying sections. This script surrounds the section that you would like to vary, as you can see in the example. It is important not to paste it inside scripts and not to interrupt it with unclosed html tags. Also remember to give distinctive names to your sections, as they will later on appear in reports.
When you are done with tagging the pages with the tracking codes and see the familiar greenish window of successful validation, you are ready to pass to the variations creation. GWO provides you with the source code of your original page sections.
And all the variations you create will be based on the original.
You need to give a descriptive name to each of your variations and make whatever changes you feel like necessary to the original section code. Save your variations and make sure to preview them to see whether they look like you wanted.
Also Keep in mind that the more variations you create the longer the experiment will have to last to result in successful tests, as once again the rule of 100 conversions per one page combination remains.
Before launching your experiment you will have an option to choose the amount of total traffic that will be exposed to testing. If you do not want to risk showing random page layouts to all of your visitors you can set 25, 50, 75% of traffic or any number you feel is safe for your business.
Then Preview your combinations (maybe you will feel like disabling some of them at once) and press Launch Now.
The experiment starts immediately and the first report will already be available in 24 hours.
The reports for multivariate experiments look pretty much the same as for the a/b testing, the only difference – is usually the number of competing page variations. During the experiment, looking at the reports you will also have the option of disabling some combinations, if you feel like they will definitely loose and you are see no reason to waste your traffic on it. In the report in the screenshot you can see “top high-confidence winners” title above some of page variations. This title appears when some combinations significantly outperform the original page’s conversion rate.
When your experiment is over and you get winners and losers you can run a follow-up experiment if the winner is not that evident to you or simply download the results and stop the experiment.
That is I have got to tell you about GWO, I hope I have convinces you that this is a great tool for landing pages optimization and that with its help you will find that one and only perfect layout for your landing pages.=)
And as a bonus I will briefly cover top 10 most useful metrics and reports to check in GA for e-commerce sites:
- Landing pages report can actually be the first step in your l/p analysis. As this report will show you the most popular entrance paths and navigation paths and hint you which landing pages you should optimize in the first place.
- Bounce rate metric appears in many reports in GA and serves an identifier of problem pages and problem traffic sources and locations. Bounce rate shows how many visitors left the page without navigating anywhere else. You can see that here some landing pages tend to have higher bounce rates and it can be a signal to look closer at their layout.
- Map overlay report, can show you the locations of profit, new markets you need to focus on. Here if you look at the chart, you’ll see that although the USA brings more money all in all, Denmark and Norway have a pretty high per visit value too, so you may think of more promotions and attractions for visitors from those countries.
- Conversion funnels is a great visual report I have already talked about during the webinar, so I won’t focus on it, I hope you remember all the benefits it brings.
- Engagement report measures Pages/visit and avg. time on site and shows the level of interest your visitors show towards your site, it demonstrates how well your landing pages keep the visitor and how well the navigation works on your site.
- Mobile Devices is a very up-to-date report you want to check if you are thinking about a mobile version of your site or an application for example.
- CTR or a click through rate report. To see this report you need to integrate Webmaster Tools statistics into your Google Analytics. The report will show how many have clicked the link to your site from Google organic search results. And if you see that some pages have too low CTR (like less then 2 or 1%) this can be the signal to examine what people see as the snippet of your page in the SERPs.
- New vs Returning visitors report shows you the amount of returning customers, and the number of returning visitors growth can be the signal of good marketing and branding work.
- Converting pages, queries and traffic sources the reports closely connected to goals and conversion reports I have already talked about, so I won’t focus here too, it is clear that you can look up most profitable traffic sources, like here we can see that after direct traffic the most profitable is Google organic traffic.
- And Brand queries and direct traffic growth is a clear marker of the success of your brand, if eventually the amount of people looking for your brand in the SE and directly coming to your site increases you are doing good, but if it remains the same or diminishes, you should probably work even harder .