Sunday, August 29, 2010

Show Custom In-House Ads in Win Phone 7 with MoAds

One of the problems I've been running into is a lack of ad service providers to get ads from. After putting together a previous post showing the MoAds control using the AdMob Ad Adapter I decided someone might get some use out of creating a custom ad service to serve their own "In House" Ads in their Win Phone 7 application.

Just want the code? Get it here



There is also the sort of unsettling issue of Microsoft's Developer agreement being sort of fuzzy on advertising services (as pointed out by this MobileTechWorld article about MoAds).

At any rate, here's a brief run down of creating your own custom ad service using a new MVC 2 Website and some JSON services.

The Web Services Site - .Net MVC 2

In the example provided, I've created a new .Net MVC 2 website and added an AdController. The AdController is responsible for handling our AdRequests. In this case, we add two methods; Fetch and Click. The Fetch will be responsible for returning the Ad information (ImageUrl, AdText and ClickUrl) and the Click will redirect to the actual Ad Url after recording the client click.

public ActionResult Fetch(string pubId, string clientId = "")
{
    // TODO: You'd probably want to keep track of fetches by PubId for analytics, but this is just a demo.

    var ad = AdRepository.GetRandomAd();
    Impression impression;
    var clickUrl = GenerateClickUrl(ad, out impression);

    ImpressionRepository.Impressions.Add(impression);

    return new JsonResult()
    {
        JsonRequestBehavior = JsonRequestBehavior.AllowGet,
        Data = new FetchResponse()
        {
            ClickUrl = clickUrl,
            AdText = ad.AdText,
            ImageUrl = ad.ImageUrl
        }
    };
}

public ActionResult Click(string id)
{
    // TODO: Track the click for analytics and what-not.

    var impression = ImpressionRepository.Impressions.FirstOrDefault(x => x.Token == id);
    if (impression == null)
        return View(); // TODO: return not found result.

    var ad = AdRepository.GetAdById(impression.AdId);
    return new RedirectResult(ad.AdUrl);
}

Creating a Custom Ad Adapter


The Custom Ad Adapter generally has an underlying service component (in our example it's called CustomAdService) that calls out to some service and gets some ad information, massages the response and fires our GotAdResponse event. Here's a brief run down of what our CustomAdAdapter class looks like.

public class CustomAdAdapter : IAdAdapter
{
    private CustomAdService adService = new CustomAdService();

    /// <summary>
    /// Gets or sets the publisher id.
    /// </summary>
    /// <value>The publisher id.</value>
    public string PublisherId { get; set; }

    /// <summary>
    /// Gets or sets the client id.
    /// </summary>
    /// <value>The client id.</value>
    public string ClientId { get; set; }

    public CustomAdAdapter()
    {
        adService.GotResult += new EventHandler<Service4u2.Common.EventArgs<CustomAdFetchResponse>>(adService_GotResult);
        adService.GotError += new EventHandler<Service4u2.Common.EventArgs<Exception>>(adService_GotError);
    }

    void adService_GotError(object sender, Service4u2.Common.EventArgs<Exception> e)
    {
        if (GotError != null)
            GotError(this, e);
    }

    void adService_GotResult(object sender, Service4u2.Common.EventArgs<CustomAdFetchResponse> e)
    {
        var adResponse = new AdResponse()
        {
            AdText = e.Argument.AdText,
            ImageUrl = e.Argument.ImageUrl,
            ClickUrl = e.Argument.ClickUrl
        };

        if (GotAdResponse != null)
            GotAdResponse(this, new Service4u2.Common.EventArgs<AdResponse>() { Argument = adResponse });
    }

    #region IAdAdapter Members

    public event EventHandler<Service4u2.Common.EventArgs<AdResponse>> GotAdResponse;

    public event EventHandler<Service4u2.Common.EventArgs<Exception>> GotError;

    public void GetAdResponseAsync()
    {
        adService.FetchAdAsync(this.PublisherId, this.ClientId);
    }

    #endregion
}

Hooking up our Custom Ad Adapter in XAML


Once we have our Custom Ad Adapter in place we can plug it in to our AdDisplay control and start serving ads.

<!-- Custom Ad Service example -->
<moad:AdDisplay
    Style="{StaticResource AnimationAdMobStyle}"                
    VerticalAlignment="Bottom"
    Foreground="White"
    RefreshSeconds="30">
    <moad:AdDisplay.AdAdapter>
        <local:CustomAdAdapter
            PublisherId="SomePubId"
            ClientId="SomeClientId"/>
    </moad:AdDisplay.AdAdapter>
</moad:AdDisplay>

And that's about it. Hopefully I'll find some other ad service providers to implement soon. If anyone has any recommendations I'd be happy to hear them.

Grab the updated example source from here or the Project Page at BitBucket (Codeplex is still Garbage).

Now Playing - Notorious B.I.G - Mo Money Mo Problems

Saturday, August 28, 2010

MoAds - Custom Win Phone 7 Ad Control with AdMob support

Update: Codeplex is Garbage, I've been waiting 3 hours for the source control server to let me upload. In the meantime, download the source or the Binaries from my dropbox account or you can download the source from the project page at BitBucket.

Update 2: Microsoft has released a much better ad serving solution than AdMob, this was just a stop gap in case nothing official was released.  This control is old and busted, check out the Microsoft Ad SDK for the new hotness.


After seeing a project on CodePlex that allowed you to display AdMob ads in a Win Phone 7 application, I decided it would be a good project for another custom control.


Custom Styling, Animation and Templates


The main problem I saw with the existing control was that it didn't take advantage of the styling and "Blendability" of the Win Phone 7 platform. Basically, the control used a web browser control to display an HTML template that was updated with ad information.




Here is an example of three different styles for the same template, the top is the default template, the middle is a text only style, and the bottom shows a fading animation when the ads are refreshing. The animations are helped by utilizing the three states for the AdDisplay control; Loading, Normal and Error.


Custom Ad Providers


Another issue I saw was that it relied solely on AdMob, with very little flexibility for hooking up another Ad service (like a rumored Bing Mobile Ad Service), so I added an adapter pattern to the control.


Here is an example of using the provided AdMob Adapter with the control (notice this can all be done in XAML, no code behind).


<!-- Default template example -->
<moad:AdDisplay
    Height="70"
    VerticalAlignment="Top"
    Foreground="White"
    RefreshSeconds="30">
    <moad:AdDisplay.AdAdapter>
        <moad:AdMobAdapter
            PublisherId="YourPublisherID"
            CookieString="YourCookieString"
            AdKeywords="Boston"
            UseTestMode="True"/>
    </moad:AdDisplay.AdAdapter>
</moad:AdDisplay>


I'm hoping to put up another post to talk about creating a custom "In-House" ad provider.


You can download the source from my DropBox account, or at the created project on Codeplex called MoAds.


Now Playing - Goodie Mob - Get Rich to This