Display Google Mobile AdUnit in Asp.Net

Download Google Ad User Control

This is age of mobile devices. All major advertisers and social web sites are figuring out how to make money from ever increasing use of mobile devices by users to surf the internet and perform search. Using Google Ads has been a very good source of income to support web sites like ours that help community with latest articles and information on various trends and technologies.

In addition to conventional advertisement blocks (links, images etc.) google provides mobile specific advertisement units as well. For these units to work, it is not as simple as copying a small block of JavaScript on your page. For mobile content ad blocks, your application needs to provide small implementation that you have to put on your page that pulls the ad content from google's server and displays on the page.

Google does provide code that you can copy on your site. But that code sample is limited to following four server side technologies.

• ASP(3.0 and higher)
• CGI/Perl
• JSP
• JSP

Since most of our client's sites are based on ASP.Net and MVC, I ended up creating a custom server control that translates sample for ASP to ASP.Net syntax. Since ASP sample code sed VBScript, it was relatively easy to convert that code to C# implementation. Major difference was that instead of using XMLHttp to pull the advertisement code from google server, the code uses WebRequest object.

Configuring Google AdSense For Mobile Content Ad

When you are configuring your mobile ad content for your site, you can use the following settings. These settings will force download of xhtml based syntax for your site.

Placement of Mobile Ad on web page

The advertisement block will show up at top of your page aligned center. I tried to place the div at a specific position to control its placement. But ad will always show up at the top. When I debugged the code generated by google, I found that JavaScript used by google ends up inserting an element that has position set to absolute with its anchor at the top. If you want to control the position of these ads, you probably can write a small piece of JavaScript to reposition these ad units. By default these advertisements will show up at the top.

How to use Google Mobile AdContent Control

I have attached code for the user control with this post. You can download and modify to fit your needs. I have exposed 3 public properties for the control that allows you to specify identity of your account and advertisement as you have configured in Google AdSense.

• Show: This property allows you to specify if you want to show this advertisement unit or not.
• PublisherId: Each content provider has been assigned a unique identity in Google AdSense. You can find this value in your account's setting. This property in control allows you to specify that value.
• AdSlotId: When you create an ad unit in Google AdSend, your advertisement block is assigned a unique identifier. This allows google to pull display settings of your advertisement. You can find this value in list of ad units that you have created. Following screenshot show where you can find this value.
  

Following code snippet shows I have used this control in my site.

<%@ Register TagPrefix="ByteBlocks" TagName="MobileAdUnit" Src="~/User controls/GoogleMobileAdUnit.ascx" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        googleMobileAd.Show = true;
        googleMobileAd.PublisherId = "pub-xxxxxxxxxxxxxx";
        googleMobileAd.AdSlotId = "2162366373";
    }
</script>

<div>
   <ByteBlocks:MobileAdUnit runat="server" id="googleMobileAd"/>
/<div>
    

Try It

You can open any post on this web site in your mobile device (iPhone, iPad, Android phone, Samsung etc.) and you will see a small advertisement block at the top of the site.

If you need more help or have question, please leave comment in this post and I will get back to you as soon as I can.