Brendan Tompkins

Sponsors

The Lounge

News

Advertisement

Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
Creating an Ad Publishing Application

I've been  working with Eric lately on Jobs.CodeBetter.Com, our Job ad publishing network.  Eric's been the brains behind the web application, the concept and everything else.   I've been doing the menial tasks such as skinning and creating our ad syndication application.  I had a lot of fun writing the code that actually renders our ads onto our affiliate sites like DonXml, Hanselman.Com, Larkware, Devlicio.us, DevAuthority and others. I think I have developed a fairly good pattern for doing this syndication stuff

Minimal Deployed Code
I didn't want to have to ever re-deploy code to any affiliate, and the best way to do this is to minimize any code that they have to copy/paste onto their sites.  I solved this by simply having them paste a single javascript line, like so:

<script src="http://jobs.codebetter.com/feeds/js.ashx?referrer=codebetter&amp;format=leaderboard" type="text/javascript"></script>

The file, js.ashx renders out javascript that finds the script's place on the page, and renders div elements and associated style information into the page.

Wanna know how I found where on the page to drop the ad?  I used the following JavaScript code:

            var m = document.getElementsByTagName('script')
            var adscript;                        
            for (var i=0; i<m.length; i++) {
                if(m[ i].src.match('js.ashx')){
                    adscript = m[ i]  
                    break
                }
            }                                     

            var addiv = document.createElement('div')
            addiv.setAttribute('id', 'addiv')
            addiv.className = 'cb_" + format + @"'
            adscript.parentNode.appendChild(addiv)   

CSS Styled
I wanted to make the ad using divs and CSS so that the affiliate site could override the styles if necessary.. To that end, the javascript adds div elements to the browser's DOM, and writes out the CSS styles inline.

I found this resulted in the fastest, cleanest rendering.  I tried linking in stylesheets by adding style elements to the DOM, but that seemed to create a strange flash as the browser applied the styles.  When I wrote out the CSS directly using some document.write() calls, it seemed to work fine. 

Provide Customization via an Editor
I also wanted to give the affiliate sites an editor to allow them to choose the format of their ads.  I was able to do this easily, since the script generated div elements styled using CSS.  I simply plopped 6 color chooser controls onto the page, and on postback passed this new color in to the script renderer via the query string.  These I place in a separate <style> section allowing the styles to cascade properly.

You can take a look at the tool live here. I used the awesomely easy to use color chooser from Andrew Gretton  ASP.NET / C# Color Picker Control

Put this all together and I think we provide a pretty good ad  publishing experience for publishers, if I do say so myself.

-Brendan


Posted Fri, Oct 13 2006 3:17 PM by Brendan Tompkins
Filed under:

[Advertisement]

Comments

karl wrote re: Creating an Ad Publishing Application
on Sun, Oct 15 2006 8:31 PM

Brendan:

I have some experience with this stuff. One of the issues we had with syndication was bandwidth costs. Every extra byte in your .js file can end up impacting the bottom line as it gets pushed out to X sites each with Y visitors.

I noticed that the javascript isn't being compressed, nor is it obfuscated. I bet using GZIP you could get it to ~30% in size...or using a packer you could get it to 50% in size.

I'd recommend this HTtpCompression library:

http://www.gotdotnet.com/Workspaces/Workspace.aspx?id=2ccc1da1-e45c-401f-9b58-9b533eadb66b

or if you wanna go the packer route, check out:

http://openmymind.net/index.aspx?documentId=55

Karl

Brendan Tompkins wrote re: Creating an Ad Publishing Application
on Mon, Oct 16 2006 8:20 AM

Karl,

Great points,

If I just turn on HTTP compression within IIS, it will do the same as the library, right?  

As for obfuscation, do you have any recommendations for JavaScript obfuscation tools?

karl wrote re: Creating an Ad Publishing Application
on Mon, Oct 16 2006 9:37 AM

I've used Dean Edward's packer for JS obfuscation:

http://dean.edwards.name/packer/

6.0's built in HTTPCompression should do the same thing. I know some people have had a hard go of getting it up and running (http://www.codinghorror.com/blog/archives/000059.html).

In my experience, using BOTH obfuscation AND compression results in a LARGER data stream than JUST compression. Give it a try for yourself. Fiddler is really handy for this sorta testing.

Brendan Tompkins wrote re: Creating an Ad Publishing Application
on Mon, Oct 16 2006 9:47 AM

Ah.. I see packer IS the obsfuscation tool. thanks!

Mark wrote re: Creating an Ad Publishing Application
on Sun, Dec 17 2006 3:29 PM

Thanks Brendan just what I was looking for.

How would you now go about getting an image to appear on the affiliate site? My image ads are quite small but I have no idea how to implement this. Streaming does not seem to work because the affiliate site expects javascript!  Any ideas please?

Brendan Tompkins wrote re: Creating an Ad Publishing Application
on Mon, Dec 18 2006 7:44 AM

Mark,

I think you should be able to just write an IMG tag to the DOM using JavaScript, with the URL pointing to your image server.

Mark wrote re: Creating an Ad Publishing Application
on Tue, Dec 19 2006 7:12 AM

Thanks Brendan. A couple of days ago my knowledge was limited but now I have managed to code our ad publishing system. A handler returns the Ads which are a number of image links and basic html displayed onto client sites. The images within the ads are also now served by another generic handler purely for streaming images (and cached). It works very well. Thanks for your posting, much appreciated.

As an aside do you know how to stop IE from blocking the script? By that I mean a way to code the script so that users do not have to allow it in their browser? Thanks..

Brendan Tompkins wrote re: Creating an Ad Publishing Application
on Tue, Dec 19 2006 7:50 AM

Hmmm.. Not sure about how to do that.. You mean if they have JavaScript turned off?

Mark wrote re: Creating an Ad Publishing Application
on Tue, Dec 19 2006 8:15 AM

I am new to all this so ... but if they have javascript turned on! IE (not sure about FF) will (default?) automatically block the script so the ads will not be seen without user intervention. Need to click on the bar that appears at the top of the browser and allow it.

Brendan Tompkins wrote re: Creating an Ad Publishing Application
on Tue, Dec 19 2006 8:32 AM

Mark, something's not setup right.  If your affiliates use script tags to embed the script with the src pointing to your host, they shouldn't get the security warning. I'm not sure under what conditions you'd get warning.  Do you have an example of where this is happening?

Mark wrote re: Creating an Ad Publishing Application
on Thu, Dec 21 2006 7:08 AM

Thanks Brendan. It seems that the script was being blocked because for my testing the HTML document that I was using was something I knocked up on notepad, i.e. sitting on my desktop and not within IIS. I'm definitely new to all this :) but thanks to people like yourself I'm learning fast. Cheers.

Brendan Tompkins wrote re: Creating an Ad Publishing Application
on Thu, Dec 21 2006 8:01 AM

You're welcome!  Good luck with this.

Eduardo wrote re: Creating an Ad Publishing Application
on Tue, Jul 8 2008 10:00 AM

Great tip, this was exactly what i was looking for. I was almost there but probably i would have spent some hours to figure this out...

Add a Comment

(required)  
(optional)
(required)  
Remember Me?