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

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

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

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.

 

 

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.