A/B Testing – Part 2: The Technical How Tos

alt="A/B Testing – Part 2: The Technical How Tos" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2012/12/a-b-testing-result--500x340_c.jpg" />

So now you’ve decided that it’s time to use href="http://www.webhostingsecretrevealed.net/blog/inbound-marketing/what-is-ab-testing-and-how-can-it-help-your-site/">A/B testing in improving the quality and conversions of your site.  In the following installment, we’ll be taking a closer look at the tools you can use and provided a detailed “how-to” for the free and popular Google Website Optimizer. There are a number of commercial options on the market for A/B testing; in this article we’ll touch briefly on these options to help you make an educated decision. But The Google tool offers a full suite of options, is free, and integrates with other Google tools such as Analytics.

For these reasons, Website Optimizer is a great choice for most marketers or webmasters getting started with the A/B testing process.

What Is A/B Testing?

To briefly revisit, A/B testing is the process of putting forward two versions of something and seeing which one performs better. Common topics of A/B testing include headlines, placement of images, calls to actions, color schemes, and more.

Over time, marketers can use systematic A/B testing to find out which elements convert a higher percentage of visitors to their website, recipients of their emails, and viewers of advertisements. Systematic testing results in data-driven decisions about which campaigns should receive their focus and investment. This will help you attract more visitors, make more money, and have a more successful business.

Tools For A/B Testing

In this piece, we’re going to focus primarily on title="Google Website Optimizer" rel="nofollow" href="http://en.wikipedia.org/wiki/Google_Website_Optimizer">Google Website Optimizer which is a free tool that integrates smoothly with Google Webmaster tools and Google Analytics.

However, it should be noted that there are a number of commercial tools that are also available including Optimizely and SumoOptimize.  Technically, there are a hundred different software packages on the market that include different features and become increasingly complex technologically. We’ll explore a few of these options at the end of this article.

Getting Started With Google Website Optimizer

style="border: 1px solid #cccccc; padding: 2px;" src="//www.youtube.com/embed/XJT9TCqzw4U" width="750" height="563" frameborder="0" allowfullscreen="allowfullscreen">
Before continuing with this article, watch this excellent, short introduction to the tool provided by Google.  It will contextualize the how-to and tutorial that follows here and give you a great head-start on understanding the flow of Website Optimizer which can be slightly counterintuitive until you get started.

To begin, visit rel="nofollow" href="http://www.google.com/websiteoptimizer">www.google.com/websiteoptimizer

class="border" src="http://www.webhostingsecretrevealed.net/images/2012/1101-1.jpg" alt="" width="750px" />

Sign in with your Google username and password.

class="border" src="http://www.webhostingsecretrevealed.net/images/2012/1101-2.jpg" alt="" width="750px" />

Once you’re in, click on the Get Started button.  This will take you to the Google Analytics Terms of Service.  Read and accept those, and the click continue.

class="border" src="http://www.webhostingsecretrevealed.net/images/2012/1101-3.jpg" alt="" width="750px" />

Once you click continue, this will take you to the Google Optimizer Dashboard. Select “Create Experiment” and then this will take you to the following page, asking which kind of experiment you would like to select.  Beginners should choose the A/B experiment.

Once you’ve selected the A/B experiment, this will take you to the A/B experiment check list which outlines some important data on information that you need know about how the A/B experiment operates.

class="border" src="http://www.webhostingsecretrevealed.net/images/2012/1101-6.jpg" alt="" width="750px" />

The instructions will remind you that it’s important to choose the page that you would like to test, such as your homepage or a specific product detail page. It then advises you to go on and create alternate versions of your page to test. Finally, it recommends that you decide what page people will see once they convert, regardless of what page they come in from.

Once you reach this stage, stop.  If necessary, review href="http://www.webhostingsecretrevealed.net/blog/inbound-marketing/what-is-ab-testing-and-how-can-it-help-your-site/">my previous article about A/B testing .  Ensure that you’ve decided what variable to test and created two different versions of them, with different URLs.  Finally, make sure you’re clear on the conversion page that will come up afterwards.

Once you’re done, check the box next to “I’ve completed the steps above and I’m ready to start setting up my experiment” and click the “Create” button.

This will take you here:

class="border" src="http://www.webhostingsecretrevealed.net/images/2012/1101-7.jpg" alt="" width="750px" />

Give the experiment a unique name such as “Sales Headline Test” and then enter the URLs of each of your test pages.  Google will verify that they are active.

Finally, enter your conversion page and click ”Continue”.

class="border" src="http://www.webhostingsecretrevealed.net/images/2012/1101-8.jpg" alt="" width="750px" />

You will then be given the JavaScript tags necessary to be added to your website, or able to provide a set of instructions to a member of your team to handle the installation.

Once this is complete, you will return back to this same page to verify that installation is complete and to monitor the progress of your test.

Monitoring the success of your A/B test

Google recommends at least 100 conversions to be able to indicate a percentage of success.  In the simplest terms, you’re looking for which of the two pages encourages people to take the indicated action the most.  So if 100 people visit each of your pages, and option A converts at 4% while option B converts at 6% then option B is your “winner.”

But how many visitors are really enough to know when you’ve got a winner, versus a statistically anomaly?  The opinions vary, even among professional A/B testers.  A number of factors need to be taken into account to reach a valid sample size: these range from daily visits to the current conversion rate and the number of version you’re testing.

Two tools that can help you calculate the right information are the rel="nofollow" href="https://www.google.com/analytics/siteopt/siteopt/help/calculator.html">Google Optimizer Calculator and the rel="nofollow" href="http://www.amadesa.com/did-you-know/test-calculators">A/B Experiment Duration Calculator. When possible, you want to aim for 95% statistical accuracy, with a 5% margin of error. It’s worth extending the test a bit longer before making your final decision.

Some hints to make your first test a success

1. Test a page with high traffic level  When you’re ready to A/B test for real results, pick a page that receives a decent amount of traffic. The higher the traffic, the sooner you’ll reach a valid test sample and have a completed experiment. The results demonstrated from this experiment will help motivate you to incorporate testing into your overall strategy.
2. Work with a high-conversion goal Along the same lines as choosing a page that gets a lot of traffic, it’s important to work on a conversion that people actually take. Adding items to a shopping cart, signing up for your newsletter, or viewing a critical section of your website are good goals. Test on actions that people take regularly, so it doesn’t take as long to get your data.
3. Choose an important conversion goal Choose a conversion that matters, such as opt-ins or sales. Testing for the sake of understanding consumer behavior is interesting, but testing for the purposes of actually strengthening your business will keep you focused.
4. Look at time on page as a conversion goal If your goal is to prevent bouncing or keep people reading your content longer, one option to consider is tracking time spent reading a page as a conversion goal. The full tutorial on how to do that is available rel="nofollow" href="http://support.google.com/websiteoptimizer/bin/answer.py?hl=en&answer=74345&topic=14314&ctx=topic" target="_blank">here.
5. Consider testing big items If you’re unsure of where to get started with your testing, a few obvious choices are headlines, product descriptions, graphics, placement of contact information, your call to action, and pricing. Each of these will yield meaningful information that you’re able to improve visitors’ experiences with right away.

Example tests

If you’re still struggling to conceptualize A/B testing or you simply want to see some tests in action, here are two great resources.

Which Test Won

rel="nofollow" href="http://whichtestwon.com/">Which Test Won is a site that shows you real life examples of A/B testing that was conducted by expert firms. You vote on which one you expected to have won.  You then get to see the real results as well as the case study behind the test. Spending some time on this site will help you build strong pattern recognition.

A/B Test

style="text-align: center;">class="aligncenter size-full wp-image-6385 border" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2012/12/a-b-test-on-writework.jpg" alt="a-b test on writework" width="750" height="430" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2012/12/a-b-test-on-writework.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2012/12/a-b-test-on-writework-300x172.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" /> class="aligncenter size-full wp-image-6386 border" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2012/12/a-b-testing-result-.jpg" alt="a-b testing result" width="750" height="510" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2012/12/a-b-testing-result-.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2012/12/a-b-testing-result--300x204.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" />

