AdMob con Firebase: Come includere la pubblicità nelle app iOS

AdMob è una compagnia di advertising, di proprietà di Google, dedicata alle piattaforme mobili.  Ad oggi è la più grande piattaforma di advertising mobile del mondo, e pubblica contenuti su qualsiasi tipo di dispositivo e piattaforma: iOS, Android, Windows Phone, Flash Lite, webOS, Unity, oltre che a, ovviamente, tutti i principali browser per siti web su piattaforma mobile.

Oggigiorno AdMob è la fortuna dei developer per piattaforma mobile: le app a pagamento non rendono come ci si aspettava fino a qualche anno fa, e la carretta la tirano le pubblicità. App gratuite con banner pubblicitari, sono diventate nel tempo la principale “forma” di pubblicazione di app, e rendono sostenibile il mondo dei developer.

PERCHE’ ADMOB

La prima domanda che mi sono fatto, quando ho approcciato per la prima volta al mondo delle pubblicità per le app, è stata: perché AdMob?. Allora esisteva ancora iAd, la piattaforma pubblicitaria di Apple, e la scelta più ovvia pareva essere questa. Ma AdMob aveva già una marcia in più, ad oggi raggruppa 40 piattaforme pubblicitarie diverse. Sì, perché la forza di AdMob è nella enorme capacità di mediazione che nel tempo ha accumulato. Ha attratto pian piano tantissime piccole piattaforme rendendo superfluo per i dev dover interagire con ognuna.  Un unico mediatore con un’unica piattaforma, poche righe di codice, pagamenti sicuri, in costante crescita… AdMob è ormai il monopolista (di fatto) nel mondo dell’advertising mobile.

In questo tutorial vedremo rapidamente come pubblicare un semplice banner pubblicitario nella tua app. Vedrai che è tutto molto semplice e veloce: Google ha fatto veramente un ottimo lavoro.

GOOGLE FIREBASE

Con l’acquisizione di Firebase alla fine del 2014, Google ha pian piano concentrato le diverse piattaforme di servizi sotto un unico cappello, creando un servizio online veramente grandioso in grado di attrarre una marea di utenze. Abbiamo già visto che Firebase offre un Database Online gratuito (entro certi limiti) e il servizio di autenticazione. Ma Firebase offre molto di più: oltre ad AdMob, potrai accedere anche ad Analytics, Messaggistica Online, Hosting e Crash Reporting; ma queste elencate sono solo alcune delle funzionalità su cui potrai fare affidamento (vedi l’immagine sotto).

AdMob: Firebase Servizi

Ma adesso entriamo nel vivo e conosciamo meglio AdMob, in questo tutorial nello specifico utilizzeremo, per brevità solo i banner, ma sappiate che AdMob offre una vasta gamma di soluzioni per implementare pubblicità nelle tue app, ad esempio le interstiziali, video, video rewards, ecc, e sono tutte implementabili.

CREIAMO IL NOSTRO PROGETTO

In questo tutorial utilizzeremo il progetto Age Calc che ho già trattato in un precedente tutorial, e che trovi pubblicato su App Store. Non volermene, non è un’app fatta per vendere (prometto, la migliorerò appena possibile) ma per scopi didattici, graficamente lascia a desiderare.

Iniziamo con la creazione del nostro progetto su Firebase: clicca qui per accedere alla console e fai login (N.B., è richiesto un account Google, se non lo hai ancora creato provvedi a farlo qui).

AdMob: Firebase Console

Clicca su Crea Nuovo Progetto. Ti comparirà una finestra in cui inserire il nome del progetto e la nazione in cui sarà distribuito il progetto.

AdMob: nuovo progetto Firebase

Una volta completata la prima fase di creazione del progetto, sarai reindirizzato sulla schermata principale. Da qui clicca su iOS, e nella finestra successiva ti sarà richiesto di inserire i dati della tua app:

AdMob: progetto Firebase iOS

E’ una procedura guidata molto semplice: innanzitutto inserisci il Bundle ID della tua app (es. it.xCoding.AdMob) così come impostato su Xcode. Metti poi un nome per l’app iOS che stai creando sul progetto (non è necessariamente uguale a quella su Xcode). Infine, se la tua app è già pubblicata, puoi inserire l’id presente su App Store. Per ora puoi ignorarlo.

Nel passaggio successivo scaricerai un file chiamato GoogleService-Info.plist, già configurato per la tua app. Non dovrai fare nient’altro che trascinare questo file dentro il progetto in Xcode, e aggiungere i dovuti target. Se hai difficoltà con il concetto di target, prova a rileggere questo tutorial.

