Banner da mobile

[Electronic]

Salve a tutti, apro questa discussione per sollevare una questione, e valutare possibili soluzioni.

Oramai i dispositivi mobili stanno rimpiazzando i desktop, per quanto mi riguarda le viste da mobile hanno raggiunto il 40% e sono in continuo aumento.
Credo sia giunto il momento per il mio sito di creare un template per mobile, o meglio un template responsive.

Ho quindi iniziato a progettare un template responsive da abbinare al mio sito, ma mi sono scontrato con un problema, i banner pubblicitari.

Le soluzioni per gestire i banner per un template responsive ci sono, la più semplice è quella di nascondere alcuni banner e visualizzarne altri, a seconda che il dispositivo utilizzato sia mobile o un fisso.
Un'altra soluzione è quella di intervenire direttamente nel codice del banner, modificando le dimensioni a seconda che il dispositivo utilizzato sia mobile o fisso.

Purtroppo però almeno per quanta riguarda Adsense, nessuna delle 2 soluzioni è attuabile, il regolamento vieta di nascondere banner, e vieta di modificare il codice.

Per i banner Altervista non saprei, ma penso che pure Altervista vieti di modificare i suoi codici.

L'unica soluzione legale che vedo, allora è quella di utilizzare solo formati piccoli, ovvero che siano correttamente visualizzabili sia da mobile che da fisso, in modo da non dover modificare il banner o le sue dimensioni, in base al dispositivo utilizzato.

