Tutorial 35 - Inserire banner pubblicitari in App Inventor (Parte 1)

Bene! finalmente ci siamo! me lo avete chiesto veramente in tanti...

E' possibile inserire banner pubblicitari nelle nostre app realizzate con MIT App Inventor????

La risposta è SI (ma con qualche limitazione come vedremo dopo) ...!!!!!

In questo lungo tutorial vedremo come fare; ho deciso di non farlo tramite video perché sarebbe stato troppo lungo, ma non temete, ho fatto talmente tanti screen-shot che se seguirete tutto passo passo potrete inserire i vostri banner preferiti con facilità!


Iniziamo subito a vedere cosa vi serve:

1) Ovviamente un app caricata o da caricare su Google Play 
(più installazioni attive avete maggiori saranno le possibilità di guadagno)
2) Uno spazio web vostro dove poter ospitare almeno un paio di pagine html
3) Essere iscritti ad un circuito di banner pubblicitari che consenta la pubblicazioni di annunci per siti mobile
(io vi consiglio MobFox che è quello su cui si basa il mio tutorial, per registrarvi a MobFox fate click qui, questo link ha un "referral code" quindi se vi iscrivete tramite esso indirettamente mi darete una mano... )
4)  Un pò di pazienza e buona volontà

Parte 1 - Registrazione e creazione di una nuova unità pubblicitaria  
Come da link precedente, andate su MobFox e se non siete iscritti eseguite la registrazione:

Noi vogliamo essere dei "mobile publishers" quindi quella è l'opzione da scegliere, compiliamo correttamente tutti i campi che ci vengono richiesti.
Per la modalità di pagamento io consiglio paypal, è la modalità più rapida per ricevere soldi e poi da Paypal li potete trasferire sul vostro conto bancario con una commissione di 1€ (o gratis per trasferimenti maggiori di 100€)
Altrimenti potete inserire i vostri dati bancari (IBAN/SWIFT-BIC,etc)

Ora dobbiamo creare il nostro primo sito dove vogliamo inserire i banner pubblicitari, vi spiego brevemente la difficoltà che si incontra usando App Inventor rispetto ad Eclipse ed Android SDK.

Tutti i circuiti pubblicitari (AdMob il più famoso, o questo MobFox o altri) hanno sempre quel che si chiama un SDK per inserire le pubblicità nelle proprie applicazioni.
Questo SDK va integrato nei nostri progetti Eclipse, l'SDK altro non è che una libreria creata ad hoc per la visualizzazione dei banner.
Il problema è che App Inventor per ora è un ambiente di sviluppo "chiuso" dove possiamo usare solo i blocchi di codice messi a disposizione dal MIT, quindi l'opzione di usare direttamente questi SDK ci viene negata a priori.
Esistono però alcuni circuiti (come MobFox ed una volta anche AdMob) che permettono anche la creazione di unità pubblicitarie per siti ottimizzati per cellulari, l'idea di base è quella di usare questo tipo di banner e di inserirlo tramite il componente webview nella nostra applicazione.
L'importante è non violare le regole di utilizzo (dette anche T&C) del nostro fornitore di pubblicità.
AdSense per esempio sarebbe perfetto ma vieta esplicitamente l'utilizzo dei loro banner all'interno delle WebView, AdMob fino a poco tempo fa permetteva questo tipo di utilizzo ma da quando è stato acquisito da AdSense ha aimè levato questa opzione. MobFox per ora funziona bene e permette la creazione di unità pubblicitarie per siti mobili quindi è quello che fa al caso nostro!
Attenzione a non cliccare MAI i propri banner o incitare amici a farlo, pena la cancellazione del proprio account e l'impossibilità di monetizzare il proprio lavoro PER SEMPRE!!!

Andiamo quindi su Sites & Apps per creare la nostra unità pubblicitaria:

Clicchiamo su "Create New Site/App":

Il type of ads sarà quindi "Mobile Website", inseriamo ora tutti i dettagli che ci vengono richiesti:

Inseriamo il nome in "Site Name", inserite magari il nome della vostra app, non ha realmente importanza, è solo per identificare questo tipo di inserzione pubblicitaria in MobFox.

Ora dobbiamo stare attenti ed effettuare il primo nostro "trucchetto", MobFox infatti vuole verificare di persona dove vogliamo mettere i nostri banner, non possiamo però dirgli che li vorremo usare all'interno di App Inventor ma dobbiamo fare finta (almeno per qualche giorno) che li inseriremo in un sito web ottimizzato per cellulari.
Quindi alla voce "Site URL" mettete l'indirizzo web di un sito che magari già avete o che creerete con qualunque strumento gratuito messo a disposizione dalla rete
Per esempio io uso AlterVista, registratevi e create un sito Web, potete metterci dentro qualunque cosa, un copia incolla di notizie dal web, una descrizione delle vostre passioni, più "realistico" è come sito maggiori saranno le possibilità di essere abilitati da MobFox in tempi brevi, per farvi un esempio io ho creato una versione mobile temporanea del mio blog semplicemente copiando tutto l'html di una pagina del blog e incollandola nella pagina di AlterVista.

Qui vedete come si vedeva la pagina che avevo realizzato per essere approvato alla pubblicazione di banner:

Nella "description" provate a mettere un paio di keyword su quello che tratta la vostra applicazione, non so se serva ma io ho fatto così...
A questo punto premiamo Continue:

e poi premiamo su Javascript
Quello che vedete in finestra è il codice per generare i banner che dovremo inserire attentamente nella nostra pagina web "temporanea", attenzione a mettere la parte segnata per la sezione HEAD appunto dentro i tag html HEAD (la prima riga in pratica) e tutto il resto invece nel BODY, e nella parte di pagina dove vogliamo far comparire il banner.
Purtroppo visualizzando la pagina per ora non si vedrà nessun banner, dobbiamo chiedere l'attivazione al team di MobFox, quando siamo sicuri di aver fatto tutto correttamente premiamo Request Activation:

come ci consigliano di fare , inseriamo anche le informazioni in "Enter Demographic Information" per migliorare il targeting dei nostri annunci...
Ora armiamoci di pazienza, almeno 48h dovranno passare affinchè il team possa vagliare la nostra richiesta e darci luce verde nel proseguire... :)
Di solito arriva una mail per darci conferma dell'avvenuta attivazione, incrociate le dita...

Come vedete la mia campagna "App Inventor Tutorials" è già stata approvata, quando sarà approvata anche la vostra continuate la lettura della Parte 2 di questa guida premendo QUA.