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

Continuiamo con la guida iniziata per l'inserimento di banner pubblicitari in App Inventor, se non avete ancora letto la prima parte fatelo cliccando QUA

Bene, a questo punto dovreste avere una campagna attiva e approvata su MobFox, dobbiamo tornare ora in AlterVista (o un altro spazio web che avete deciso di utilizzare) per creare la pagina web vera e propria che conterrà SOLAMENTE il nostro banner pubblicitario.

Decidete un nome per questa pagina e segnatevelo, supponiamo sia mobfoxexample.altervista.com/banner.html

Parte 2 - Creazione della pagina web dove inserire il banner pubblicitario

Il codice da inserire non è altro che il codice Javascript visto nella parte 1, io consiglio di inserire anche alcuni altri elementi HTML per migliorare il targeting degli annunci (non sono sicuro che serva ma non costa nulla metterceli...)
Vi riporto a titolo di esempio il mio codice per la mia app:

Fate attenzione ancora una volta al posizionamento del codice, la prima riga va nella parte HEAD il resto nella parte BODY
Io ho personalizzato anche il colore di fondo con il tag bgcolor per uniformarlo il più possibile al colore di sfondo che uso nella mia app (potete ometterlo se volete)

Dobbiamo ora testare che tutto sia a posto, e qui potremmo avere qualche difficoltà, ma non ci scoraggiamo.
Prendiamo il nostro amato smartphone ed apriamo il browser all'indirizzo dove è caricata la nostra pagina col banner, per tornare al nostro esempio sarà :

http://mobfoxexample.altervista.com/banner.html (ovviamente dovete cambiare l'indirizzo con quello che creerete voi)

se tutto va bene dovrete vedere una pagina del genere:

Ovvero il solo banner (e nel mio caso lo sfondo di colore grigio) e nient'altro.

E' possibile che inizialmente la pagina che visualizziate non contenga nulla, ciò può dipendere da vari motivi:

1) L'user agent del vostro telefono non è impostato su "mobile" - controllate il modo di visualizzazione della pagina, per esempio in Android 4.x non dovete richiedere la versione desktop del sito.
Potete provare ad aprire la stessa pagina con un browser alternativo, magari Opera o Chrome, l'imporante appunto è controllare che lo user Agent sia per dispositivi mobili, altrimenti nessun annuncio verrà visualizzato

2) Non ci sono annunci da visualizzare - può capitare che MobFox non abbia alcun annuncio disponibile da farvi vedere, ciò accade sopratutto appena vi siete iscritti a MobFox, fintanto che il sito non vede alcune richieste di ads (possibilmente in arrivo da indirizzi ip diversi)
Potete provare a vedere se cambia qualcosa utilizzando magari la connessione wifi di casa invece che la connessione 3G, oppure armarvi di pazienza e riprovare in orario diverso o all'indomani.
Se avete altri smartphone,tablet,amici con smartphone, fate provare a caricare anche a loro la stessa pagina
Provate anche a ricaricare un paio di volte la pagina, pulire la cache, i cookies, etc...
Non ricaricatela come dei forsennati, MobFox non gradisce che si "gonfino" le impression per nulla...

3) Avete sbagliato qualcosa nel codice html della pagina - controllate che sia tutto esattamente come indicato nel codice di MobFox e che abbiate inserito nei posti giusti la parte che va nell'HEAD e quella che va nel BODY
Provate a visualizzare la pagina "fasulla" che avevate realizzato per l'approvazione della campagna pubblicitaria, magari li il codice era stato inserito correttamente.

Spero che alla fine almeno un banner vi appaia, quando sarete arrivati a questo punto vorrà dire che la parte html è a posto e potrete finalmente inserire il codice nel design e nel blocks editor di App Inventor.

L'app di esempio che vi andrò ad illustrare vi spiega solo i concetti chiave per l'inserimento di annunci, starà poi a voi decidere dove posizionare l'annuncio, dove e come implementare il tasto per il ritorno alla vostra applicazione e quant'altro.

Apriamo ora il nostro nuovo progetto oppure apriamo il progetto esistente in cui vogliamo inserire i banner.

Quello che vogliamo realizzare è un applicazione formata da almeno tre elementi:
1 ) il banner pubblicitario
2 ) la schermata principale dell'app vera e propria
3 ) un pulsante per tornare alla nostra app se l'utente decide di visualizzare una pubblicità cliccando su di essa

Il punto 3 può essere integrato nel punto 2 (come ho fatto io nella mia App Acqua Alta, cliccando uno dei pulsanti "previsioni" "grafico" , etc... ripristino il banner originale e ripristino la schermata principale dell'app.

Vediamo quindi nella parte 3 come completare il codice in App Inventor,
per continuare la lettura premete QUA.