The Ultimate Guide to Landing Page Tricks

The Ultimate Guide to Landing Page Tricks

This is a post I wrote for the forum a while back, but wanted to share it with my blog readers too. This lesson is a collection of enhancements you can add to your landing page. These can be used on landing pages in any niche, on any traffic source. In some cases there are multiple ways to accomplish something. I’ve tried to sum up the easiest to implement examples.

Call Out Keyword/Target

What this does is place the bidded target or keyword on your landing page. This is great for adding stuff like ‘Welcome visitors of sitename.com! We have a special offer for you!’

This can be done a few ways depending on the tracking solution you use.

In CPV Lab, add

<?php echo($_GET["target"]) ?>

to the source of your landing page where you want the target to be shown.

In Prosper 202 put this code on your landing page:

<?
    if(isset($_GET['t202kw']))    
        {$keyword = $_GET['t202kw'];}
    else{$keyword = '';}      
?>

Then wherever you want the keyword to be shown, put:

<? echo $keyword; ?>

Learn how to trim targets to the root domain here

Date Stamp

To add the date to your LP, add this code where you want it to show up

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var months=new Array(13);
months[1]="January";
months[2]="February";
months[3]="March";
months[4]="April";
months[5]="May";
months[6]="June";
months[7]="July";
months[8]="August";
months[9]="September";
months[10]="October";
months[11]="November";
months[12]="December";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year < 2000)
year = year + 1900;
document.write("<b>" + lmonth + " ");
document.write(date + ", " + year + "</b>");
// End -->
</SCRIPT>

This is great for creating a sense of urgency ‘Get your current credit report as of [date]’.

Countdown Timers

A countdown timer is great for things like ‘This deal will expire in…’.

Add this code where you want the countdown timer

<form name="counter" style="margin: 0px;">
            <span style="font-size: 20px;">Offer Ends In
            <input value="103.2" name="d2" style="border: 0px none;
background-color: rgb(255, 255, 255); font-size: 28px; color: blue;
font-weight: bold; width: 77px; padding-top: 5px;" type="text">
            Seconds
              </span>
          </form>
          <script>
<!--
//
  var milisec=0
  var seconds=120
  document.counter.d2.value='120'
function display(){
  if (milisec<=0){
    milisec=9
    seconds-=1
  }
  if (seconds<=-1){

    milisec=0

    seconds+=1
  }
  else
    milisec-=1

    document.counter.d2.value=seconds+"."+milisec

    setTimeout("display()",100)
}
display()
-->
</script>

You can also do a ‘sporadic’ countdown timer. This would be good for saying ‘We currently have 10 items left in stock’ then having it drop by a random number every so often. Code from CTR Tard:

<html> <head> <title>Landing Page</title> <style> .timer {     color:red;     border:none;     font-family:verdana;     font-size:16pt;     font-weight:bold;     border-right-color:#FFFFFF } </style> </head>  <script> // Random Countdown Timer Script, by http://ctrtard.com var timer; function startCount() {     timer = setInterval(count,200); // 200 = 200ms delay between counter changes. Lower num = faster, Bigger = slower. } function count() {     var rand_no = Math.ceil(9*Math.random()); // 9 = random decrement amount. Counter will decrease anywhere from 1 - 9.     var el = document.getElementById('counter');     var currentNumber =    parseFloat(el.innerHTML);     var newNumber = currentNumber - rand_no;     if (newNumber > 0) {         el.innerHTML = newNumber;     } else {         el.innerHTML = "Sold Out";  // This message is displayed when the counter reaches zero.     } } </script>  <body onLoad="startCount();">  <span class="timer"><span id="counter">431</span></span>  </body>  </html>

You can also add an even more sporadic effect like this:

<html> <head> <title>Landing Page</title> <style> .timer {     color:red;     border:none;     font-family:verdana;     font-size:16pt;     font-weight:bold;     border-right-color:#FFFFFF } </style> </head>  <script> // Random Countdown Timer Script Sporadic Effect Version, by http://ctrtard.com var timer; function startCount() {     timer = setInterval(count, 100); // 200 = 200ms delay between counter changes. Lower num = faster, Bigger = slower. } function count() {     var do_wait = Math.ceil(4*Math.random()); // for "sporadic effect", we generate a random number between 1 and 4     if (do_wait == 4) { // now, we only decrement the counter if the random number = 4 --- otherwise we don't do anything.         var rand_no = Math.ceil(9*Math.random()); // 9 = random decrement amount. Counter will decrease anywhere from 1 - 9.         var el = document.getElementById('counter');         var currentNumber =    parseFloat(el.innerHTML);         var newNumber = currentNumber - rand_no;         if (newNumber > 0) {             el.innerHTML = newNumber;         } else {             el.innerHTML = "Sold Out";  // This message is displayed when the counter reaches zero.         }     } } </script>     <body onLoad="startCount();">  <span class="timer"><span id="counter">431</span></span>  </body>  </html>

Add Audio

Audio is a great way to get the users attention. Niftyplayer is a simple way to add audio to your landing pages.

Download Niftyplayer here and upload it with your landing page.

Add this code before the </head> tag in your landing page:

<script type="text/javascript" language="javascript" src="niftyplayer.js"></script>

Then, add this at the bottom of your page (usually where you place the player)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="38" id="niftyPlayer1" align=""> <param name=movie value="niftyplayer.swf?file=youraudio.mp3&as=1"> <param name=quality value=high> <param name=bgcolor value=#FFFFFF> <embed src="niftyplayer.swf?file=youraudio.mp3&as=1" quality=high bgcolor=#FFFFFF width="165" height="38" name="niftyPlayer1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object>

Change the file name to the name of your audio file. If you want to make the player invisible, you can set the width and height to ‘0’.

Add Video

Video works really well for certain niches like dating. You’ll need to get a swf video to use. If you have a video in another format, you can use http://www.freemake.com/free_video_converter/ to convert it to swf.

Once you have the video in swf format, add it to the folder where your landing page is located and add this code where you want the video to show up

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="280" height="210" id="Flash1"> <param name="movie" value="video.swf"> <param name="quality" value="High"> <param name="scale" value="ExactFit"> <param name="wmode" value="Window"> <param name="play" value="true"> <param name="loop" value="false"> <param name="menu" value="false"> <param name="allowfullscreen" value="false"> <param name="allowscriptaccess" value="sameDomain"> <param name="sAlign" value="tl"> <embed src="video.swf" width="280" height="210" quality="High" wmode="Window" loop="false" play="true" menu="false" allowfullscreen="false" allowscriptaccess="sameDomain" scale="ExactFit" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object>

Change the name of the video file  to the name of your actual file. You can adjust the witdth and height of the player (in red).

Dashed Borders

This is a much sought after effect, especially suited to making something look like a ‘coupon’. To do this, add this code:

<div style="width:565px; height:450px; border-width: 6px; border-style: dashed;  border-color: red; font-family: Arial, Helvetica, sans-serif;  font-size: 24px; font-weight: bold; text-align: center; color:  #00F;"><p>TEXT HERE</p></div>

You can change the ‘TEXT HERE’ to whatever you want.

Into Pop/Alert Message

This is very effective, but most traffic sources don’t allow it. Use at your own risk. What this does is open a small dialog box in the middle of your LP when it loads.

Add this to the <head> section of your LP

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

<script type="text/javascript">
$(document).ready( function () {

//Example 1. This will trigger the dialog on page load
$('#myDialog').dialog();

//applying jQuery CSS to buttons
$('button').button();

});
</script>

Now in the <body> section of your HTML add this

<div id="myDialog" title="Sample Dialog" style="display:none; padding:20px;">
<p>Check out our special offers!</p>
</div>

You can adjust the text displayed by editing the <p>Check out our special offers!</p> above.

Flashing Borders

Flashing borders work just like they sound;)

Add this to the <head> section of your LP

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<style type="text/css">
.ImageBorder
{
      border-style: solid;

      border-width: 4px;
      border-color: Red;      
      padding: 5px;
}
</style>

<script type="text/javascript">

$(document).ready( function () {

// Self-executing recursive animation
(function pulse(){
$('.ImageBorder').delay(500).animate({ 'border-color': 'Transparent'}, 100).delay(500).animate({ 'border-color': 'Red'}, 100, pulse);

})();

});
</script>

You can change the values:
– The ‘border-style’ can be changed to ‘dotted’ or ‘dashed’ for example to created a ‘dashed’ border.
– The border width is how thick the border is.
– The padding is how far away from the image the border will be

The numbers towards the end of the code can be changed to make the animation faster (the delay value).

Next, you need to add an image to put a border around like so (this goes in your HTML)

<img class="ImageBorder" src="linktoyourimage.jpg">

You can get creative with any of these tricks, or use more than one at a time. When you’re using them, think about how to create a sense of urgency, or connect with the visitor. Your CTR (and conversions) will thank you.

Squeeze More $$$ Out of Each Visitor With Modal Alerts and PopUnders

Squeeze More $$$ Out of Each Visitor With Modal Alerts and PopUnders

The use of  exit pops and modal alerts can dramatically increase your revenue per visitor if used right. These are good extras you can add to your LP’s to engage the visitor when they first arrive on, or exit your page. These aren’t allowed on all traffic sources, so make sure it’s allowed before using them.

Let’s look at a few examples to get you started.

Intro Alerts

Here is an example webpage with an intro pop/alert message using jQuery. This is a very basic use of the ‘dialog’ function in jQuery. Click here to see this in action.

See the code below:

<!doctype html>

    		

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the ‘x’ icon.

You can change the alert message by editing the text in the above code.

To get a little fancier, we can use a basic modal alert which dims out the background and prevents the user from interacting with the page until it’s closed. Click here to see this in action.

See the code below:

<!doctype html>

    		

Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

The above examples show how this works in an entire webpage. Obviously, you want to add the code to your own LP’s. To do this, you just need to strip out the code parts and add them to your page. For example, on the first alert message, you would put this code in the head section of your HTML:

		

Then in the body put this:

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the ‘x’ icon.

Those alerts are nice, but we can spice them up a little! An easy way to do this is to use the jQuery ThemeRoller. The easiest way to learn this is to play around changing colors. Say I wanted to change the header background color of our modal window. I would just select the ‘header/toolbar’ area, then the color field and change it:

Once you change the color, you’ll see it reflected in the examples down the middle of the page. To see what it will look like in our modal window, click the ”open dialog’ button under the dialog section. You can customize almost anything from the fonts to colors and borders.

Once you’re satisfied with the look, click the ‘download theme’ button. In the zip file you download, you’ll only need one file. Inside the CSS folders, take the file named jquery-ui-1.9.2.custom.css and put it in the root of your LP folder.

Then, in your LP, change this line:

	

To this:

	

Ideas for use:

The classic use of an intro alert message is to call attention to something that would make the user want to stay on the page. For example:

“Special deals today only”
“You have a new message”
“Only x left in sock”

This could potentially be used in any niche, and can really increase your LP CTR.

Popunders

Popunders are windows that pop under your LP. This example uses a popunder when someone clicks anywhere on your lp. Think about the potential with this: you ccould convert visitors on not one, but two offers. Click here to see an example. In this example, a popunder (going to Google) will open when someone clicks anywhere on the page or on my link.

Check out the code:

<!doctype html>

Click anywhere on the page, or the link below to see the exit popunder.

test

This is the script in an HTML page. You also need a file in your LP directory called jquery.popunder.js which looks like this:

function jsPopunder(sUrl, sName, sWidth, sHeight) {
    if (typeof(sName)===null || sName === '') sName = Math.floor((Math.random()*1000)+1);

    sWidth = (sWidth || screen.width);
    sHeight = (sHeight || screen.height); sHeight = sHeight-122;

    var sOptions = 'toolbar=no,scrollbars=yes,location=yes,statusbar=yes,menubar=no,resizable=1,width='+sWidth.toString()+',height='+sHeight.toString()+',screenX=0,screenY=0,left=0,top=0';

    // create pop-up from parent context
    var _parent = (top != self && typeof(top.document.location.toString())==='string') ? top : self;
    var popunder = _parent.window.open(sUrl, sName, sOptions);
    if (popunder) {
        popunder.blur();
        if (navigator.userAgent.indexOf('MSIE') === -1) {
            popunder.params = { url: sUrl };
            (function(e) {
                with (e) {
                    if (typeof window.mozPaintCount != 'undefined' || typeof navigator.webkitGetUserMedia === "function") {
                        try {
                            var poltergeist = document.createElement('a');
                            poltergeist.href = "javascript:window.open('about:blank').close();document.body.removeChild(poltergeist)";
                            document.body.appendChild(poltergeist).click();
                        }catch(err){}
                    }
                }
            })(popunder);
        }
        window.focus();
        try{ opener.window.focus(); }catch(err){}
    }
}

you can download the script here

To change the URL the pop under opens, change the ‘google.com’ in this line in the HTML document:

jsPopunder('http://www.google.com');

Example uses:

A popunder can be used effectively in almost any niche. You could offer someone ‘one more chance at a deal’, or simply pop a related offer. Be creative here! Try popping related offers, collecting opt-ins, or showing an offer wall.

Get creative with these tricks. You can do a lot with them!

5 Minute Landing Pages

5 Minute Landing Pages

In a previous post, I talked about building 3 landing pages in 20 min. That post was specifically about PPV traffic, but those types of landing pages can be used on a variety of traffic sources. Most of you know, I like to keep things really simple with landing pages. I find that perform the best and require little time or technical know how to build.

Here’s a very simple way to build a screenshot style landing page in just a couple minutes using Pixlr, a free online graphics tool. Pixlr is like a stripped down version of Photoshop.

1. Install the Pixlr grabber

The Pixlr grabber is an extension for Firefox or Chrome. This is what you’ll use to take a screenshot of the offer page.

2. Find a good offer for the screenshot method

Not all offer pages lend themselves to this technique. The ones that do have a nice clear area to cut that fits nicely in a (rough) square. Here’s an example of an offer page that would lend itself to this technique:

3. Screenshot & Edit

Once you find an offer page to make an LP out of:

Go to (in your browser) tools –>Pixlr Grabber–>Grab a defined area and drag a rectangle around the area you want to crop. I usually don’t take the whole page, just the ‘main’ section like so:

Once you crop the area you want, click ‘crop’ and then ‘edit in Pixlr.com’. This will open the image in the Pixlr editor.

The first thing we want to do, is get rid of the form on the right. To do that:

1. Select the rectangular drawing tool
2. Set the border size to 0
3. Change the color to white
4. Drag a box over the form to white it out

Now that the form’s gone, I’ll replace it with a few bullet points. To do that:

1. In the top menu go to Layer–>New Layer
2. Select the text tool
3. Click the area you want to add text and start typing

In the box that pops up, you can change the font, size, and color of text. Click ok and your text will be there. Sometimes you’ll need to move it around. To do this select the ‘move tool’ by pressing ‘V’ on your keyboard or selecting it from the top right of tools. Click on your text, and drag it where you want.

This offer page has a call to action so we don’t need to add one. If it didn’t we can make a simple button:

1. Select the rounded rectangle drawing tool
2. Set the radius to 25 (or whatever you think looks good)
3. Click and drag where you want the button

You can add text to the button by following the same instructions above. Now all you have to do it go to File–>Save and save the image to your desktop. Open up your favorite HTML editor, put the image centered in the page, link it with your tracking links and you’re done.

If you want to see this in action:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.kingopops.com/screenshots/2012-09-18_1406.swf” width=”640″ height=”480″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

Give this a shot next time you need to build a quick LP and you might be surprised how well it performs!

Killer Buttons To Squeeze More CTR From Your Landing Pages

Killer Buttons To Squeeze More CTR From Your Landing Pages

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:

[code lang=”css”]
<!– 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>
[/code]

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:

[code lang=”css”]
<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>
[/code]

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.

You Have to SEE These Results

You Have to SEE These Results

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!

Vote! What Words Get the Best CTR?

Vote! What Words Get the Best CTR?

Everyone talks a lot about what pictures get the best CTR, but I want to show you what a difference the words on your page can make.

I’ve noticed a significant change in CTR depending on what words I use in the call to action. Just changing words around that can mean the same thing (ie ‘see’ and ‘view’) can improve or worsen CTR.

I’m going to run a test to see what words in the call to action generate the best CTR. The landing page I’m using is this (shrunk in size for this post)

I will be rotating 4 variations of this. Everything will remain the same except the call to action.The CTA’s I will be testing are:

1. Click here to get your free report
2. See your credit report here
3. View your online credit score
4. Get instant access to your credit score

Cast your vote! In the next post I will reveal the CTR for each and also give some tips on what words work best based on a lot of testing I’ve done.