Inserire annunci AdSense dentro il post con i CSS

Con la nuova veste grafica, ho inserito gli annunci AdSense non proprio sopra il post, ma all’inizio, facendoli integrare col testo dell’articolo. E’ una cosa che avrei voluto provare da tempo, per testarne il rendimento, ma nel vecchio template letteralmente non avevo lo spazio per farlo.

E’ ancora presto per dire se è una posizione migliorare di quella precedente, i rendimenti (in termini di click o di guadagno) sono sempre soggetti a fluttuazioni, quindi aspetto qualche giorno prima di trarre conclusioni (che condividerò come sempre in un post).

Ho visto comunque che la cosa interessa anche ad altri, ed eccomi qui a spiegare come fare. Sebbene farò sempre riferimento alla struttura di Blogger, il concetto vale per qualsiasi piattaforma in cui sia possibile inserire codice HTML.

Visto che andremo a modificare il codice del template, raccomando come sempre di farne un backup.

Creiamo l’annuncio adatto

Per prima cosa bisogna scegliere il formato, che, come mi è capitato di ricordare spesso, più grande è, meglio è. Ma senza esagerare, bisogna anche lasciare posto al testo dell’articolo altrimenti l’effetto sarà davvero spaventoso. Direi che si dovrebbe di occupare al massimo la metà dello spazio a disposizione. Avendo la colonna dei post un’ampiezza di oltre 600, ho usato un annuncio di dimensioni 300x250:

Se avete poco spazio, potete anche decidere di usare gli insiemi di link di AdSense, che come rendimento non hanno niente da invidiare agli altri, anzi, vista la posizione particolare potrebbero essere preferibili.

Potete anche usare entrambe le soluzioni: per esempio, un annuncio grande sopra il post, e un insieme di link dentro. Ma la regola del chi troppo vuole nulla stringe vale sempre: se riempite troppo di annunci il post, la sua lettura diventerà difficile, e al tempo stesso correte il rischio di far “perdere valore” ai vostri click.

Gli annunci testuali dovrebbero avere un rendimento nettamente migliore di quelli illustrati, ma consiglio sempre di provare le varie soluzioni.

Ricordatevi che una volta creato l’annuncio, passeranno almeno dieci minuti prima che sia visibile.

Prepariamo il codice

Una volta creato l’annuncio, dovrete usare lo strumento di cui ho parlato in questo post per adattare il codice HTML di AdSense a quello XML del template di Blogger.

Quando avrete fatto, il codice ottenuto va inserito tra:

<span style='float: left; margin: 10px 5px 5px 0px;'>

e

</span>

per avere l’annuncio allineato a sinistra. Se volete invece l’annuncio allineato a destra, come prima porzione di codice usate questa:

<span style='float: right; margin: 10px 0px 5px 5px;'>

Notate che tramite margin impostiamo il margine da lasciare intorno all’annuncio, partendo dall’alto e girando in senso orario. Queste sono definizioni CSS che regolano l’aspetto del vostro template.

Visualizzare l’annuncio solo nella pagina del post

Se volete visualizzare l’annuncio AdSense solo nella singola pagina del post (come faccio io), racchiudete ulteriormente tutto il codice tra:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

e

</b:if>

Questa operazione si rende necessaria perchè lo stesso tipo di annuncio non può essere visualizzato più di tre volte, per cui nella pagina iniziale del blog i primi tre annunci lo avranno e gli altri no, con un effetto grafico non certo piacevole.

Inserire il codice nel template

Andate in Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate la seguente porzione di codice:

<div class='post-body'

E subito sopra incollate il codice AdSense che avete ottenuto. Se non riuscite a trovare questa porzione di codice, cercate questa:

<p><data:post.body/></p>

E sempre subito sopra incollate il codice AdSense. L’annuncio verrà visualizzato automaticamente in tutti i post.

A questo punto non vi resta che salvare il template e il gioco è fatto.

Se fate questa modifica, mi piacerebbe avere un vostro riscontro sull’andamento dei click e dei guadagni per condividerne le impressioni.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!