Cookie Law e banner Google - la soluzione definitiva

Autore : vania Categoria : Internet Domenica, 14 Giugno 2015 - 11:41

In un articolo di Massimiliano Bossi su Mr.Webmaster viene proposto un codice molto interessante, che permette di caricare un banner di Google Adsense soltanto dopo che l'utente compie un click sulla pagina o un piccolo scroll. Ho modificato il codice in modo da far comparire un messaggio nel riquadro del banner ed un pulsante specifico per l'approvazione dei banner. In questo modo si può accettare la policy del sito e continuare la navigazione senza dover per forza accettare il banner e relativi cookie, proprio come la normativa esige. Infatti, ricordiamolo ancora una volta: prima di registrare cookie profilanti nel dispositivo di un utente è necessaria una specifica approvazione preventiva per un cookie o gruppo di cookie.

Per semplicità in questo codice mi sono avvalso di funzioni dipendenti dalla libreria Jquery e dal plugin Jquery-cookie, dal momento che già li uso nel CMS per altre cose. Se non vi serve Jquery potreste valutare l'uso di una qualche altra funzione javascript per la lettura e la scrittura dei cookie (ad esempio date un occhiata a questo tutorial).
Se volete usare Jquery e le vostre pagine non sono già predisposte al caricamento della libreria, inserite nell'header:

Codice

<script type="text/javascript">
 var ACLbannerCaricati = false;
function ACLcaricaBanner(){
  var ACLbannerCaricati = true;
  var t = 1;
  $('.adsense-cookie-law').each(function() {
    var banner = $(this);
    setTimeout(function(){
      var c = banner.data('client');
      var s = banner.data('slot');
      var w = banner.data('width');
      var h = banner.data('height');
      var adsense = '<scr'+'ipt>\n'
                  + 'google_ad_client = "'+c+'";\n'
                  + 'google_ad_slot = "'+s+'";\n'
                  + 'google_ad_width = '+w+';\n'
                  + 'google_ad_height = '+h+';\n'
                  + '</scr'+'ipt>';
      var a = document.createElement('ads'); 
      var s = document.createElement('script');  
      var w = document.write;
      document.write = (function(params) {
        a.innerHTML = params;
        document.write = w;
      });
      s.setAttribute('type', 'text/javascript');
      s.setAttribute('src', 'http://pagead2.googlesyndication.com/pagead/show_ads.js');
      banner.html(adsense).append(a).append(s);
    }, t);
    t += 300;
  });
}
$(function() {
  if ($.cookie('banok')) {
    ACLcaricaBanner();
  }else{
    $('.banok').click(function(){
      $.cookie('banok', 'yes', { expires: 180, path: '/' });
      $('.adsense-cookie-law').css({ 'border': '0' });
      if (!ACLbannerCaricati) {
        ACLcaricaBanner();  
      } 
    });
    $('.adsense-cookie-law').each(function() {
      $(this).css({
        'background-color': '#FDFDFD',
        'border': '1px #000 solid',
        'font-size': '14px',
        'padding': '2px 3px',
        'text-align': 'left',
        'font-family': '"Comic Sans MS", cursive, sans-serif',
        'width': $(this).data('width'),
        'height': $(this).data('height')
      });
    });
  }   
});
</script>

Ultimo passo, inserire il codice per fare apparire il messaggio/banner nel punto voluto della pagina (quindi nel body):

Codice

<div class="adsense-cookie-law"
   data-client="ca-pub-XXXXXXXXXXXXXXXX"
   data-slot="XXXXXXXXXXXX"
   data-width="XXX"
   data-height="XX"
   >
   <div>
   In questo riquadro, cliccando su OK, comparirà un banner pubblicitario che fa uso di cookie profilanti.
   Clicca OK per sostenere questo sito, oppure valuta un modo alternativo per aiutarci.
    <input style="cursor:pointer" class="banok" value="ok" type="button">
   </div>
</div>

Al posto delle X metterete i valori corrispondenti che troverete nel codice del banner adsense da visualizzare in quel punto. Lo stesso codice lo potete utilizzere più volte, per più banner.
Penso sia tutto, spero di esservi stato utile.

P.S.: cliccate due volte sul banner del mio sito (eheh, scherzo, una) per vedere come funziona lo script.