COCOAPODS: Installiamo l’SDK di AdMob

Cliccando su Successivo ti verrà proposta la procedura per installare l’SDK di AdMob. Google mette a disposizione i CocoaPods per un’installazione veloce e sicura. Come? Non conosci CocoaPods? Niente paura, fai una sosta qui e recupera.

Fatto? Bene, allora procediamo: chiudiamo il progetto su Xcode, apriamo il terminale, posizioniamoci sulla path del progetto, e inseriamo il comando:

A questo punto verrà creato il file podlist, da aprire con un text editor, e in cui inserire:

Salviamo e chiudiamo il file podlist e, tornati sul terminale, digitiamo:

Dopo qualche secondo di pazienza, questo è quello che ti dovrai aspettare su terminale.

AdMob: pod install terminale

Bene, da questo momento per aprire il tuo progetto dovrai utilizzare il file .wcworkspace, che contiene al suo interno i riferimenti ai pods. Apriamo il progetto, e torniamo sulla console Firebase.

Questo il codice da inserire per implementare Firebase sul tuo progetto Xcode: dentro il file AppDelegate inserisci in testa import Firebase, e a seguire dentro la func didFinishLaunchingWithOptions, inserisci il codice FIRApp.configure()

Fatta questa configurazione, Firebase è ora collegato alla tua app. A questo punto non ci resta altro da fare che inizializzare AdMob e creare il nostro banner.

ADMOB

A questo punto siamo nuovamente tornati sulla console principale, la tua applicazione Firebase è visibile in alto a sinistra, e se scorri i riquadri che trovi in basso, troverai anche AdMob (prenditi qualche minuto per scorrere gli altri servizi, ce ne sono tanti e sicuramente molto utili).

AdMob: Firebase console

Clicca su INIZIA, ti apparirà questa schermata:

AdMob: SDK AdMob

Abbiamo già integrato l’SDK di AdMob in precedenza, quando abbiamo lavorato al Pod, per cui adesso puoi cliccare direttamente su collega le tue applicazioni in AdMob. Verrai portato su questa pagina, la console di AdMob.

AdMob: Console AdMob

 

Clicca sulla voce MONETIZZA nel menù in alto, e nella schermata che comparirà premi il pulsante rosso, in alto a Sinistra, MONETIZZA UNA NUOVA APP

Puoi scegliere se monetizzare una app già pubblicata (ovviamente nell’eventualità dovremo intervenire anche sul codice, per cui sarà un’app da aggiornare), oppure nel nostro caso di un’app da pubblicare, seleziona AGGIUNGI LA TUA APP MANUALMENTE.

Inserisci il nome della tua app, scegli la piattaforma (ovviamente iOS) e clicca AGGIUNGI APP.

FORMATO ANNUNCI

Il prossimo passo consiste nello scegliere il formato degli annunci che vuoi pubblicare nella tua app. Ci sono quattro formati principali, ognuno di loro può essere poi personalizzato, io ti invito ad esplorarli un pò tutti, valutare le diverse personalizzazioni che ti consentono (puoi decidere veramente tante cose), e quindi scegliere; per seguire meglio questo tutorial abbiamo scelto il Banner con le impostazioni che vedi qui di seguito (vedi immagine sottostante), infine cliccare su SALVA.

AdMob: scelta formato annunci

Bene, la tua campagna è pronta, ti rimane ancora una scelta da fare: Firebase ti consente di collegare l’AdMob ad Analytics per ottenere un maggiore dettaglio sulla clusterizzazione dei tuoi utenti, e proporre loro dei contenuti più affini. Quello della clusterizzazione è un argomento enorme e molto affascinante, ma esula dal contesto del tutorial, per cui magari ne parleremo più avanti. Per ora accontentati di sapere che, maggiore è la precisione con cui AdMob sarà in grado di fornire contenuti interessanti per i tuoi utenti, maggiore è la probabilità che gli stessi clicchino sul banner. Tra poco approfondiremo…

Il consiglio è scontato, clicca su Connetti a Firebase, a questo punto inserisci il bundle id (questa volta fai molta attenzione, perché non puoi sbagliare. Il bundle id deve essere uguale a quello con cui pubblicherai la tua app su App Store, una volta che lo hai inserito qui non dovrai cambiarlo). Scegli il progetto a cui associare la tua campagna, infine clicca su Completato.

