Pubblicato il 05/04/17 - aggiornato il  | 43 commenti :

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. 

annunci-adattabili

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

pubblicità-sidebar

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 

parsare-codice

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.

banner-adsense

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.

banner-mobile-desktop

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. 


43 commenti :

  1. Grazie per le preziose informazioni!! Ottimo sito!!

    RispondiElimina
  2. Ciao Ernesto, ma per quanto riguarda gli annunci a livello di pagina si implementano come prima o qualcosa è cambiato?

    RispondiElimina
    Risposte
    1. Non li ho testati nei nuovi temi però non vedo perché il procedimento dovrebbe essere diverso da quello illustrato in questo post
      http://www.ideepercomputeredinternet.com/2015/09/annunci-livello-pagina-blogger-adsense.html
      @#

      Elimina
  3. Buongiorno Ernesto, ho seguito i tuoi consigli per implementare la pubblicità nei nuovi modelli, tutto bene. Ho un solo problema, uno dei miei blog https://vitavivendo.blogspot.it/ ( il tema è "Soho" il secondo partendo da sinistra) non visualizza la sidebar, ovvero, la visualizza sotto forma di griglia (icona con linee orizzontali). Questo però comporta che la pubblicità resta nascosta. Cosa posso fare renderla visibile? Grazie.

    RispondiElimina
    Risposte
    1. Ho preso in esame solo il modello Contempo e non conosco ancora il Tema che hai scelto :(
      @#

      Elimina
  4. Ciao Ernesto,
    ho un problema con la scheda di AdSense. Da qualche giorno compare questo messaggio:
    Entrate a rischio - Uno o più file ads.txt non contengono il tuo ID publisher AdSense. Effettua subito le correzioni necessarie per non compromettere gravemente le entrate.

    Siti con problemi riguardanti file ads.txt
    error_outline
    Nei file ads.txt manca l'ID publisher
    Devi aggiungere l'ID publisher ai seguenti file ads.txt:
    homeaway.com/ads.txt
    mytasteita.com/ads.txt
    Ciò eviterà eventuali impatti negativi sulle tue entrate. Copia e incolla il seguente snippet di codice in ciascun file ads.txt:
    google.com, pub-15xxxxxxxxxxxxx62, DIRECT, f08c47fec0942fa0
    Se hai già eseguito questa operazione, attendi fino a 24 ore affinché i nostri sistemi possano applicare le modifiche.
    A quante pare ho controllato e la pubblicità è stata inserita in due siti di cui non ho la più pallida idea.
    Sai per caso nello specifico, come si fa a modificare il file ads.txt oppure come arginare il problema.
    Grazie mille

    RispondiElimina
    Risposte
    1. Hai un blog su Blogger immagino. Il tuo sito viene ripubblicato da degli aggregatori. Non so se gli hai dato il permesso o meno. Gli aggregatori sono homeway.com e mytasterita.com.
      Questi aggregatori non sono i proprietari del tuo account Adsense e dovrebbero aggiungere il file ads.txt nel loro dominio
      https://support.google.com/dfp_premium/answer/7441288?hl=it
      per dichiarare di essere venditori autorizzati di pubblicità. Noi utenti di Blogger al momento non possiamo aggiungere il file ads.txt, lo dovrà fare lo stesso Blogger così come ha fatto con il file robots.txt.
      COME RISOLVERE
      Vai su Adsense -> Impostazioni -> I miei siti -> Gestisci siti -> Menù Altro -> Fai click su Autorizzazioni dei siti -> Attiva l'interruttore Attivo che si trova accanto ad "Autorizza solo i miei siti verificati a utilizzare il mio codice dell'annuncio".
      https://i.imgur.com/hvj2n0v.png
      Vai su Salva. Le modifiche entreranno in vigore in 48 ore. Dovrai aggiungere gli URL dei tuoi siti. In questo modo negli aggregatori che ripubblicano i tuoi post anche se ci sono i tuoi banner non verranno generate entrate
      @#

      Elimina
  5. Ciao Ernesto
    preciso e puntuale come sempre. Ho una domanda: il codice da te fornito mi fa vedere in automatico gli annunci adsense all'inizio e alla fine di tutti i post. Ma se dovessi escludere la pubblicazione di questi annunci da uno o più post come dovrei modificare il codice da te fornito? SE può tornare utile, non ho un dominio personalizzato ma sono ancora con l'estensione .blogspot...
    Grazie mille

    RispondiElimina
    Risposte
    1. Devi usare i tag condizionali
      https://www.ideepercomputeredinternet.com/2016/08/blogger-conditional-tags.html
      Devi cioè incollare una riga prima del codice della unità pubblicitaria e uno alla fine con questa sintassi
      <b:if cond='data:blog.url != "URL_PAGINA"'>
      CODICE UNITÀ PUBBLICITARIA
      </b:if>
      dove al posto di URL_PAGINA incolli l'indirizzo della pagina in cui non vedere l'annuncio. Con blogspot devi mettere l'indirizzo con il .com e non con il .it
      @#

      Elimina
  6. Grazie mille Ernesto..utilissimo come sempre

    RispondiElimina
  7. Ciao :) quasi sicuramente lo avrai spiegato ma non lo trovo. E' possibile inserire il codice adsense solo in articoli con un determinato tag (etichetta)? O in alternativa scegliere le url dove non mostrarlo? Grazie ^^

    RispondiElimina
    Risposte
    1. Purtroppo non è possibile. Ho provato diversi sistemi ma non sono riuscito a trovare la soluzione 🤨
      @#

      Elimina
    2. Per non mostrarlo in un solo post devi usare i tag condizionali
      https://www.ideepercomputeredinternet.com/2016/08/blogger-conditional-tags.html
      ma si può escludere sostanzialmente solo un post
      @#

      Elimina
  8. Salve, sono disperata. Ho sul mio blog gli annunci di Adsense tutto pare funzionare regolarente ma gli annunci non si vedono. Con nessun browser. Ho letto tutte le sue informazioni dettagliate ma non essendo molto pratica ho paura di combinare qualche pasticcio. Io mi sono limitata ad inserire da Layout aggiungi Adsense. Ma nulla. Aiutoooo

    RispondiElimina
    Risposte
    1. Sei iscritta ad Adsense? Riesci a accedere a questa pagina?
      https://www.google.com/adsense
      perché bisogna essere accettati dal programma prima di mettere gli annunci. Se è così e se vedi l'interfaccia di Adsense con sulla sinistra la barra del menù con I miei annunci allora è tutto in ordine. Togli Adsense inserito tramite Layout e segui le istruzioni di questo post
      @#

      Elimina
    2. Innanzi tutt grazie per la sollecita risposta, sono iscritta ad Adsense e vedo la pagina del link da lei postato, tra l'altro ricevo gia' proventi anche da Youtube. Vedo la barra del menu con i miei annunci ma non compaiono gli annunci sul blog. Ok tolgo Adsense iserito tramite layout e po devo inesire quindi il codice Html come indicato in questo post? Non mi é chiaro non dovrebbe essere automatico? Con Youtube tutto é stato automatico e semplicissimo. Grazie se ancora mi vorrai dedicare un attimo del tuo tempo.

      Elimina
    3. Se é necessario posso mettere se mi autorizza il link del mio blog

      Elimina
  9. Certamente puoi incollare l'indirizzo del tuo sito. Non si possono mettere link cliccabili
    @#

    RispondiElimina
  10. All'inizio ti consiglio di mettere gli annunci auromatici
    https://www.ideepercomputeredinternet.com/2018/02/adsense-auto-ads-blogger.html
    Poi quando li vedi nel sito puoi mettere anche gli altri
    @#

    RispondiElimina
    Risposte
    1. Ok domani provo grazie mille per ora e buona serata.

      Elimina
    2. Ho fatto tutto come da procedura ma ancora nessuna pubblicita' purtroppo. Questo é il mio blog https://germanacontini.blogspot.com/

      Elimina
    3. Allora ci deve essere qualche problema regolamentare. Rivolgiti al forum
      https://productforums.google.com/forum/#!forum/adsense-it
      incollando l'indirizzo del tuo sito e dando più spiegazioni possibili. Il forum è frequentato pure da dipendenti Google che potrebbero aiutarti a risolvere
      @#

      Elimina
    4. Prova ad andare a vedere su Siti Verificati in Adsense per vedere se hai aggiunto il dominio del tuo sito
      @#

      Elimina
    5. Non è che il problema è dovuto al contenuto Flash presente nella pagina?

      Elimina
    6. Il sito risulta verificato, anche io avevo pensato a quel Flash iniziale ma mi spiacerebbe rimuoverlo. Comunque grazie mille per la pazienza e consigli provero' a scrivere al forum che mi hai suggerito anche se mi pare di ricordare di aver gia' scritto in passato. Ora verifico. Grazie ancora e buon lavoro.

      Elimina
  11. Quella della presenza del Flash è una ipotesi da prendere in considerazione
    @#

    RispondiElimina
  12. Ciao Ernesto. Come si potrebbe fare per mettere una piccola scritta "Pubblicità" sopra un annuncio adsense, ad esempio su di un 336 x 280? Grazie

    RispondiElimina
    Risposte
    1. Ti riferisci a un banner inserito nel Tema immagino quindi o prima del contenuto del post o subito dopo. Basta che prima del codice del banner pubblicitario tu incolli un codice come questo

      <div style="text-align:center; font-size:20px; font-weight:bold; color:#313131;">Pubblicità</div>

      poi potrai calibrare meglio la larghezza della scritta tramite la dimensione dei font. Opzionalmente puoi pure scegliere il colore, il grassetto (font-weight) e magari pure la famiglia di font (font-family:...;). Se invece ti riferisci a un banner inserito così una tantum, il codice lo devi comunque incollare subito sopra ma tutte le volte che lo vuoi visualizzare.
      @#

      Elimina
  13. Si, mi riferisco al banner nel tema. Il problema è che aggiungendo la dicitura "Pubblicità", il banner viene spostato dal margine destro a quello sinistro del post, e il contenuto del post viene spostato verso il basso invece che rimanere alla destra del banner. Vedrò di sistemare in qualche modo. Grazie ;)

    RispondiElimina
    Risposte
    1. Vuoi mettere la scritta sopra a un banner non centrato ma con un tag float:left; ?Allora prova a sostituire text-align:center; con float:left; e eventualmente metti un < br/ > tra la scritta e il banner
      @#

      Elimina
    2. Non va, la scritta spinge il banner dalla parte opposta. Rimuovendo anche la stringa esistente

      < span style='float: right; margin: 25px 0px 25px 20px; border:2px dotted #696969;'>

      la scritta si posiziona correttamente sul banner ma spinge il contenuto del post sotto allo stesso banner invece che tenerlo lateralmente (come da te a inizio di ogni post). Leggendo qua e la mi è sembrato di capire che è una modifica da apportare a livello di codice del banner; ma avevo trovato solo qualche scarso riferimento per Wordpress. Vedo se riesco a beccare qualcosa di specifico per Blogger, in qualche modo. Grazie.

      Elimina
    3. @# Prova così
      <div style='float: right; margin: 25px 0px 25px 20px; border:2px dotted #696969;'>
      <p style="font-size:18px;">Pubblicità</p>
      Codice parsato
      </div>

      Elimina
    4. Così va bene. Grazie dell'aiuto Ernesto ;)

      Elimina
  14. Ciao Ernesto, involontariamente l'altro ieri ho eliminato i siti dal pannello Adsense e ieri mattina lo rimessi, ora c'è il messaggio che sono in preparazione e ci vogliono da qualche giorno a due settimane.
    Hai qualche consiglio da darmi per accelerare il tutto? Sui blog sono rimasti i widget Adsense ma non visibili.

    RispondiElimina
    Risposte
    1. No, non ho esperienza in merito. I banner li ho sempre inseriti con il codice e non con i widget
      @#

      Elimina
    2. Inserendo il codice di attiva subito o c'è sempre un attesa?

      Elimina
    3. Dipende dal numero di visite. Possono volerci un paio di minuti per i siti con molte visite fino a qualche ora per quelli con meno visitatori. Però so che ci sono account Adsense che sono attivati solo mediante Blogger. Non si se sia il tuo caso. In ogni caso chiedi delucidazioni sul forum Adsense
      @#

      Elimina
    4. Io avevo la pubblicità, poi per un mio sbaglio ho eliminato i siti dal pannello Adsense, per un mio sbaglio li ho eliminati dal pannello di Google Adsense e subito dopo li ho inseriti di nuovo, ho chiesto la pubblicità automatica e ieri mi hanno risposto che dovevo correggere qualcosa, ad intuito mi è venuto in mente che non avevo inserito il codice tra gli head ora lo fatto e vediamo come va

      Elimina
  15. Ciao Ernesto, volevo chiederti se per visualizzare adsense su mobile (da mobile infatti i banner adsense non mi vengono visualizzati), basta inserire anche soltanto il primo codice che indichi? questo per intenderci:
    @media screen and (min-width: 1439px) {
    .onlymobile {display:none;}
    }
    @media screen and (max-width: 1439px) {
    .onlydesktop {display:none;}
    }

    RispondiElimina
    Risposte
    1. Per la mia esperienza personale visto che da mobile le sidebar non si visualizzano e neppure altri widget, per avere pubblicità anche su mobile bisogna incollare il codice direttamente nel post. Lo incolli in Modalità HTML prima di pubblicare tra due paragrafi. Ne puoi incollare anche più di uno.

      @#

      Elimina
  16. Ciao, ho inserito il codice degli annunci in automatico, ma non compare più il banner sotto il post. Solo vignetta ogni tanto. Le entrate perciò quasi non esistono. Domanda: ma con gli annunci automatici devo implementare codici come in questa guida?

    RispondiElimina
    Risposte
    1. Gli annunci automatici vengono aggiunti da Google in tutti i post in cui è presente il codice Adsense. Guarda se ti possono aiutare questi due post che però sono di qualche tempo fa
      https://www.ideepercomputeredinternet.com/2019/11/adsense-annunci-automatici-blogger.html
      https://www.ideepercomputeredinternet.com/2019/11/adsense-annunci-automatici-personalizzazione.html

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy