iAds Tutorial

Juan Gabriel Monetización, Publicidad , ,
0
iads-integration

Ahora que has pasado un tiempo valioso creando tu app, es hora de monetizarla de alguna modo, verdad? Apple tiene una plataforma de publicidad, llamada iAd, que permite a los desarrolladores y publishers de apps añadir sus banners y interstitials (son como banners pero a pantalla completa) a sus productos.

Aquí tienes la página con la documentación de Apple acerca de los iAds.

La verdad es que añadir un banner a la app es un proceso muy sencillo. Aún no he probado añadir un interstitial, por eso no estoy seguro de si es tan sencillo como el caso del banner, y no lo explicaré en este tutorial. Lo que si veremos es como añadir un banner en la app en unos pocos pasos, así que ¡vamos a por ello!


Contenidos del Artículo

  1. Registrar tu cuenta para utilizar iAd
  2. La red de iAds en un vistazo
  3. Integrar iAds en tu app
  4. Envío de la app
  5. Conclusión y Código Fuente

1. Registrar tu cuenta para utilizar iAd

En primer lugar, para poder utilizar iAds en tu app, tendrás que pagar la cuota de 80 € anuales y unirte al Programa de Desarrollo para iOS de Apple. De todas formas tranquilo, si quieres publicar tus apps en la App Store, necesitas unirte de todos modos.

Una vez te hayas unido, puedes entrar en el portal de iTunes Connect donde está tu cuenta, y lo primero que debes hacer es firmar y configurar los Acuerdos, Impuestos y Banca.

itunes_connect

En la siguiente pantalla, solicita el de la red de anuncios de iAd (iAd Ad Network).
itunes_connect_request_iad_contract

Después de pulsar el botón de Request, se te pedirá añadir una nueva entidad legal (la persona que tiene autoridad para firmar y aceptar los acuerdos) y finalmente te pedirán que revises el acuerdo. Una vez aceptado, vuelve atrás a la pantalla de Acuerdos, donde verás los acuerdos pendientes de iAd, con tres o más opciones que debes configurar.

pending_iad_contract

Revisa todos estos botones y configura tu Información de Contacto, Información Bancaria e Información Fiscal. Se te guiará a través de varias pantallas de aceptación de acuerdos por el propio sistema

Después de esto, simplemente espera!

2. La red de iAds en un vistazo

Solo para que lo tengas de referencia, este es el  Manual de Configuración de iAds de Apple donde se detalla toda la implementación que llevaremos a cabo juntos.

Si consultas el link anterior, Apple destaca algunos puntos importantes del programa de iAds y las llamadas best practices de su uso, que detallamos aquí para tu mejor localización de las mismas:

Para utilizar iAds en tu app, debes unirte al programa de iAds

En efecto, esto es lo que acabamos de hacer en el punto 1.

Los Banners ocupan una porción de la pantalla para mostrar anuncios

El primer modo de integrar iAd es utilizando anuncios de tipo banner. Se suelen mostrar en la parte inferior o superior de la pantalla ocupando una pequeña parte de la misma.
En su integración, ya que estamos animaremos el banner en la vista una vez que el anuncio haya sido descargado. Si no se puede descargar (si no ha conexión a internet por ejemplo) o no hay anuncios disponibles, lo dejaremos fuera de la vista para no molestar innecesariamente al usuario.

Los interstitials sirven anuncios a pantalla completa a apps para iPad

El segundo método para integrar apps es con anuncios a pantalla completa o interstitials. Por ejemplo, si tienes un juego puedes mostrar una pantalla de un nivel, si tienes una revista una página de la misma,… En nuestro caso no cubriremos los interstitials en este tutorial.

Pausa actividades que no sean esenciales cuando los usuarios interactúen con los anuncios

Una vez que el usuario pulse en un anuncio, se lanzará una pantalla completa con más información acerca del anuncio que influirá en la experiencia de usuario. Esto implica que cualquier interactuación con la app será imposible, y que se deberá pausar la ejecución normal de la app cuando esto ocurra.

Cancela anuncios que impacten negativamente a tu App

Puedes programar la cancelación de la interactuación con los anuncios y forzar al usuario a que vuelva la app si necesitas que en ese momento el usuario esté pendiente de la misma. ¡Ten cuidado! Apple recomienda hacerlo solamente si es necesario pues puede afectar negativamente a tus fill rates.

Fill rate es el termino para designar qué porcentaje de los iAds devuelven correctamente un anuncio para mostrar a la app cada vez que esta solicita uno. Habrá veces que la app hace una petición para mostrar un anuncio pero el servicio de Apple no devolverá nada dependiendo de algunso factores como el inventario de anuncios o la conexión a internet.

Validar que los iAds se han integrado correctamente antes de enviar tu App a revisión

Cuando hayas integrado los iAd y ejecutes tu app en un dispositivo físico real appear probar, verás anuncios de prueba mostrandose en el lugar reservado para tu banner y tus anuncios a pantalla completa. Si salen, puedes estar seguro de que siguen las Human Interface Guidelines for iAd de Apple.

3. Integrar iAds en tu app

Este tutorial te mostrará como añadir un banner en la parte inferior de tu app. Empezaremos creando un proyecto de ejemplo en el que incluiremos el banner. Abre para ello Xcode y crea un nuevo proyecto. Selecciona para ello  Single View Application.

project-creation
No importa demasiado es como rellenes el nombre o los identificadores del proyecto. Es solo una demo,

project-setup

Vamos a ver los pasos que vamos a seguir para no perdernos:
3.1 – Añadir el framework de iAd al proyecto de Xcode
3.2 – Crear, inicializar y añadir nuestra AdBannerView al View Controller del proyecto.
3.3 – Animar el banner en la vista cuando reciba de forma satisfactoria un anuncio del servicio de Apple.
3.4 – Cubrir el caso en que la app no sea capaz de recibir anuncios y ocultar el banner.

3.1 – Añadir el framework de iAd al proyecto de Xcode

Ves a tu Project settings en la sección General:
project-settings
A continuación ves bajando hasta una sección llamada Linked Frameworks and Libraries. Haz click en el botón de + y busca el framework iAd.

add_frameworkadding_iad_framework_to_xcode

 

Muy bien! Ya has añadido el the iAd framework a tu proyecto y está configurado para empezar a utilizar las clases de iAd!

3.2 – Crear, inicializar y añadir nuestra AdBannerView al View Controller del proyecto.

Ves a tu ViewController.m y dentro del método viewDidLoad añade este fragmento de código:

Las lineas a destacar son:

  • Línea 2: Importamos el iAd framework antes de utilizar alguna de sus clases!
  • Línea 16-22: Sobrescribimos el método viewDidAppear, creamos un nuevo objeto AdBannerView y le asignamos un tamaño y posición en pantalla. Finalmente lo añadimos a la vista.

Si ahora ejecutamos la app, veremos el banner en la parte inferior de la pantalla. Punto para nosotros!

iad_banner_ios_simulator

3.3 – Animar el banner en la vista cuando reciba de forma satisfactoria un anuncio del servicio de Apple.

Para animar el banner en pantalla, primero tenemos que sacarlo de la vista!

Para ello, vamos a hacer que nuestro ViewController implemente el protocolo de delegación AdBannerDelegate para que nuestro ViewController pueda ser notificado cuando un banner recibe un anuncio para mostrar. Solamente entonces lo mostraremos en la vista. Si no sabemos cuando hemos recibido un anuncio, no sabemos cuando animar el banner y mostrarlo en pantalla!

Vamos entonces a la cabecera ViewController.h, importamos framework y añadimos el protocolo del siguiente modo:

Nos movemos al ViewController.m y lo modificamos ligeramente:

Destacar los siguientes cambios that these changes:

  • Línea 2: Eliminamos el import del iAd framework porque la cabecera .h ya lo está importando.
  • Línea 4-7: Hemos creado unas cuantas variables de instancia para poder tener control del banner y su estado de visibilidad
  • Línea 18-24: Creamos el objeto banner y le asignamos su estado. También destacar que la coordenada y del banner es negativa, lo cual indica que se encuentra fuera de la parte inferior de la pantalla. Finalmente, nos asignamos el delegado del banner haciendo uso de la palabra reservada self a nosotros mismos, a nuestro ViewController.

Si bajamos un poco más en el mismo archivo, ya podemos implementer el método del delegado del banner que nos avisará cuando el anuncio se haya descargado satisfactoriamente.

  • Línea 1: Implementamos el método del delegado llamado bannerViewDidLoadAd. Este método será llamado cuando el banner cargue un anuncio satisfactoriamente. Sin embargo, si no has configurado el ViewController como el delegado de nuestro banner este método no se llamará, así que revisa bien que hayas completado satisfactoriamente el paso anterior, donde configuramos el delegado del banner.
  • Línea 3: Aquí es donde comprobamos si el banner está ya visible antes de hacer nada. Esto lo hacemos así porque el método puede ser llamado varias veces de forma periódica, cada vez que se reciba un nuevo anuncio y se refresque periódicamente. Nosotros solo necesitamos añadirlo en pantalla una vez.
  • Líneas 5-9: Aquí es donde añadimos el objeto banner a la vista, ya que no lo hacemos en el viewDidAppear como hasta ahora.
  • Líneas 13-16: Aquí animamos el banner para aparecer desde la parte inferior de la pantalla. Recuerda que inicialmente estaba en el extremo inferior de la pantalla. Ahora solo necesitamos cambiarle la coordenada y para que suba de nuevo a la vista.
  • Línea 18: Finalmente cambiamos el valor del BOOL de modo que, si este método se vuelve a llamar, el banner no vuelva a animarse desde fuera hasta dentro de la pantalla.
  • Líneas 22-25: Aquí es donde manejamos la situación en que la app falla al recibir un anuncio. Más en la próxima sección.
Durante tu fase de testing, la red de iAds fallará intencionadamente al recibir anuncios algunos casos. De este modo podrás probar tanto el caso en que el anuncio se recupera correctamente como incorrectamente. No te asustes si ves que en algun caso la app no muestra el banner. Cierra el simulador y arranca la app de nuevo hasta que vuelvas a tener anuncios en tu app.

iad_failed_retrieval_attempt

3.4 – Cubrir el caso en que la app no sea capaz de recibir anuncios y ocultar el banner.

Cubramos finalmente el último caso antes citado implementando el método del delegado que se llama cuando el banner no es capaz de mostrar ningún anuncio.

  • Línea 5: Comprobamos si el banner está visible. Si no lo está, no hay que animarlo fuera de la pantalla!
  • Línea 7-12: En el caso en que sea visible, lo animamos deslizándolo hasta la parte inferior de la pantalla.
  • Línea 14: Finalmente, configuramos el flag a NO de modo que si el banner en un futuro llega a recibir anuncios, el método que hemos programado antes vuelva a hacer la animación de mostrarlo en pantalla de nuevo

Finalmente, ejecuta la app una última vez y verás como el banner se muestra animado en la pantalla cuando se recibe un anuncio. Si se refresca o algo falla en el siguiente anuncio, verás como desaparece de la vista de usuario.

4. Envío de la app

Bien, ahora que tu app muestra banners con iAds, que nos falta para configurar anuncios en la app una vez que hagamos el envío a la App Store?

Pues nada de nada!

Antiguamente, se tenía que configurar la app en iTunes Connect para que mostrara anuncios, pero ya no se hace así!

itunes_connect_iad_update-2

Ahora ya no hay que hacer nada de nada. Según esta guía de Apple:

Después de que tu app sea aprobada y lista para su distribución, Apple revisa si es adecuada para recibir iAds de los anunciantes. Cuando tu app se apruebe para recibir iAds, empezaras a ver impresiones de anuncios en un par de días.

Ojo! Si deseas parar de mostrar anuncios, deberás subir un nuevo binario a la App Store sin el Framework de iAds, no se puede cambiar en caliente.

5. Conclusión y Código Fuente

Código fuente
Descárgate el código fuente para probar los iAds de Apple. Simplemente tendrás a tu disposición un proyecto vacío con los iAds ya integrados, listo para ser usado!

En este tutorial, has podido comprobar de primera mano lo fácil que es integrar un banner con iAd en tu app. iAd es una buena forma de monetizar a los usuarios de tu app y ser recompensado por el valor que tus usuarios están recibiendo en tu producto.

Muchas gracias por leernos y espero que te haya resultado útil! Si es así, no te olvides de compartirlo con tus amigos y colegas. Gracias de antemano y nos vemos en la próxima!

Nuevo contenido cada semana

Cada semana publicaremos uno o dos tutoriales para complementar los contenidos del Curso de Desarrollo de Apps para iOS 9 en Objective-C para ayudarte en tu aprendizaje. Poco a poco aprenderás a utilizar todas las funcionalidades de los dispositivos iOS, conectar con un servidor o incluso publicar tu idea real en el App Store

Accede al curso completo para

  • Aprende programación para iOS desde cero
  • Construye tu primera app para iPhone paso a paso
  • Descarga el código fuente para consultarlo en cualquier momento
  • Nuevo contenido adicional cada semana

¡Oferta limitada! ¡Consigue hasta un 75% de descuento!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Preparado para llevar tus habilidades de programación más allá?

Sí, ¡quiero unirme!