Google Like Text Ads Using OpenX
I have had a lot of people ask me if its possible to use OpenX to show google like text ads. My reply is usually it should be easier than you think. Just create some text ads and add a little style.
I haven’t seen any in practice yet so I took a moment to create an example for those that would like to show ads similar to google.
Creating ads and publisher zone
First you will need to decide what text ads you would like to show and where. You probably already have that one or you wouldn’t be here. For this example I created four 150 X 150 text ads within OpenX to form a 160X600 skyscraper ad.
You can now go through and create more depending on your needs or simply use the handy copy feature within OpenX as I have.
Now that you have a few ads created to fit your needs, you will need to create a publisher and or zone to show them. Then link the text ads you have created to the publishers zone.
Creating the css and html
Now heres the part where you ad a little style to bring them together to form one ad unit. If you dont have an editor you can find a number of online css box creators. Try a google search for “css box creator ” Or simpler still do some quick coppy and past from mine below. Please save the images to your own server if you choose to use the code and change the background image urls.
.oxad160 { width: 160px; height: 600; background-color: #f90; color: #fff; } .oxad160 p { margin-top: 1px; margin-bottom: 1px; margin: 0 5px; padding : 10px; font-size: small; } a { text-decoration: none; color: #463E3F; } .oxtop { background: url(http://www.btdsoft.com/examples/images/tr.gif) no-repeat top right; } .oxbottom { background: url(http://www.btdsoft.com/examples/images/br.gif) no-repeat top right; } img.corner { width: 15px; height: 15px; border: none; display: block !important; } .adcontent { margin: 0 5px; padding : 10px; height: 150px; font-size: small; }
Now you need a bit of html to show the ads on your web page. Below is what I have created for this example.
<div class="oxad160"> <div class="oxtop"> <img src="http://www.btdsoft.com/examples/images/tl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> <div class="adcontent"> *** Insert ad code here*** </div> <div class="adcontent"> *** Insert ad code here*** </div> <div class="adcontent"> *** Insert ad code here*** </div> <div class="adcontent"> *** Insert ad code here*** </div> <p> ads by <a href="http://www.oxrev.com">OxRev.com</a></p> <div class="oxbottom"> <img src="http://www.btdsoft.com/examples/images/bl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> </div>
Putting it all together
We now have a group of text ads, a publisher and zone, bits of css and html. Lets put it together and see if it works. For this example I have saved the css as 160.css, and the html box as a template that I can plug in anywhere I choose to later. I have uploaded the css file and the corner images to a server. Now Once I place the html box on a page I will need to import the css file with it in order for the images and formatting to apear correctly. For this I have used an import command.
<style>
@import url("http://www.btdsoft.com/examples/160.css");
</style>Place this bit of code directly before the first div tag of your box, remembering to change the url to your server location.
Now you need to get the banner code from OpenX. Here I have chosen java, remembering to check “Don’t show a banner from the same campaign again on the same page”. This will keep OpenX from repeating ads.
Just insert your code from OpenX everywhere I have “*** Insert ad code here***” above in the html example. You only need the one code repeated as OpenX wont repeat the same ad. Upload your test to a server or preview it in your editor and you should see something like the example here.
Different layouts
If you dont want to fool with css, its easy to create the same thing in any format. Just use the above creating ads, zones, and invocation code methods. You can have a few lines like google or a simple one line text link. Just remember to tell OpenX not to show the same ad from the same campaign on the same page.
In order for this to work correctly an advertiser must not have all ads in one campaign. Keep their text ads in one campaign and banner ads in another. If OpenX see’s there’s another ad from the same campaign on the page. it will do its job and not show another as instructed.
