Native Ads in Microsoft Advertising SDK
Overview
Native Ads is a component-based ad format that gives publishers the flexibility of placing the individual components of a creative – title, image, logo, description, call to action text – so as to provide the best possible fitment to the look and feel of the rest of the app. This enables the developers to use fonts, colors and animations of their own to stitch unobtrusive user experience in their app while earning high yield from advertising. For advertisers as well, this provides high performing placements since the ads experience is tightly built into the app and users tend to interact a lot more with such sponsored content. According to a report by Mobile Marketing, native in-app ads typically see five times greater engagement than traditional banner ads and, hence, get greater spend from advertisers as well (as per eMarketer and other reports).
Starting now, developers can create Native Ad slots in their apps or games using the latest version of Microsoft Advertising SDK (10.0.4 or later). Microsoft Monetization platform provides developers with the maximum amount of freedom to create their own presentations and is available to a limited set of publishers in a closed pilot. Please contact [email protected] to express your interest to be part of this pilot.
Where Do I Start?
As always, start with downloading the Microsoft Advertising SDK. This provides you the libraries to include Native Ads into your app or game.
Create a “Native” ad unit for your app in ‘Monetize with ads’ section on DevCenter (dev.windows.com). This is the ad unit that you will use in your app when you request for an ad in the code.
How Do I Get Native Ads Integrated into my App?
This section assumes that you are familiar with the Microsoft Advertising SDK for your UWP app or game. If you haven’t played around with this, consider going through the Get Started guide.
To show Native Ads in your app, follow the instructions for project type:
XAML/.NET
HTML/JavaScript
XAML/.NET
This section provides C# examples for your XAML/.NET project. You will need to go through these simple steps to get Native Ads in your code.
Step 1: Setup References
Open your project in Visual Studio. In Reference Manager, expand Universal Windows, click Extensions and then select the check box next to Microsoft Advertising SDK for XAML.
In appropriate code file in your app (for example, in MainPage.xaml.cs), add the following namespace reference.
using Microsoft.Advertising.WinRT.UI;
Step 2: Setting up Native Ads Manager
In an appropriate location in your app (for example in MainPage or some other page), declare a NativeAdsManager object and string fields that represent the application ID and ad unit ID for your Native Ad. The following code example assigns the myAppId and myAdUnitId fields to the test values for Native Ads provided in Test Mode values. These values are only used for testing; you must replace them with live values from Windows DevCenter before you publish your app.
NativeAdsManager nativeAdsManager = null; string appId = "d25517cb-12d4-4699-8bdc-52040c712cab"; string adUnitId = "test";
In code that runs on startup, instantiate the NativeAdsManager.
// Ad Events nativeAdsManager = new NativeAdsManager(appId, adUnitId);
Step 3: Request for an Ad
When you want to show an ad, request for one using the NativeAdsManager and wire up the events.
nativeAdsManager.RequestAd(); nativeAdsManager.AdReady += NativeAd_OnAdReady; nativeAdsManager.ErrorOccurred += NativeAd_ErrorOccurred;
Step 4: Using components of the Ad to stitch up the experience
Assume you have a XAML page which has various placeholders for Title, Description, Sponsored By, Call To Action of an Ad and a container which contains all these elements. Sample StackPanel containing all the elements.
<StackPanel x:Name="NativeAdContainer" BorderThickness="2" BorderBrush="Azure">
<StackPanel x:Name="IconImageContainer" BorderThickness="2" BorderBrush="Azure" Visibility="Collapsed" >
<Image x:Name="IconImage" />
</StackPanel>
<TextBox x:Name="TitleBox" Text="The title will go here" Margin="78,0,-78,0"/>
<TextBox x:Name="DescriptionBox" Text="The Description will go here" Visibility="Collapsed" />
<TextBox x:Name="SponsoredBy" Text="The SponsoredBy will go here" Visibility="Collapsed" />
<StackPanel x:Name="MainImageContainer" BorderThickness="2" BorderBrush="Azure" Visibility="Collapsed">
<Image x:Name="MainImage" Margin="0,8,0,4" />
</StackPanel>
<Button x:Name="CallToAction" Margin="0,8,0,4" Visibility="Collapsed" />
</StackPanel>
Based on components of the creative that you want to stitch up in your app, your code may differ. Here is a sample OnAdReady event listener where Title, Description, CallToAction and Image is being used.
void NativeAd_OnAdReady(object sender, object e)
{
NativeAd nativeAd = (NativeAd)e;
TitleBox.Text = nativeAd.Title;
//if description is not null show description textbox
var description = nativeAd.Description;
if (!string.IsNullOrEmpty(description))
{
DescriptionBox.Text = nativeAd.Description;
DescriptionBox.Visibility = Visibility.Visible;
}
//if sponsoredBy is not null show sponsoredBy textbox
var sponsoredBy = nativeAd.SponsoredBy;
if (!string.IsNullOrEmpty(sponsoredBy))
{
SponsoredBy.Text = sponsoredBy;
SponsoredBy.Visibility = Visibility.Visible;
}
//if CallToAction is not null update Button
var callToAction = nativeAd.CallToAction;
if (!string.IsNullOrEmpty(callToAction))
{
CallToAction.Content = callToAction;
CallToAction.Visibility = Visibility.Visible;
}
// Assets consists further information about Ad
var assets = nativeAd.AdditionalAssets;
// Loading images
var icon = nativeAd.IconImage;
if (icon != null)
{
var bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri(nativeAd.IconImage.Url);
IconImage.Source = bitmapImage;
// Best view when using the Height and Width of the image given
IconImage.Height = nativeAd.IconImage.Height;
IconImage.Width = nativeAd.IconImage.Width;
IconImageContainer.Visibility = Visibility.Visible;
}
// There might be multiple main images sent by the server
var mainImages = nativeAd.MainImages;
if (mainImages.Count > 0)
{
var mainImage = mainImages[0];
var bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri(mainImage.Url);
MainImage.Source = bitmapImage;
// Best view when using the Height and Width of the image given
MainImage.Height = mainImage.Height;
MainImage.Width = mainImage.Width;
MainImageContainer.Visibility = Visibility.Visible;
}
// It is required to show the AdIcon in your container
NativeAdContainer.Children.Add(nativeAd.AdIcon);
// Register any xaml framework element for clicks/impressions
nativeAd.RegisterAdContainer(NativeAdContainer);
P.S: The developer is required to “Register” the XAML ad container (any framework Element) with the Native Ads object. This is required for handling impressions and click tracking and is critical for ad earnings. Failure to do so may result in ad-units and advertising payouts being blocked by Microsoft.
HTML/JavaScript
More details on the HTML feature will be coming soon! Please reach out to us ([email protected]) if your apps are in HTML/JS and you need this feature.
Guidelines
Even though the developer has complete control over how to create the ad experience and which components of the creative is displayed to the user, the advertiser’s creative should get its due message out to the user. There is a fine balance that needs to be achieved to reap maximum value from the Native Ad.
Here are some guidelines to ensure the balance.
Required to Show
There are two advertiser assets that must always be shown to the user in your Native Ad design. Failing to include any of these could result in low performance of your ad unit and eventual low (or no) yield. These assets are:
- Ad Title
- Either Distinguishable ad icon (This Ad Icon is sent as part of NativeAd object – property named AdIcon) or Sponsored By or texts such as ‘Sponsored’, ‘Promoted’, ‘Recommended’
Not following these guidelines may result in the removal of the adUnits from the advertising system.
Ad Experience
Your Native Ad should be clearly delineated from the rest of your content and have space around it to prevent accidental clicks. Use border, background or some other treatment to separate the ad content. Always remember, getting user to accidentally click on the ad is not beneficial in the longer term for your ads based revenue and for end user experience.
You should always show the distinguishable “Ad” icon in the ad view. Whenever possible, show the “Sponsored By” field to clearly call out that the content is an ad and provided by an advertiser.
Text Display Requirements
Native Ads should always have the Title displayed. Provide enough space to display at least 25 characters of the title. If the title is longer, ensure to replace the additional text with an ellipsis.
Ensure that the Call-to-Action (CTA) is separated out from the rest of the promotional text from the advertiser.
If you choose the rest of the promotional text (Description) from the ad response, provide space to display at least 75 characters of the same. It’s best to use animations to show the full content of the ad description.
Call-to-Action
Native Ads should always have the CTA displayed to the user as something clickable like a button or hyperlink.
CTA string should always be displayed in its entirety as it is a critical component of the advertiser’s creative.
Learn and Optimize
It is recommended that different ad units are created and used for each different placement of Native Ads in the app. This enables reporting and learning for each placement which then can be used for optimizing each placement separately till optimal performance is achieved.
In case of any further queries, please reach out to [email protected] and we’ll be glad to help you out.
Leave a Reply