Come inserire la pubblicità di Adsense nei nuovi Temi di Blogger.

Come installare nei Nuovi Temi Responsive di Blogger i banner pubblicitari di Adsense o di altro circuito anche variandoli in funzione della risoluzione del dispositivo.

I Nuovi Temi di Blogger hanno indubbiamente diversi pregi a partire dal layout Responsive e dalla velocità di caricamento sensibilmente migliore dei precedenti.  

Nei primi post su questi Temi abbiamo visto come si possa allargare la sidebar e come personalizzare il banner dei cookie. In questo articolo vedremo come inserire unità pubblicitarie nel codice del Tema prendendo come esempio il programma di affiliazione Adsense che è di proprietà di Google così come la piattaforma Blogger.

COME NASCONDERE I WIDGET NEI NUOVI TEMI DI BLOGGER

Una funzionalità del nuovo Layout di Blogger non subito evidente sta nella possibilità di nascondere i gadget. Quando si va su Bacheca -> Layout alcuni gadget presenti non possono essere eliminati però possono essere nascosti. Si clicca sulla ic0na della matita nell'elemento pagina prescelto per poi mettere o togliere la spunta nel quadratino che indica se mostrare o meno tale widget.

I widget con questa opzione spesso non hanno quella Rimuovi, cioè possono essere nascosti ma non eliminati. I gadget di questo tipo sono quello della Ricerca posizionato al top della pagina, quelli Adsense posizionati sopra al corpo della pagina, Segnala una violazione, Post in evidenza, Post più popolari. Il gadget Attribuzione non ha questa opzione e neppure il bottone Rimuovi.

Per il seguito farò riferimento a un Tema in cui i gadget Adsense siano senza la spunta su Mostra Adsense in modo da installare tale pubblicità da soli mediante l'utilizzo del codice. Prenderò come test un Tema Contempo che dovrebbe essere simile a quelli Soho e Rilevanti mentre il Tema Emporio fa un po' storia a sé.

COME OTTENERE IL CODICE ADSENSE

I Nuovi Temi di Blogger sono Responsive quindi non si può usare la procedura che ho illustrato nel post su come installare la pubblicità su Mobile e Desktop dei blog su Blogger. È anche consigliabile di usare i formati reattivi o adattabili che non hanno una dimensione predefinita ma che si adattano allo spazio disponibile che può variare in funzione del dispositivo con cui viene aperta la pagina.

Si possono però aggiungere dei vincoli per mostrare annunci di dimensioni diverse come vedremo nell'ultima parte del post. Nel prossimo articolo vedremo anche come creare e installare un motore di ricerca di Adsense alternativo a quello nativo di Blogger.

Dopo aver aperto la Home di Adsense si va su I miei annunci -> Nuova unità pubblicitaria. Si sceglie Annunci di testo e display cliccando su Seleziona quindi si digita il nome dell'annuncio che si vuole creare e si lascia selezionato Dimensione automatica adattabile. 

In Tipo di Annuncio si lascia Annunci di testo e display. Su Stile dell'annuncio di testo si sceglie la tavolozza di colore tra quelle proposte oppure se ne crea una ex novo. In Canali personalizzati si crea un nuovo canale oppure se ne seleziona uno già esistente per monitorare il rendimento dell'annuncio. Per differenziare un annuncio da un altro possiamo scegliere come canale il nome del blog seguito dalla sua posizione (Es: IpCeI Alto). In Annunci di backup si lascia Mostra lo spazio vuoto quando Google non dispone di annunci mirati. Infine si va su Salva e ottieni il codice per poi copiarlo e incollarlo in un file di testo del Blocco Note.

PUBBLICITÀ DI ADSENSE NELLA SIDEBAR

Le unità pubblicitarie nella sidebar sono tra le più performanti anche perché le dimensioni adattabili fanno sì che vengono mostrati banner verticali molto grandi che catturano più click. Si va su Layout e si clicca su Aggiungi un gadget nella Barra laterale in alto o nella Barra laterale in basso. Si va su Base quindi si scorre la finestra fino a cliccare su HTML/Javascript. 

Si controlla che ci sia la spunta su Mostra HTML/Javascript quindi si incolla il codice in Sezioni del sito

Il Titolo non è necessario. Si va su Salva quindi con il trascinamento del cursore si sposta l'elemento pagina nella posizione desiderata per poi andare su Salva disposizione in alto a destra.

PUBBLICITÀ ADSENSE SOTTO IL TITOLO E ALLA FINE DEL POST

Per visualizzare dei banner pubblicitari a ridosso del contenuto dell'articolo bisogna operare nel codice del Tema. Si va quindi su Tema -> Backup/Ripristino -> Scarica Tema per salvare il Tema nel caso le modifiche non andassero a buon fine. Si va poi su Tema -> Modifica HTML. Si clicca con il mouse nell'area del codice quindi si digita Ctrl+F e nella casella di ricerca che appare in alto a destra si incolla

