Come inserire la pubblicità nel modello di Blogger nella versione desktop e mobile.

Come inserire i banner e gli insiemi di link di Adsense o di altro circuito pubblicitario direttamente nel modello di Blogger per essere visualizzati nelle varie tipologie di pagine e nei diversi posizionamenti.

L'inserimento dei banner o dei link pubblicitari può essere effettuato in diversi modi. Ci sono programmi di affiliazione che forniscono dei link per collegare delle parole chiave di un post altri che invece forniscono un codice per visualizzare una barra nella parte alta del layout e altri ancora che invece, sempre tramite codice, permettono di mostrare delle finestre popup. 

In questo articolo riprendo il tema di come installare i banner e i link direttamente nel modello di Blogger seguendo le linee guida di Adsense che è il programma di affiliazione di Google e che è utilizzato dalla maggior parte dei publisher a partire da grandi siti di dimensione nazionale fino a piccoli blog con solo qualche migliaio di visite mensili. Non sono un esperto del Regolamento di Adsense quindi se qualcuno ha dei dubbi in merito è consigliabile che si rivolga all'apposito forum e non a me tramite commenti. 

Un altro tema che sta assumendo un rilievo sempre più decisivo è quello della versione mobile di Blogger. Se si va su Google Analytics o anche solo nella scheda Statistiche della Bacheca di Blogger ci si accorge che il numero di quelli che arrivano sul nostro sito con dispositivi mobili è in costante aumento. L'installazione della pubblicità nella versione mobile è cosa distinta dall'inserimento della pubblicità nella versione desktop. Per poter avere dei banner pubblicitari anche nella versione mobile bisogna attivarla andando su Bacheca > Modello > Cellulare per poi cliccare sulla icona della ruota dentata. 

COME OTTENERE IL CODICE DA ADSENSE

Vediamo nello specifico come ricavare il codice di una unità pubblicitaria da Adsense che ha delle personalizzazioni più analitiche rispetto ad altri programmi. Si possono selezionare sostanzialmente due tipologie di unità pubblicitarie: i banner e gli insiemi di link. I primi sono delle pubblicità che possono mostrare annunci di testo oppure annunci illustrati mentre i secondi sono un elenco orizzontale o verticale di link a determinati argomenti pertinenti con i contenuti della pagina. 

Dopo aver effettuato l'accesso al nostro account Adsense si va su I miei annunci > + Nuova unità pubblicitaria e si inizia a compilare il modulo 

  

Dopo aver digitato il nome dell'annuncio si sceglie la tipologia tra Banner orizzontale, Banner verticale, Rettangolare, Reattiva (per Modelli con Responsive Design), Dimensioni personalizzate oppure Annunci con link. L'ultima opzione è quella per creare gli Insiemi di link. Non è compito di questo post analizzare in dettaglio tutte queste varie opzioni ma solo quello di mostrare come inserire il codice nel template di Blogger. Ci sono dei formati consigliati anche per il mobile. Dopo aver scelto il tipo di annuncio, per esempio uno da 336x280 pixel, dovremo settare le altre impostazioni 

In Tipo di annuncio è meglio lasciare l'impostazione predefinita Annunci di testo e display perché in questo modo ci saranno più inserzionisti che partecipano all'asta virtuale per la nostra unità pubblicitaria e quindi è statisticamente più probabile spuntare un rendimento migliore. Nello Stile dell'annuncio è opportuno scegliere i colori più adatti per al nostro layout

 

Si possono modificare i codici dei colori per poi andare su Salva e salvare lo stile dell'annuncio in modo da recuperarlo in seguito senza bisogno di reimpostarlo nuovamente. 

È molto importante compilare la sezione Canali Personalizzati perché si inseriscono informazioni utili agli inserzionisti che volessero investire in modo specifico nel nostro sito a prescindere dalla pertinenza dei contenuti e anche per monitorare il rendimento di ciascuna unità pubblicitaria

Si va su Crea nuovo canale personalizzato e si dà un nome magari lo stesso digitato all'inizio

