Come inserire annunci dentro i post di Blogger da desktop e da mobile.

Come aggiungere annunci pubblicitari in mezzo ai contenuti dei post di Blogger usando la tipologia InArticle di Adsense.

Nel mese di Luglio il programma di affiliazione pubblicitaria di Google ha introdotto la novità dei formati nativi di annunci, segnatamente i formati InArticle studiati appositamente per essere inseriti e visualizzati all'interno di un post.

Già da circa un anno Adsense ha tolto il limite massimo di 3 annunci per pagina lasciando la possibilità di aggiungere più unità pubblicitarie quando la quantità di contenuti lo consenta.

In questo articolo non mi occuperò di questioni regolamentari che non mi competono. Nel caso abbiate dei dubbi in merito rivolgetevi all'apposito Forum che è l'unico luogo in cui avere informazioni affidabili. Mi limiterò a mostrare alcune tecniche per inserire annunci diversificati su mobile e su desktop ovviamente solo nei modelli precedenti a quelli Responsive introdotti di recente in cui non si fa differenza tra le visualizzazioni da fisso e da mobile.

Fin dagli inizi gli utenti di Blogger che monetizzano il traffico hanno avuto il desiderio di inserire in modo automatico degli annunci all'interno degli articoli così come avviene per l'altro CMS Wordpress.

In realtà sono anni che la questione è stata risolta utilizzando il javascript mostrando un annuncio subito sotto per esempio all'intervallo della pagina che viene creato con il tag <-- more --> oppure creando un tag apposito da sfruttare come marcatore del javascript.

Non illustrerò però questo sistema perché facendo uso di javascript potrebbe essere contrario al regolamento del programma di affiliazione e quindi non mi voglio prendere la responsabilità di illustrare una metodologia che potenzialmente potrebbe non essere consentita.

In questo articolo mi limiterò quindi a mostrare come aggiungere in modo manuale gli annunci InArticle all'interno dei post con la possibile scelta se mostrarli in una sola delle due versioni o in entrambe.

COME ACQUISIRE UN CODICE DI UN ANNUNCIO INARTICLE

Gli annunci InArticle sono Responsive quindi si adattano automaticamente al dispositivo con cui viene aperta la pagina in cui sono stati posizionati. Si accede al nostro account Adsense quindi si va su  I miei annunci -> +Nuova unità pubblicitaria per poi cliccare su Seleziona nella scheda Annunci InArticle

Nella finestra di configurazione si inizia digitando il nome dell'annuncio. Per monitorarne il rendimento è bene usare un sistema di identificazione che può essere il nome del blog, la posizione della unità pubblicitaria, la tipologia dell'annuncio e un numero di ordine, p.e.  per questo post potrei usare il nome IpCeI InArticle 1

Sulla destra si scelgono i codici dei colori oppure si seleziona una tavolozza di colori già impostata. Si può anche evitare di farlo e selezionare la casella Siti ottimizzati da Google per una scelta automatica. Si va su Salva e ottieni il codice per copiare il codice della unità pubblicitaria InArticle.

Oltre agli annunci InArticle si possono inserire in mezzo ai post anche unità pubblicitarie di Insiemi di link che anch'essi potevano essere inseriti in numero massimo di tre fino a un anno fa. Il numero di annunci all'interno dei post siano essi InArticle o Insiemi di link dipendono dalla quantità di contenuti. Non mi risulta esista una regola precisa. Per aggiungere un quarto annuncio bisognerà avere post di almeno 500 parole, per aggiungerne altri ci vorranno articoli con un numero di parole ancora superiore.

Gli insiemi di link vengono mostrati nella versione desktop in modo molto semplice inserendoli nella sidebar o subito sotto all'Header mentre nella versione mobile in linea di massima non è così semplice aggiungerli. Si può quindi decidere di mostrare gli annunci InArticle sia da desktop sia da mobile e creare una condizione per mostrare gli insiemi di link solo nella versione mobile. 

CREARE CODICE DA INSERIRE ALL'INTERNO DEI POST

Il codice che dovremo inserire all'interno dei post dovrà essere inserito all'interno di un <div> in modo da poter inserire delle condizioni di visualizzazione. Facciamo quindi l'esempio di aver acquisito due codici di annunci InArticle di cui uno sarà aggiunto ai post con una buona lunghezza mentre il secondo verrà aggiunto solo nei post molto lunghi. Abbiamo quindi copiato anche un codice di un annuncio di Insiemi di link che invece verrà visualizzato solo nella versione mobile. Ricordo che per gli Insiemi di link si va su I miei annunci -> +Nuova unità pubblicitaria -> Annunci di testo e display -> Seleziona. Si va quindi su Opzioni con link in Visualizzazione per poi dare un nome all'annuncio e copiarne il codice

Si creano quindi due, tre o quattro blocchi di codice con questa struttura

<div class="inarticle1">
Codice dell'annuncio InArticle numero 1
</div>

<div class="inarticle2">
Codice dell'annuncio InArticle numero 2
</div>

<div id="linkinmiddle">
Codice dell'annuncio dell'insieme di link
</div>

Dopo aver editato il post e averlo ottimizzato dal lato SEO si va in Modalità HTML e si incollano i due, tre o quattro annunci che verranno visualizzati in mezzo al post. È bene incollarli tra un paragrafo e un altro vale a dire dopo un tag </p> o dopo un tag </div> e prima di una tag <p> o un tag <div>.

Questa accortezza è fondamentale per impedire al codice degli annunci di interagire in modo indesiderato con altro codice del post. Successivamente si pubblica l'articolo come al solito.

AGGIUNGERE DELLE CONDIZIONI

Per aggiungere delle condizioni che siano sempre valide per gli annunci inseriti in questo modo dovremo operare nel Tema di Blogger. Si va quindi su Bacheca -> Tema -> Modifica HTML e si cerca la riga </head> quindi, subito sopra a questa, si incolla questo codice

<b:if cond='!data:blog.isMobile'>
<style>
#linkinmiddle {display:none;}
</style>
</b:if>

In questo modo l'annuncio dell'insieme di link si vedrà solo nella versione mobile. Se volessimo vedere solo nella versione mobile oltre all'insieme di link anche un annuncio InArticle il codice diventerebbe

<b:if cond='!data:blog.isMobile'>
  <style>
  .inarticle2,#linkinmiddle {display:none;}
  </style>
  </b:if>

Infine ipotizziamo di voler mostrare il primo annuncio InArticle solo nella versione desktop. Il codice da incollare sempre sopra alla riga </head> allora avrà questa struttura

<b:if cond='data:blog.isMobile'>
  <style>
  .inarticle1 {display:none;}
  </style>
  </b:if>

A chi volesse approfondire consiglio di leggere il post sui tag condizionali. Ricordo anche che per i selettori class si antepone il puntino al nome della classe mentre per i selettori id si antepone il simbolo del cancelletto ( # ). Gli annunci verranno visualizzati dopo 10 - 20 minuti che sia stato pubblicato il post. Questo però la prima volta che vengono utilizzati questi codici perché successivamente la visualizzazione sarà immediata. 

Concludo ricordando che questa metodologia di inserimento di annunci pubblicitari all'interno dei post può essere usata anche per altri programmi di affiliazione. Quando si aggiunge un codice di un annuncio in un post di Blogger non occorre parsarlo come accade con il Template.