Google offer a splendid ad serving product called doubleclick for publishers (dfp) for most organizations it is completely free (as of July 2013, if your site served up to 90millions ads or less a month) . The following explains how to embed ad tags into your web site.
nb This article does not cover setting up ads on your dfp server, it is assumed that you are familiar with this processThe first thing your web page requires is a request for the dfp ad serving script...
var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function() { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; var useSSL = 'https:' == document.location.protocol; gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); })();
This javascript enclosure pulls in the required google library for requesting and rendering the ads. This must be placed in the head section. The next step is to define the individual ad slots, this too must go in the head section.
<script type='text/javascript'> //<![CDATA[ googletag.cmd.push(function() { leader = googletag.defineSlot('/9999999/leader', [728,90], 'leader').addService(googletag.pubads()); footer = googletag.defineSlot('/9999999/footer', [728,90], 'footer').addService(googletag.pubads()); sky1 = googletag.defineSlot('/9999999/sky1', [[120,600],[160,600]], 'sky1').addService(googletag.pubads()); sky2 = googletag.defineSlot('/9999999/sky2', [[120,600],[160,600]], 'sky2').addService(googletag.pubads()); mpu_article = googletag.defineSlot('/9999999/mpu_article', [[300,250],[250,250]], 'mpu_article').addService(googletag.pubads()); mpu2_bottom_grid = googletag.defineSlot('/9999999/mpu2_bottom_grid', [[300,250],[250,250]], 'mpu2_bottom_grid').addService(googletag.pubads()); mpu3_rh_column = googletag.defineSlot('/9999999/mpu3_rh_column', [[300,250],[250,250]], 'mpu3_rh_column').addService(googletag.pubads()); googletag.enableServices(); }); //]]> </script>
In the example above we are defining multiple ad slots, leaders, towers (sky) and mpus. The defineSlot function requires 3 arguments...
- string unitName: Full path of the ad unit with the network code and unit name. The network code (9999999) is your dfp account and the unit name (leader) is the name of the unit allocated through the dfp system
- number size: Width and height of the ad unit within brackets and separated by a comma. It is important if your have multiple ad sizes targetted to a unit in dfp, that you also provide all those sizes. For instance the sky1 unit has ad creatives of sizes 120x600 and 160x600 targetted to it on teh dfp server
- string divId: Publisher-specified ID for the div element containing the ad.
The final step is to call in the ad in the web page itself, for example the leader....
<div id='leader style='width:100%; height:90px; text-align: center;'> <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('leader'); }); </script> </div>
This call pulls in the required ad and renders it in the page. note that google recommends that the scripts tags be placed in the target div, though I have had this working outside.