Pubblicato il 14/06/15e aggiornato il

Come creare una casella di ricerca con Adsense per Blogger.

Come utilizzare Adsense per creare un motore di ricerca personalizzato da mostrare ovunque o solo in una delle due versioni mobile o desktop.
Gli utenti della piattaforma Blogger possono utilizzare il widget ufficiale per inserire mediante widget un motore di ricerca sul sito. Una casella di ricerca è fondamentale per dare la possibilità ai lettori di cercare i contenuti che si sono pubblicati tramite delle parole chiave o query di ricerca.
Come detto chi ha Blogger può andare su Layout > Aggiungi un gadget > Base > Casella di ricerca e posizionare il motore in una sidebar o nel footer. Se siete registrati ad Adsense è possibile creare un motore di ricerca con gli strumenti di questo programma di affiliazione. Oltre a vantaggi grafici ci saranno per il publisher anche le entrate generate dalle unità pubblicitarie mostrate insieme ai risultati di ricerca. L'installazione di un motore di ricerca con Adsense può avvenire solo tramite il codice da ottenere accedendo al nostro account. Tutti i motori creati con Adsense o anche con altre modalità saranno accessibili dalla pagina Ricerca personalizzata per modificarli o eliminarli. 

COME GENERARE IL CODICE ADSENSE


Dopo aver effettuato l'accesso ad Adsense si va su I miei annunci > Ricerca > +Nuovo Motore di Ricerca Personalizzato e nella pagina che si apre si dà il nome al motore
 
motore-ricerca-adsense   

quindi si mette la spunta a Solo i siti che seleziono per effettuare le ricerche solo in determinati domini. Nel campo seguente si incolla l'URL del nostro sito senza http:// iniziale e con il .com finale se abbiamo un sito gratuito del tipo Blogspot. Se abbiamo più di un blog che trattano argomenti specifici possiamo aggiungere anche altri domini con l'accortezza di inserirli uno per riga.

motore-ricerca-personalizzato

Le parole chiave sono importanti per aiutare Google nella ricerca dei risultati in funzione dell'argomento del vostro sito. Per esempio modello non significa solo template ma anche persona che lavora nell'ambito della pubblicità o della moda. La pertinenza serve anche per mostrare annunci in linea con i contenuti del sito. Per esempio il termine "bolero" può essere relativo alla musica o alla danza dato il nome della omonima musica per balletto di Ravel ma anche relativo al cinema per il film diretto da Claude Lelouch o infine all'abbigliamento per signora. Specificare delle parole chiave separate da virgole aiuta a dissipare possibili ambiguità e a mostrare annunci più pertinenti.
Si mette la spunta a SafeSearch per filtrare eventuali risultati con contenuti per adulti. Nei campi successivi si sceglie la lingua e il paese del sito o dei siti su cui vengono effettuate le ricerche. Si clicca su +Canali personalizzati > Crea nuovo canale personalizzato per creare un canale specifico per il motore. Sarà una sorta di ID della casella di ricerca e ci permetterà di monitorarne le statistiche anche in funzione di eventuali entrate. Si può usare la stessa denominazione usata per il Nome del motore

casella-ricerca-adsense

Si va su Salva e si passa alla configurazione successiva Stile della casella di ricerca
 
casella-ricerca-adsene

in cui scegliere lo stile della casella e il numero di caratteri della stessa cioè la sua lunghezza. Si passa quindi su Stile dell'annuncio in cui scegliere i suoi colori. Se abbiamo già salvato una tavolozza di colori per il nostro sito non ci resta altro che richiamarla 

stile-annuncio

Altrimenti si va su Utilizza le impostazioni personalizzate e si scelgono i codici dei colori più adatti. Infine si va su Risultati di ricerca per settare gli ultimi parametri
 
risultati-ricerca-google

Le opzioni per la visualizzazione dei risultati sono tre: una pagina Google nella stessa finestra, una pagina Google in una nuova finestra e sul mio sito web utilizzando un iframe. Se intendiamo visualizzare la casella di ricerca solo nei dispositivi mobili è opportuno scegliere la seconda opzione mentre per un motore da visualizzare solo nel desktop si può optare per una pagina Google da aprire in un'altra scheda per evitare che il lettore lasci il nostro sito. Opzionalmente si può incollare l'URL del logo del nostro blog per mostrarlo insieme alla casella di ricerca.  Finalmente si va su Salva e ottieni il codice che ci darà modo di installare la casella sul nostro sito. Tale codice dovrà essere selezionato, copiato e incollato in un file di testo tipo Blocco Note e si va su Chiudi.

CASELLA DI RICERCA IN UN WIDGET


Possiamo incollare il codice della casella di ricerca così come è in un widget. In questo caso si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla in Sezioni del sito

codice-casella-ricerca

Si va su Salva e con il drag & drop del cursore si può spostare l'elemento pagina nella sidebar, nel footer o sopra l'area del post. Dopo uno spostamento bisogna andare su Salva disposizione

INSTALLARE LA CASELLA DI RICERCA NEL MODELLO DI BLOGGER


Potremo avere l'esigenza di mostrare il nostro motore di ricerca in un preciso punto del layout e magari solo nella versione desktop o solo nella versione mobile. Il regolamento di Adsense non permette di modificare i codici ma visto che Blogger ha un template in formato XML è consentito convertire il codice HTML ottenuto appunto in XML perché venga salvato da Blogger

Si può usare il tool Blogcrowds che ci permette di farlo con un click. Si incolla il codice e si va su Parse quindi si seleziona e si copia il codice risultante
 
codice-casella-parsato

 

COME MOSTRARE LA CASELLA SU DESKTOP


Il codice parsato può essere incollato nel modello con questa struttura

<b:if cond='!data:blog.isMobile'>
<div align='center'>
<div style='margin-top:8px; margin-bottom:8px;'> 
Codice parsato della casella di ricerca
</div>
</div>
</b:if>

Ci sono tre righe e le loro rispettive chiusure di cui la prima serve per mostrare la casella solo nella versione desktop, la seconda per centrare la casella e la terza per distanziare la casella dagli elementi posti più in alto e posti più in basso di 8 pixel. Il codice così creato può essere incollato subito sopra alla riga <header> per mostrare la casella sopra alla Intestazione oppure subito sotto alla riga </header> per mostrarlo sotto alla Intestazione.  Quelli proposti sono solo esempi e si possono naturalmente testare altri posizionamenti. 

COME MOSTRARE LA CASELLA DI RICERCA SOLO SU MOBILE


Se si vuole mostrare la casella di ricerca solo su mobile basterà modificare la prima riga della condizione evidenziata di giallo con quest'altra  <b:if cond='data:blog.isMobile'>. Concludo ricordando che se invece si vuole mostrare il motore di ricerca sia su desktop sia su mobile basta eliminare la prima e l'ultima riga dei tag condizionali evidenziate di giallo. Se si decide di mostrare il motore di ricerca su desktop e mobile è però consigliabile creare due motori per poi aggiungerci i relativi tag condizionali. Questa soluzione è consigliabile perché permette una migliore personalizzazione delle caselle di ricerca magari ponendone per esempio una al centro nella versione mobile e una sulla destra nella versione desktop del template.




18 commenti :

  1. ma adsense è la pubblicità, forse intendevi google search engine?!

    RispondiElimina
    Risposte
    1. No, no nessun errore, si chiamano motori di ricerca partner
      @#

      Elimina
    2. sotto i miei annunci ho solo
      "Contenuti
      Unità pubblicitarie
      Canali personalizzati
      Canali URL
      Esperimenti
      Stili dell'annuncio
      Altri prodotti"

      Non trovo crea motore di ricerca. Che sia solo per chi sblocca i 70 euro x il pagamento?

      Elimina
    3. No. Credo sia per tutti. Hai elencato solo le sottocategorie di Contenuti. poi sotto ci sono Contenuti per Cellulari, Ricerca, Stili dell'annuncio e Altri Prodotti. Leggi qui
      https://support.google.com/adsense/answer/9879?hl=it e qui
      https://support.google.com/adsense/answer/160530

      @#

      Elimina
    4. niente, non ce l'ho proprio. Forse bisogna prima attivare google "custom search engine" e poi associare i due prodotti oppure poi automaticamente appare anche su adsense.
      Su Google Custom Search Engine si può creare un search engine con le risorse preferite associate ad un account adsense.
      E' la strada inversa.

      Elimina
    5. Sì. Puoi usare
      https://cse.google.it/cse/all
      e associare il tuo ID Adsense. Dovrebbe funzionare ugualmente
      @#

      Elimina
  2. grazie come sempre .Chiaro ed esaustivo Ernesto. Ma la casella di ricerca è venuta centrata.Se la volessi all'estremo margine di destra?

    RispondiElimina
  3. scusami ......non ho letto bene.dovrei levare la seconda linea giusto?
    lapsus

    RispondiElimina
  4. ......ho fatto un casino. torno alla prima domanda per accostarla all'estrema destra?

    RispondiElimina
  5. bene grazie questo è il rislutato http://infoutili.blogspot.it/ ,il pulsante cerca è venuto fuori dalla foto e vorrei informarti che nella vesrione cellulare non si vede la casella cerca .Ho eliminato prima e ultima riga dal codice sopra. Grazie ancora se mi aiuterai e buon fine settimana

    RispondiElimina
    Risposte
    1. @# Per mostrare un elemento sia su mobile sia su desktop occorre usare un widget. Nel mio sito ho messo due caselle una per il desktop e una per il mobile. In questo post ci sono i tag condizionali per farlo. Per spostare verso il centro la casella sostituisci
      <div align='right'>
      con
      <div style='float:right; margin-right:65px;'>

      Elimina
  6. Non ho capito Ernesto. Per inserire una casella di ricerca google che compaia sia nella versione desktop che cellulare del sito tu scrivi sopra che va leiminata prima ed ultima riga del codice.L'ho fatto ma compare solo nella versione desktop.Puoi vedere tut stesso.Io la casella la vorrei comunque spostare nella vesrione desktop in alto a destra a limite superiore.Come la sollevo? Grazie

    RispondiElimina
    Risposte
    1. La teoria è una cosa e la pratica è un'altra. In questo sito ho dovuto creare due caselle di ricerca, una per il desktop e una per il mobile inserite con i rispettivi tag condizionali esattamente come fatto per i menu
      @#

      Elimina


  7. ho seguito la procedura inserito un codice per ciascuna casella di ricerca e sostituito la riga con quella sopra ma non compare slla vesrione mobile.DOVE sbaglio?

    RispondiElimina
    Risposte
    1. Incolla questo codice
      <b:if cond='data:blog.isMobile'>
      <div align='center'>
      Codice parsato della casella di ricerca
      </div>
      </b:if>

      subito sotto la riga </header> del modello o subito sopra alla riga <header>
      e vedrai che funziona
      @#

      Elimina
  8. Scusi Ernesto ma la casella di ricerca di adsense dovrebbe generare entrate o sbaglio?

    RispondiElimina

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.