Considerato che i banner verticali,(quelli in cui l'altezza è superiore alla larghezza) non sono adatti ad un template mobile, sono indicati per essere utilizzati nelle cosiddette sidebar ovvero barre laterali, alla fine rimangono pochissimi formati utilizzabili.

Per quanto riguarda Altervista l'unico formato utilizzabile da mobile è il 300x250, anche se tale formato sarebbe più indicato per la sidebar, e considerato che è inutile inserire 2 banner della stessa dimensioni in una pagina, il tutto si traduce nel poter inserire un solo banner Altervista per pagina.

Per quanto riguarda Adsense, rimangono 3 formati utilizzabili da mobile, e anche qua 2 sarebbero più indicati per la sidebar.

Alla fine mi sono reso conto che utilizzare banner Altervista, o Adsense per un template responsive, è un disastro.

In realtà Adsense, fornisce banner reattivi, codici in grado di adattare il formato del banner al dispositivo utilizzato, ma qua su Altervista tali codici non sono utilizzabili.

Dato che come detto all'inizio le visite da mobile hanno raggiunto valori importanti, e dato che sono in continuo aumento, sarebbe una gran bella cosa poter utilizzare codici responsive a anche qua su Altervista.

In alternativa, chiedo se è possibile modificare il codice dei banner per renderli responsive, o se esiste un qualche altro metodo per gestire pubblicità da mobile.
Chiedo anche ai vari utenti, come riescono loro a gestire la pubblicità su template responsive.

Grazie a chi vorrà intervenire.

[LottoInvestimento90]

Fiato sprecato
______________________

Guadagna con le tue idee
Al resto pensiamo noi
______________________

Fiato sprecato2

[karl94]

Quello che puoi fare è includere direttamente nella pagina i formati appropriati per il dispositivo in uso mediante PHP, come viene fatto ad esempio con il tema mobile degli AlterBlog. Eventualmente puoi anche considerare la possibilità di usare WordPress, in quel caso non dovresti occuparti della gestione dei banner in quanto se ne occupa il Pilota Automatico.

[Electronic]

Quello che puoi fare è includere direttamente nella pagina i formati appropriati per il dispositivo in uso mediante PHP, come viene fatto ad esempio con il tema mobile degli AlterBlog. Eventualmente puoi anche considerare la possibilità di usare WordPress, in quel caso non dovresti occuparti della gestione dei banner in quanto se ne occupa il Pilota Automatico.

Grazie per la risposta, ma purtroppo non credo sia possibile includere i formati appropriati, tramite php.
Come ben saprai forse meglio di me, php lavora lato server, e non è in grado di rilevare la risoluzione del dispositivo, quindi non capisco come potrei utilizzare php per includere i formati appropriati alla larghezza del dispositivo, se php non è in grado di rilevare la larghezza del dispositivo.

Forse mi sfugge qualche trucco in php?

[karl94]

Ovviamente non è possibile conoscere la risoluzione del dispositivo dalla sola richiesta HTTP, ma in base all'user agent è possibile identificarlo come smartphone, tablet o PC almeno.
Dai uno sguardo ad esempio a http://mobiledetect.net/, è una libreria che si può usare senza troppi problemi per lo scopo.

[Electronic]

Ero a conoscenza di questa possibilità, ma diventa un pò problematico utilizzarla oggi giorno.

I banner dovrebbero seguire il template, il quale deve seguire le dimensioni disponibili del dispositivo.
Oggi giorno un tablet potrebbe avere una dimensione disponibile di soli 480px, come potrebbe tranquillamente avere una dimensione disponibile di 1280px, quindi per progettare un tamplate responsive, sapere che il dispositivo è un tablet, non basta più, occorre sapere le dimensioni esatte, o comunque conoscere se la larghezza disponibile è superiore ad un dato valore.

Per esempio potrei aver necessita di visualizzare un banner 300x250 su uno smartphone con larghezza disponibile di 320px, un banner 468x60 su uno smartphone con larghezza di 480px o tablet con larghezza inferiore a 600px, e decidere di caricare un banner 728x90 su un tablet con larghezza superiore a 800px o pc desktop.

[Electronic]

Analizzando il codice di vari siti Altervista, per cercare di capire come facessero a modificare le dimensioni del banner in base alla larghezza disponibile, mi sono imbattuto in questo codice:

<script type="text/javascript">
 //<![CDATA[ 
google_color_border = "DDDDDD";
google_color_bg = "FFFFFF";
google_color_link = "232323";
google_color_url = "DD362F";
google_color_text = "373737";
google_ui_features = "rc:0";
var av_size = '336X280';
if( jQuery(window).width() >= 360 )
	av_size = '336X280';
else {
	av_size = '300X250';
}
document.write('<d'+'iv id="content_top_banner" class="banner_google_'+av_size+'"  style="text-align:center;padding:  1em 0;text-align:center;padding:  1em 0;">');
var av_fu=encodeURIComponent(location.hostname+location.pathname);
document.write('<s'+'cript type="text/javascript" src="//ad.altervista.org/js2.ad/size='+av_size+'/?ref='+av_fu+'&r='+new Date().getTime()+'"><\/s'+'cript>');
document.write('</di'+'v>');
/* ]]&gt; */
</script>

In pratica al posto delle dimensioni viene inserita una variabile av_size che viene modificata dallo stesso codice javascript in base alla larghezza disponibile.

E' normale che venga modificato il codice di Adsense, introducendo questa modifica?

Dato che viene utilizzato in vari siti Altervista, allora lo posso utilizzare tranquillamente pure io?

Grazie.

[Electronic]

?????

[karl94]

Quello non è codice di AdSense, ma è il codice dei banner del circuito AlterVista with Google AdSense che viene inserito dal Pilota Automatico degli AlterBlog. Non è quindi qualcosa che viene inserito o modificato direttamente dagli utenti ma del codice utilizzato internamente da AlterVista per alcuni banner pubblicitari inseriti agli interno dei blog WordPress, e il suo uso in altri casi non è autorizzato.

[Electronic]

Certo quando parlo di Adsense, è sottinteso che mi riferisco al circuito AlterVista with Google AdSense, dato che su Altervista è l'unico AdSense disponibile.

Il fatto che il codice venga inserito direttamente da un utente, o venga inserito in maniera automatizzata da un "pilota automatico", credo cambi poco dal punto di vista tecnico.

Il crawler AdSense scansiona la pagina e trova quel codice, indipendentemente da chi o come è stato inserito.

Quindi se io utilizzassi lo stesso codice, il crawler AdSense non noterebbe differenze, il problema a quanto ho capito è Altervista che NON vuole farmi utilizzare quel codice.

In pratica a chi non vuole, o come nel mio caso non può utilizzare il piota automatico, non è consentito utilizzare codici responsive, e non è nemmeno consentito utilizzare alcuni formati adatti alla navigazione da mobile, come il 320x50.

[stefano19k]

...la più semplice è quella di nascondere alcuni banner e visualizzarne altri, a seconda che il dispositivo utilizzato sia mobile o un fisso.

ciao Electronic sei riuscito ad implementare questa modifica?

[pcrebuilding]

Banner da mobile

Per esempio potrei aver necessita di visualizzare un banner 300x250 su uno smartphone con larghezza disponibile di 320px, un banner 468x60 su uno smartphone con larghezza di 480px o tablet con larghezza inferiore a 600px, e decidere di caricare un banner 728x90 su un tablet con larghezza superiore a 800px o pc desktop.

Misura le dimensioni dello schermo del device (in particolare la larghezza) con Javascript (che è lato client), poi replica il codice fornito da AV in un if condizionale che visualizza il banner con il formato adatto in base alla dimensione dello schermo. Se il CMS che usi ha jQuery nativo puoi misurare le dimensioni con jQuery (che è più preciso, non tiene conto delle barre degli strumenti, menù ecc ma rileva solo le dimensioni dell'area visibile). Se hai necessità di configurare anche la posizione o altri parametri (non del banner ma del contenitore del banner come background, bordo, ecc) inserisci lo script JS in due div, uno esterno (il container) ed uno interno identificato con un id, poi su quell'id applichi le media query di un foglio di stile in base alle dimensioni del device.

Esempio semplice con 2 banner, Leaderboard 728x90 visualizzato tipicamente in tablet landscape 800x600 e Video 300x250 visualizzato su smartphone e small tablet. Ovviamente tra i due si possono inserire altri banner con dimensioni diverse sempre nell'if e sempre se li hai disponibili.

<div>
 <div id="AVbanner">
 // JavaScript Document
 <script type="text/javascript">
 deviceWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 //deviceWidth=$(window).width(); //jQuery width area (exact)
 if (deviceWidth>=768) {
   /* <![CDATA[ */
   document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/?ref='+encodeURIComponent(location.hostname+location.pathname)+'&r='+new Date().getTime()+'"></s'+'cript>');
   /* ]]> */
  } 
  else  
  {
   /* <![CDATA[ */
   document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=300X250/?ref='+encodeURIComponent(location.hostname+location.pathname)+'&r='+new Date().getTime()+'"></s'+'cript>');
   /* ]]> */
  }  
 </script>
 </div>
</div>

Ovviamente non è possibile conoscere la risoluzione del dispositivo dalla sola richiesta HTTP, ma in base all'user agent è possibile identificarlo come smartphone, tablet o PC almeno.

Funziona ma in generale non si può fare affidamento sui dati che arrivano al server via browser: in particolare lo user-agent può esser modificato. Comunque viene utilizzato normalmente ed il mio è solo un commento.

[FMJ]

Pensate a quei "poveretti" come me nei cui siti/blog il traffico mobile è in media il 90%....

[pcrebuilding]

Pensate a quei "poveretti" come me nei cui siti/blog il traffico mobile è in media il 90%....

Da Aprile 2015 Google inserisce nei parametri per il calcolo del ranking di ricerca il responsive per i mobile e invita tutti i Web Master a modificare i propri siti per rispondere al requisito della corretta visualizzazione sui device mobili: in altre parole puoi avere un sito fantastico ma non sarai mai nelle prime pagine di ricerca di Google se non l'hai ottimizzato per il mobile. Esistono strumenti diagnostici per fare le verifiche (quello di Google è PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/ ma ne esitono altri come GTmetrix di Yahoo https://gtmetrix.com che testano il vostro sito e assegnano un Performance Scores dando i suggerimenti per migliorare quello che non va distinguendo tra desktop e mobile).
Fate girare gli URL del vostro blog su uno dei due: troverete (come tutti) una miriade di cose che non vanno e i suggerimenti molto utili per sistemarle, una delle cose che degrada paracchio le performance sono proprio i banner poichè richiedono risorse remote e creano in molti casi iframe.

[stefano19k]

Funziona ma in generale non si può fare affidamento sui dati che arrivano al server via browser: in particolare lo user-agent può esser modificato. Comunque viene utilizzato normalmente ed il mio è solo un commento.

ciao, non mi è chiara una cosa, il riconoscimento del dispositivo utilizzato non è affidabile al 100%? Io per la preicisione vorrei che su dekstop venga visualizzato il 728x90 di altervista, mentre su mobile il 728x90 di google altervista, quindi in questo caso non potrei basarmi sulla risoluzione del dispositivo

[pcrebuilding]

Se il device è uno smartphone come fai a visualizzare il 728x90? Il layout non è responsive poichè devi scorrere lo schermo per visualizzare il banner, ma anche no se il dispositivo effettua un re-scaling ma in questo caso anche tutto il resto viene ridotto di dimensioni (font, immagini, ecc.). Puoi usare lo user-agent lato server e far scrivere a php il banner corretto in base allo UA. Esempio semplice con il solo pattern per Chrome for Android (per un'idea dei pattern vedi qui https://developer.chrome.com/multidevice/user-agent)

  if (preg_match("^Android+Chrome/[.0-9]* Mobile^i",$_SERVER['HTTP_USER_AGENT'])) { //Chrome for Android
   echo "<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/?ref='+encodeURIComponent(location.hostname+location.pathname)+'&r='+new Date().getTime()+'"></s'+'cript>');
    /* ]]> */
   </script>"
  } 
  else
  {
   echo "<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js2.ad/size=728X90/?ref='+encodeURIComponent(location.hostname+location.pathname)+'&r='+new Date().getTime()+'"></s'+'cript>');
    /* ]]> */
   </script>"
  }

La differenza della sorgente del banner è js (AlterVIsta) o js2 (AlterVista + Google). Considera che in mezzo ci sono anche i tablet, gli small tablet, gli iPhone, etc, dovresti fare ulteriori affinamenti del codice.
Considera anche che il Leaderboard 728x90 ad esempio non è retribuito da AV alla voce smartphone (poiché non visualizzabile in un layout responsive)

[stefano19k]

diciamo che l'ho fatto io manualmente lo scaling per fare in modo che il banner fosse visualizzato tutto e al tempo stesso i caratteri non fossero troppo piccoli, il risultato secondo me è accettabile, infatti come esperienza utente su pagespeed insight ho 97/100. Se vuoi dargli uno sguardo l'account di cui sto parlando è ilmiotempolibero.

E' proprio perchè il 728x90 di AV che non è più retribuito su smartphone la causa che mi ha spinto a cercare un'alternativa

[pcrebuilding]

diciamo che l'ho fatto io manualmente lo scaling per fare in modo che il banner fosse visualizzato tutto e al tempo stesso i caratteri non fossero troppo piccoli

Hai usato un re-scaling manuale con viewport initial-scale=0.42 che per il tuo tema funziona (ho testato con diverse risoluzioni, le specifiche Google indicano un initial-scale=1 https://developers.google.com/speed/...figureViewport).
Poichè da quello che ho capito è cambiare banner tra i due circuiti a parità di formato puoi usare sempre il calcolo delle dimensioni e scambiare solo le sorgenti del banner:

<script type="text/javascript">
 deviceWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 //deviceWidth=$(window).width(); //jQuery width area (exact)
 if (deviceWidth>=768) {
   /* <![CDATA[ */
   document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/?ref='+encodeURIComponent(location.hostname+location.pathname)+'&r='+new Date().getTime()+'"></s'+'cript>');
   /* ]]> */
  } 
  else  
  {
   /* <![CDATA[ */
   document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js2.ad/size=728X90/?ref='+encodeURIComponent(location.hostname+location.pathname)+'&r='+new Date().getTime()+'"></s'+'cript>');
   /* ]]> */
  }  
 </script>

Puoi modificare anche il 768 con 600, siamo ancora nella famiglia degli (small) tablet. Prova a fare dei test, per ora vedo che il Leaderboard in basso è sempre del circuito AV.

[stefano19k]

ho applicato il codice e sembra funzionare subito bene, su desktop continuo a visualizzare il banner di AV, su un vecchio smartphone che ho usato per i test adesso visualizzo il banner di AV+G. Farò altri test con altri dispositivi e risoluzioni, ma questa sembra proprio la strada giusta. Grazie

[pcrebuilding]

Se usi chrome c'è un add-on che se non ricordo male si chiama viewport resizer che ti consente di testare le risoluzioni dei vari device,funziona bene e apre il sito in iframe con le dimensioni dei vari device ed è abbastanza realistico magari provalo per fare test estesi