Pubblicato il 08/09/17 - aggiornato il  | 7 commenti :

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

inarticle-annunci

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

configurazione-inrarticle

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

annunci-con-link

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

implementazione-annuncio

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. 




7 commenti :

  1. Gentile Ernesto,
    innanzitutto, scusami se il commento al tuo post è palesemente fuori tema.
    Da alcune settimane seguo il tuo blog che trovo molto utile e interessante.
    Io ho un blog (piattaforma Blogger( per il quale uso un modello molto semplice e mi trovo bene, soltanto vorrei modificare la grandezza del font dei commenti che al momento è identica a quella dei post.
    Inoltre, non riesco a comprendere perché da mobile la risposta ai commenti è "a nido d'ape", mentre usando il browser web su pc, no.

    Ti ringrazio in anticipo per la risposta.
    Cordiali saluti

    RispondiElimina
    Risposte
    1. Hai scelto di vedere i commenti in una finestra separata da desktop. Per visualizzarli in modo nidificato vai su Impostazioni -> Post e Commenti -> Posizione commento e scegli Incorporato quindi vai in alto su Salva impostazioni.

      La dimensione dei caratteri dei commenti e solitamente come quella dei post. Si può provare anche a cambiarla lasciando invariariata la dimensione dei font del post. Vai su Tema -> Modifica HTML e cerca questa riga ]]></b:skin> con Ctrl+F. Se non la trovi clicca sulla freccetta nera accanto alla sezione <b:skin>. Subito sopra a questa riga incolla questo codice

      .comments h4 {
      font-size:12px !important;
      }

      Ovviamente puoi modificare il valore di 12 pixel con un altro.

      @#

      Elimina
  2. Ciao, grazie per questo utilissimo post.
    Una domanda: il fatto che il codice, una volta salvato il post, viene leggermente modificato da blogger in automatico, aggiungendo all'interno del codice adsense dei "< br / >", non comporta nulla per la corretta fruizione di Google Adsense, vero?

    RispondiElimina
    Risposte
    1. Nell'Editor di Blogger vai sulla destra su Impostazioni post -> Opzioni -> e toglie la spunta a Usa il tag < br > .

      Quando incolli il codice controlla che sia quello copiato correttamente. È la prima volta che sento di questo tag aggiunto all'interno mentre è normale che venga aggiunto prima o dopo il codice
      @#

      Elimina
    2. Ciao, te l'ho scritto perché ho visto che anche a te succede, verificando ad esempio la presente pagina in formato html. Hai dei < br > all'interno dello script. Se non ti risulta devo aver sbagliato a vedere.

      Elimina
    3. Ho capito quello che volevi dire. Si vedono i tag < br > nel sorgente pagina digitando Ctrl+U ma non vengono aggiunti dall'Editor di Blogger. Infatti andando su Modifica nel post in oggetto il codice A. è rimasto invariato.
      I tag < br > presumibilmente vengono aggiunti dai server per mostrare la pubblicità su più righe e non dipende da noi
      @#

      Elimina
    4. Bene, grazie per la spiegazione! :)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.