Creare banner pubblicitari con Google Web Designer

Se siete dei frequentatori di internet vi sarete certamente imbattuti nei banner pubblicitari che sono presenti in moltissimi siti web e servono ai loro proprietari per monetizzare il proprio lavoro. Uno dei maggiori player del settore è certamente Google con i suoi programmi Google Ads e Google Adsense. Il primo si chiamava AdWords ed è rivolto agli investitori pubblicitari per creare campagne mentre il secondo è stato creato a beneficio dei publisher che possono mostrare i banner di Google Ads tenendo per sé una percentuale dei guadagni.

La società di Mountain View ha da tempo messo a disposizione degli investitori uno strumento per creare banner pubblicitari animati che però può essere considerato anche un editor HTML e servire anche per creare pagine web. In questo post vedremo come usare questo programma per creare dei banner pubblicitari, non tanto per farsi pubblicità con Google Ads, ma per usarli per promuovere sé stessi sui social o per mostrarli in siti o o blog.

Tali banner possono contenere inviti a visitare canali Youtube, account Instagram, pagine Facebook ma anche a pubblicizzare una campagna sociale, un evento o a sensibilizzare i visitatori su un dato argomento. I banner creati con questo strumento di Google vengono salvati in delle cartelle che contengono numerosi file e non sono facilmente utilizzabili. In questo post vedremo come bypassare il problema e salvare il banner come GIF animata.

Come creare un Banner HTML5 con Google Web Designer

Nel precedente post abbiamo visto le principali funzionalità di Google Web Designer, un software multipiattaforma di Google per creare siti web e banner pubblicitari. In questo articolo vedremo più in dettaglio come creare un tale banner.

Il programma si può scaricare e installare dalla sua homepage in Windows, Mac e Linux. Gli oggetti saranno creati in HTML5 con animazioni e elementi interattivi. Ho iniziato a usare questo tool da pochi minuti quindi non lo maneggio completamente ma si possono fare delle realizzazioni interessanti anche utilizzandone solo le funzioni principali.

Il concetto è quello classico della Timeline in cui creare dei fotogrammi, che poi saranno gli elementi del banner quando verranno riprodotti. I frame del banner possono essere realizzati trascinando immagini, digitando testo e animando gli oggetti che si sono inseriti. Con i tool situati nella parte destra del programma si possono personalizzare colori, stili, bordi e dimensioni di tutti gli elementi.

Come creare un bottone o un banner con un video in loop.

In un articolo scritto all'inizio di Settembre ho mostrato quasi tutte le opzioni per creare un bottone da inserire in una pagina web con un semplice codice HTML, con il linguaggio CSS per personalizzarne l'aspetto, con una immagine e addirittura con un video realizzato in Flash segnatamente in formato SWF.

Tale tecnologia sviluppata dalla Adobe è però da tempo molto criticata per la mancanza di sicurezza e per il grande consumo di risorse che richiede. Verrà abbandonata definitivamente a partire dal 2021 (cito a memoria) e sostituita integralmente con video inseriti nelle pagine web con il linguaggio HTML5.

Con questa tecnologia supportata ormai da tutti i principali browser basterà usare il tag <video> con una opportuna sorgente, così come avviene per le immagini, per mostrare un filmato senza bisogno di usare un player. Questo può essere fatto anche per un file audio senza mostrare l'icona di download e le altre icone di controllo.

Come personalizzare il banner dei cookie di Blogger

A fronte di un commento ricevuto ieri ho pensato di riprendere in mano la questione del banner per l'accettazione dei cookie a cui ho dedicato molti post. A chi non sapesse di cosa stia parlando consiglio di leggersi l'articolo su cosa prescrive il regolamento del Garante della Privacy e su come implementare le personalizzazioni del Banner visibile a chi per la prima volta accede a un sito.

Tutti i blog su Blogger hanno un banner nativo creato appositamente da Google con due pulsanti OK e Ulteriori Personalizzazioni. Il lettore che clicca su OK accetta l'uso dei cookie e nasconde il banner mentre chi clicca su Ulteriori Informazioni apre la pagina di Google sulla sua Politica della Privacy.  Questo banner è sufficiente solo se si possiede un sito senza pubblicità e senza pulsanti di social network come per esempio quelli di Facebook. Infatti anche la sola presenza di un bottone del Mi Piace permette a Facebook di profilare gli utenti che accedono alla pagina web e che quindi dovrebbero essere informati di questo.

Come mostrare un avviso fisso o fluttuante (Post-it) su Blogger con link a Facebook, Google+ e Twitter.

Chi possiede un sito spesso ha l'esigenza di comunicare ai lettori una importante informazione. Può essere quella di dover abbandonare il blog per un certo periodo di tempo, di non poter rispondere ai commenti per sopravvenuti impegni, di aver realizzato un nuovo progetto da condividere o altro ancora.

L'avviso con cui si vuole comunicare una novità ai lettori deve essere ben visibile ma anche non invasivo. Ci deve quindi essere un sistema semplice per poterlo nascondere all'occorrenza. Un avviso di questo tipo può essere utile anche per pubblicizzare una campagna di sensibilizzazione o per fare partecipi i lettori di un evento sportivo, cinematografico, teatrale o musicale.

L'avviso che vi propongo ha questo aspetto che però può essere personalizzato

Come personalizzare il Banner di Blogger per i cookie nei modelli a Visualizzazione Dinamica.

Il javascript utilizzato da Google per i modelli Dynamics Views è lo stesso di quello degli altri template e non mi so spiegare perché quando provavo ad applicarlo non mi funzionava mentre adesso invece il banner si visualizza. Probabilmente hanno cambiato qualcosa nel codice per rendere il banner compatibile anche con i modelli a Visualizzazione Dinamica.

Ricordo per sommi capi di cosa sto parlando. Tutti i siti italiani avevano tempo fino al 2 Giugno per mettersi in regola con le disposizioni del Garante della Privacy. Si tratta di una regola europea a cui devono ottemperare tutti i paesi aderenti alla UE con la data limite del 30 Settembre 2015. In prossimità di questa scadenza Google ha implementato nei blog su Blogger un banner di consenso per i cookie che potremmo definire nativo.  A questo punto tutti gli sforzi che  avevamo fatto per creare il banner da soli sono diventati superflui. Si potrà comunque sempre scegliere di lasciare un nostro banner e di nascondere quello di Google.

Come personalizzare il banner di Blogger per desktop e mobile e come mostrarlo in basso.

Aggiornamento: A seguito di script e modifiche dello stesso operate da Google per i siti su piattaforma Blogger vanno seguite le indicazioni di questo post più recente:

   Come personalizzare il banner di Google per i blog su Blogger -

Ieri gli utenti di Blogger quando sono entrati nei loro siti hanno scoperto la novità di un banner nativo di Blogger con Pulsante di accettazione dei cookie, Informativa breve e link alla Informativa lunga sull'uso dei cookie da parte di Google. Già ieri abbiamo visto come si possa modificare il messaggio breve, linkare la nostra Policy Privacy, scegliere il testo dei bottoni e personalizzare i colori di sfondo e testo. Abbiamo anche già visto come si possa facilmente disabilitare il banner di Blogger per lasciare soltanto quello che avevamo installato in occasione della scadenza del 2 Giugno. La nuova scadenza è il 30 Settembre ed è una data europea visto che si tratta della data ultima che hanno tutti gli stati membri per mettersi in regola con questa disposizione della Cookie Law.

In questo articolo faremo un altro passo avanti e mostreremo come si possano personalizzare separatamente il banner di Blogger per il mobile e quello per il Desktop e, a seguito di numerose richieste pervenutemi, come si possa posizionarlo nella parte bassa invece che in alto.

Come linkare la nostra Policy Privacy nel banner per i cookie di Blogger o come eliminarlo.

Da poche ore in tutti i blog di Blogger sono stati implementati i banner di Google per la cosiddetta Cookie Law come ho già illustrato in un precedente articolo introduttivo. Questo banner ha il grande merito di essere visto anche nei blog a Visualizzazione Dinamica ma ha il difetto di linkare la pagina della Informativa Estesa di Google e non la nostra. 

Molti di noi avevano usato soluzioni diverse da questa proposte da Google nel suo Cookie Choices come del resto avevo fatto anche io e adesso si trovano con ben due banner mostrati ai lettori per la accettazione dei cookie. A questo punto si possono si possono scegliere sostanzialmente due tipi di soluzione. O si sceglie di lasciare il banner di Google e si personalizza oppure si decide di disattivarlo.

Google ha inserito il banner per i Cookie su Blogger anche per quelli a Visualizzazione Dinamica e con dominio proprio.

Pare che tutto quello che abbiamo fatto per la cosiddetta Cookie Law sia stato inutile o forse no. Giusto ieri tutti i publisher Adsense hanno ricevuto un messaggio con cui venivano informati della necessità di ottenere il consenso per l'utilizzo di cookie da parte dei visitatori. Questa funzionalità deve essere presente nei siti a partire dal 30 Settembre 2015. Questa data non coincide con quella che già si conosceva che era il 2 Giugno 2015.

Si tratta di una disposizione europea e gli stati membri sono obbligati a recepirla entro il 30 Settembre mentre il Garante italiano della Privacy lo ha fatto con qualche mese di anticipo. Oggi tutti i siti ospitati sulla piattaforma Blogger siano essi gratuiti del tipo nomeblog.blogspot.com o con dominio personalizzato hanno visto sul loro sito un nuovo banner oltre a quello che avevano aggiunto da soli prima del 2 Giugno. È ancora troppo presto per fare delle considerazioni conclusive certo che ora abbiamo una sovrabbondanza di avvisi per i lettori. Il banner per i blog gratuiti è più largo della Navbar

Come inserire la pubblicità nel modello di Blogger nella versione desktop e mobile.

L'inserimento dei banner o dei link pubblicitari può essere effettuato in diversi modi. Ci sono programmi di affiliazione che forniscono dei link per collegare delle parole chiave di un post altri che invece forniscono un codice per visualizzare una barra nella parte alta del layout e altri ancora che invece, sempre tramite codice, permettono di mostrare delle finestre popup. 

In questo articolo riprendo il tema di come installare i banner e i link direttamente nel modello di Blogger seguendo le linee guida di Adsense che è il programma di affiliazione di Google e che è utilizzato dalla maggior parte dei publisher a partire da grandi siti di dimensione nazionale fino a piccoli blog con solo qualche migliaio di visite mensili. Non sono un esperto del Regolamento di Adsense quindi se qualcuno ha dei dubbi in merito è consigliabile che si rivolga all'apposito forum e non a me tramite commenti. 

Come mostrare un banner con avviso e link nel blog.

Ci sono delle occasioni particolari in cui l'amministratore di un sito ha l'esigenza di comunicare ai lettori un messaggio particolarmente importante. Potrebbe essere il caso di un giveaway, di una ricorrenza, di un annuncio di importanti modifiche nel sito, della pubblicizzazione di nuovi prodotti o altro ancora. Il sistema migliorare per essere sicuri che tutti i lettori saranno informati è quello di inserire un avviso che si mostri in tutte le pagine. Visto però che non si deve limitare la visibilità delle stesse bisogna anche inserire un pulsante che permetta al navigatore di nascondere tale avviso.

Seguendo la falsariga del banner per informare i lettori sulla politica dei cookie vediamo come si possa mostrare un banner personalizzabile con un aspetto simile a questo 

Codice di banner da far copiare ai lettori con il tag textarea.

Molti siti amano creare dei banner personalizzati di cui i lettori possono copiare il codice per inserirli nel loro sito. Questa pratica era molto in voga qualche anno fa quando era pratica comune per gli webmaster utilizzare questi banner per avere una specie di scambio di link con i blog amici. I banner della misura della misura di 80x15 pixel erano chiamati antipixel dal nome del blog che per primo li aveva creati. 

Gli scambi di link sono visti in modo negativo da Google però mettere un banner di un sito a cui su deve riconoscenza o che vogliamo pubblicizzare non ha controindicazioni se non si pretende la reciprocità.  Sarà cura del webmaster mostrare ai lettori il codice da incollare nel loro sito per visualizzare tale banner. Evidentemente il file della immagine del banner dovrà essere caricato su un Hosting tipo Picasa o simile.

Come inserire un banner per il consenso all'uso dei cookie.

Aggiornamento: A seguito di script e modifiche dello stesso operate da Google per i siti su piattaforma Blogger vanno seguite le indicazioni di questo post più recente:

   Come personalizzare il banner di Google per i blog su Blogger -

