Guía de diseño de anuncios de Audience Network para iOS

Cuando un anuncio es visible en pantalla, la experiencia del usuario no es óptima si se oculta una parte del anuncio con barras de navegación, barras de pestañas, barras de herramientas y otras vistas anteriores. En el ejemplo de la izquierda se muestra un anuncio en la parte superior de la pantalla del iPhone X parcialmente cubierto por arriba. En el ejemplo de la derecha se muestra un diseño mejorado con el espacio correcto entre el borde superior de la pantalla del iPhone X y la vista del anuncio.

En iOS 11 y versiones posteriores, se ha introducido una nueva guía de diseño llamada Guía de diseño de área segura, que se usa para definir una región segura para dibujar el contenido de la aplicación, incluido el anuncio que quieres mostrar en pantalla. En el ejemplo anterior, el recuadro verde define la región segura. Con esta nueva guía de diseño, te orientaremos en la implementación técnica de la representación de un anuncio nativo en la aplicación. Puedes aplicar el mismo método para representar banners publicitarios.

Requisitos previos

Asegúrate de haber completado el ejemplo de anuncio nativo, banner publicitario nativo o banner publicitario.

iOS 11 o posterior: Guía de diseño de área segura

Versiones anteriores de iOS: Guía de diseño superior e inferior

iOS 11 o posterior: Guía de diseño de área segura

1. Si la aplicación utiliza Interface Builder con Xcode 9 o una versión posterior y está concebida para iOS 11 o posterior, debes habilitar las guías de diseño de área segura. Abre Interface Builder y haz clic en View Controller Scene. Verás las opciones del documento de Interface Builder a la derecha. Consulta Usar guías de diseño de área segura.
   
   
2. Selecciona la vista de interfaz de usuario del anuncio de View Controller Scene y ve al inspector de tamaño. Añade espacios a la izquierda, a la derecha, arriba o abajo en el diseño de seguridad y asigna valores de espaciado óptimos como los que se muestran a continuación:
   
   
3. Compila y ejecuta la aplicación, y verás el anuncio en pantalla con un espacio óptimo entre la esquina redondeada, los sensores y la barra de estado de la pantalla.
   
   

Versiones anteriores de iOS: Guía de diseño superior e inferior

1. Para versiones de iOS anteriores a iOS 11, usa la guía de diseño superior e inferior para corregir el problema del área segura. Asegúrate de que se incluyan guías de diseño superiores e inferiores en View Controller Scene como las que se muestran a continuación:
   
   
2. Selecciona la vista de interfaz de usuario del anuncio de View Controller Scene y ve al inspector de tamaño. Añade espacios arriba y abajo entre el diseño superior e inferior, y asigna valores de espaciado óptimos, como los que se muestran a continuación:
   
   

Cumplimiento de políticas de anuncios nativos

Para crear un producto de calidad, los desarrolladores deben seguir la política de Meta Audience Network a la hora de implementar el diseño del anuncio nativo o del banner publicitario nativo. Siempre debes dar a los usuarios control total al hacer clic. En concreto, en el caso de los elementos del anuncio en los que se puede hacer clic, debes asegurarte de que solo se pueda hacer clic en títulos de anuncio, URL, llamadas a la acción y activos de imagen. Además, no se debe poder hacer clic en el espacio en blanco del texto del título ni las vistas de imagen.

Ejemplo incorrecto de elementos en los que se puede hacer clic

Al compilar el diseño para un anuncio nativo o banner publicitario nativo, no debes utilizar un valor fijo de anchura y altura para UILabel a fin de evitar white space en el título, el cuerpo, el contexto social y la etiqueta de publicidad del anuncio. A continuación se incluye un ejemplo incorrecto que no debes llevar nunca a la práctica:

Ejemplo correcto de elementos en los que se puede hacer clic

Para compilar un anuncio nativo de calidad, genera un diseño de restricción dinámico para un anuncio nativo o banner publicitario nativo. Por ejemplo, si utilizas el diseño automático de Storyboard, podrías utilizar Trailing Space >= x en lugar de Trailing Space = x, o Width <= y en lugar de Width = y. A continuación puedes ver cómo debería quedar el diseño si sigues la política de Meta Audience Network: