7 jQuery Effects To Explode Your PPV CTR!

David — Sun, 29 Aug 2010 06:10:31 +0000

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 line in your html:

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 section below the line where you included jquery.

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”:

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:

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”:

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 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.

Then add your CSS stylesheet code to your 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: '
' +
'' +
'
'
});

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.

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

element, and include the right class as shown below:

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) {
$('').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:

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 landing page, 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

Trick to Click!

David — Mon, 26 Jul 2010 07:16:01 +0000

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.

PPV Landing Page Secrets

David — Tue, 12 Jan 2010 07:31:18 +0000

Ok no secrets really but now that I have your attention…

I get a lot of questions about landing pages for PPV/CPV traffic. I hate telling people ‘just test’ but sometimes that’s the best approach. There are various types of pages that can work but the main idea is you want to keep things simple and grab the viewers attention.

Think about how these people are being served ad’s; They are surfing along visiting websites, and up pop’s and advertisement. This isn’t something they were actively seeking out so you need to offer them something that is really going to draw their interest.

Forget about a lot of text, forget about trying to ‘sell’ too much…you want to shock the viewer into clicking on your ad.

A common theme I like to use is a really attention grabbing picture. Say I was going to promote an auto insurance offer; I might find a picture of a crazy looking guy/girl saying something like “He saved $xxx on car insurance..why haven’t you?”.

The most common ‘problem’ I see with most landing pages is people are trying to be too…relevant for lack of a better word. I see a lot of landing pages like:

Want to save on car insurance?

Click here

Now…would that make you want to click or something more like:

How does HE only pay $xx a month for car insurance!?

FIND OUT HOW

See what I’m getting at here? Stop trying to make these nice polite landing pages and really start having some fun with it.

Update on the Affiliate Summit PPV/CPV mastermind session –

Justin Dupre is going to be joining me and sharing some of his own tips, strategies, and insights. It’s going to be a great event and we still have a few spots left so let me know if your interested.

PPVPlaybook.com » PPV Landing Pages