Taking up John's call for innovative new FreshTags applications, I present the FreshAds extension to the FreshTags blog navigation system.

The idea is straightforward: when your readers select a set of tags of interest, your advertising messages should be tailored to those tags. Everyone's happy: it boosts the chances that your readers see something of interest, that sponsors will get a click and you (the publisher) will get your few cents.

This article explains how FreshAds works, demos a working example and gives you step-by-step instructions on getting it set up on your own pages.

Under The Hood

FreshAds is a part of the FreshTags family of navigation tools. As such, it requires FreshTags 0.5 or above to be installed (but you are not required to have tagged all your posts). There is a separate FreshAds script file to include, plus some other logic to go into your template. Eventually, it will get merged into FreshTags proper.

At the moment, it only works with the Amazon Associates program, since that is the e-commerce shopping catalogue I use (and I guess is the most popular). FreshAds assumes you are a signed-up member of Amazon Associates and, of course, the social bookmarker delicious.

As per normal FreshTags operation, your readers can select from a pre-defined set of tags, which dictates which "related" posts are shown to them. In the absence of any reader selection, FreshTags has a guess at their interests based on their inbound search queries or tag selections on prior blogs.

FreshAds uses these current tags to choose a suitable Amazon Associates banner ad to display. You (the publisher) have to explicitly choose a set of banner ads of relevance to your blog, plus use YOUR tags to tag them. That way, when a reader picks some tags on your blog, FreshAds will fetch all your candidate banner ads and go through them to see which ads also have those tags. It will then pick an ad at random (from the set of matching ads) and display it on your blog. If there are no tags selected - or none that match - it just returns a random ad.

Speccy Example

This first started when I thought how to include some fake advertising on my scrutiny of footballers' off-field behaviour blog. (Like most places, Australia's professional footballers tend to get away with all sorts of bad behaviour.) So, I thought it'd would be funny/telling/sarcastic/subversive to sell "safety products". You know, drink spike detectors, pepper spray, DNA kits, that kind of thing. (Yeah, I know; not everyone's idea of a joke - or political activism.) But nevertheless, it turned out the easiest way to create these fake ads was to use Amazon.com to create real ones. Took about an hour. But that got me thinking ...

To include an ad on your page, Amazon.com gives you some HTML that consists of an iframe element with a src URL (which has the product, your account name and layout options embedded in it). Why not tag that URL in delicious, add your own descriptive tags and titles and let the FreshTags code do the heavy-lifting of matching reader interest to ads?

Probably the easiest way to explain what's going on at this point is to have a look at my Speccy Shop catalogue page and my delicous account. As you can see, I've tagged each of the dozen or so products on the catalogue in delicious. The delicious URL is as provided by Amazon.com, the title is provided by me, and the tags are drawn from my Speccy tags. You'll also notice there's an "anchor tag" called "footy_shop". (If you've used FreshTags' archive feature, you'll recognise this.)

If you visit the blog and select the tag "drugs", you'll get shown one of the following ads: Drink Spike Tester, Breathalyser or Drug Testing Kit. Similarly, if you select "bashing" or "rape" you'll be shown products that have been linked to those tags too. If you select another tag - or no tag - you could get any of the items at random.

[NB: I don't imagine I'll actually sell any of these products. It's just a proof of concept. But, if you have a commercial rather than social objective, then you might find this approach useful.]

Scenario Walk Through

A reader googles on "AFL players rape drugs". They click on The AFL Player Spectator. On loading, FreshTags automatically detects that they've used the keyword "drugs" and "rape" in the search query, and so sets these as the currently selected tag. The sidebar is filled with previous posts tagged with "drugs" and "rape".

Meanwhile, FreshAds fetches the set of Amazon ads I've previously tagged. It goes through them, determining which are of relevance. For each ad tag that matches, that ad gets added to the candidate set. If an ad features both tags (eg the Stun Gun), then it will get added twice. This makes it more likely to get picked than an ad that features just one (eg Drink Spike Detectors). Once FreshAds has made its selection, that ad gets dynamically included (AJAX-style) in the sidebar.

Step-By-Step Guide to Implementation

Sound like something that might be useful? OK, here's what you need to do:

1) Get an Amazon Associate account.

2) Get a delicious username. Think of a suitable "anchor tag" for your FreshAds, such as "myshop" or "amazon_products".

