Native Advanced Ads in iOS mobile Application

Shubham Jain
7 min readMar 12, 2018

+ShUBHAm JAin

Native Advanced Ads in iOS Mobile Application

Integrating the Google Mobile Ads SDK into an app is the first step towards displaying ads and earning revenue.Once that is done then you can implement the ads in different formats.

PreRequisites:

  1. Use Xcode 8.0
  2. deployment target should be 6.0 or higher
  3. create admob account and register the app.

Integrate the mobile Ads SDK in your application

It is recommended to integrate the google mobile ads SDKs via the cocoa-pods.

Open the terminal on your mac and go to project directory

Step 1 : initialize the pod in project directory
$ pod init
Step 2 : open the pod file
$ open podfile
Step 3 : Add the framework in the project taget of the podfile
$ pod 'Google-Mobile-Ads-SDK','~> version'
Step 4 : install the repo
$ pod install --repo update

Note : user can also integrate google mobile ads sdk manually by downloading it.

Select an Ads Format

AdMobs offers numbers of different ads format, so you can choose one that best fit in your ios application.

1. Banner AdsFormat :

Banner ads are rectangular image or text ads that are placed within apps layout.Banner ads stay on screen while you user is interacting the app and can refresh automatically after a certain period of time.

2. Interstitial AdsFormat:

Interstitials ads are full screen ads that cover the whole interface of the application layout until they are closed by the user.

3. Native AdsFormat :

Native is a component based ads format that allow you to customize the ads like assets , headlines and calls to action that are presented in the app.

4. Rewarded AdsFormat :

Rewarded ads are full screen video ads that user have the option of watching in full in exchange for in app-reward.

Lets start to implement the Native Advanced Ads

Native Advanced ads is a format in which assets are presented to user via UI elements that are native to platform.

There are two types of native advanced ads

  1. App install Ads — represented by GADNativeAppInstallAds class
  2. Content Ads — represented by GADNativeContentAds class

Initialize the GADLoader

Native ads are loaded via the GADLoader object which sends message to their delegate according to the GADLoaderDelegate Protocol.

Following code demonstrate to initialize the ads in app

Objective C:

@implementation ViewController- (void)viewDidLoad {
[super viewDidLoad];
GADMultipleAdsAdLoaderOptions *multipleAdsOptions =
[[GADMultipleAdsAdLoaderOptions alloc] init];
multipleAdsOptions.numberOfAds = 5;
self.adLoader = [[GADAdLoader alloc] initWithAdUnitID:YOUR_AD_UNIT_ID
rootViewController:self
adTypes:@[kGADAdLoaderAdTypeNativeContent,
kGADAdLoaderAdTypeNtiveAppInstall]
options:@[multipleAdsOptions]];
self.adLoader.delegate = self;
[self.adLoader loadRequest:[GADRequest request]];
}
}
- (void)adLoader:(GADAdLoader *)adLoader
didReceiveNativeAppInstallAd:(GADNativeAppInstallAd *)nativeAppInstallAd {
// An app install ad has loaded, and can be displayed.
}
- (void)adLoader:(GADAdLoader *)adLoader
didReceiveNativeContentAd:(GADNativeContentAd *)nativeContentAd {
// A content ad has loaded, and can be displayed.
}
- (void)adLoaderDidFinishLoading:(GADAdLoader *) adLoader {
// The adLoader has finished loading ads, and a new request can be sent.
}
@end

Swift 4 :

class ViewController: UIViewController, GADNativeAppInstallAdLoaderDelegate,
GADNativeContentAdLoaderDelegate {
var adLoader: GADAdLoader! override func viewDidLoad() {
super.viewDidLoad()
let multipleAdsOptions = GADMultipleAdsAdLoaderOptions()
multipleAdsOptions.numberOfAds = 5
adLoader = GADAdLoader(adUnitID: YOUR_AD_UNIT_ID, rootViewController: self,
adTypes: [GADAdLoaderAdType.nativeContent,
GADAdLoaderAdType.nativeAppInstall],
options: [multipleAdsOptions])
adLoader.delegate = self
adLoader.load(GADRequest())
}
func adLoader(_ adLoader: GADAdLoader,
didReceive nativeAppInstallAd: GADNativeAppInstallAd) {
// An app install ad has loaded, and can be displayed.
}
func adLoader(_ adLoader: GADAdLoader,
didReceive nativeContentAd: GADNativeContentAd) {
// A content ad has loaded, and can be displayed.
}
func adLoaderDidFinishLoading(_ adLoader: GADAdLoader) {
// The adLoader has finished loading ads, and a new request can be sent.
}
}

Note : Maximum no of ads limit is 5 and by default is 1

Note : Always test with test ads and the easiest way to load test ads use dedicated test IDs for native advanced ads

ca-app-pub-3940256099942544/3986624511

The Ad view Classes :

for each ads format there is a corresponding “ad view” class GADNativaAppInstallAdView

for app install view and GADNativeContentAdView for content ads.

Ad view class also provide IBOutlet used to registered the view used for each individual assets, and a method to registered GADNativeAd object itself.Register a view allow SDK to automatically handle the following task

  1. Recording clicks
  2. Recording impression
  3. Display AdChoice overlay

AdChoice Overlay : adChoice overlay is added to a view by SDK. Leave space in native ad view for automatically inserted adChoice logo.

Ad Attribution : display an ad attribution to denote that the view is an advertisement.

Layout UIView in xib file:

First step to layout the UIView of displaying the Native Ads.

Example for native install ads

link the UIElement to the IBOutlets as below

Display native advanced ads :

Objective C :

