Aff Playbook.com» Landing Pages & CTR http://affplaybook.com/blog Tactics for affiliate marketing and entrepreneurs Sun, 13 May 2012 02:54:41 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Killer Buttons To Squeeze More CTR From Your Landing Pages http://affplaybook.com/blog/landing-pages-ctr/killer-buttons-to-squeeze-more-ctr-from-your-landing-pages/ http://affplaybook.com/blog/landing-pages-ctr/killer-buttons-to-squeeze-more-ctr-from-your-landing-pages/#comments Wed, 14 Sep 2011 06:44:54 +0000 David http://ppvplaybook.com/blog/?p=716 This is a guest post from forum member, and very funny fellow CTRtard. If you don’t read his blog, you should start immediately. 

Aside from the headline, your landing page’s call to action (CTA) is one of the most important elements you should be testing.  Often times, the CTA is made in the form of a button that’s labeled “Click Here” or “Continue”.   Because buttons are graphical, changing them to test various colors, sizes and labels can be tedious.  Until now.

Today Is Your Lucky Day

After firing up Photoshop to resize yet another button, I decided to try and see if CSS alone could do the job.   After checking out a few tutorials here and there, this post seemed to almost have it right.  But IE didn’t seem to like this solution and I wasn’t entirely happy with how it looked/worked.  So here’s what I came up with…

This is a short and sweet little chunk of CSS to let you create tons of button variations for your landing pages faster and easier than ever before.  Check out the demo:

CSS Buttons Demo

The Code

This code uses CSS and a single image file.  The image file is there to give the buttons a subtle shading effect.   Other than that, this requires no images at all.  That means resizing, changing colors, or changing CTA’s can all be done with just a few keypresses!

How to Use

1. First paste all of this CSS code inside your <head> </head> tags:

<!-- meta tag is needed for rounded corners on ie -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<style>

body {
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

/* start of css button styles */
.button {
color: #fff;
text-decoration:none;
font-weight: bold;
padding: 5px 10px;
display: inline;
border-style:solid;
border-width:2px;
border-radius: 6px;
-o-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: url('button-gradient.png');
}
.button.small    { font-size:14px }
.button.medium   { font-size:18px; }
.button.large    { font-size:24px; }
.button.giant    { font-size:30px; }
.button.enormous { font-size:40px; }
.button.red     { background-color: #FF0000; border-color: #e50000; }
.button.purple  { background-color: #9400bf; border-color: #8200AA; }
.button.green   { background-color: #58aa00; border-color: #519900; }
.button.orange  { background-color: #FF6F02; border-color: #ED6402; }
.button.blue    { background-color: #2c6da0; border-color: #245982; }
.button.yellow  { background-color: #FFC300; border-color: #ED9F04; color: #000000 }
.button.black   { background-color: #333333; border-color: #000000; }
.button.white   { background-color: #FFFFFF; border-color: #8C8C8C; color: #000000; }
.button.bing    { background-color: #0044CC; border-color: #245982; }
.button:hover           { color:yellow; }
.button.red:hover       { background-color: #e50000; }
.button.purple:hover    { background-color: #8200AA; }
.button.green:hover     { background-color: #519900; }
.button.orange:hover    { background-color: #ED6402; }
.button.blue:hover      { background-color: #245982; }
.button.yellow:hover    { background-color: #ED9F04; }
.button.black:hover     { background-color: #000000; }
.button.white:hover     { background-color: #F7F7F7; color:#196DFF; }
.button.bing:hover      { background-color: #FFFFFF; border-color: #0044CC; color:#0044CC;}
.button:active { position: relative; top: 1px; }
/* end of css button styles */

</style>

2. Next, upload the file “‘button-gradient.png” file into the same directory as your landing page.

3. Now you’re free to create buttons anywhere in the document by using this simple format:

<a href='#' class='button red'>Click Here</a></pre>
<a href='#' class='small button purple'>Click Here</a>
<a href='#' class='medium button blue'>Click Here</a>
<a href='#' class='giant button orange>Click Here</a>
<a href='#' class='enormous button bing'>Click Here</a>

Notice how the class name defines how the button will look.  Sweet!  Now you don’t have any more excuses to not test a ton of button variations. ;-)

Download

You can download the zip file with the demo page and the image file here.  Just view the source to see how to make all the button combinations.

If you come up with any new color schemes, post a comment with your modifications!

That’s it!  Enjoy.

]]> http://affplaybook.com/blog/landing-pages-ctr/killer-buttons-to-squeeze-more-ctr-from-your-landing-pages/feed/ 3 You Have to SEE These Results http://affplaybook.com/blog/landing-pages-ctr/you-have-to-see-these-results/ http://affplaybook.com/blog/landing-pages-ctr/you-have-to-see-these-results/#comments Sun, 11 Sep 2011 03:18:38 +0000 David http://ppvplaybook.com/blog/?p=702 In the previous post I asked everyone to vote which call to action generated the highest CTR. Here are the results from the poll…

Turns out most people got this one wrong! Here are the actual results:

1. Click here to get your free report – 1.4%

2. See your credit report here – 2.7%

3. View your online credit score – 2.3%

4. Get instant access to your credit score – 1.2%

I had a feeling it would turn out like this based on what I have tested before. The words ‘see’ and ‘online’ always seem to generate the best CTR for me. Try them out in your call to actions and see if it works for  you!

]]> http://affplaybook.com/blog/landing-pages-ctr/you-have-to-see-these-results/feed/ 2 Supercharge Your CTR With Geo Targeting http://affplaybook.com/blog/ppv-landing-pages/supercharge-your-ctr-with-geo-targeting/ http://affplaybook.com/blog/ppv-landing-pages/supercharge-your-ctr-with-geo-targeting/#comments Tue, 12 Jul 2011 06:08:17 +0000 David http://ppvplaybook.com/blog/?p=616 Geo targeting is pretty simple but used correctly can increase your CTR pretty dramatically. In this post I’m going to show you how to implement geo targeting step by step and talk about some practical applicatons.

Step 1 – Get the script

A simple script to set up and use is http://www.maxmind.com/app/javascript_city

Step 2 – Add the script to your LP

You will need an HTML editor and some very basic HTML knowledge (which you should definitely have).

Add this code <script language=”JavaScript” src=”http://j.maxmind.com/app/geoip.js”></script>
to the head section of your HTML (add it after the <head> tag and before the </head> tag)

Now wherever you want to display the city on your page use this code

<script language=”JavaScript”>document.write(geoip_city()) ;</script>

That’s really it.

So, what are some ways you can use this?

You can use this on virtually any campaign. Some of the most popular uses are;

- On a dating .”Meet singles in cityname” type thing

- On an insurance landing page. “Get insurance rates in cityname”

- On any freebie, coupon, etc. type offer. “We have a special deal for people in cityname”

Those are the most obvious examples but you can get really creative with this. Don’t just use the obvious examples but come up with really creative ways to use geo targeting and it can really do wonders for your CTR and conversions.

]]> http://affplaybook.com/blog/ppv-landing-pages/supercharge-your-ctr-with-geo-targeting/feed/ 5 Trick to Click! http://affplaybook.com/blog/ppv-affiliate-marketing/trick-to-click/ http://affplaybook.com/blog/ppv-affiliate-marketing/trick-to-click/#comments Mon, 26 Jul 2010 07:16:01 +0000 David http://ppvplaybook.com/blog/?p=333 My friend Corey Bornmann from Affportal uses the phrase ‘trick to click’ to describe landing pages that look like this:

You might have seen variations on this type of landing page or banner and that’s because it can work great! Who can resist clicking that ‘play’ button?

The basic idea is to take a screen-shot or pic to use as the ‘video still’, then use Photoshop (or another graphics editor) to make it look like a video player.When selecting the picture to use, browse around Youtube and see what videos make you want to click on them. Usually you’ll find that the image is one that you want to see what happens next. For example, if I see a guy sitting there facing his webcam I am probably not going to be as inclined to click as I would if I saw a big shark just about to bite something (you get the idea!)

You can download the source files for the project above here

Getting creative with this style of LP is the key. The main thing that will influence your CTR isn’t the play button, or any of the video player effects…it’s the picture you use. It can get tricky because you don’t want to mis-represent what you are promoting, yet be provocative enough to get clicked.

One scenario I have seen a lot is using pictures of ‘hot girls’ in the video player frame to promote dating offers. This can be a little deceptive, and often traffic from such tactics doesn’t back out for the advertiser which can result in getting kicked off the offer….so use at your own risk.

Get creative with trick to click and try something that you haven’t seen before.

]]> http://affplaybook.com/blog/ppv-affiliate-marketing/trick-to-click/feed/ 6