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.

Please consult our native ads guide when designing native ads in your app.

Prerequisites

Ensure you have completed the Native 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:

Next Steps

More Resources

Getting Started Guide

Technical guide to get started with the Audience Network

API Reference

Facebook SDK for iOS Reference