rel="nofollow" href="http://www.abtests.com/">A/B Test is another site that allows you to look at case studies by type of test, view both versions, and then see which outperformed the competition. While it’s less interactive, the ability to get ideas by type of test can be very valuable to marketers interested in using testing to solve a specific problem.

Other A/B Testing Tools

Finally, I want to address the question of whether Google Website Optimizer is the right tool for everyone. The short answer is that I think it’s the right tool for the beginner and it’s the right tool for the average user. There are substantial advanced features that we haven’t touched on in this article and may explore for a future piece.

So in what instances do you need to consider other tools?

1. If you’re going to be conducting ongoing, enterprise level multivariate testing for complex sites such as ecommerce sites with thousands of pages, a commercial tool might better fit your needs. (Consider rel="nofollow" href="https://www.optimizely.com/" target="_blank">Optimizely).
2. If you’re opposed to corporate backed software, there is an open source tool called Genetrify.
3. If you’re interested in more advanced testing of conversions along a funnel, rel="nofollow" href="http://analytics.blogspot.com/2012/07/making-google-analytics-content.html" target="_blank">Google Content Experiments (which Google is ultimately transitioning Google Website Optimizer) is the product to check out.
4. If you are using WordPress and wonder href="http://www.webhostingsecretrevealed.net/blog/inbound-marketing/how-to-run-ab-testing-on-your-wordpress-sites/" target="_blank">how A/B testing can be done on WP, read Rochester’s article.

As you build your comfort with A/B testing, you can test additional variables and continue to iterate a page or website that dramatically increases your conversions, giving you more subscribers and better income.

Page 22 – Web Hosting Secret Revealed

Graphics is Not My Thing: Part 2: Editing

alt="Graphics is Not My Thing: Part 2: Editing" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/03/rule-of-third-2-500x332_c.jpg" />

Last time, I shared href="http://www.webhostingsecretrevealed.net/blog/blogging-tips/graphics-is-not-my-thing-part-1-take-better-photos/">simple steps on how you can improve taking photos, especially if you have a blog or website centered around product reviews, your family or travel. This week, we’ll tackle basic editing, a must-do step that will help get your photos noticed on Pinterest, Instagram and across social media.

class="aligncenter size-full wp-image-9180" alt="Edited photo" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/04/PhotoEditing2.jpg" width="700" height="246" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/04/PhotoEditing2.jpg 700w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/04/PhotoEditing2-300x105.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" />

Before we start, you must own an editing program. This is not an option. Your camera’s software probably offers only limited editing options. There are many cost-effective offline options that are worth investigating that run the gamut from free to high end. I recommend you avoid costly products and stick to the lower end of the spectrum, but don’t just use a program because it’s free.

Many great editing programs, such as href="http://www.picmonkey.com/">PicMonkey, are available in limited form for free or have a free trial but a small fee to upgrade is worth your investment.  Next, download your photos to your PC or Mac, remembering to back them up, and let’s start editing.

Review your photos first.

Before editing, check out your downloaded photos. You may find that some are completely unusable. Discard them now so they don’t eat up valuable. If your entire “roll” seems off or doesn’t look good, go back and reshoot after rechecking the settings on your camera. You may need to restore it to default to eliminate problems. Once your best photos are selected, open them in your editing.

Reduce the size.

class="size-full wp-image-9176 alignright" alt="Image size and resolution" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/04/ImageSize.jpg" width="300" height="244" />

First resize your photos in your editing program and save them with a name you’ll remember. I don’t recommend editing the original; save it in case you need to restore it.

Uploaded images should have a resolution of 72 or 96 dpi (“dots per inch” measures the pixels in the image). Find the tool that sets image size and change the resolution if necessary. My digital camera automatically saves photos at print resolution (300) so when I reset it, the photos goes from over 3000 pixels (px) wide down to about 1000px. Never upload photos that large to your website! You will be eating up valuable server space and time. A better practice is to edit on your computer and then upload a reasonably sized image (600-800px) to your blog.

