Native Ads Express

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 resulting HTML 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.

This guide shows you how to integrate Native Ads Express from AdMob into an iOS app. In addition to code snippets and instructions, it includes information about how to choose the correct size category for your ad units.

Prerequisites

• Import the Google Mobile Ads SDK, either by itself or as part of Firebase.

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:

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 rootViewController 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:

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.load(request)
  }
}

#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

Always test with test ads

The sample code above contains an ad unit ID and you're free to request ads with it. It's been specially configured to return test ads rather than production ads for every request, which makes it safe to use.

However, once you register an app in the AdMob UI and create your own ad unit IDs for use in your app, you'll need to explicitly configure your device as a test device when you're developing. This is extremely important. Testing with real ads (even if you never tap on them) is against AdMob policy and can cause your account to be suspended. See Test Ads for information on how you can make sure you always get test ads when developing.

Native Video

In addition to images, text, and numbers, some native ads contain video assets. At the current time, this is limited to the App Install format, but may be extended to Content ads in the future.

To simplify the configuration and display of video, the Mobile Ads SDK provides the following video-related classes for Native Ads Express:

GADVideoOptions

The GADVideoOptions class allows apps to configure how native video assets should behave. GADVideoOptions objects can be assigned to a GADNativeExpressAdView via the setAdOptions method:

let videoOptions = GADVideoOptions()
videoOptions.startMuted = true
nativeExpressAdView.setAdOptions([videoOptions])

GADVideoOptions *videoOptions = [[GADVideoOptions alloc] init];
videoOptions.startMuted = true;
[self.nativeExpressAdView setAdOptions:@[ videoOptions ]];

The GADVideoOptions class currently offers one property, startMuted, which tells the SDK whether video assets should start in a muted state. The default value is true.

GADVideoController

The GADVideoController class is used to retrieve information about video assets. GADNativeExpressAdView offers a videoController property that exposes the GADVideoController for its ads. This property is never nil, even when the ad doesn't contain a video asset.

GADVideoController offers the following methods for querying video state:

• hasVideoContent - True if the ad includes a video asset, false otherwise.
• aspectRatio - The aspect ratio of the video (width/height), or zero if no video asset is present.

In addition, apps can set a GADViewControllerDelegate for the GADViewController to be notified of events in the lifecycle of a video asset. GADViewControllerDelegate offers a single optional message, videoControllerDidEndVideoPlayback, which is sent when a video completes playback.

Here's an example of GADViewControllerDelegate in action:

class ViewController: UIViewController,
    GADVideoControllerDelegate {

  override func viewDidLoad() {
    ...
      nativeExpressAdView.videoController.delegate = self
    ...
  }

  func videoControllerDidEndVideoPlayback(_ videoController: GADVideoController!) {
    // Here apps can take action knowing video playback is finished.
    // This is handy for things like unmuting audio, and so on.
  }
}

@interface ViewController () 

- (void)viewDidLoad {
  ...
  self.nativeExpressAdView.videoController.delegate = self;
  ...
}

...

- (void)videoControllerDidEndVideoPlayback:(GADVideoController *)videoController {
  // Here apps can take action knowing video playback is finished.
  // This is handy for things like unmuting audio, and so on.
}

@end

Additional resources

Samples

• Native Ads Express example on GitHub: Swift | Objective-C

• Native Ads Express UITableView example on GitHub: Swift | Objective-C

Mobile Ads Garage video tutorials

• Native Ads Express Implementation
• Native Ads Express in a UITableView
• Native Ads Express with Video

Next Steps

• Create your own Native Ads Express video ad unit in the AdMob UI.
• Learn about Ad Events and Ad Targeting.
• Try another ad format:
  • Rewarded Video
  • Interstitials
  • Banners