This guide shows you how to use the Google Mobile Ads SDK
to display AdMob Native Express ads in iOS applications.
It covers things like how to add a GADNativeExpressAdView
to a layout,
how to request ads, and so on.
Prerequisites
This guide assumes some working knowledge of the Google Mobile Ads SDK. If you haven't already done so, consider running through our Get Started guide.
What's a Native Express Ad?
Native Express ads are similar to banners in that they're rectangular ads
that you can drop into a storyboard and size how you like.
The key difference is that you, the publisher,
can control the ad's presentation details
(things like image sizes, fonts, colors, and so on)
by uploading a CSS template for your ad unit.
AdMob combines that template with advertiser assets
like icons, images, and text,
and displays the results in a GADNativeExpressAdView
.
This approach minimizes the amount of mobile code needed for
a Native Express ad, while helping publishers display ads
that look natural in their app.
Create a Native Express ad unit
Native Express ad units are created at apps.admob.com. For an overview of the format and more information on choosing a template size for your ad units, see this help center article. For more information on how to create CSS to give your Native Express ads a natural, unobtrusive style, see the guide to Native Ads Express CSS.
GADNativeExpressAdView
The GADNativeExpressAdView
class is responsible
for requesting and displaying Native Express ads.
You can add one to a storyboard and assign constraints to it,
much as one would with a GADBannerView
.
Choose a size
Rather than forcing publishers to choose between fixed sizes, Native Express ads offer several template sizes (chosen when creating an ad unit), each with a range of height and width values:
Template size | Min width | Max width | Min height | Max height |
---|---|---|---|---|
Small | 280 | 1200 | 80 | 612 |
Medium | 280 | 1200 | 132 | 1200 |
Large | 280 | 1200 | 250 | 1200 |
A publisher who wants to display a "Medium" template size can use widths between 280 and 1200 dp, and heights from 132 to 1200 dp. That means that 300 by 200, 450 by 150, and 613 by 572 are all valid for the Medium template size. Bear in mind, though, that not all sizes are likely to make for a good presentation. While it's technically possible to request a "Small" template with a size of 1200 by 80, it's probably not the best choice! Also, be sure to consider the screen dimensions of the device on which you're displaying the ad. Larger sizes should generally be reserved for presentation on tablets.
Apps aren't required to use the same size for every request. The same ad unit could be requested with one size in portrait orientation and another in landscape, or in different sizes according to the particular device it's running on. In the event that an app makes a request with an ad size that falls outside the range for the ad unit's template, though, an error is returned.
Publishers can also use the GADAdSizeFullWidthPortraitWithHeight()
and GADAdSizeFullWidthLandscapeWithHeight()
methods
when programmatically creating a GADAdSize
for a GADNativeExpressAdView
.
In this case, the ad occupies the entire width of the device screen.
At this time, the Fluid size should not be used with Native Ads Express.
Load an ad
Loading ads is done through the loadRequest()
method
in the GADNativeExpressAdView
class.
Before calling it,
make sure the adUnitID
and rootViewContoller
properties
have been assigned prior to loading an ad.
If you have a UIViewController
with a GADNativeExpressAdView
in its storyboard,
here's how you can set the properties and load an ad:
Objective-C
#import "ViewController.h" @import GoogleMobileAds; @interface ViewController () @property(nonatomic, weak) IBOutlet GADNativeExpressAdView *nativeExpressAdView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.nativeExpressAdView.adUnitID = @"ca-app-pub-3940256099942544/2562852117"; self.nativeExpressAdView.rootViewController = self; GADRequest *request = [GADRequest request]; [self.nativeExpressAdView loadRequest:request]; } @end
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { @IBOutlet weak var nativeExpressAdView: GADNativeExpressAdView! override func viewDidLoad() { super.viewDidLoad() nativeExpressAdView.adUnitID = "ca-app-pub-3940256099942544/2562852117" nativeExpressAdView.rootViewController = self let request = GADRequest() nativeExpressAdView.loadRequest(request) } }
Further reading
For more information on the best ways to use Native Express ads, check out these resources:
- To explore targeting capabilities of banner ads, check out the Targeting guide.
- To learn about ad events and ad delegates, check out the Ad Events guide.
You can also see a Native Express ad in action by downloading our sample project from GitHub.