Un buon sistema per la creazione di canali personalizzati può essere quello di mettere il titolo del blog anche come acronimo seguito dal posizionamento dello stesso e dalla modalità desktop o mobile. Per esempio il Canale denominato Mio Blog Alto Destra Mobile ha tutte le informazioni necessarie per individuarlo. È inoltre consigliabile mettere la spunta su Mostra questo canale personalizzato agli inserzionisti come posizionamento disponibile per il targeting. Non mi dilungo sul significato e sull'importanza targeting per il posizionamento ma si tratta di una funzione essenziale per attirare gli investitori pubblicitari. 

Si informano i potenziali investitori del tipo di pagine in cui viene mostrato l'annuncio e in che posizione oltre alla lingua del sito. Nell'apposito campo si digita anche una breve descrizione

Quando si è terminato si va su Salva. Ciascun publisher ha a disposizione fino a 500 Canali Personalizzati. In Annunci di backup si sceglie se mostrare lo spazio vuoto oppure altre opzioni quando non sia disponibile un annuncio. Si va su Salva e ottieni il codice. 

Si possono inserire in una pagina aperta con browser desktop fino a tre annunci del tipo banner e tre annunci di insiemi di link.  In una pagina aperta da mobile invece si possono inserire solo due annunci banner e non insiemi di link. Inoltre i due annunci non possono essere visibili nella stessa schermata di cellulare. Nel senso che si deve fare lo scroll della pagina per poterli vedere entrambi.

COME INSERIRE IL CODICE NEL MODELLO PER LA VERSIONE DESKTOP

L'obiettivo è quello di mostrare un banner all'inizio degli articoli e un banner alla loro fine. Per questa ragione dobbiamo ottenere due codici con due diversi Canali.  Il codice ottenuto da Adsense può essere incollato su Layout > Aggiungi un gadget > HTML/Javascript per poi posizionarlo per esempio in una sidebar. Non è invece possibile incollarlo così com'è nel modello perché il template di Blogger è in linguaggio XML e quindi dobbiamo convertire il codice ottenuto in questo nuovo linguaggio altrimenti Blogger non salverà il modello. In linea di massima non si può cambiare il codice ma in questo caso non si tratta solo di una conversione. Ci sono molti tool online per questa operazione. Personalmente utilizzo Blogcrowds. Si incolla il codice e si clicca su Parse 

Il codice ottenuto viene generato sostituendo in modo automatico il segno < con &lt; e il segno > con &gt; e può essere incollato nel template di Blogger.  Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga con cui inizia la sezione desktop del blog  

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

Si clicca sulla freccetta nera posta a sinistra e si scorre il codice in basso fino a trovare l'altra riga

<data:post.body/> 

che è il tag di Blogger che indica il posizionamento di tutto il contenuto del post. in sostanza incollare un codice sopra a questa riga significa mostrare nel blog un nuovo elemento sopra a tutti i contenuti dei post. Nel nostro caso dobbiamo mostrare i banner solo sopra ai contenuti del post, vale a dire subito sotto il titolo, ma non vogliamo che siano visibili per esempio nelle pagine statiche. Per farla breve dobbiamo incollare subito sopra alla riga <data:post.body/> un codice che abbia questa struttura generica 

<!-- Nome e posizione del banner - Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
Codice di Adsense parsato
</b:if>
 </b:if>
 <!-- Nome e posizione del banner - Fine -->

dove al posto di Codice di Adsense parsato si incolla il codice ottenuto da Adsense e convertito in XML. In Nome e posizione del banner è opportuno indicare di quale banner si tratti in modo da ritrovarlo agevolmente nel modello. I due tag condizionali inseriti servono rispettivamente per mostrare il banner solo nei post ma per non visualizzarli nelle pagine statiche. 

Vediamo come sia ora possibile mostrare un banner anche alla fine dei contenuti del post. Si scorre il codice verso il basso fino a trovare il blocco 

<div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