<data:post.body/>

che è il tag di Blogger che inserisce tutto il contenuto dell'articolo. Si va su Invio per evidenziare tale riga. Il codice ottenuto da Adsense non va però inserito così com'è perché va reso compatibile con il linguaggio XML del Tema di Blogger. Si incolla quindi nello strumento Blogcrowds e si va su Parse 

I caratteri <, > e " essendo incompatibili con il linguaggio XML saranno sostituiti dalle loro Entità. Tale codice definito parsato dovrà essere inserito nel Tema di Blogger.  È opportuno aggiungere anche dei tag condizionali per mostrare tale codice solo nei post. In sostanza si creano due codici di questo tipo

<!-- 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 -->

Il primo va incollato subito sopra a <data:post.body/> mentre il secondo subito sotto quindi si salva il Tema. Dopo pochi minuti per i blog più indicizzati e dopo qualche ora per quelli meno frequentati saranno visibili i banner Adsense. Ho inserito anche due tag colorati di blu per non mostrare i banner nelle pagine statiche. La prima e l'ultima riga sono i cosiddetti commenti che non vengono considerati dal browser essendo compresi tra i caratteri <!-- e --> ma servono all'amministratore per cercare il codice più rapidamente.

Con queste impostazioni saranno visibili un banner nella sidebar e due banner nei post rispettivamente subito sotto il titolo e subito sotto alla fine del contenuto.

COME PROCEDERE CON LA VISUALIZZAZIONE DA MOBILE

Come abbiamo già detto non c'è differenza tra versione desktop e mobile in questi nuovi modelli perché sono Responsive. Per questa ragione non possiamo in linea di massima usare un rettangolo grande da visualizzare sulla sinistra o sulla destra del layout da desktop perché quando il post viene aperto da mobile questa unità pubblicitaria permane nelle sue dimensioni che sono eccessive per un cellulare e sono esplicitamente vietate da Adsense quando sono mostrate subito sotto il titolo del post.

Si possono però creare dei vincoli per mostrare un certo banner fino a una certa risoluzione e un altro banner per risoluzioni inferiori. Visto che per il Tema Contempo la sidebar scompare per risoluzioni inferiori a 1440 pixel possiamo creare due unità pubblicitarie da mostrare nella parte alta del post, la prima che si veda con risoluzioni maggiori o uguali a 1440 pixel e la seconda che si veda con risoluzioni inferiori. L'unità pubblicitaria che si vuole mostrare per risoluzioni superiori a 1440 pixel può essere anche un rettangolo grande da 336x280 pixel.

Si procede come illustrato nel post su come mostrare un oggetto HTML in funzione della risoluzione. Si cerca quindi la riga ]]></b:skin> e, subito sopra a questa, si incolla questo codice

@media screen and (min-width: 1439px) {
.onlymobile {display:none;}
}
@media screen and (max-width: 1439px) {
.onlydesktop {display:none;}
}

quindi si salva il Tema. Subito sopra alla riga <data:post.body/> si può incollare questo codice

<!-- Banner in alto inizio -->
<div class='onlymobile'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Codice parsato annuncio adattabile per risoluzioni inferiori a 1440 pixel
</b:if>
</b:if>
</div>
<div class='onlydesktop'>
<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 parsato annuncio rettangolo grande per risoluzioni superiori a 1440 pixel
</div>
</b:if>
</b:if>
</div>
<!-- Banner in alto fine -->

dove sono stati incollati due codici Adsense. Il primo è quello adattabile visualizzato con risoluzioni inferiori a 1440 pixel e il secondo che invece viene mostrato con risoluzioni superiori a 1440 pixel. I valori colorati di blu sono le distanze tra il banner rettangolare e il contenuto del post.

Il banner a forma di rettangolo grande sarà mostrato sulla sinistra. Chi lo volesse sulla destra può sostituire left con right nel codice precedente. Una tale operazione può essere fatta anche per il banner mostrato alla fine dell'articolo scegliendo per esempio un rettangolo grande per risoluzioni superiori a un certo valore. La scelta del breakpoint a 1440 pixel è arbitraria e può essere cambiata e che per i programmi di affiliazione pubblicitaria diversi da Adsense si può seguire comunque la stessa falsariga di questo articolo. Si possono inserire con lo stesso meccanismo anche degli Insiemi di Link che debbono essere scelti in formato adattabile. Infine si possono aggiungere altri annunci manualmente all'interno del post incollando il codice non parsato in Modalità HTML.

Aggiornamento: Con lo strumento Screenfly controllate le varie risoluzioni al pixel per verificare che non si debba aggiungere o togliere un pixel ai breakpoint che sono stati impostati.