7 jQuery Effects To Explode Your PPV CTR!
Posted in PPV Landing Pages, jQuery on 29. Aug, 2010
This is a great guest post by one of my forum members, imrat. If you don’t use jQuery on your landing pages, it’s definitely worth taking an afternoon to learn.
Don’t you hate it when you spend days testing a ton of PPV targets and after recouping your initial test budget some other affiliate comes in and crushes your ROI? Before you know it, your in a bidding war. A war where the one with the biggest balls is gonna win. What if you knew some secrets to give you an unfair advantage? What if you could grab your users attention in less than 4 seconds and raise your landing page CTR?
In this guest post I will show you 7 ways to use JQuery on your PPV landing pages to grab attention. You will learn how to animate the heck out of your landers.
The only thing your visitor will be able do is click and convert.
This is not an in-depth tutorial on JQuery – for that I suggest you check the tutorials on the Jquery site. If your a beginner, check out this excellent 15 day beginners video tutorial series.
You should also have a decent understanding of HTML and CSS to benefit from the tricks in this post. If you want to know how I build my landing pages, I suggest you check out my series on How to Build a PPV Landing Page.
The Demo
Here are the demo html files. Its a basic 750×550 PPV landing page, one without any JQuery applied, and the other with all the 7 effects applied.
Landing Page Without Jquery Magic | Landing Page With Jquery Magic
Enjoy!
Why JQuery?
Jquery is one of the most widely adopted Javascript libraries on the web, and is used by sites like Google, Digg, WordPress, Dell, and many others. It was started by John Resig and announced at the start of 2006. The first stable version was released on August 26, 2006.
I suggest you use it whenever you want to spice up your web designs with event handling, animation, and Ajax interactions. Its fast and reliable, and specifically offers:
- light weight footprint (24kb)
- CSS1 through to 3 support
- cross browser compliant (IE 6, Firefox 2, Safari 3, Opera 9 and Chrome).
Setup Jquery For Your PPV Landing Page
To use JQuery on your webpage, you will need to include the Library in your HTML file.
You can host the Library file on your own server (download here), but I use the one provided by Google’s CDN.
If you are targeting users in countries where google is banned, I suggest you use one of the other hosted JQuery files.
All you need to do is include the following code before the </head> line in your html:
[sourcecode]<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>[/sourcecode]
Note: The Google CDN URL for the latest version of Jquery are listed here.
You want to start executing your JQuery animations after the page has finished loading. To achieve this, you also need to include the following, right after the code you have just included:
Note that the above section will be used to add the various codes in the sections below.
For all of the effects, the process consists of the same 3 steps:
- include the javascript plugin file
- attach the effect to a css class or div
- add the class to the relevant element in the html
1. The Flasher
If you wanna really draw attention to yourself, you need to flash. Here I am going to show how to setup a flashing border and a flashing background.
Flashing Border
First up, lets add a flashing border around the ad. For this we use the Animated Borders plugin by Craig Davis.
Include the plugin in the <head> section below the line where you included jquery.
<script src=”jquery.animatedborder.js” type=”text/javascript”></script>
Note: make sure that the path reference to the jquery.animatedborder.js corresponds to where you downloaded and extracted the file.
Set the required CSS styles. Make sure the path is pointing to the location of the stripe.gif image:
.animatedBorderSprite { position: absolute; background: url(stripe.gif); margin: 0; }
.animatedBorderSprite-top { -moz-border-radius-topleft: 2px; -webkit-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; -webkit-border-radius-topright: 2px;}
.animatedBorderSprite-bottom { -moz-border-radius-bottomleft: 2px; -webkit-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-radius-bottomright: 2px;}
Switch the flashing on by adding the following code below the line “// Include your code below this line”. You can change the thickness and color of the flashing border by changing the parameters.
$(‘.flash_border’).animatedBorder({size:5, color: ‘red’});
And add the class to the element on the page you want to have the border around, in this case the element with the id “wrap”:
<div id=”wrap”>
Background Flash
Next – lets flash the background a couple of times to draw the users eyes to the page. I prefer to do this just a couple of times to avoid getting sued for causing headache’s.
To change the background color I use a plugin called Color Animations.
Include the plugin, again just after the previous plugin / JQuery script include:
<script src=”lib/plugins/jquery.color.js” type=”text/javascript”></script>
Add the flashing code, again in the codeblock that starts with
//Include your code below this line
$(“.flash_background”)
.animate( { backgroundColor: ‘pink’ }, 100)
.animate( { backgroundColor: ‘white’ }, 100)
.animate( { backgroundColor: ‘blue’ }, 100)
.animate( { backgroundColor: ‘pink’ }, 100)
.animate( { backgroundColor: ‘white’ }, 100)
.animate( { backgroundColor: ‘blue’ }, 100)
.animate( { backgroundColor: ‘pink’ }, 100)
.animate( { backgroundColor: ‘white’ }, 100)
.animate( { backgroundColor: ‘blue’ }, 100)
.animate( { backgroundColor: ‘pink’ }, 100)
.animate( { backgroundColor: ‘white’ }, 100)
.stop();
});
And add the class .flash_background to the required element, again, in this case “wrap”:
<div id=”wrap”>
2. Moving arrow
The second trick is to tell your visitor where to look and direct their eye. One way to do this is animate an arrow pointing towards the call to action.
Because I wanted to include a link on the actual arrow as well, I included the arrow as an image in the background. Make sure that there is sufficient transparent canvas on the right hand side of the arrow.
For this particular effect I used build in jquery functions so you don’t need a plugin.
What the following code does is basically create a function which moves the background to the right and then the left. Then a simple interval is set to call this function every second. All you need to do is include the following code again in the codeblock that starts with
//Include your code below this line
//slide the arrow
var vibrate = function() {
$(‘#arrow’).animate({
‘background-position-x’: ‘+=20′
}, ‘fast’).animate({
‘background-position-x’: ‘-=20′
}, ‘fast’);
};
interval = setInterval(vibrate,1000);
3. Audio
One thing that really boosts your conversion rate is including an audio message when the page loads. You can do this quit easily with Jquery, and I have used the sound.js plugin for that. Make sure you save the file as WAV, and that you keep it of a relatively small size.
Although I have done this with Jquery to show you how to trigger sounds, you can achieve the same effect in html.
The downside with using jquery or <embed> in html, is that in IE, for some users it will ask for authorisation to play the content with windows media player…bugger! I will need to find a workaround for this someday, using this or this.
Until I do, for now download the required files, and include the javascript.
Then just after this line:
//Include the code below this line
Include the code:
$.fn.soundPlay({
url: ‘welcome.wav’,
playerID: ‘welcome’,
command: ‘play’
});
I’ve not gone as far as including the required Audio controls. So if you use this example on your landing page you will ‘Breaks the Rules’ of most networks.
4. Counting down
Scarcity and social proof are 2 of the Six Weapons of Influence. Jquery is great for adding in a counter on your landing page. You can use this in multiple ways.
A simulated user count
For example, you could dynamically change the numbers in the following sentence on your landing page:
34 users currently viewing this offer, there are only 7 vouchers left.
I am not including this here as an example, i might do something with this in future. This type simulation would work great on dating offers (Sophie is online right now waiting to chat. 12 members are currently viewing her profile).
Countdown clocks
How do you create scarcity? There are many ways. One way is to include a countdown and show that this offer is time limited: ‘Submit your email within the next 1m and 45s’.
For this blog post I will add a countdown timer, using the excellent plugin from Keith Wood. I suggest you follow the examples on his site.
Just download the packaged zip file, unzip the required files, and include the Javascript and the css. Check the demo file to see how I included the effect on this example landing page.
As usual, here is the code to include the Javascript. I used the pack file because it is smallest in size.
<script type=”text/javascript” src=”jquery.countdown.pack.js”></script>
Then add your CSS stylesheet code to your <style>…</style> section:
@import “jquery.countdown.css”;
#glowingLayout div { float: left; width: 34px; height: 50px; background: url(countdownGlowing.gif) no-repeat 0px 0px; }
#glowingLayout div.image0 { background-position: -0px 0px; }
#glowingLayout div.image1 { background-position: -34px 0px; }
#glowingLayout div.image2 { background-position: -68px 0px; }
#glowingLayout div.image3 { background-position: -102px 0px; }
#glowingLayout div.image4 { background-position: -136px 0px; }
#glowingLayout div.image5 { background-position: -170px 0px; }
#glowingLayout div.image6 { background-position: -204px 0px; }
#glowingLayout div.image7 { background-position: -238px 0px; }
#glowingLayout div.image8 { background-position: -272px 0px; }
#glowingLayout div.image9 { background-position: -306px 0px; }
#glowingLayout div.imageDay { background-position: -340px 0px; }
#glowingLayout div.imageSep { background-position: -374px 0px; }
#glowingLayout div.imageSpace { background-position: -408px 0px; }
Connect the countdown function to the relevant div/span by including this in the head javascript section:
//countdown timer
$(“#glowingLayout”).countdown({
until: ‘+1m +30s’,
compact: true,
layout: ‘<div></div><div></div>’ +
‘<div></div>’ +
‘<div></div><div></div>’
});
Feel free to change the +1m +30s to the amount of time you want the countdown to run for.
And finally include in the body of the HTML the following code to embed the countdown timer. I used the scarcity div to style the element background, but this is not essential.
<div id=”scarcity”><span id=”glowingLayout”></span></div>
The demo PPV Landing Page includes a sound effect as well to stimulate a ticking clock, and shows an ‘offer expired’ message when the timer runs out. If you want to include this you will need to figure it out from my demo file.
5. Image swipes
For offers where a visual or photo helps with conversions you can include a short piece of script to cycle through a number of images in an animated slide show.
There are tons of jquery ‘sliders’ on the web, just search for ‘jquery slider’.
For this example, I am using the slideshow plugin by Marcel Eighner.
As usual, after you have included the Javascript, you need to associate the effect with the relevant html element:
$(‘.mySlideShow’).slideShow({
hoverNavigation: true, // use mouse for navigation
interval: true // disable auto-slideshow
});
Then, in the HTML, include each image as a <li> element, and include the right class as shown below:
<div>
<ul>
<li><img src=”sign1.jpg” border=”0″ alt=”" width=350 height=270 /></li>
<li><img src=”sign2.jpg” border=”0″ alt=”" width=350 height=270 /></li>
<li><img src=”sign3.jpg” border=”0″ alt=”" width=350 height=270 /></li>
</ul>
</div>
6. Remind your user before they leave
Because PPV triggers a pop up, many users move their mouse over to the tab/window close button as soon as it appears.
Wouldn’t it be great to stop them in their tracks and remind them of your special offer?
Unfortunately most networks dont allow exit popups, but JQuery comes to the rescue.
In this example I am trying to emulate most modern browsers. They slide in a yellow alert bar at the top of the window to notify the user of for example the option to save their password.
This is therefore a great way of attracting user attention. And the Activebar2 plugin is the answer.
After you have downloaded, include the plugin javascript file in the head section.
Then in the section where we switch on and attach each of the effects, include the following code:
$(‘.triggerAlert’).hover(function() {
if ($(‘#alert’).length == 0) {
$(‘<div id=”alert”></div>’).html(‘You really dont want to leave this page. Click to look at the deals we are offering!’).activebar({
url: ‘http://imrat.com’,
font: ‘serif’,
icon: ‘activebar-information.png’,
button: ‘activebar-closebtn.png’
});
}
});
Lastly, all you need to do, is to add the class triggerAlert to each element that you want to activate the alert when the user moves their mouse over this. For example:
<div id=”head”>
As browser close buttons are either at the top right or left corner, I recommend you add the class to for example your headline. Or, checkout the demo html, to see how I did it here. I included a separate div across the full width of the page at the top to capture the users mouse.
7. Optimize your download size
Another reason for poor CTR on your landing pages is the time it takes to load your page. Big images, slow servers, and huge javascript files all contribute to long long download times, and low low low CTRs.
So, once you have finished your landing page, its time to compress and minifi.
First, save a copy of your html file for safe keeping.
Then, collect the content of all of your JavaScript plugin files, and add them to a new single js file.
If you downloaded and used files that have already been packed or minified, then I recommend you download the unpacked versions.
Make sure you include the Javascript that was included in the html file as well:
Include everything below the //Include comment in your new javascript file.
Just in case you did not do this, you will need to remove all separate javascript plugin includes from your main html. All you need is 1 to your new minified version.
Also note that the main Jquery javascript file should not be included in this process.
Next, just upload your new combined js file to a Javascript compresser service like jscompress.com, compress, and copy & paste the minified version into a new js file.
Doing this radically increases download speed of your landing page. From 7 files totaling over 60kb down to a single file of 33Kb. Because this is still large for a PPV file, I recommend you only include 1 or 2 effect plugins.
It also makes your landing pages a lot harder to steal.
Here is a copy of the reduced html file, and here is the minified js file.
Wrapup
So that was that. I hope you enjoyed this tour of JQuery. It would be great to see what results you are getting, so let me know by leaving a comment below.
Here is also a downloadable zipped copy of the landingpage, plugins and associated files.
If you are interested in getting help with your landing pages or PPV campaigns, check out my blog: imrat.com – Ditching The Dayjob