che serve per quello che viene definito Read More o Jump o anche Continua a leggere. Subito sotto a questo codice va incollato un altro codice con una struttura simile al precedente ma che dovrà avere un Codice di Adsense Parsato diverso con un Canale Personalizzato che indichi la posizione alla fine dei post. È giunto il momento di salvare il modello e di verificare che quando si apre un post si visualizzino i banner. Non si vedrà nulla in Anteprima visto che la modifica è relativa solo ai post e non alla home e che ci vorranno diversi minuti se non ore per vedere la pubblicità. 

COME INSERIRE LA PUBBLICITÀ NELLA VERSIONE MOBILE

Anche nel caso del mobile ci vorranno due codici con due Canali che dovranno essere diversi da quelli usati per il desktop in modo da monitorarli separatamente. I due codici dovranno essere parsati per la conversione in XML e non è obbligatorio incollarli tutti e due ma se ne può mettere solo uno o anche decidere di non mostrare la pubblicità nei dispositivi mobili. 

Si va su Modello > Modifica HTML e si cerca la riga

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

che è quella che denota l'inizio del codice per la versione mobile. Eventualmente si clicca sulla freccetta nera posta a sinistra poi si scorre il codice in basso fino a trovare la riga 

<data:post.body/>

che ha lo stesso significato di quella per la versione desktop. Subito sopra a questa riga si incolla 

<!-- Nome e posizione del banner - Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
Codice di Adsense per il mobile parsato
</b:if>
 </b:if>
 <!-- Nome e posizione del banner - Fine -->

con le stesse avvertenze già enunciate per la versione desktop. Si scorre poi il codice fino a trovare 

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

e subito sotto a questo si incolla il codice per il secondo banner con la stessa modalità del precedente. Si salva il modello e dopo qualche minuto o qualche ora si apre un post del blog con un dispositivo mobile per verificare che i banner siano presenti.  

RISOLUZIONE DI ALCUNI PROBLEMI

Nel caso in cui i banner fossero in linea con i contenuti si può inserire prima del codice parsato il tag <p> e alla sua fine il tag di chiusura </p> per dividere i banner dal resto del post. Se invece i banner fossero troppo vicini ai contenuti o ad alcuni bottoni presenti nel layout si possono inserire dei salti di riga con il tag <br/> da mettere prima e/o dopo il codice.

Un altra esigenza piuttosto comune che si manifesta quando la larghezza dell'area del post sia diversa da quella del banner è quella di centrarlo nel layout. L'operazione è semplice e basta incollare il tag <div align='center'> prima del codice parsato e il tag </div> alla fine dello stesso. 

INSERIRE GLI INSIEMI DI LINK

Come detto si possono inserire anche tre insiemi di link. Ci vuole una certa attenzione perché non vadano a interferire con i banner. Sono utili in questo caso i tag <br/> per inserire dei salti di riga che servano da divisione. Il codice va ottenuto nello stesso modo di quello dei banner, vanno utilizzati i Canali Personalizzati  e il codice va parsato per la conversione in XML. Si utilizzano gli stessi codici precedenti e gli stessi posizionamenti. per l'eventuale inserimento nel modello. Si può per esempio mettere un insieme di link orizzontale alla fine del post e subito dopo un banner orizzontale o un rettangolo display. Gli insiemi di link possono anche essere inseriti più semplicemente tramite Layout > Aggiungi un gadget > HTML/Javascript per esempio sotto l'Intestazione del blog. In questo caso il codice non va parsato. 

MOSTRARE LA PUBBLICITÀ IN HOME NELLE PAGINE DI ETICHETTE E DI ARCHIVIO

I post sono formati da una sola pagina mentre la Homepage, le pagine di etichette e di archivio hanno fino a 25 elementi. Se noi inserissimo la pubblicità in queste pagine con la stessa modalità usata per  i post visualizzeremo per esempio nella Home i banner sotto ai primi tre titoli e degli spazi bianchi nei restanti post perché come detto si possono mostrare al massimo tre unità pubblicitarie. 

Per risolvere dobbiamo creare una nuova unità pubblicitaria con un nuovo Canale Personalizzato da mostrare per esempio solo alla fine del primo articolo e non nei successivi. Questa unità pubblicitaria per non andarsi a sommare alle altre non dovrà essere visibile nei post. Useremo i soliti tag condizionali. Si va su Modello > Modifica HTML e si cerca la riga 

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

Si scorre il codice fino a trovare la riga  <data:post.body/> e, subito sopra, si incolla questo codice

<!-- Annuncio Home Etichette e Archivio -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.isFirstPost'> 
Codice Adsense parsato 
</b:if>
 </b:if>
</b:if>
<!-- Annuncio Home Etichette e Archivio -->

dove i tag condizionali per mostrare il codice solo nel primo post sono stati colorati di viola.

MOSTRARE PUBBLICITÀ NELLE PAGINE STATICHE

Nei codici presentati sono stati sempre inseriti dei tag condizionali per non mostrare i banner nelle pagine statiche. Nel caso in cui volessimo mostrare in questi elementi delle unità particolari magari diverse da quelle dei post o della Homepage si va su Modello e nelle stesse posizioni si incolla 

<!-- Annuncio Pagine Statiche - Inizio -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
Codice Adsense parsato
</b:if>
<!-- Annuncio Pagine Statiche - Fine -->

Ovviamente bisogna salvare il template.

COME MOSTRARE UN BANNER SULLA SINISTRA O DESTRA DEI POST

L'algoritmo di Google sembra che penalizzi i siti in cui si deve scorrere la pagina prima di arrivare ai contenuti. Questo può accadere se inseriamo un banner orizzontale subito sotto al titolo del post. Per ovviare possiamo optare per un rettangolo posizionato sulla sinistra del contenuto del post. In questo caso i lettori possono iniziare a leggere l'articolo senza scrollare la pagina. Non sto a ripetere il posizionamento  ma mi limito a indicare quale dovrebbe essere il codice in questo caso

<!-- Tipo di Annuncio - Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float: left; margin: 6px 24px 2px 2px;'>
Codice Adsense parsato</div>
</b:if>
</b:if>
<!-- Tipo di Annuncio - Fine -->

Se invece si volesse posizionare il banner sulla destra il codice sarebbe 

<!-- Tipo di Annuncio - Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float: right; margin: 6px 2px 2px 24px;'>
Codice Adsense parsato</div>
</b:if>
</b:if>
<!-- Tipo di Annuncio - Fine -->

dove i parametri in rosso rappresentano le distanze tra il banner e il resto del layout in senso orario a partire dalla direzione verso l'alto. Questa scelta è possibile solo se non siamo soliti pubblicare una immagine all'inizio dell'articolo e se non abbiamo un template con immagini come sfondo dell'area del post che possono interferire con il banner. 

BANNER NELLA HOMEPAGE DELLA VERSIONE MOBILE

Si va sempre su Modello > Modifica HTML e si cerca la fine della intestazione perché sarà quella la posizione per il nostro banner nella versione mobile. Si cerca cioè la riga </header> e, subito sotto, si incolla un codice con questa struttura  di base

<!-- Banner Mobile Home - Inizio -->
<b:if cond='data:blog.isMobile'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div align='center'>
Codice Adsense per il mobile parsato
  </div>
</b:if>
</b:if>
</b:if>
<!-- Banner Mobile Home - Fine -->

Si salva il modello e si verifica aprendo il blog con un dispositivo mobile. Il tag center colorato di viola serve per centrare il banner all'interno del layout nella visione da mobile. Il primo tag condizionale serve per mostrare il banner solo nei dispositivi mobili, il secondo per non mostrarlo nei post e il terzo per non mostrarlo nelle pagine statiche. Oltre che nella Homepage sarà quindi visibile anche nelle pagine di archivio e in quelle delle etichette.

CIRCUITI PUBBLICITARI DIVERSI DA ADSENSE

I posizionamenti e i codici utilizzati per Adsense vanno bene anche per le unità pubblicitarie ottenute da altre società. Bisognerà sempre convertire i loro codici in XML (parsati) per poi applicare i tag condizionali necessari per visualizzarli nelle varie tipologie di pagine del nostro layout.