Blogger Hacks, Categories, Tips & Tricks

Friday, April 07, 2006
FreshAds: Tag-Driven Advertising
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: , , , , , ,
Posted at 11:28 AM by Greg.
16 Comments:
<    >
Blogger yash gupta said...
I dont like to advertise on my blog. I already have other friend`s links to present to my visitors. and I think even that is too much. btw, how can you display html codes in posts? like you did? i want to make a post about how i changed my template and want to display some css/html codes.

<    >
Blogger Greg said...
Advertising is not for everyone. Certainly, the vast majority of blogs don't use it. That said, I think that commercial messages can be a useful and welcome addition to a blog - if done properly.

For example, have a look at ecmanaut's book recommendation - it's a natural fit with his blog.

To display code in HTML, try using the <code> ... <\code> tags. If your blog editor chokes on tags, you can always substitute the open-angle bracket and close-angle bracket with &gt; and &lt;.

-Greg.

<    >
Anonymous Anonymous said...
hey does this work with the amazon tags too? i read their letting people tag their products now.

<    >
Blogger Greg said...
Not really. You use your tags that you've tagged your blog posts with in delicious. If you want to also use those same tags in your Amazon account, I guess you can. (Not sure why though - would it drive traffic to your blog?)

<    >
Blogger Triet said...
Interesting concept... I like the idea, although not sure when I'll implement it.

However, about freshtags, my comments have lost their ability to be previewed since adopting freshtags. Not a big problem, but I'm wondering if anyone's reported a similar bug.

Otherwise I'll just commense combing through the code...

<    >
Blogger Greg said...
Hi Triet,

Haven't heard anything about this before. But I'm not quite sure what you mean by "comments have lost their ability to be previewed". Could you please explain what used to happen, and what happens now?

<    >
Blogger Triet said...
Sorry. I meant that when I click the preview button at the bottom of the comment page, the page reloads, but there is no preview of the message. Instead, it returns me to the regular comment page.

It could be freshtags, it could be something with my firefox browsers, I dunno.

<    >
Blogger Aditya said...
@Triet: Freshtags doesn't even come close to working with the comments, so I think your problem has got to do with something else! Might want to go through your template code again?

@Greg: Fantastic stuff. You keep coming up with amazing stuff for us to add to our blog :) Thanks a ton! Now, I don't know if I'll implement this, not like I'm making tons from adsense anyways (thanks to adblocking scripts all over the place). What I do want to ask is when do you plan to release the async version of Freshtags? Looking forward to it impatiently ;)

<    >
Blogger Greg said...
@Triet: I have to agree with Adi on this. Preview works fine for me on both of my FreshTags-enabled blogs. Haven't heard of problems from the other 20+ users.

@Aditya:I know, I know - it's like a month late! While I've been tinkering with the asynch stuff I've been frightened of undertaking an entire re-write because of the work involved. It would also involve re-tooling the build page and other docs.

Perhaps I should not worry about the user-defined presentation (ie tagclouds) and blogroll integration (ie peek-a-boo blogrolling) and just get out an asynch version of the current functionality.

Would that be a good idea?

-Greg.

<    >
Blogger Triet said...
Yeah, it makes sense...I'm just going down my checklist of possibilities. Thanks.

<    >
Blogger Aditya said...
@Greg: That'd be perfect. Del.icio.us already offers tagrolls and tag clouds. let them do that stuff ... you can just handle the freshtags part, which is all you need to do basically!

i can help you do your build page if you want, if it'll make things faster? :P

<    >
Blogger Tor said...
Hi,

I'm trying to get this to work at Tor's Rants, but can't quite seem to get it to work. I think I've followed your instructions to the letter. For right now, the loading thingy is inconspicuously at the bottom of the right-hand column. My delicious links for the ads are here.

Is there something else I was supposed to modify, or did I modify something I was supposed to leave alone?

Thanks,

Tor

<    >
Blogger Greg said...
Hi Tor,

Checked out your blog - yes, you've followed the bloated and half-arsed instructions to a tee.

You can check this for yourself by typing this into your address bar once your page has loaded:

javascript:loadFreshAds()

You'll notice that the spinning disc is replaced with a suitable ad. (BTW, you might want to think about using an alternative graphic against that background.)

The reason that it's not doing this once your page loads is that some other rude script is overwriting the "loadFreshAds();" call. You can see by typing this into your address bar:

javascript:alert(window.onload)

You get something about N2RunHandlers? No idea what that is - and my knowledge in this area is very patchy to say the least - but that's not what I get on my blog.

What is that something? It could be a blogspot thing. I use the Blogger NavBar (by choice) so it's not that. Could be HaloScan or some of the other scripts you've got running?

I suggest you try moving the FreshAds code further down the head. If that doesn't work, you could try to find out which script is overwriting. If that doesn't work ... well, you might find someone more clued-in *cough* to help out.

Here's another suggestion: why not rotate your banner ads? You can put this code into your head along with your other FreshAds code:

function reFreshAds(interval) { loadFreshAds(); setTimeout('reFreshAds('+interval+')', interval)};

Then, somewhere at the bottom of your page[*], put this:

<script type="text/javascript">
reFreshAds(30000); // interval in milliseconds
</script>

This way, every 30 seconds a new (randomly selected) ad will get loaded into the slot. Cool, huh? OK, probably not the safest way to do a repeating timer, and it's not very efficient in that it will hit delicious again ... but these are blog hacks!

If you want to expand FreshAds to deal with multiple ads on the page, just create more target divs (named eg "FreshAds2" etc) and add these lines to the end of your doFreshAds() code:

var outputHTML=listAds(adsObj);
document.getElementById('FreshAds2').innerHTML = outputHTML;


Should do the trick.

Let us know how you get on.

Cheers,

-Greg.

[*] If you get the onload event handler thing sorted out, it doesn't matter where you put this.

<    >
Blogger Aditya said...
@Greg: Reading your post again, a question popped up! How many people do you think will be willing and active enough to keep posting ads to their del.icio.us account? The whole simplicity of Adsense being that Google does all the heavy lifting, when we have to just enter a bunch of code and forget it.

With freshads, one will constantly have to think if a page the person is visiting is worthy of appearing as ads on his site? Making browsing and surfing a little less fun by making people money minded, aren't you? :P

(I'm sorry, but i've been hooked on to making codes and hacks easier for the common man to understand and implement!)

<    >
Blogger Greg said...
Hi Adi,

When it comes to matching ads to readers (via content), I say leave it up to the professionals - in this case Google's AdSense.

FreshAds is aimed at people running a catalogue - like Tor - rather than offering up adspace for rent to all-comers.

FreshAds "adds value" (in business jargon) by increasing the chances of showing a relevant ad to readers. More precisely, it allows the pubisher to narrow the pool of candidate ads based on an individual reader's interests. Since "catabloggers" like Tor (and me) have to pick out ads and maintain a catalogue anyway, delicious is as good a way to manage that as any.

That's why it currently works only with Amazon. Conceivably, something good be rigged up to work with eBay and other product-specific merchants.

In that sense, I guess it's more like an e-commerce plugin, like a shopping cart, than an banner advertising engine like AdSense.

<    >
Blogger Tor said...
Greg,

Thanks for steering me in the right direction. I've discovered that the FreshAds load fine if I remove the Amber Alert crawler. I experimented to see if I could get them to be happy together, to no avail. Your refresh function seems to do the trick, so I'll implement that. It's also good because now I can scrunch the same catalog of recommended books into a smaller space.

By the way, if we can refresh the FreshAds without refreshing the whole web page, is there a way to do that with the FreshTags area itself?

Adi,

Another difference between these Amazon ads and the AdSense ads is that these are products that I myself am recommending to my readers. The ability to steer them to the diverse interests of my readers helps me to have fewer ads cluttering up my layout. More room for content. As it is now, I have Amazon ads for Buddhists, Libertarians and folks interested in evolution. While some folks may be like me, and have a healthy interest in all those areas, I suspect most of my Buddhist readers won't click on an ad for a Libertarian book or magazine, unless I've succeeded in getting to them. :)

Thanks again, guys!

Tor

Links to this post:

Create a Link


eXTReMe Tracker