Aggiornamento importante: Il 28 Luglio 2015 Google ha inserito automaticamente il banner per i cookie in tutti i siti su piattaforma Blogger. In questo modo sono stati modificati i banner inseriti da noi che avevano lo stesso javascript. Per risolvere consultate  questi quattro post in cui si affronta tutta la questione:

   1) Banner di Google inserito in tutti i blog di Blogger 
   2) Come linkare la nostra Cookie Policy al posto di quella di Google
   3) Come personalizzare il banner di Blogger per desktop e mobile
   4) Come personalizzare il banner di Google per i blog a Visualizzazione Dinamica.
- Fine aggiornamento -
Come promesso vado a illustrare un metodo per installare un banner o un annuncio affinché i nuovi lettori di un sito possano esprimere il loro consenso all'utilizzo dei cookie di profilazione. A dir la verità pensavo di scrivere questo articolo tra qualche mese visto che per mettere in regola i siti c'è tempo fino a Giugno del 2015 ma un annuncio in Homepage di Adsense mi ha convinto a anticipare i tempi.

Facciamo un breve riepilogo di tutta la questione. Nel 2012 la Commissione Europea ha emanato un regolamento sulle linee guida dell'utilizzo dei cookie. Quando un browser apre un sito web riceve dei piccoli file (cookie) che tra l'altro permettono agli investitori pubblicitari di avere dei dati sulla navigazione per mostrare degli annunci pubblicitari più pertinenti. Ci deve essere cioè la consapevolezza da parte del navigatore che aprendo certe pagine si possa essere tracciati. In data 4 Giugno 2014 questa raccomandazione è stata fatta sua dal Garante della Privacy che ha dato un anno di tempo per uniformarsi. È utile leggere le FAQ per la protezione della Privacy messe in rete dallo stesso Garante.

Come inserire la pubblicità nella versione mobile di Blogger.

Blogger ha da tempo implementato una versione mobile per i siti su quella piattaforma. I tablet e gli smartphone vengono automaticamente reindirizzati a un nuovo indirizzo che aggiunge la stringa ?m=1 all'URL. Nel caso della Homepage va utilizzato l'indirizzo con la slash finale. Aggiungendo tale stringa a un qualsiasi indirizzo di Blogger si può avere una idea di come si visualizzerà quella pagina con uno smartphone anche usando un browser di un computer desktop.

Va da sé che i tablet e gli smartphone di fascia alta sono in grado di accedere anche alla versione desktop di un sito dalle impostazioni del browser. Visto che l'utilizzo di questi dispositivi mobili si fa sempre più intenso e che la crescita di tale traffico anno su anno è sistematicamente a doppia cifra è sicuramente utile per la redditività inserire banner pubblicitari visualizzabili da smartphone o tablet nella versione mobile. 

Banner Snack per creare banner in Flash, HTML5 e GIF con Chrome.

Vi siete chiesti come fare a creare degli annunci pubblicitari animati ma non siete dei programmatori? Volete realizzare un banner animato interattivo per il vostro sito o per una vostra campagna o per la vostra cover su Facebook, Twitter o Google Plus? E' appena stata rilasciato un aggiornamento di Banner Snack che è una applicazione per il browser Chrome che ci permetterà di realizzare banner animati in formato Flash, HTML5 o GIF. Ne avevo già parlato qualche tempo fa quando era solo una applicazione web e adesso le opzioni sono ancora più interessanti.

E' diventato compatibile con AdWords, DoubleClick, Iab, BuyAds, OpenX e RightMedia di Yahoo! permettendovi di usare questo tool per creare le vostre campagne pubblicitarie. Ci sono 40 tipi di font e centinaia di effetti di animazione oltre a bottoni interattivi. Dopo aver installato l'applicazione ci si clicca sopra nella Nuova Scheda e si accede con il nostro account Google 

AdBlock Plus per nascondere pubblicità e banner su Android.

Tra le più usate estensioni di Chrome, quella che è veramente onnipresente è AdBlock che serve per bloccare la pubblicità su tutte le pagine web. Se si utilizza il cellulare non è ancora possibile installare estensioni per il browser che consentano di nascondere la pubblicità ma si possono utilizzare delle applicazioni free che entro certi limiti rimuovono i banner, oltre che dalle pagine web, anche dalle altre app gratuite per avere una migliore esperienza di uso. Alcune di queste applicazioni funzionano solo con i permessi di root e hanno bisogno di configurazioni di sistema non alla portata di tutti gli utenti.

