sides of march (Brian DeMarzo)

Like many, I use Google AdSense to host ads on my web sites. Including the ad code typically requires you to paste a block a block of JavaScript onto the page. I don’t mind injecting the JavaScript, but I wanted to come up with a better way.

The solution I came up with was a quick MonoRail ViewComponent, AdUnit. It has a simple purpose: to render a block of code for an ad unit of a given size.

The first task was to create an enum which represented all the possible ad unit sizes, based on what’s offered by Google.

/// <summary>
/// A typical ad unit size, using standards defined by Google.
/// </summary>
public enum AdUnitSize
{
/// <summary>
/// 728x90
/// </summary>
Leaderboard = 1,
/// <summary>
/// 468x60
/// </summary>
Banner = 2,
/// <summary>
/// 234x60
/// </summary>
HalfBanner = 3,
/// <summary>
/// 125x125
/// </summary>
Button = 4,
/// <summary>
/// 120x600
/// </summary>
Skyscraper = 5,
/// <summary>
/// 160x600
/// </summary>
WideSkyscraper = 6,
/// <summary>
/// 180x150
/// </summary>
SmallRectangle = 7,
/// <summary>
/// 120x240
/// </summary>
VerticalBanner = 8,
/// <summary>
/// 200x200
/// </summary>
SmallSquare = 9,
/// <summary>
/// 250x250
/// </summary>
Square = 10,
/// <summary>
/// 300x250
/// </summary>
MediumRectangle = 11,
/// <summary>
/// 336x280
/// </summary>
LargeRectangle = 12
}

With that, I now can write the AdUnitComponent.

/// <summary>
/// Displays an ad unit of a given size.
/// </summary>
[ViewComponentDetails("AdUnit")]
public class AdUnitComponent : ViewComponent
{
private string _adUnitCode;
private bool _renderView;

/// <summary>
/// The HTML ID of the form element to set focus to.
/// </summary>
[ViewComponentParam(Required = true)]
public virtual AdUnitSize Size { get; set; }

/// <summary>
/// Initializes the view component.
/// </summary>
public override void Initialize()
{
_adUnitCode = WebConfigurationManager.AppSettings["AdUnit_" + this.Size.ToString()];
_renderView = !String.IsNullOrEmpty(_adUnitCode);
}

/// <summary>
/// Renders the view component, injecting HTML into the web page.
/// </summary>
public override void Render()
{
if (_renderView)
{
RenderText(_adUnitCode);
}
CancelView();
}
}

The most important code takes place in the Initialize method. It’s in that method where we retrieve the ad code from the web.config file. Simply add an entry to your <appSettings> section with the name AdUnit_AdUnitSize. An example follows.

<appSettings>
<!-- ad units -->
<add key="AdUnit_MediumRectangle" value="
<script type="text/javascript"><!--
google_ad_client = "pub-4509135091166921";
google_ad_slot = "2912665903";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<a href="http://pagead2.googlesyndication.com/pagead/show_ads.js">http://pagead2.googlesyndication.com/pagead/show_ads.js</a>
" /&gt;
&lt;add key="AdUnit_WideSkyscraper" value="
&lt;script type="text/javascript"&gt;&lt;!--
google_ad_client = "pub-4509135091166921";
google_ad_slot = "3455950222";
google_ad_width = 160;
google_ad_height = 600;
//--&gt;
&lt;/script&gt;
<a href="http://pagead2.googlesyndication.com/pagead/show_ads.js">http://pagead2.googlesyndication.com/pagead/show_ads.js</a>
" /&gt;
&lt;/appSettings&gt;

You don’t have to use Google AdSense code — you can actually use this ViewComponent to inject any HTML into a page.

Last thing — how do you call the AdUnitComponent from your view? If using NVelocity…

#component(AdUnit with "Size=WideSkyscraper")

That would render the text specified in the value field of the AdUnit_WideSkyscraper key in your configuration file’s appSettings.