TORNIAMO A XCODE

Bene, il grosso è fatto. Ora possiamo finalmente tornare alla parte più divertente: il codice!

Andiamo sul ViewController dove vogliamo inserire il nostro banner pubblicitario.

Innanzitutto è necessario importare anche qui gli SDK che abbiamo installato con CocoaPods:

Creiamo in testa, dopo la dichiarazione di classe ViewController, due variabili:

La variabile kBannerAdUnitID contiene il codice univoco dell’id dell’unità pubblicitaria che hai creato su AdMob. Lo trovi sulla console di AdMob che abbiamo appena lasciato:

Selezionalo e copialo, per essere sicuro di non sbagliare. Se il codice è sbagliato, non avrai alcun banner alla pubblicazione della tua app… e dopo tanto sforzo, sarebbe un peccato, no?

La seconda variabile invece rappresenta l’oggetto GADBannerView, cioè “Google Ad Banner View”, il banner che presenterà la pubblicità. A questo punto crea una View in basso nello schermo, dagli i corretti constraints, subclassala come GADBannerView e collegala alla variabile con un semplice drop.

Fatto?

Resta da inserire una piccolissima funzione, che abbiamo chiamato loadAd:

Nel metodo ViewDidLoad() aggiungiamo la chiamata alla funzione:

Et voilà, il gioco è fatto. Facciamo un Build & Run e vediamo se tutto è andato a buon fine.

Perfetto. Ora la tua app ha finalmente un bel banner e può iniziare a farci guadagnare.

Tutto qui? Ni.

ALTRI FORMATI

E’ vero, abbiamo finalmente il nostro banner funzionante, ma abbiamo solo scalfito la superficie del mondo AdMob. Innanzitutto, come ci siamo detti, oltre al banner ci sono le Interstitial, i Video, e diversi altri formati di annunci. Le logiche non cambiano, gli SDK sono già installati, per esplorare questi formati è sufficiente implementare una nuova pubblicità sulla console di AdMob, e scrivere le relative linee di codice.

Questo è un esempio per le interstizial, ti ricordo che le interstizial sono quelle ads che compaiono dopo il caricamento di una View, come banner a schermata intera.

Ecco lo snippet di codice da inserire nella classe ViewController:

Oltre alle diverse tipologie di banner, ci sono diversi metodi per gestire il caricamento, la chiusura e gli errori dei banner. Quelli che seguono sono i principali indicati da AdMob.

Nella console di AdMob, inoltre, potrai ulteriormente: aggiungere piattaforme, tra le 40 gestite; vincolare differenti categorie (è possibile escludere o accettare, ad esempio, pubblicità relative a scommesse, siti di incontri, etc.)

CONCLUSIONI

Insomma, il servizio AdMob è veramente un servizio completo e funzionale: sta a te saperlo gestire.

Una raccomandazione importante, ricordati che la troppa pubblicità infastidisce e allontana gli utenti. Se ognuno di noi ormai è abituato al bannerino basso in quasi ogni app gratuita, come il giusto e necessario compromesso per non dover pagare le app che scarichiamo, devi fare attenzione a non esagerare. Se gli ads saranno troppi, i tuoi utenti potrebbero infastidirsi e disinstallare la tua app.

Devi sapere inoltre che quasi tutte le campagne pubblicitarie su AdMob sono pagate a click, per cui non ti serve a nulla infarcire di banner la tua app (a tal proposito, anche Apple mette pesanti vincoli, mai più di un banner per View) se non avrai la giusta utenza. E’ molto più importante indirizzare correttamente la pubblicità al giusto target di utenti. Se la tua app tratta un argomento specifico, come ad esempio argomenti sportivi, sarà il caso che cerchi di indirizzare le campagne pubblicitarie su AdMob per pubblicità di prodotti sportivi, piuttosto che per prodotti per animali, no?

 

  • Ciao Gianvittorio… seguo il tutorial alla lettera e mi si avvia senza problemi ma non visualizzo il banner…
    L’ID è corretto, un unico dubbio mi viene dalla View che inserisco…
    Nell’Identity Inspector inserisco nella classe la GADBannerView e la collego alla Outled banner ma non mi visualizza nulla… La View deve avere delle impostazioni da Xcode particolari?
    Grazie Luca

Start typing and press Enter to search

avaudio-player-swiftGrand Central Dispatch con il linguaggio Swift. Alla scoperta dei Thread e della concorrenza