Pubblicato il 10/06/14e aggiornato il

Come inserire la pubblicità nella versione mobile di Blogger.

Come implementare unità pubblicitarie Adsense o di altro circuito nella versione mobile dei blog su piattaforma Blogger.
Blogger ha da tempo implementato una versione mobile per i siti su quella piattaforma. I tablet e gli smartphone vengono automaticamente reindirizzati a un nuovo indirizzo che aggiunge la stringa ?m=1 all'URL. Nel caso della Homepage va utilizzato l'indirizzo con la slash finale. Aggiungendo tale stringa a un qualsiasi indirizzo di Blogger si può avere una idea di come si visualizzerà quella pagina con uno smartphone anche usando un browser di un computer desktop.

Va da sé che i tablet e gli smartphone di fascia alta sono in grado di accedere anche alla versione desktop di un sito dalle impostazioni del browser. Visto che l'utilizzo di questi dispositivi mobili si fa sempre più intenso e che la crescita di tale traffico anno su anno è sistematicamente a doppia cifra è sicuramente utile per la redditività inserire banner pubblicitari visualizzabili da smartphone o tablet nella versione mobile

Nell'articolo illustrerò come installare dei banner pubblicitari Adsense visibili solo dalla versione mobile facendo presente ai lettori che non sono esperto del regolamento di questo programma di affiliazione e che se hanno dei dubbi al riguardo è meglio che si rivolgano al forum apposito. Da interventi su questo tema di persone più esperte di me pare che sia possibile inserire solo una unità pubblicitaria per ogni scroll di pagina vale a dire che non possono essere visibili due banner contemporaneamente.

 

ATTIVARE LA VERSIONE MOBILE SU BLOGGER

 

Si va su Modello e si clicca sulla icona della ruota dentata sotto alla miniatura Cellulare. Si mette la spunta su Sì. Mostra il modello per cellulari nei dispositivi mobili. Nel menù verticale si possono scegliere uno dei modelli predefiniti oppure Personalizza che è l'opzione che dovrebbe permettere di visualizzare il vostro blog anche dal cellulare con un aspetto simile a quello desktop

personalizza-versione-cellulari

Si può andare su Anteprima per avere una idea di come sarà visualizzato il nostro sito da Cellulare quindi si va su Salva. Nel caso si sia scelto Personalizza è possibile modificare e ottimizzare l'aspetto del sito nella visualizzazione mobile modificando una opportuna sezione del modello. Il template per cellulare non avrà le sidebar e quindi non saranno visibili i widget che vi siano stati inseriti compresi i banner.

 

VERSIONE MOBILE E PUBBLICITÀ

 

Nel caso in cui abbiate inserito la pubblicità Adsense tramite widget tipo un banner sopra all'area del post questa sarà visibile anche nella versione mobile. Se invece l'avete inserita modificando il modello non sarà vista nella versione mobile. Occorre quindi creare degli annunci specifici per questa versione. Si apre il nostro account Adsense e si va su I miei annunci > Nuova unità pubblicitaria. Dopo aver dato un nome al banner va scelto il formato Banner mobile 320x50 che è tra quelli consigliati

banner-mobile

Si configura l'annuncio selezionando l'apposita tavolozza di colori, si crea un nuovo canale personalizzato per monitorare il suo rendimento e si rende disponibile agli inserzionisti per il targeting. Si va quindi su Salva e ottieni il codice.  I più esperti di voi sapranno che tale codice va "parsato" perché il template di Blogger è in linguaggio XML. Si accede quindi a un tool tipo Blogcrowds, si incolla il codice e si clicca su Parse. Il codice risultante va copiato in un file di testo. Se volete inserire un banner all'inizio del post subito sotto il titolo e un banner alla fine del post dovete ripetere questa procedura creando una nuova unità pubblicitaria chiamandola per esempio Banner Mobile Basso. Il codice dovrà ovviamente essere parsato anche in questo caso. È opportuno integrare i codici con dei commenti per individuare a futura memoria a quale unità pubblicitaria faccia riferimento. Un esempio potrebbe essere questo

