Audience Network Ad Layout Guide for iOS

When an ad is visible on screen, it is not an optimal user experience to keep the portion of the ad covered by navigation bars, tab bars, tool bars, and other ancestor views. The example below on the left shows an ad displayed at the top of the iPhone X's screen and partially covered by the top edge. The example on the right shows a better design with the right amount of space between the top edge of the iPhone X's screen and the ad view.

iOS 11 and above introduced a new layout guide called safeAreaLayoutGuide which will be used for defining a safe region to draw your app content including the ad you want to render on the screen. The safe region is defined by the green color boundary box in the example above. Using this new layout guide, let's walk through a technical implementation of rendering a native ad in your app. You can apply the same method for rendering banner ads.

Prerequisites

Ensure you have completed the Native Ad, Native Banner Ad,or Banner Ad example.

iOS 11+: Safe Area Layout Guide

Previous iOS Versions: Top and Bottom Layout Guide

iOS 11+: Safe Area Layout Guide

1. If your app uses Interface Builder with Xcode 9+ and targeting iOS 11+, you should enable Safe Area layout guides. Open your Interface Builder and click on your view controller scene. You will see the Interface Builder Document options on the right. Check Use Safe Area Layout Guides.
   
   
2. Select the Ad UI view from the View Controller Scene and browse to Size Inspector. Add left, right, top, bottom spacing between the safety layout and give an optimal spacing values show as the following:
   
   
3. Build and run your app, you will see the ad shown on screen that has optimal space between the rounded corner, sensors and status bar on the screen.
   
   

Previous iOS Versions: Top and Bottom Layout Guide

1. To support iOS versions before iOS 11, use top and bottom layout guide for addressing the safe area issue. Ensure top and bottom layout guides are included in the View Controller scene shown as the following:
   
   
2. Select the Ad UI view from the View Controller Scene and browse to Size Inspector. Add top and bottom spacing between the top and bottom layout and give an optimal spacing values show as the following:
   
   

Native Ad Policy Compliance

In order to build a quality product, developers should follow Meta Audience Network Policy whenever you implement the Native Ad or Native Banner Ad Layout. You should always give users full control on clicking. Especially for clickable elements on the ad, you should ensure only ad titles, URLs, Call-to-Action and image assets are clickable. Moreover, white space in the title text or image views must not be clickable.

Bad Example for Clickable Elements

Whenever you build your layout for native ad or native banner ad, you must not use fixed width and height for UILabel to avoid white space in ad title, ad body, ad social context, and ad sponsored label. Below is a bad example you should never do:

Good Example for Clickable Elements

To build a quality native ad, please build a dynamic constraint layout for native ad or native banner ad. For example, if you are using storyboard auto layout, you could use Trailing Space >= x instead of Trailing Space = x or Width <= y instead of Width = y. Below is how the layout should look like if you follow the Meta Audience Network Policy: