() translation by (you can also view the original English article)
Anuncios de banners son una fuente importante de ingresos para muchos desarrolladores de aplicaciones. En éste tutorial aprenderás cómo añadir anuncios de AdMob a tu aplicación iOS, usando Swift 3 y Xcode 8.
Crea un Banner Unit ID
Lo primero que tienes que hacer para preparar tu aplicación iOS para mostrar anuncios de banner es crear su Unit ID (identificador) en el sitio web de AdMob. Si no tienes una cuenta de Google, te sugieron que te registres para una nueva-es gratis, y te da acceso a todos los servicios de Google.
Una vez que hayas ingresado a la página de inicio de AdMob, haz click en el botón rojo Monetizar una Aplicación Nueva.
Si tu aplicación no está aún en la iTunes App Store, tendrás que seleccionar Agregar Aplicación Manualmente. Luego escribe el nombre de tu aplicación, selecciona la Plataforma iOS, y haz click en el botón Continuar.
En la siguiente pantalla, verás tu identificador recientemente generado AdMob App ID debajo del ícono gris de Apple. Por favor nota que no es el mismo que el Unit ID que necesita ser pegado en tu proyecto Xcode. Llegaremos a Unit ID en un momento.
Haz click en Banner para seleccionar el formato del anuncio. Sugiero que dejes los parámetros de Tipo de Anuncio, Actualización Automática y Estilo del Anuncio de Texto con sus valores predeterminados. Si quieres personalizar el estilo del anuncio (Ad style), puedes hacer click en la casilla combo Estándar y seleccionar Personalizado. Para un banner personalizado, puedes personalizar el color del fondo, borde, título, texto y URL.
Finalmente, escribe un nombre en la casilla Nombre del bloque de anuncios. Ese no será el identificador de tu banner, sino sólo un nombre de referencia para tu Unit ID. Haz cick en Guardar para continuar al tercer paso.
El paso 3 es opcional y te permite vincular la aplicación de tu AdMob con Firebase para compartir tus datos desde la herramienta gratuita Firebase Analytics. Por ahora, sólo haz click en Omitir para continuar.
Finalmente, puedes descargar el más reciente archivo GoogleMobileAds.framework desde el servidor de Firebase. Éste cuarto paso también te mostrará el Nombre del bloque de anuncios que tendrás que pegar en el archivo principal .swift de tu proyecto Xcode, cuándo lo veamos más adelante.
Haz click en el enlace Descargar el SDK de Google Mobile Ads. Una nueva pestaña se abrirá en tu navegador, y podrás descargar el más reciente archivo zip del paquete oficial.
Regresa al sitio web de AdMob y haz click en Terminar. La siguiente pantalla te mostrará el Ad unit ID que acabas de crear, lista para ser copiada y pegada en tu archivo .swift en Xcode. Estoy asumiendo que ya has creado un nuevo proyecto Xcode o tienes el tuyo que quieres agregar anuncios de AdMob.
Implementa AdMob en tu proyecto Xcode
Extrae el archivo googlemobileadssdkios.zip que descargaste previamente del servidor de Firebase, abre su directorio, y copia únicamente GoogleMobileAds.framework.
Pégalo en el directorio de tu proyecto.
Ahora ingresa a tu proyecto Xcode y ve a la pestaña General, desplázate hacia abajo hasta la sección Linked Frameworks and Library, y arrastra el archivo GoogleMobileAds.framework sobre ella.
Puedes tener que agregar Frameworks iOS adicionales a tu proyecto Xcode para que AdMob reciba y muestre banners en tu aplicación.
Haz click en el signo + en la parte inferior e importa los siguientes frameworks uno por uno:
- EventKit
- EventKitUI
- AVFoundation
- AdSupport
- AudioToolbox
- AVFoundation
- CoreGraphics
- CoreTelephony
- CoreMedia
- MessageUI
- StoreKit
- SystemConfiguration
Lo importante para hacer es cambiar a la pestaña Build Settings y buscar bitcode. Xcode mostrará la opción Enable Bitcode, y tendrás que establecerla en No.
¡Ahora estás listo para escribir algo de código para hacer que se muestren los anuncios de AdMob en tu aplicación!
El Código
Con base en cómo es creada tu aplicación, querrás que los anuncios de AdMob aparezcan en tus view controllers (controladores de vista). Así que necesitas ingresar el archivo .swift del controlador en el que quieres que se muestren los anuncios e importar los siguientes frameworks en la parte superior del archivo:
1 |
import GoogleMobileAds |
2 |
import AudioToolbox |
Adopta el protocolo GADBannerViewDelegate al agregarlo al final de la declaración de tu clase:
1 |
class ViewController: UIViewController, |
2 |
GADBannerViewDelegate
|
3 |
{
|
Agrega la vista del banner de AdMob arriba de método viewDidLoad() en tu clase:
1 |
// Ad banner and interstitial views
|
2 |
var adMobBannerView = GADBannerView() |
La siguiente línea de código es un simple string que llama al Ad unit ID que creaste previamente:
1 |
// IMPORTANT: REPLACE THE RED STRING BELOW WITH THE AD UNIT ID YOU'VE GOT BY REGISTERING YOUR APP IN https://apps.admob.com
|
2 |
let ADMOB_BANNER_UNIT_ID = "ca-app-pub-9733347540588953/7805958028" |
3 |
Aquí tendrás que reemplazar ca-app-pub-9733347540588953/6145924825 con el unit ID de tu propio banner, así que regresa a tu página Ad Units de AdMob en tu navegador para copiar ese string y pegarlo en el código de arriba.
Ahora agrega las funciones de abajo dentro de tu método viewDidLoad():
1 |
override func viewDidLoad() { |
2 |
super.viewDidLoad() |
3 |
|
4 |
// Init AdMob banner
|
5 |
initAdMobBanner() |
6 |
}
|
Finalmente, pega la siguiente declaración de método dónde quieras en tu archivo .swift (antes de la llave de cierre de la clase y no en un método existente):
1 |
// MARK: - ADMOB BANNER
|
2 |
func initAdMobBanner() { |
3 |
|
4 |
if UIDevice.current.userInterfaceIdiom == .phone { |
5 |
// iPhone
|
6 |
adMobBannerView.adSize = GADAdSizeFromCGSize(CGSize(width: 320, height: 50)) |
7 |
adMobBannerView.frame = CGRect(x: 0, y: view.frame.size.height, width: 320, height: 50) |
8 |
} else { |
9 |
// iPad
|
10 |
adMobBannerView.adSize = GADAdSizeFromCGSize(CGSize(width: 468, height: 60)) |
11 |
adMobBannerView.frame = CGRect(x: 0, y: view.frame.size.height, width: 468, height: 60) |
12 |
}
|
13 |
|
14 |
adMobBannerView.adUnitID = ADMOB_BANNER_UNIT_ID |
15 |
adMobBannerView.rootViewController = self |
16 |
adMobBannerView.delegate = self |
17 |
view.addSubview(adMobBannerView) |
18 |
|
19 |
let request = GADRequest() |
20 |
adMobBannerView.load(request) |
21 |
}
|
22 |
|
23 |
|
24 |
// Hide the banner
|
25 |
func hideBanner(_ banner: UIView) { |
26 |
UIView.beginAnimations("hideBanner", context: nil) |
27 |
banner.frame = CGRect(x: view.frame.size.width/2 - banner.frame.size.width/2, y: view.frame.size.height - banner.frame.size.height, width: banner.frame.size.width, height: banner.frame.size.height) |
28 |
UIView.commitAnimations() |
29 |
banner.isHidden = true |
30 |
}
|
31 |
|
32 |
// Show the banner
|
33 |
func showBanner(_ banner: UIView) { |
34 |
UIView.beginAnimations("showBanner", context: nil) |
35 |
banner.frame = CGRect(x: view.frame.size.width/2 - banner.frame.size.width/2, y: view.frame.size.height - banner.frame.size.height, width: banner.frame.size.width, height: banner.frame.size.height) |
36 |
UIView.commitAnimations() |
37 |
banner.isHidden = false |
38 |
}
|
39 |
|
40 |
// AdMob banner available
|
41 |
func adViewDidReceiveAd(_ view: GADBannerView!) { |
42 |
showBanner(adMobBannerView) |
43 |
}
|
44 |
|
45 |
// NO AdMob banner available
|
46 |
func adView(_ view: GADBannerView!, didFailToReceiveAdWithError error: GADRequestError!) { |
47 |
hideBanner(adMobBannerView) |
48 |
}
|
Por favor nota que los banners de AdMob tienen diferentes tamaños basados en el dispositivo usado, así que las primeras líneas de código en func initAdMobBanner() establecen el tamaño de los banners para iPhone/iPod Touch y iPad.
Si eres curioso de los tamaños de banners disponibles para anuncios de AdMob, puedes consultar la documentación de AdMob. De cualquier forma, los mejores tamaños de banners para los dispositivos iPhone y iPad son los que hemos definido en el código de arriba:
- 320 x 50 para iPhones
- 468 x 60 para iPads
Plantilla de CodeCanyon
En CodeCanyon, vendo una plantilla para aplicación iOS que viene con banners de AdMob integrados, y también tiene soporte para anuncios intersticiales. Así que, si quieres acelerar tu desarrollo, puedes comprar esa plantilla e iniciar tu aplicación.
Encuéntrala aquí: iOS AdMob Banner + Interstital Ads Template | Universal (Swift).
Hay cientos de otras plantillas para aplicaciones iOS en CodeCanyon. ¡Consúltalas! Podrías ahorrar horas de trabajo en tu próxima aplicación.
Conclusión
¡Gracias por leer, y nos vemos la próxima vez! Por favor consulta algunos de nuestros otros cursos y tutoriales sobre el desarrollo de aplicaciones iOS con Swift.
