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.

Share This Post...Share on FacebookTweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on StumbleUponBuffer this page