<!-- Banner Mobile Alto - Inizio -->
Codice Parsato della unità pubblicitaria
<!-- Banner Mobile Alto - Fine -->

MODIFICA DEL MODELLO 


Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga 

<b:includable id='mobile-post' var='post'>

che è l'inizio della sezione del modello dedicata al mobile. Eventualmente si clicca sulla freccetta nera presente sulla sinistra per visualizzare tutto il codice della sezione. Si scorre il modello fino a trovare questo blocco di codice

<data:post.body/>
            <div style='clear: both;'/> <!-- clear for photos floats -->
          </div>

che rappresenta il contenuto del post visualizzato nel mobile. Subito sopra a questo codice va incollato il codice parsato del banner da visualizzare subito sotto il titolo del post mentre subito sotto va incollato il codice parsato del banner da visualizzare alla fine dell'articolo

pubblicità-mobile

Si salva il modello. Opzionalmente all'inizio e alla fine del codice di ciascun banner può essere utile incollare queste due righe <div style='text-align:center;'> e </div> che servono per centrarli.

pubblicità-dispositivi-mobili

 

 

OSSERVAZIONI CONCLUSIVE

 

Nel caso in cui i banner fossero troppo vicini ai contenuti si possono inserire nel modello dei salti di riga con il tag <br/> per distanziare i due elementi. Tutto quello che è stato illustrato per la pubblicità Adsense è valido anche per altri circuiti pubblicitari che fornissero dei banner per i contenuti mobili. Concludo ricordando che queste unità pubblicitarie saranno viste solo nei post e non nella homepage della versione mobile anche senza inserire degli appositi tag condizionali.




