Cerca con Google

Translate

1 agosto 2012

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.





43 commenti:

  1. Grande Seblog, ho bisogno del tuo aiuto. Potresti spiegarmi la procedura per inserire banner pubblicitari con Leadbolt in un app che ho costruito con AppInventor?? Ti prometto che appena riuscirò a pubblicarla sul market ti darò un piccolo contributo (PS: non è un ricatto, ma il tuo sito mi sta davvero servendo tantissimo).

    RispondiElimina
    Risposte
    1. Grazie lo stesso ma credo di aver risolto...ma Leadbolt non paga niente per le visualizzazioni???

      Elimina
    2. Ciao Antonino! scusa ma ho visto solo ora...:)
      non so bene come funzioni Leadbolt, in genere cmq questi circuiti pagano solo su click e non su visualizzazioni (ed alcuni tipo MobPartner pagano solo a sottoscrizione, quindi peggio ancora...)
      ad ogni modo tutti i circuiti banner dove viene offerta la possibilità di inserire pubblicità tramite codice html/javascript dovrebbero essere compatibili con App Inventor ed il metodo pubblicato in questa guida... :)

      Elimina
  2. Ciao sebastiano grz per la risp su youtube ho creato un video per spiegarti il mio problema ecco il link http://vinciraia99.altervista.org/mysite/android.mp4

    RispondiElimina
    Risposte
    1. Ciao Raia,
      vedo un errore evidente, ed altri possibili errori:
      1) metti la parte che andrebbe nell'HEAD fuori dall'HEAD, infatti guarda bene la mia immagine col codice html, quella parte va messa prima del tag "< / HEAD >"
      2) se visualizzo la pagina (http://vinciraia99.altervista.org/mysite/bannertest.html) vedo una testata "strana" quella che rimanda ai tuoi blog, che non penso vada molto d'accordo con il banner, devi usare una pagina html "pulita" ovvero solo con il banner, altrimenti crea problemi
      3) l'errore 404 ovviamente vuol dire pagina non trovata...
      non vedendo il tuo codice sorgente nel blocks editor, non so come componi l'url con l'indirizzo del banner, io penso ci sia un errore in quella parte di codice, la tua webview deve semplicemente puntare a http://vinciraia99.altervista.org/mysite/bannertest.html
      se il tuo minibrowser aggiunge altro, non va bene
      il problema non è nel tutorial, controlla bene la pagina che cerca di aprire la webview e vedrai che sicuramente hai fatto un errore da qualche parte

      ps: ma sei italiano? perchè onestamente te lo dico come consiglio personale, cura molto di più la grammatica e gli errori grammaticali, il tuo blog ne è pieno ed è veramente brutto leggere cose tipo "dowwload" e amenità varie :) poi ovviamente vedi te, è solo un mio consiglio ;)
      fammi sapere quando risolvi, ciao!

      Elimina
    2. grz mille per la risposta comunque scusa dove ho sbagliato a scrivere nel mio blog?? se mi scrivi i link dove ho sbagliato io subito correggerò questi errori
      comunque non ho capito come fare senti se ti do il codice di integrazione di mobfox potresti crearmi tu una pagina web html che poi passerò nel sito??

      Elimina
    3. non posso mettermi a correggere anche i blog degli altri ;) il tempo è sempre troppo poco!
      la pagina html per il banner la vedi nell'immagine di questo tutorial nella tua devi solo sistemare la parte nell HEAD, se proprio vuoi mandami il tuo codice mobofox ma scommetto che se riguardi tutto con calma capisci come fare correttamente tutta la procedura,
      un saluto

      Elimina
    4. Grz mille Sebastiano per la tua disponibilità comunque ancora non riesco a risolvere il problema nonostante abbia tolto la toolbar e aggiustato l'HEAD

      Elimina
    5. Comunque ti do il codice di integrazione me la crei tu ovviamente se vuoi ecco il link: http://vinciraia1.altervista.org/seblogapps.html

      Elimina
    6. Ciao, io ci ho provato e questo è il codice html che ho generato:

      http://venicetideads.altervista.org/raia_ads.html

      però non vedo ads, quindi o la tua campagna non è ok oppure non so che dirti,
      se metto tutto uguale ma metto solo nel codice del banner (quello dopo s:...) il mio numero di banner visualizzo tutto correttamente,
      quindi diciamo che l'html è a posto di sicuro, ora devi vedere se compaiono i banner dopo che ci saranno richieste da vari indirizzi ip diversi
      fammi sapere, ciao

      Elimina
  3. Sebastiano volevo chiederti se tu puoi mettere il mio banner mobfox nel tuo sito finché non viene attivato
    ecco il codice HTML : http://vinciraia1.altervista.org/mobfox.html

    RispondiElimina
  4. scusate io ho fatto la registrazione a mobfox e hanno accettato il mio sito, però non mi escono i banner perche devo completare il mio profilo prima di iniziare a poter guadagnare. per completare il profilo devo compilare:
    1-Configure Mediation Networks
    2-Tell your Friends about MobFox!
    mi otete dire come compilarli?? cosa sono?
    grazie mille :)

    RispondiElimina
    Risposte
    1. entrambi i campi che io sappia dovrebbero essere opzionali,
      mediation networks serve per aggiungere altri network pubblicitari al circuito (se per esempio sei registrato anche a MobPartner o cose simili)
      mentre ovviamente per il Tell your Friends penso puoi inserire un pò di indirizzi mail a caso (se proprio non ti facesse andare avanti senza completare quello step)

      Elimina
    2. grazie mille :)però il sito è stato approvato il 6 maggio. come mai ancora non mi esce neanche un banner??

      Elimina
  5. mi potresti inserire il link di dove fare la registrazione per lumatagroup x favore?? grazie mille :) non riesco a trovare dove fare la registrazione XD oltre a lumata, che altro circuito pubblicitario mi consigli?

    RispondiElimina
    Risposte
    1. non conosco Lumatagroup,
      io ho messo solo MobPartner ma paga solo su abbonamento, gli altri non li ho provati, se li provi dicci poi come ti trovi

      Elimina
    2. certo:) cmq ke significa paga solo su abbonamento?

      Elimina
    3. mi dai il link per ma registazione di mobpartner? grazie :)

      Elimina
    4. http://www.mobpartner.com/ e poi lo aggiungi a mobfox,
      paga su abbonamento nel senso che se anche ti cliccano il banner ma poi l'utente non fa l'abbonamento al servizio suonerie/sms/giochi...non ti pagano nulla,
      per questo lo sconsiglio...

      Elimina
    5. infatti nessuno fa quest tipi di abbonamenti.. cmq come e possibile che non mi escono ancora banner?? il sito e stato approvato 1 mese fa, il sito è questo se ti interessa XD scuolatecnologica.altervista.org

      Elimina
    6. non ti saprei dire, sicuro di aver seguito tutti i passaggi?
      prova con connessioni diverse, 3G, Wifi, prova con cellulari di tuoi amici,etc,
      in genere i banner arrivano quando vedono richieste da molti ip diversi,
      cmq dal pannello di controllo puoi vedere quante "impression" hai fatto e quante "request" per i banner ci sono state, se è tutto a zero forse hai qualche problema nel file html, non so...

      Elimina
    7. ho gia provato con tanti cellulari da diverse connessioni e in diversi giorni, ma nel pannello di controllo di mob fox e tutto 0.
      nel file html ho inserito la parte dell'head nell'head e nella parte del body lo parte dove va il body, cos'altro potrei aver sbagliato?? grazie x l'aiuto :)

      Elimina
  6. salve :) ho inviato un email a mobfox :) mi ha risposto cosi:

    Si prega di inviare più traffico - la vostra applicazione è stata approvata, ma non sono l'invio di traffico sufficiente al momento per ottenere annunci. Grazie

    cosa significa inviare piu traffico? x caso significa le visualizzazioni del sito?

    RispondiElimina
    Risposte
    1. penso che questa sia la risposta più chiara, probabilmente vedono sempre lo stesso ip (o solo pochi ip) che fanno richieste verso il tuo sito con il banner e quindi non inviano annunci.
      Il giorno che l'app viene pubblicata e quindi utilizzata da centinaia di utenti diversi, vedranno molti più ip e località diverse che tentano di caricare il banner e questo verrà visualizzato.
      Quindi sembra che sia tutto a posto, è solo che al momento hai poche visualizzazioni.
      Scusa per la risposta così in ritardo! probabilmente ora hai anche già risolto :)

      Elimina
    2. ahahahah non ti preoccupare cmq non ho ancora risolt XD quindi posso passsare al punto 2 di questa guida? come faccio a inserire la publicita se non escono?? non ho capito bene scusami XD

      Elimina
    3. si esatto, fa tutto come spiegato nella guida alla parte 2, anche se tu non vedi i banner non è detto che gli altri utenti non li vedano.
      Dopo qualche gg che l'app è pubblicata e utilizzata controlla sul pannello di mobfox per vedere se hai "impression" , se ne hai allora è tutto a posto :)

      Elimina
    4. aaaaaaaaaaaaa XD e io che aspettavo che dovevo vedere le pubblicita XD ahahaha grazie mille :D cmq ottimi tutorial :D

      Elimina
    5. scusa se ti rompo cmq all'inizio della parte 2 della guida hai scritto:
      "Il codice da inserire non è altro che il codice Javascript visto nella parte 1"
      ti riferisci ai codici di mobfox? cmq non capisco come faccio a provare se va tutto bene se non escono banner XD
      grazie x l'aiuto XD :D

      Elimina
    6. si, il codice Javascript è quello da inserire nella pagina html dove in pratica si mette il banner,
      se hai fatto tutto giusto secondo la guida hai il 99% delle possibilità che tutto vada bene ed i banner vengano visualizzati, non è colpa mia se non ti si visualizzano perchè non arrivano da traffico "valido" secondo mobfox, molti altri utenti hanno usato la mia guida e funziona,
      spero presto visualizzerai i banner anche te :)

      Elimina
    7. grazie mille :D cmq non intendevo dire ke è colpa tua XD come potrebbe essere colpa tua?? XD ahahahahha cmq grazie mille ancora :D

      Elimina
    8. ho fatto il 2° sito.. lo realizzato attraverso altervista cn microsoft office front page.. ora con i paramentri ftp lo devo pubblicare il sito o no?

      Elimina
    9. ma per avere l'autorizzazione di MobFox o cosa?
      se hai già attiva una campagna di MobFox basta che inserisci il codice in una pagina html come spiegato nel tutorial, e poi quella pagina va visualizzata tramite la webview nella tua app.
      Se invece ti serve un sito per avere l'autorizzazione da MobFox, allora si, pubblica il tuo e digli che quello è il tuo sito mobile per cui vuoi l'approvazione per inserire i banner...

      Elimina
    10. scusa credo di aver fatto qualche errore.. al 1° sito dovevo ottenere l'autorizzazione di mob fox attraverso la campagna?? xk se e così nn lo fatto.. ho solo richiesto l'autorizzazione

      Elimina
    11. forse stiamo parlando della stessa cosa, la tua campagna deve essere autorizzata chiedendo a loro l'autorizzazione, insomma nella colonna status devi vedere il pallino "verde" e su approved ci deve essere scritto "approved" (sempre come da mia guida e da mie immagini...)
      se hai fatto quello sei a posto

      Elimina
    12. sisi :D xo se vado nel pannello di controllo di mobfox e vado su campaigns mi dice crea nuova campagna.. quindi non ho la campagna attiva o sbaglio??

      Elimina
  7. Ciao Sebastiano, hai visto questa notiziona? :-)
    AdMob component per AI: https://plus.google.com/113276726471257296438/posts

    RispondiElimina
    Risposte
    1. Appena visto, sarebbe favoloso e sarebbe anche ora :)
      Ho visto che stanno discutendo su come realizzare una versione di app inventor con tutte queste modifiche, una sorta di "developer version" di AI, speriamo si realizzi il tutto al più presto, sarebbe di una comodità unica! teniamo tutti gli occhi aperti e se sentiamo qualcosa di nuovo beh, sappiamo come avvisarci a vicenda !!! :)

      Elimina
    2. Quanto tempo potrebbe essere necessario prima di vedere AdMob nell' App Inventor?

      Elimina
    3. E' possibile passare alla seconda parte del tutorial anche se sul sito ancora non si vedono pubblicità?

      Elimina
    4. Allora, il componente AdMob che è stato sviluppato fa parte di una versione sperimentale di AI che non farà probabilmente parte di AI ancora per lungo tempo, se si vuole si può fare una donazione (abbastanza importante) al suo sviluppatore che vi darà accesso al suo server personale con AI in cui c'è anche il componente AdMob.

      Per quanto riguarda la domanda di Enomis akas, puoi passare alla parte 2 anche prima che ti abbiano abilitato la campagna, comunque ricorda che qui parlo di MobFox e non di AdMob. :)

      Elimina
  8. Risposte
    1. sono cambiate alcune schermate rispetto a quelle pubblicate in questo articolo, ma il procedimento di base è lo stesso

      Elimina
  9. dopo che ho il sito su alter vista e mi hanno approvato mobfox la pubblicazione ora come devo creare la pagina web dove inserire il banner pubblicitario? grazie

    RispondiElimina