You may want to keep you main image width at a maximum of 800px, an optimal size for Google+, and resize in WordPress to fit your post width or leave it 10 or 20px under the width of your format, and smaller for other images. (This blog uses photos that are resized to 700px wide for the top image and 300px all others.) Keep in mind that close up images have greater impact especially in product shots, so if your camera is set to shoot very large photos, you might want to just crop the sides out first. On my own blog, I upload a width of 600px, but edit with a width of 700-800px, so I have room for the next step.

Reposition or re-apply the “rule of thirds.”

As discussed last week, aligning your image before shooting is better for impact, but perhaps you don’t like where the lines have fallen and think the image could have better placement. Your editing program may also have “rule of thirds” gridlines in the crop feature, or you may have to set them. Before you hit that “crop” button, make sure that you have the look and alignment that you want. Push your photo left and right, up and down to position it so that your viewer’s eye is drawn to the right place. This will take some practice.

style="line-height: 1.5em;">Sharpen your image.

class="alignleft wp-image-9182" alt="sharpen photo tool" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/04/sharpentool.jpg" width="270" height="374" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/04/sharpentool.jpg 300w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/04/sharpentool-216x300.jpg 216w" sizes="(max-width: 270px) 100vw, 270px" />

I’ve heard “don’t sharpen” and “do sharpen,” but I’ve noticed that sharpening my photos taken with my Nikon Coolpix just once often gives it more clarity, especially if there is text that needs to be read on a package.

You do need to be careful though. If your camera or phone already takes a very crisp photo, like my Samsung Note 3, then you’ll want to avoid this as it can make the image too pixelated. In any case, when you add text, make sure you it’s set to sharp, crisp or smooth for maximum legibility – hopefully, your editing program gives you those options. If not, select a font that is already crisp and clean to make it easier to read on the thumbnail your blog creates. Another trick is to add a little bit of a drop shadow to make colored or white text stand out from a background.

Adjust the color, tone and brightness.

Your photo may look too yellow, too blue, too muddy or too dark.

For example, you may have forgotten to change the white balance or lighting conditions may have changed by the time you took your best shot. All editing programs come with some level of adjustment for your colors, brightness and lighting. Don’t get carried away here. Just make sure that your photo has pop, that main area of focus stands out from the background and that the colors look realistic – if you are going for a professional looking shot and not something whimsical. If you are trying to create a fanciful look, adjust color or, if your program has them, play with filters. (Filters create photo effects, just like the options on Instagram.) You may need to play around with it for a while to get the right feel.

Touch up problems.

You’ve taken the perfect photo only to find out that you have a blemish, blurry mark or possibly even red eye messing up your photo. An editing program is necessary because it can help you eliminate these issues. Depending on what software you use, there are multiple tutorials all over the web to help you. Since I use Photoshop, my techniques would be somewhat different than other, more affordable editing programs, however a few guidelines remain. Firstly, create a duplicate layer of your photo so you can edit all yo

id="attachment_9183" style="width: 310px" class="wp-caption alignright">class="size-full wp-image-9183" alt="layers" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/04/layers.jpg" width="300" height="266" />class="wp-caption-text">Layers help you add text, add shadow, create duplicates of your photo and more.

Graphics is Not My Thing: Part 1: Take Better Photos

alt="Graphics is Not My Thing: Part 1: Take Better Photos" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/03/rule-of-third--500x360_c.jpg" />

id="attachment_9026" style="width: 346px" class="wp-caption alignright">class=" wp-image-9026 " alt="0317RuleofThirds" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/03/0317RuleofThirds.jpg" width="336" height="405" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/03/0317RuleofThirds.jpg 700w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2014/03/0317RuleofThirds-248x300.jpg 248w" sizes="(max-width: 336px) 100vw, 336px" />class="wp-caption-text">Rule of Thirds Gridlines in action. Notice how you’re drawn to her eyes and the glass on the gridlines.