Impress Your Visitors with a Graphically Dynamic Landing Page

Here’s a trick I have been using for a while on many of my landing pages.

Disclaimer: If you’re making your own landing pages, you need some basic PHP knowledge to do this. If you’re having your landing pages outsourced however, just show this post to your designer and he will know what to do.

The Goal: To create dynamic landing pages that show different images to the visitor depending on what they searched for, what was shown in the ad, or where they come from.

What could we use this for?
The possibilities are endless actually, but here are ideas to get you started:

• A ringtone campaign. You could have many different ads targeted to an artist, or a cellphone brand. Your ringtone landing page would show a picture of that particular artist or a picture of the cellphone you were advertising it with.
• Insurance campaign. Each visitor to your landing page is presented with not only text tailored to his/her whereabouts (like city, zipcode, state) - but also with a small image of their state flag, a clipart state map, or similar. This will make your landing page instantly more appealing to visitors no matter from what city or state they are searching from.
• Dog accessories campaign. One visitor searches for “portable kennel for german shepherd” and is taken to your landing page where there happens to be a picture of a german shepherd right alongside your general content about portable kennels. Another visitor searched for “labrador dog car kennel”and is shown that very same page - only now with a picture of a labrador instead of the german shepherd.

In this post, you will learn:

• Basic php keyword insertion
• Method #1 - Dynamic image insertion using a static image library
• Method #2 - Dynamic image insertion using Yahoo Images

The Basics: Standard keyword insertion

Alright, I’m sure you’re familiar with dynamic keyword insertion on landing pages. Essentially, you can pass along a variable to your PHP landing page, and have that variable inserted anywhere (visible or non-visible) on your page.

This serves two purposes:
1) To get better Quality Score due to increased keyword relevancy
2) To increase visitor interest and conversions

To do this, just insert the following string anywhere in your landing page code where you would like the keyword to appear:

<?php echo ucwords(str_replace("-"," ",$_GET["keyword"])); ?>

So let’s say you have a landing page called lander.php. You would then call the landing page like this:

http://www.example.com/lander.php?keyword=fleshlight-video-tutorial

Now the keyword “Fleshlight Video Tutorial” would show up wherever you wanted it to on the page. Remember, the php string could be placed anywhere in the code. I usually try to include it in a combination of the following:

Meta tags (description, keywords)
Title
Headline
Image alt tags
Href title tags
Within the landing page copy
As a link anchor tag to another internal site page

Use your imagination! And actually - that is what brings me to the core part of this post…

Method #1 - Dynamc image insertion based on a static image library
Now, onto the fun part… Because we can also use the passed variable as part of filenames in the landing page code. On a regular page, you would normally show static images with the HTML img tag like this:
<img src="images/dog.jpg”>

It would result in a page like this:

…and that image would be the same for every visitor, no matter what dog breed or keyword they had searched for.

But instead of that, we wanna spice it up a little and present our visitors with a picture of his/her dog breed. Think that will bring up your conversions and ROI? You bet!

We can then have custom destination URLs from our ads pointing to:
http://www.example.com/kennel.php?keyword=cocker-spaniel
http://www.example.com/kennel.php?keyword=golden-retriever
http://www.example.com/kennel.php?keyword=german-shepherd
(Of course, the ads themselves should also have the keyword in them)

And we can have all kinds of variations of the same landing page:

We accomplish this by simply replacing the static image filename with the keyword string from the URL, like this:
<img src="images/<?php echo $_GET["keyword"]; ?>.jpg">

This obviously also requires you to actually have image files with these names stored in your /images folder. These aren’t hard to come by though. For a small project requiring a dozen or so images, you can get them yourself from Google images (always make sure not to violate copyrights). If you need more - let’s say for a list of 100 dog breeds, you can outsource the image retrieval to someone from eLance, Odesk, or even the Sell&Buy section at Wickedfire.com.

It’s highly recommended to ensure that all the images are the of the same dimension so you don’t risk messing with the page layout. You could do this quickly for a batch of images using a tool like IrfanView. And the filenames should be similar to your expansion keywords. In the example above, we had these images sitting in our images folder:

/images/cocker-spaniel.jpg
/images/golden-retriever.jpg
/images/german-shepherd.jpg

So when the landing page is called, along with the keyword “cocker-spaniel”, the proper filename is chosen because we ask php to grab the keyword and use it as the image filename.

Important note: You need to make sure that the keyword is passed exactly matching the filename for this to work. So if you’re passing along your keywords with dashes (-) between each word, your filenames also must contain that character. To play it safe, you could have duplicate sets of all the images, some with dashes and some without. Or you can play around with the PHP str_replace function to replace spaces with dashes for example.

This may all sound like a lot of work, but it really isn’t once you’ve done it a time or two. For a real powerful campaign, build out your campaign using the free DerekPPC (SpeedPPC clone), and use the expansion keywords to call images. You can still pass along the seed keywords and the final, mixed keywords along to the landing page for other uses.

Method #2 - Dynamc image insertion using Yahoo images
This next method doesn’t rely on having images stored on your server. It’s more suitable if you need a huge variety of images (e.g. for thousands of expansion keywords) and can’t or don’t want to retrieve specific images ahead of time.

It’s also prone to give you some less relevant images since you’re not in direct control of what images will show up. This because we are retrieving images on the fly from Yahoo images through their API. We’re relying on Yahoo to find the most relevant image for us based on a keyword.

The script you will need to do this is here: DOWNLOAD (Right click and Save As…)
Upload the yahooimages.php file to the root of your website.

And for wherever you want to insert an image into your landing page, add this line:
<?php include("yahooimages.php"); ?>

We can use the same destination URL as before to call the page:
http://www.example.com/kennel.php?keyword=german-shepherd

However - the image will now be the first image Yahoo finds relevant enough for our keyword… This could be of a german shepherd dog - or if we’re less lucky: a picture of a german flag - or a shepherd with his sheep.

So the trick to getting this script to achieve accurate images is to append additional words to the keyword. This makes it more likely for the Yahoo API to retrieve what we want. To do this, open the yahooimages.php script in a text editor, go to the 3rd line, and replace the word PICTURE with a short word that would make the image search term more specific.

If we replace the word PICTURE with the word breed, it would make the script call Yahoo for images based on “german shepherd breed”.

Or if our keyword was Madonna, we could replace PICTURE with “album” so that we would get a picture of a Madonna album cover (and not risk getting pictures of the virgin Mary or some Madonna nipslip paparazzi picture)

I’ve used this for ringtone landing pages in the past. Be sure to do some test runs with different keywords from your list to see if the image retrieved is appropriate and relevant. Please note also that the script is set to use a default image size of 125×125. You can change this by editing the width and height in line 9.

Bonus Tip: Geo-targeted Images

In the beginning of this post, I suggested you could have images display based on the visitor’s location. Using a simple geo-targeting script such as this one, we can do just that!

Just like in method #1, we could have a set of state flag images - and call the appropriate flag using this line in the landing page code:

<img src="images/<?php echo $geo_data['geoplugin_region']; ?>.jpg">

Pretty cool?

Are you ready to take your landing pages to the next level of customization? As always, I am interested to hear what sorts of other uses and ideas you may have based on this. Bring on the comments…