46 commenti :

  1. Salve le tue guide sono semplicemente perfette, io però ho un problema, ho eseguito questa guida alla lettera ricontrollato ogni passaggio e risulta tutto in regola, però non riesco a vedere la pubblicità sul sito mobile, la stessa cosa mi è successa quando (con un'altra tua guida) volevo inserire la pubblicità all'interno del post, non si vedeva, non riesco a capire come mai, c'è qualche possibilità di risolvere questo problema?
    Grazie Gianni

    RispondiElimina
    Risposte
    1. Può darsi che tu debba aspettare qualche ora o qualche giorno. In ogni caso questo è un post tecnico e non si occupa del tipo di affiliazione pubblicitaria e del perché non si vedano i banner
      @#

      Elimina
  2. Ciao, ho messo dei codici adsense in un widget perfettamente funzionanti, ma uno il 120x600 l'ho inserito per errore fra i post nella home page, non capisco però perché nel modello blogger questo non lo trovo, nel caso lo debba togliere, mentre nella sorgente pagina si vede. Ribadisco che tutte le pubblicità sono funzionanti.
    Grazie

    RispondiElimina
    Risposte
    1. Se il banner lo visualizzi tra due post allora significa che lo hai installato direttamente da Blogger andando in Bacheca > Profitti. In questo caso il codice non è presente nel template
      @#

      Elimina
    2. Grazie Ernesto e anche per il tuo sito che seguo con attenzione.

      Elimina
  3. Ciao ernesto, volevo chiederti ma io ho fatto tutto come spiega la tua guida ho messo due adsense solo in mobile ma essendo che ho due adsense in deskop e due in mobile non sono fuori essendo 4 adsense ho sono due cose a se??

    RispondiElimina
  4. Risposte
    1. In genere non rispondo a domande sul regolamento ma se vedi due banner con il browser desktop e due banner con il mobile sei a posto
      @#

      Elimina
  5. Ciao Ernesto, seguo come sempre il tuo sito: per me è una bibbia in quanto ad aspetti tecnici per i miei blog. Sto cercando di attuare quanto dici ma non mi riesce: ho un tema personalizzato, potrebbe essere questo il problema?

    RispondiElimina
    Risposte
    1. Confermo, infatti sono tornato a un tema classico di blogger e sto lavorando su quello

      Elimina
  6. Ciao Ernesto ho provato varie volte a seguire questa guida, ma i banner in versione mobile non mi compaiono. Per questo ho provato a creare pure un altro blog, ma nulla lo stesso. L'unica maniera è con il widget da layout ma la pubblicità esce a fine articolo, quindi non genera. Grazie.

    RispondiElimina
    Risposte
    1. Hai parsato il codice? Immagino di sì. Forse aspetti troppo poco. Delle volte i banner compaiono dopo 12-24 ore. Non saprei come aiutarti. Il posizionamento è quello.
      @#

      Elimina
    2. Si certo ho parsato il codice. Utilizzo Chrome può dipendere dal browser?

      Elimina
    3. La pubblicità da mobile dipende dal browser utilizzato dal dispositivo mobile ma dovrebbe vedersi comunque.
      @#

      Elimina
  7. A me è comparsa la scritta: "Al momento disponi di un account solo host, pertanto questo codice dell'annuncio verrà visualizzato come spazio vuoto al di fuori dei siti partner host."
    What?

    RispondiElimina
    Risposte
    1. Significa che ti sei iscritta con partner host di AdSense come Blogger. Credo ci sia una procedura per risolvere partendo da questa pagina
      https://support.google.com/adsense/troubleshooter/2473099?hl=it
      Chiedi però al supporto
      @#

      Elimina
  8. Ciao Ernesto finalmente sono riuscito anch'io a far comparire i banner adsense sotto il post versione mobile. Il problema che non spuntavo modello per i cellulari personalizza ma in versione semplice. Ti chiedo come mai questo nonostante la virgoletta era comunque su mostra il modello per cellulari?

    RispondiElimina
    Risposte
    1. forse mi sono spiegato male su modello per cellulare utilizzavo semplice invece di personalizza non mi compariva nessun banner sotto il titolo. Oggi scegliendo modello cellulari personalizzato escono i banner sotto il post

      Elimina
    2. Perché con Personalizza viene mostrato tutto quello che c'è nella versione desktop e che è compatibile con la versione mobile mentre con Semplice viene mostrato un modello standard con i contenuti cioè con post e commenti
      @#

      Elimina
  9. ciao Ernesto, complimenti per l'articolo, davvero molto utile; potresti spiegarmi come far comparire un banner nella homepage della versione mobile sopra l'intestazione? me ne compare solo uno alla fine, ma è scarsamente visibile a meno che non si scorra fino alla fine; potresti aiutarmi in merito, grazie mille ed ancora complimenti :)

    RispondiElimina
    Risposte
    1. Un banner pubblicitario sopra alla Intestazione? Devi cmq parsare il codice e lo devi incollare sopra al tag < /header > senza spazi compreo tra due tag condizionali che lo mostrano solo sul mobile. Alla fine di questo post troverai i tag condizionali da usare
      http://www.ideepercomputeredinternet.com/2014/11/blogger-tag-condizionali-desktop-mobile.html
      @#

      Elimina
    2. Ernesto perdonami se ti disturbo ancora; in un post molto recente hai mostrato come si poteva creare un menù nella versione mobile; l'ho fatto e funziona molto bene; sempre a proposito della pubblicità volevo chiederti se è possibile farla comparire sopra questo menù, il quale a sua volta è posto sopra l'intestazione; attualmente la pubblicità in homepage mi compare tra il menù e l'intestazione, è possibile farla comparire sopra il menù? grazie ancora :)

      Elimina
    3. Sia il codice del menu sia il codice della pubblicità li hai messi sopra < . header >. Basta che tu incolli il codice della pubblicità sopra a quello del menu.
      @#

      Elimina
  10. per visualizzare la pubblicità direttamente sotto l'intestazione, come nella tua versione mobile, devo incollare il codice parsato sotto il tag header?

    RispondiElimina
    Risposte
    1. Non me lo ricordo bene ma mi pare sotto la fine dell'header cioè sotto < /header >
      @#

      Elimina
    2. si avevo provato a fare in questo modo ma il banner resta sopra l'intestazione, in pratica non succede nulla; c'è un altro modo per ottenere questo diverso posizionamento?

      Elimina
    3. Sei sicuro di aver fatto tutto bene? Perché gli elementi vengono mostrati in ordine a come sono inseriti
      @#

      Elimina
    4. si è sotto il tag che tu mi hai segnalato

      Elimina
  11. Secondo voi è corretto la disposizione degli ads su questo mio sito http://www.forexetrading.it
    Grazie tante anticipatamente.

    RispondiElimina
    Risposte
    1. Non sono così esperto da potertelo dire con certezza. So che nella versione desktop si possono mettere fino a tre annunci display e in quella mobile fino a due. Per altre info chiedi nel forum apposito
      @#

      Elimina
  12. Ciao, da poco Google ha introdotto gli Annunci a livello di pagina (Adsense) per mobile.
    Esistono di due tipi:
    - Annunci di ancoraggio/in overlay
    - Annunci vignetta
    Per caso li hai già destati? Sai come si inseriscono?
    Grazie

    RispondiElimina
    Risposte
    1. Si tratta di pubblicità che vengono mostrate solo saltuariamente. Si deve incollare il codice subito sopra alla riga < /head > per poi controllare con uno smartphone se funzionano aggiungendo alla fine dell'URL la stringa #googleads. Ci sono le istruzioni
      @#

      Elimina
    2. Ho provato ad inserirlo prima /head ma scrive questo errore:
      Errore di analisi XML, riga 542, colonna 15: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

      Elimina
    3. PS: devo fare il parse, vero?

      Elimina
    4. Perché non hai parsato il codice. Avevo ritenuto superfluo dirtelo visto che avevi già inserito il codice nel modello di Blogger con il metodo illustrato in questo post. Eventualmente leggiti anche quest'altro
      http://www.ideepercomputeredinternet.com/2012/10/adsense-blogger-modello.html
      @#

      Elimina
    5. Sì, ho sbagliato io, non avevo parsato il codice. Ora non mi dà errore e la prova con #googleads funziona, ma se vado sulle pagine del sito non vedo ancora il banner, si intravede solo una linea grigia in fondo, come se il banner fosse "chiuso" o "tirato giù". Verifico nei prossimi giorni, grazie per l'aiuto!

      Elimina
  13. Nel caso voglio inserire due banner diversi per ciascun autore del blog. Il procedimento è come quello nel tutorial da te fatto per versione desktop?

    RispondiElimina
    Risposte
    1. Bisogna aggiungere dei tag condizionali per mostrare il banner giusto in corrispondenza dell'autore del post. Non mi ricordo l'articolo sulla pubblictà desktop ma i tag condizionali li puoi trovare qui
      http://www.ideepercomputeredinternet.com/2015/03/banner-blogger-multi-autore.html
      @#

      Elimina
  14. Ciao Ernesto complimenti per l'articolo, ma da + di un mese non riesco piu a visualizzare gli annunci su mobile non riesco a capire il xke ? Uso adsense da anni ma da settembre gli annunci su smartphone non si vedono piu...sai qualcosa a riguardo potresti aiutarmi per favore. Grazie

    RispondiElimina
    Risposte
    1. Forse su Modello > Cellulare > Ruota dentata hai scelto un modello diverso da Personalizza
      @#

      Elimina
  15. Salve gentile Ernesto,
    io vorrei ,a fine post sia nel mobile che nel desktop oltre che inserire il banner poter inserire un gruppo di unità link, basterà seguire la guida sopra e mettere sotto il banner anche il codice parsato dell'insieme di link??
    Grazie

    RispondiElimina
    Risposte
    1. Basta incollare i codici uno di seguito all'altro magari divisi dal tag < br/ > del salto di riga come specificato nel post
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.