#import "ViewController.h"// Native Advanced ad unit ID for testing.static NSString *const TestAdUnit = @"ca-app-pub-3940256099942544/3986624511";@interface ViewController () <GADNativeAppInstallAdLoaderDelegate, GADNativeContentAdLoaderDelegate>/// You must keep a strong reference to the GADAdLoader during the ad loading
/// process.
@property(nonatomic, strong) GADAdLoader *adLoader;
/// The native ad view that is being presented.
@property(nonatomic, strong) GADUnifiedNativeAdView *nativeAdView;
@end
#pragma mark GADNativeAppInstallAdLoaderDelegate implementation- (void)adLoader:(GADAdLoader *)adLoader
didReceiveNativeAppInstallAd:(GADNativeAppInstallAd *)nativeAppInstallAd {
// Create and place ad in view hierarchy.
GADNativeAppInstallAdView *appInstallAdView =
[[[NSBundle mainBundle] loadNibNamed:@"NativeAppInstallAdView"
owner:nil
options:nil] firstObject];
// TODO: Make sure to add the GADNativeAppInstallAdView to the view hierarchy.
// Associate the app install ad view with the app install ad object. This is required to make the
// ad clickable.
appInstallAdView.nativeAppInstallAd = nativeAppInstallAd;
// Populate the app install ad view with the app install ad assets.
// Some assets are guaranteed to be present in every app install ad.
((UILabel *)appInstallAdView.headlineView).text = nativeAppInstallAd.headline;
((UIImageView *)appInstallAdView.iconView).image = nativeAppInstallAd.icon.image;
((UILabel *)appInstallAdView.bodyView).text = nativeAppInstallAd.body;
((UIImageView *)appInstallAdView.imageView).image =
((GADNativeAdImage *)[nativeAppInstallAd.images firstObject]).image;
[((UIButton *)appInstallAdView.callToActionView)setTitle:nativeAppInstallAd.callToAction
forState:UIControlStateNormal];
// Other assets are not, however, and should be checked first.
if (nativeAppInstallAd.starRating) {
((UIImageView *)appInstallAdView.starRatingView).image =
[self imageForStars:nativeAppInstallAd.starRating];
appInstallAdView.starRatingView.hidden = NO;
} else {
appInstallAdView.starRatingView.hidden = YES;
}
if (nativeAppInstallAd.store) {
((UILabel *)appInstallAdView.storeView).text = nativeAppInstallAd.store;
appInstallAdView.storeView.hidden = NO;
} else {
appInstallAdView.storeView.hidden = YES;
}
if (nativeAppInstallAd.price) {
((UILabel *)appInstallAdView.priceView).text = nativeAppInstallAd.price;
appInstallAdView.priceView.hidden = NO;
} else {
appInstallAdView.priceView.hidden = YES;
}
// by default userInteractionEnabled set to YES
// for custom use set the property userInteractionEnabled to NO.
appInstallAdView.callToActionView.userInteractionEnabled = NO;
}

Swift 4 :

// Mark: - GADNativeAppInstallAdLoaderDelegatefunc adLoader(_ adLoader: GADAdLoader,
didReceive nativeAppInstallAd: GADNativeAppInstallAd) {
// Create and place the ad in the view hierarchy.
let appInstallAdView = Bundle.main.loadNibNamed("NativeAppInstallAdView", owner: nil,
options: nil)?.first as! GADNativeAppInstallAdView
// TODO: Make sure to add the GADNativeAppInstallAdView to the view hierarchy.
// Associate the app install ad view with the app install ad object. This is required to make
// the ad clickable.
appInstallAdView.nativeAppInstallAd = nativeAppInstallAd
// Populate the app install ad view with the app install ad assets.
// Some assets are guaranteed to be present in every app install ad.
(appInstallAdView.headlineView as! UILabel).text = nativeAppInstallAd.headline
(appInstallAdView.iconView as! UIImageView).image = nativeAppInstallAd.icon?.image
(appInstallAdView.bodyView as! UILabel).text = nativeAppInstallAd.body
(appInstallAdView.imageView as! UIImageView).image =
(nativeAppInstallAd.images?.first as! GADNativeAdImage).image
(appInstallAdView.callToActionView as! UIButton).setTitle(
nativeAppInstallAd.callToAction, for: UIControlState.normal)
// Other assets are not, however, and should be checked first.
let starRatingView = appInstallAdView.starRatingView
if let starRating = nativeAppInstallAd.starRating {
(starRatingView as! UIImageView).image = imageOfStarsFromStarRating(starRating)
starRatingView?.isHidden = false
} else {
starRatingView?.isHidden = true
}
let storeView = appInstallAdView.storeView
if let store = nativeAppInstallAd.store {
(storeView as! UILabel).text = store
storeView?.isHidden = false
} else {
storeView?.isHidden = true
}
let priceView = appInstallAdView.priceView
if let price = nativeAppInstallAd.price {
(priceView as! UILabel).text = price
priceView?.isHidden = false
} else {
priceView?.isHidden = true
}
// userInteractionEnabled set to true by default
// for customs user set userInteractionEnabled to false.
(appInstallAdView.callToActionView as! UIButton).isUserInteractionEnabled = false
}

Handled a Failed native ads request :

Objective C:

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

Swift 4 :

public func adLoader(_ adLoader: GADAdLoader,
didReceive nativeContentAd: GADNativeContentAd){
print("%@ failed with error: %@", adLoader, error)
}

If you liked this article, please following me on Medium. When I have something new and awesome to share. It’s the best way to find out when I write more articles like this.

iOSBlogger : https://zenshubham.blogspot.com/2018/03/native-advanced-ads-in-ios-mobile.html

Thanks

--

--