AdBlock Plus ha invece una configurazione semplicissima se si ha una versione di Android 3.1 o superiore e permette di eliminare tutti i banner pubblicitari quando siamo connessi a una rete Wi-Fi. Se si ha un cellulare o un tablet con i permessi di root la pubblicità verrà rimossa anche durante la navigazione in 3G. AdBlock Plus è un progetto open source di cui si possono consultare le FAQ online.

Come cambiare readers nel banner di Feedburner.

Feedburner è il servizio più usato per la gestione dei feed. Forse si potrebbe dire che è l'unico perché almeno io di alternative valide non ne conosco. Questo ha anche fatto male a Feedburner perché la mancanza di concorrenza unita alla sua acquisizione da parte di Google ne ha interrotto lo sviluppo. Si può dire che negli ultimi tempi Feedburner non ha praticamente introdotto nessuna novità.

Manca tuttora una localizzazione adeguata del servizio che non è disponibile in italiano. Per iscriversi bisogna accedere alla Home di FeedBurner con le credenziali dell'account Google. Per creare un account del nostro sito si incolla nel modulo, sotto la scritta Burn a feed right this instant, l'indirizzo del blog o l'URL dei feed e si va su Next.

E' abbastanza semplice mostrare nel blog il numero di lettori o readers che ci seguono mediante Google Reader o altro lettore di feed. Dopo aver cliccato sul nome del blog si va nella scheda Publicize > Feed Count e si configura lo stile del contatore oltre ai colori

Come mostrare a rotazione immagini o banner con link.

Uno dei problemi che i blogger devono affrontare quotidianamente è quello dello spazio del layout. Vorremmo mostrare un sacco di cose ma siamo sempre costretti a operare delle scelte. Mettiamo che volessimo inserire delle immagini che portino ai siti di alcuni blog amici o delle foto attinenti a dei post a cui teniamo molto. E' certamente possibile scegliere dei widget, magari degli slideshow. Ma se vogliamo operare una scelta più minimalista si può optare per un elemento pagina che mostri casualmente un certo numero di immagini ciascuna di queste collegata con una pagina web.

La particolarità di questa soluzione risiede del fatto che la foto mostrata viene cambiata quando si ricarica la pagina. Ho preparato un codice con quattro immagini ma possono essere aumentate indefinitamente con delle piccole modifiche.

BannerNow per creare banner in flash da inserire nel blog.

I banner in formato flash indubbiamente arricchiscono esteticamente il blog e sono certamente meno pesanti delle animazioni in formato GIF. La creazione di banner professionali passa attraverso la conoscenza di programmi piuttosto complessi e costosi come Adobe Flash Professional che serve per la creazione di oggetti multimediali basati anche su HTML5.

Chi ha un sito e vuole creare una banner animato può farlo agevolmente utilizzando le risorse gratuite presenti in rete che non presuppongono una conoscenza approfondita dell'argomento.

BANNER NOW

Banner Now è un servizio per creare banner in flash ancora in Beta. Si clicca su Create Banner Now che aprirà un editor piuttosto intuitivo in cui operare 

Come creare banner di animazioni in GIF nel Profilo di Google Plus.

Le immagini in formato GIF di dimensioni 150x150 pixel hanno la particolarità di essere mostrate animate direttamente nella pagina di Google Plus senza doverle aprire nel Lightbox. Nella scheda Informazioni che si trova nel Profilo di Google+ è possibile inserire fino a 5 foto. Possiamo bannerizzare una nostra immagine con un servizio come Avatar Banner che scompone una foto in cinque parti ed è analogo a servizi identici per il nuovo Profilo di Facebook. 

Considerato che su Google Plus si possono inserire anche immagini animate si possono creare delle composizioni veramente originali. L'importante è che l'immagine che si carica in formato GIF sia di 150x150 pixel. Si può per esempio estrarre uno spezzone da un video e convertirlo in una immagine animata usando Photoshop, Format Factory o il servizio online GIFNinja. Vediamo nel dettaglio come creare con GIFNinja cinque immagini animate formate a loro volta dalle stesse cinque foto che dobbiamo caricare nel servizio online in ordine sfalsato per non vedere sempre la immagine in contemporanea in tutte le finestre. Ricordo che con GIFNinja si può anche configurare la velocità della animazione. Vogliamo cioè creare una cosa di questo genere