September 19, 2007
Download the sample code for this article
AdSense for Mobile lets you insert an advertisement banner into a mobile web page - that is a web page designed for mobile devices, such as mobile phones, smartphones, and PDAs.
The usual AdSense advertisements are injected in an HTML page through a client-side JavaScript code snippet, which queries the Google Ad Server and inserts a new HTML block in the page dynamically. Since it’s not guaranteed that a mobile device will have a browser with JavaScript support, you must program and manage AdSense for Mobile on the server-side. So AdSense for Mobile requires a bit more work by the programmer.
On the AdSense Setup page, a wizard assists you in generating the server-side script that retrieves and inserts the ad markup in the page. The wizard also lets you choose also the language for the generated code: PHP, CGI/Perl, JSP, or Classic ASP.
Thus far, AdSense for Mobile Wizard can’t generate the code for an ASP.NET page. As a result, I implemented the ASP.NET server-side code by myself, and to put it in a reusable class.
This article shows how to query the AdSense Server from ASP.NET and how to insert a banner into a Web page. I’ll use ASP.NET 2.0 and C#, but the you can easily translate the code using Visual Basic .NET 2005.
How to query the Ad Server
The generated code was encapsulated in the AdSenseHelper class. The following code shows how to use it:
// set the ad parameters
Dictionary<string, string> parameters = new Dictionary<string, string>();
parameters["client"] = "ca-mb-pub-XXXXXXXXXXXXXXXX"; // your AdSense Account Id
parameters["channel"] = "";
parameters["format"] = "mobile_single";
parameters["markup"] = "wml";
parameters["output"] = "wml";
// retrieve the markup
string markup = AdSenseHelper.GetAdMarkup(parameters);
You put the ad parameters in a Dictionary<string, string> object, where the key is the parameter name and the value is the parameter value. Once completed, call the GetAdMarkup() function - This function, quite simply, will do the work for you.
Use the AdSense Setup Wizard as it will provide both the parameters names and values you need. Create the ad using the Wizard and then have the Wizard generate the PHP code. You'll obtain a list of parameters assignments, similar to the previous one:
<?php
$GLOBALS['google']['ad_type']='text';
$GLOBALS['google']['channel']='';
$GLOBALS['google']['client']='pub-XXXXXXXXXXXXXXXX';
$GLOBALS['google']['format']='mobile_single';
$GLOBALS['google']['https']=$_SERVER['HTTPS'];
$GLOBALS['google']['host']=$_SERVER['HTTP_HOST'];
$GLOBALS['google']['ip']=$_SERVER['REMOTE_ADDR'];
$GLOBALS['google']['markup']='wml';
$GLOBALS['google']['output']='wml';
$GLOBALS['google']['ref']=$_SERVER['HTTP_REFERER'];
$GLOBALS['google']['url']=$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$GLOBALS['google']['useragent']=$_SERVER['HTTP_USER_AGENT'];
require('http://pagead2.googlesyndication.com/pagead/show_ads.php');
?>
Copy the parameter names and values to the C# code and you're done!
Although the process is very intuitive, there are a few critical points to keep in mind:
- The following parameters are mandatory: client, format, markup, and output.
- The following parameters do not have to be explicitly set: ad_type, dt, https, host, ip, ref, url, useragent. The AdSenseHelper class will set them for you automatically.
- The PHP client parameter starts with the pub- prefix, whereas the C# client parameter must start with the ca-mb-pub- prefix.
Here is another PHP script for generating a xHTML double banner, with custom channel and custom colors:
<?php
$GLOBALS['google']['ad_type']='text';
$GLOBALS['google']['channel']='1234567890';
$GLOBALS['google']['client']='pub-XXXXXXXXXXXXXXXX';
$GLOBALS['google']['color_border']='CCCCCC';
$GLOBALS['google']['color_bg']='CCCCCC';
$GLOBALS['google']['color_link']='000000';
$GLOBALS['google']['color_text']='333333';
$GLOBALS['google']['color_url']='666666';
$GLOBALS['google']['format']='mobile_double';
$GLOBALS['google']['https']=$_SERVER['HTTPS'];
$GLOBALS['google']['host']=$_SERVER['HTTP_HOST'];
$GLOBALS['google']['ip']=$_SERVER['REMOTE_ADDR'];
$GLOBALS['google']['markup']='xhtml';
$GLOBALS['google']['output']='xhtml';
$GLOBALS['google']['ref']=$_SERVER['HTTP_REFERER'];
$GLOBALS['google']['url']=$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$GLOBALS['google']['useragent']=$_SERVER['HTTP_USER_AGENT'];
require('http://pagead2.googlesyndication.com/pagead/show_ads.php');
?>
Here is the equivalent code in C#:
// set the ad parameters
Dictionary<string, string> parameters = new Dictionary<string, string>();
parameters["client"] = "ca-mb-pub-XXXXXXXXXXXXXXXX";
parameters["channel"] = "1234567890";
parameters["color_border"] = "CCCCCC";
parameters["color_bg"] = "CCCCCC";
parameters["color_link"] = "000000";
parameters["color_text"] = "333333";
parameters["color_url"] = "666666";
parameters["format"] = "mobile_double";
parameters["markup"] = "xhtml";
parameters["output"] = "xhtml";
// retrieve the markup
string markup = AdSenseHelper.GetAdMarkup(parameters);
Inserting the Ad on the Web Form
Once you have the markup, you must insert it into the page. In ASP.NET you can use a Literal control - just set its Text property to the markup string:
// ASSUMPTION: Literal1 is a Literal control of the page
// fill the Literal with the markup
Literal1.Text = markup;
Putting Ads on Mobile ASP.NET Web Forms and Controls
ASP.NET provides direct support for mobile web apps: you can add a Mobile Web Form to an ASP.NET Web Site, that will output a web page optimized for mobile devices. For the details about building mobile apps with Visual Studio 2005, take a look to the ASP.NET for Mobiles Official Site. In order to use this, you have to be familiar with Mobile Web Form programming and know about type constructs in the System.Web.Mobile and System.Web.UI.MobileControls namespaces.
You can't insert a Literal control in a Mobile Web Form. In order to assign the ad markup to a Literal control, you must add a DeviceSpecific control to the Mobile Web Form (or Mobile Web User Control). The DeviceSpecific control allows you to define the raw markup to send to the client, as well as using standard (not-mobile) ASP.NET controls.
The sample code for this article contains a Mobile ASP.NET Web Site with a page that shows an AdSense for Mobile advertisement. The Literal control is put inside a DeviceSpecific control; and a Panel wraps the DeviceSpecific control.
You can't access the Literal directly, because is inside the DeviceSpecific control. You must get a reference to the Literal with the Panel.Content.FindControl function:
// get a reference to the Literal control
Literal ltrAd = (Literal)pnlAd.Content.FindControl("ltrAd");
// fill the Literal with the markup
ltrAd.Text = markup;
See the attached code for the details.
Summary
The AdSenseHelper class lets you quickly generate ad markups for your Mobile ASP.NET apps.
The sample Web Site shows how to use AdSenseHelper in order to generate a custom banner that can be view in WML (WAP), cHTML, and xHTML: the server-side code examines the client browser capabilities and choose the best output markup language dynamically.
Feel free to use the AdSenseHelper class in your projects and extend it as you like. A major improvement would be to encapsulate the code in a reusable Mobile ASP.NET Control. If you extend the code I'll be glad to publish it or link it from this page.
About the Author
Alberto Falossi is an ICT Consultant and Business Analyst, helping companies to reengineer their business with IT technologies and new media. He teaches at University of Pisa. He is the founder of the Italian Theatre search engine QualeTeatro.com (in Italian only - English is coming soon). Contact Alberto
Download the code
If you like this article, click this picture and kick it!
Download the AdSenseHelper class and the sample Web Site