I’ve just realized that Technorati Media Banner Ads load very slow compare to Google AdSense Ads and all pages are not rendered properly until Technorati Media Banner Ads appear. Meaning users have to wait few seconds to see a complete page with all style sheets and assets.
In order to speed up the loading time, I have to load all Technorati Media ads in iframes to avoid bad performance from advertisers. Currently, Technorati Media uses inline JavaScript to serve their ads and although the JavaScript file is loaded pretty fast but banner’s contents such as image or flash load very slow.
1. Create HTML Page To Serve Ads
First, we need to create a HTML page to load the Technorati Media ad, this page will be embed in an inline iframe of pages display the advertising banner. Save this page somewhere on your web hosting and name it something, for example: /ads/technoratimedia_300x250.html
An example of the HTML is as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="noindex, nofollow" /> <title>Technoratimedia_300x250 Advertising Banner On 4rapiddev.com</title> </head> <body leftmargin='0' topmargin='0' marginwidth='0' marginheight='0' style='background-color:transparent; width: 100%; text-align: center;'> <!-- BEGIN UAT - 300x250 - 4RapidDev: 4RapidDev - DO NOT MODIFY --> <script type="text/javascript" src="http://ad-cdn.technoratimedia.com/00/63/24/uat_12463.js?ad_size=300x250"></script> <!-- END TAG --> </body> </html> |
Note: you will need to replace the example ad tags with your ad tags. And body tag’s leftmargin, topmargin, marginwidth, marginheight attributes shoule be 0 to fit with the iframe and remove space between banner and iframe border.
2. Display Ads On Your Site
Now, we will need to integrate advertising banner into web pages by loading the HTML file above into an iframe and place it somewhere you would like to display the ad.
<iframe id='technoratimedia_300x250' name='technoratimedia_300x250' src='/_ads/technoratimedia_300x250.html' framespacing='0' frameborder='no' scrolling='no' width='300' height='250'></iframe> |
Note: depend on the ad size, we will need to set width & height of the iframe as the same with the ad size (ex: 300×250, 160×600, 728×90, etc)
