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.
In order to build a quality product, developers should follow Facebook 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.
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:
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 Facebook Audience Network Policy: