Native ads are ad assets that are presented to users via UI components that are native to the platform. They're shown using the same classes you already use in your storyboards, and can be formatted to match your app's visual design. When a native ad loads, your app receives an ad object that contains its assets, and the app (rather than the SDK) is then responsible for displaying them. This differs from other ad formats, which don't allow you to customize the appearance of the ad.

This guide will show you how to use the Google Mobile Ads SDK to implement native ads in an iOS app, as well as some important things to consider along the way.

Broadly speaking, there are two parts to successfully implementing native ads: loading an ad via the SDK and displaying the ad content in your app. This page discusses ad loading using the SDK.

What are you going to be building?

In this codelab we've provided an example project for you to integrate Native Templates and see how easy they make styling your Ads. You're going to set up a native ad unit and then use that ad unit to display an ad.

What you'll need

Create a new Xcode project

Create a new project in Xcode.

Import the Mobile Ads SDK

Open the terminal and navigate to your project's directory and run the following:

$ pod init

Then, open your Podfile and add the following line:

pod 'Google-Mobile-Ads-SDK'

Make sure your Podfile is in the same directory as your project.

Then save your file and from the command line run:

$ pod install

Update your plist

Add your AdMob App ID to your app's plist file, as shown below. For the purposes of this codelab, you can use the sample App ID below.

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>

Initialize the SDK

Before loading ads, have your app initialize the Mobile Ads SDK. This needs to be done only once, ideally at app launch.

In your AppDelegate's didFinishLaunchingWithOptions method add the following:

@import GoogleMobileAds;
...

[[GADMobileAds sharedInstance] startWithCompletionHandler:nil];

Download the code

Native Templates are open source and we encourage you to tweak the code to your needs. To obtain the source, navigate to the following URL and click the download button.

https://developers.google.com/admob/ios/native/templates

Import the Files

Native Templates have a simple directory structure which makes them easy to import into existing projects.

Drag the unzipped directory into your project, and make sure to select "Copy items if needed".

Load a Native Ad

The first step in using the templates is to load a native ad. More information about loading an ad can be found here.

Make sure you add the GADAdLoaderDelegate and GADUnifiedNativeAdDelegate to your ViewController.m file like so:

@import GoogleMobileAds;
#import "GADTSmallTemplateView.h"

@interface ViewController () <GADUnifiedNativeAdLoaderDelegate, GADUnifiedNativeAdDelegate>
@property(nonatomic, strong) GADAdLoader *adLoader;
@property(nonatomic, strong) GADUnifiedNativeAdView *nativeAdView;
@end

Then add the following delegate methods inside the @implementation section:

- (void)adLoader:(GADAdLoader *)adLoader didFailToReceiveAdWithError:(GADRequestError *)error {
   NSLog(@"%@ failed with error: %@", adLoader, error);
}

- (void)adLoader:(GADAdLoader *)adLoader didReceiveUnifiedNativeAd:(GADUnifiedNativeAd *)nativeAd {
   // We'll come back to this.

}

Next, paste the following into your viewDidLoad method of your ViewController:

self.adLoader = [[GADAdLoader alloc]
        initWithAdUnitID:@"ca-app-pub-3940256099942544/3986624511"
        rootViewController:self
        adTypes:@[ kGADAdLoaderAdTypeUnifiedNative ]
        options:nil];

self.adLoader.delegate = self;
[self.adLoader loadRequest:[GADRequest request]];
        

Use a Template

Now we just create and style a template in the didReceiveUnifiedNativeAd callback like so:

// STEP 1: Initialize your template view object.
GADTSmallTemplateView *templateView = [[GADTSmallTemplateView alloc] init];

// STEP 2: Template views are just GADUnifiedNativeAdViews
_nativeAdView = templateView;
nativeAd.delegate = self;

// STEP 3: Add your template as a subview of whichever view you'd like.
// This must be done before calling addHorizontalConstraintsToSuperviewWidth.
// Please note: Our template objects are subclasses of GADUnifiedNativeAdView so
// you can insert them into whatever type of view you'd like, and don't need to
// create your own.
[self.view addSubview:templateView];

// STEP 4 (Optional): Create your styles dictionary. Set your styles dictionary
// on the template property. A default dictionary is created for you if you do
// not set this. Note - templates do not currently respect style changes in the
// xib.

NSString *myBlueColor = @"#5C84F0";
NSDictionary *styles = @{
    GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCallToActionBackgroundColor :
        [GADTTemplateView colorFromHexString:myBlueColor],
    GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,
    GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],
};

templateView.styles = styles;

// STEP 5: Set the ad for your template to render.
templateView.nativeAd = nativeAd;

// STEP 6 (Optional): If you'd like your template view to span the width of your
// superview call this method.
[templateView addHorizontalConstraintsToSuperviewWidth];
[templateView addVerticalCenterConstraintToSuperview];

All that's left to do is build and run your app!