3) Get FreshTags installed in your blog, forum or other HTML pages.

4) Go to Amazon.com. Pick out products you think are relevant. Use their "Build Links" pages to generate "product links" HTML code. Ie code for ads of specific products, not recommendations or categories.

5) For each product of interest, create a new delicious entry. It's probably easiest to use their post page rather than bookmarks etc.

6) Cut'n'paste the URL in the iframe element:

src="http://rcm.amaz... "

Select everything between the quotes. Paste that URL into your delicious entry's URL field.

7) Cut'n'paste the style info in the iframe element:

style="width:120px;height:240px;"

Select everything between the quotes. Paste that info into your delicious entry's notes field.

8) Think up a name or title for this (not necessarily what Amazon calls it). Type that into your delicious entry's description field.

9) Think up a set of suitable tags drawn from YOUR set of tags on delicious for YOUR blog. Type those into your delicious entry's tags field (space separated) PLUS your "ad tag" eg "myshop".

10) Hit Save. Go back to Step 5 and repeat until you've built your catalogue.

11) Now comes the template hacking. First of all, find your FreshTags initialisation in your header. After the anchor=... line, put:

ads="myshop";

(except use your ad tag name instead of myshop)

12) Put this div element where you want the ad to appear. This example also includes some cheesy animations to show while the ads load; feel free to make something nicer, perhaps with style="", but don't change the id value!

<div id="FreshAds"><br/><br/><br/><br/><center><img src="http://ghill.customer.netspace.net.au/snake_transparent.gif" /><br><h3>Loading</h3> <h3><a href="http://ghill.customer.netspace.net.au/freshtags/">
FreshAds</a></h3></center></div>

13) Next we need some code in the head to wait until the page has finished loading, then kick-off FreshAds and write the HTML into the above div. Put this after your FreshTags initialisation code, but before your </head>:

<script type="text/javascript" src="http://ghill.customer.netspace.net.au/freshtags/freshads.js">
</script>

<script type="text/javascript">
// event handler codage via ecmanaut

var then = window.onload || function(){};
window.onload = function(){ loadFreshAds(); then(); };

function doFreshAds(adsObj)
{
// callback for dealing with FreshAds

var outputHTML=listAds(adsObj);

document.getElementById('FreshAds').innerHTML = outputHTML; // stuff outputHTML into div
return;
}
</script>

14) Again, you can modify this code to put extra formating around the ad to make it nice. To help with this, FreshAds returns an object with some values in it that you can use with JavaScript:

FreshAds.url is the (Amazon) URL of the current ad
FreshAds.descr is the title that you selected
FreshAds.notes is the notes (style information from Amazon)
FreshAds.tags is the set of tags (as an array) that you associated with this product

That's it! Phew.

Concluding Remarks

I'm not sure how well this will go down with the folks at Amazon. It should result in higher clickthroughs for them through better targetting of ads. But, maybe they regard this is as too much hacking with their precious code. In any case, the same basic approach should work for their "recommendation" and "category" ads too. Similarly, with some tweaking, this code could be extended to work with Google's AdSense (although, why would you bother? It's usually pretty good at matching ads with content) and whatever Yahoo or the others do.

If you're keen to try it out, feel free to clone my URLs on delicious. Which reminds me, the paranoid out there might be wondering if I've slipped some code in to ensure that my amazon associate ID gets used ... here's the source code and here's the human readable version :-)

As always, comments, suggestions, experiences (and working code!) are welcome.



Filed in: freshtags, blogtech, advertising, categories, blogger-hacks, amazon, del.icio.us