Guida all’integrazione di una CMP QuantCast con blocco preventivo delle pubblicità

Chi lavora in ambito advertising inizierà ben presto a dover sopperire a questo nuovo obbligo per poter erogare gli advertising online. Ma che cos’è la CMP?  E come si implementa? Scopriamolo insieme in questa guida integrazione cmp.

Guida integrazione cmp

Una CMP è di fatto una piattaforma di gestione dei consensi centralizzata. Ok sembrano dei paroloni ma in realtà è molto piu semplice di quanto si possa pensare.

In primo luogo è giusto pensare perchè nasce. Pensiamo a un sito di carattere editoriale che per “vivere” deve implementare molti adv, spesso da concessionarie e fonti differenti tra loro. Il sito fino ad oggi doveva soddisfare i requisiti cookie / privacy ovvero le varie cookie bar a cui tutti noi siamo abituati.

Prima dell’avvento della CMP tutti gli advertising erano liberi di essere erogati sia che il consenso fosse prestato, sia in caso contrario. Quindi appena entrati nel sito, anche se l’utente non aveva ancora espresso il consenso i vari tag pubblicitari iniziavano comunque a erogare a raffica cookie e tracciamenti di vario tipo.

Con le nuove politiche europee sul GDPR lo IAB (ente di vigilanza per il settore advertising) ha deciso di rendere obbligatorio l’utilizzo di una piattaforma di gestione dei consensi che sappia mettersi ” a schermo” tra l’ad server della concessionaria e il sito del publisher.

Ecco come funziona la CMP

Di fatto il processo è abbastanza semplice:

VISITATORE -> CMP -> (consenso) -> ADSERVER CALL ->SITO FINALE

Se l’utente non presta il consenso (deve essere libero di farlo anche per determinati vendor) TEORICAMENTE non dovrebbe apparire nessun adv in pagina.

All’atto pratico, il publisher dovrebbe solo installare il CMP prescelto e i vari vendor dovrebbero PRIMA di erogare contattare la cmp di turno e valutare se erogare o meno.

Di fatto però la brutta notizia che ad oggi questo “check and unlock” non viene effettuato praticamente da nessuna concessionaria. Anzi, viene dato questo “onere” al povero publisher di turno che dovrebbe investire tempo e denaro per implementare il blocco preventivo.

In questo articolo voglio darvi una soluzione rapida e relativamente indolore, per implementare il vostro CMP ed effettuare il blocco preventivo delle pubblicità in pagina. Di fatto andremo a bloccare manualmente i vari script adv presenti e li ri-abiliteremo solo a check di consenso effettuato.

Il primo passo è scegliere una CMP. Ne esistono diverse, molte stanno nascendo, la cosa importante di cui tenere conto a mio avviso è il costo e lo step tecnologico della stessa. Fate conto che ogni sito potrebbe crearsi la propria (con tutti i costi di infrastruttura e tecnologici del caso) ma per poterla poi usare all’atto pratico dovrete registrare la vostra cmp presso lo IAB (a pagamento).

Nel nostro caso andremo a sceglierne una già avviata e usata da moltissimi siti: QuantCast.

Doverosa premessa: parlando con il reparto tecnico di Quantcast mi hanno confermato che è gia in lavorazione un blocco automatico implementabile direttamente nello script tag della cmp, quindi questo workaround servirà solo fino al loro rilascio ufficiale. Ad ogni modo potrete applicare quanto scritto in questo articolo per qualsiasi cmp (qualora non fosse una features già presente).

Installazione della CMP QuantCast

Il sito ufficiale di Quantcast permette di generare e personalizzare il proprio script CMP attraverso un semplice processo step by step raggiungibile a questo indirizzo.

Potete scegliere la modalità di visualizzazione fra overlay fullscreen oppure fascia / barra a fondo sito (classica barra cookie).

Una volta generato, vi consiglio di aggiungere all’array delle opzioni questi valori non standard:

'No Option': false, //ostacola la scelta di "non accettare"  gli adv
'Display Persistent Consent Link': false, //ostacola la scelta di "non accettare"  gli adv
'Default Value for Toggles': 'on', //ostacola la scelta di "non accettare" gli adv

Come vedete sono tutte opzioni atte a ostacolare la scelta di non accettare i cookie advertising. Se volete essere integerrimi non mettetele, però se basata il vostro business model sulle pubblicità dovreste pensarci a fondo.

Una volta implementato nella prima parte dell’head del sito  dovreste vedere apparire il banner cookie che vi chiede il consenso. Tutti gli adv continueranno però a funzionare come sempre, innestando i vari cookie e tracciamenti. E’ importante posizionare il codice nella primissima parte del sito, se possibile appena dopo i tag meta relativi al seo.

Consenso preventivo

Ora andiamo ad aggiungere del codice per sospendere l’erogazione dei tag js pubblicitario prima che l’utente non abbia espresso il consenso.

Tutto il codice da qui a seguire è da posizionare nel footer del sito prima della chiusura del tag body. Per prima cosa caricate questo file js con delle librerie utili:

SCARICA LE LIBRERIE ED ENGINE DI CONSENSO

Andate a modificare tutti i file JS che erogano adv (o che richiedono il consenso preventivo) in questo modo:

Se il codice js è un src (lasciate invariati eventuali attributi come async o defer):

<script class="cmp-script" data-cmp-src="URL"></script> 

Se il codice js è inline:

<script type="text/plain" class="cmp-script">
//codice inline js qui 
</script>

Se refreshate dopo aver pulito i cookie dovreste vedere ora la richiesta del consenso e nessun adv o cookie caricato.

Ecco il dettaglio del  codice js custom per la gestione del consenso e riattivazione del js presente nel js caricato in precedenza:

//Custom Engine
  function sbloccaJs(){
  //By Riccardo Mel

  console.log("Trigger Sblocca JS");

    var scripts = document.getElementsByClassName("cmp-script"),
        n = scripts.length,
        documentFragment = document.createDocumentFragment(),
        i, y, s, attrib, el;

    for (i = 0; i < n; i++){

        if (scripts[i].hasAttribute('data-cmp-src')){

            postscribe(scripts[i].parentNode, '<script src="' + scripts[i].getAttribute("data-cmp-src") + '"><\/script>');

        } else {

            s = document.createElement('script');
            s.type = 'text/javascript';
            for (y = 0; y < scripts[i].attributes.length; y++) {
                attrib = scripts[i].attributes[y];
                if (attrib.specified) {
                    if ((attrib.name != 'type') && (attrib.name != 'class')){
                        s.setAttribute(attrib.name, attrib.value);
                    }
                }
            }
            s.innerHTML = scripts[i].innerHTML;
            documentFragment.appendChild(s);
        }
    }
    document.body.appendChild(documentFragment);
  }//sbloccaJS

  //Custom by Riccardo Mel
  function getCookie(name) {
    var cookies = document.cookie
      .split(';')
      .filter(function(s) {
        return s.trim().startsWith(name + '=');
      })
      .map(function(s) {
        return s.trim().substring(name.length + 1);
      });

    return cookies;
  }
  //Custom by Riccardo Mel

  //Custom by Riccardo Mel
  function CMPInternalPivot() {

     //console.log(document.cookie);
     var consentCookies = getCookie("eupubconsent");
     console.log("consentCookies: "+consentCookies);
     if(consentCookies.length !== 0) {
        CMPisSuccess = true;
      } else {
        CMPisSuccess = false;
      }
      console.log("CMPisSuccess: "+CMPisSuccess);
      //alert(CMPisSuccess);
      if(CMPisSuccess){
        console.log("isCMP processing...");
        sbloccaJs();
      }

  }//Custom by Riccardo Mel

NOTA: Se non volete usare la librerie di postscribe potete, in alternativa adottare questa soluzione più rapida:

document.write('\x3Cscript type="text/javascript" src="'+ scripts[i].getAttribute("data-cmp-src") +'">\x3C/script>');

Quello che vedete qui sopra è il codice necessario al check del consenso (funzione CMPInternalPivot)  e allo sblocco dei js (funzione Sbloccajs). Andiamo ad analizzare meglio il codice.

Funzione sbloccaJS()

In questa funzione andiamo a recuperare gli script che hanno la classe specificata e andiamo a ricreare il codice js a seconda che esso sia con src o inline in modo differente.

Funzione CMPInternalPivot()

Va a verificare che sia presente il cookie cmp “eupubconsent” innestato dal consensus iab europeo e gestito dalla cmp stessa.  Se è presente siginifica che l’utente ha accettato la policy e possiamo attivare i js.

A questo punto subito dopo il codice js caricato  andiamo ad aggiungere questi blocchi:

<script type="text/javascript">

  function RedirectCMP(){
        //REFRESH AL CONSENSO
    redirectCMPFunc = setTimeout(function(){

         	var locationScraper = window.location.href;
          //Identifico presenza parametri get
          var queryString = locationScraper ? locationScraper.split('?')[1] : window.location.search.slice(1);
          if(queryString){
          //se ci sono parametri get
            var urlID = window.location.href.replace("&refresh_cp", "").replace("?refresh_cp", "").replace("&refresh_ce", "").replace("?refresh_ce", "");
            //identifico se l'url ha già parametri get al suo interno
            var queryStringInherit = urlID ? urlID.split('?')[1] : window.location.search.slice(1);
            if(queryStringInherit){location.href = urlID + "&refresh_cp"; } else { location.href = urlID + "?refresh_cp"; }
          } else {
          //Nessun parametro get
            location.href = window.location.href + "?refresh_cp";
          }

     }, 2000);
  }//RedirectCMP

  //Checking...
  CMPInternalPivot();

  //Accettazione Policy CMP al click sul consenso
  addDynamicEventListener(document.body, 'click', '.qc-cmp-button, .qc-cmp-save-and-exit', function (e) {
      console.log('Re-enable js');
       RedirectCMP(); // redirect al consenso
  });
  </script>

A questo punto se cancellate i cookie e testate una volta espresso il consenso la pagina si refresherà su se stessa aggiungendo l’attributo refresh_cp. Lo script è compatibile anche se usate l’auto refresh in page compatibile con il census di Nielsen (refresh_ce).

Una volta refreshata dovreste vedere tutti gli adv caricati. Ovviamente a consenso prestato l’utente non dovrà piu accettare e gli adv saranno sbloccati automaticamente. Per esperienza questo sistema è addirittura piu efficace di altri blasonati e costosi CMP che fanno questo check internamente.

UPDATE Aprile 2019

Recuperare il consenso

Potete facilmente recuperare il consenso anche senza leggere i cookie andando a utilizzare la seguente funzione:

window.__cmp('getVendorConsents', null, function(vendorConsents) { console.log("CMP CONSENT DATA"); console.log(vendorConsents) });

UPDATE Giugno 2019

Eseguire azioni quando compare il banner CMP

window.__cmp('displayConsentUi', function() { 
  console.log("CMP UI DISPLAY"); 
});//displayConsentUi

Funzione di callback quando l’utente accetta o aggiorna il consenso GDPR

function acceptCMP(){ 
 console.log("CMP OK"); 
 //Tuo codice qui
}
window.__cmp('setConsentUiCallback', acceptCMP);

UPDATE SETTEMBRE 2019

Selezionare una versione specifica di cmp quantcast

Cambiare da:

elem.src = 'https://quantcast.mgr.consensu.org/cmp.js';

a:

elem.src = 'https://quantcast.mgr.consensu.org/v24/cmp.js'; // Cambia la v24 in base alla versione che vuoi usare

A questo indirizzo troverete la lista delle versioni e relativo changelog:

Usare la traduzione in italiano nativa di quancast

Vi basterà aggiungere nalla lista opzioni di “init” questa stringa:

'Language': "it",

Hai bisogno di una consulenza o preventivo gratuito per l’implementazione della tua CMP o gestione del tuo sito editoriale? Contattami!

Se questo articolo ti è stato utile condividilo sui tuoi social network!

Ricordati di mantenere l’attribuzione presente nei commenti del codice!

Photo credits advertising disponibile su Shutterstock

  1. Ciao, bella guida che ho trovato in quanto ho notato che quantcast in uso da una concessionaria pubblicitaria che utilizzo non fa blocco preventivo…
    Mi consola molto leggere che da un tuo dialogo con il tecnico sia in lavorazione un qualcosa di automatico per permettere questo blocco preventivo che spero sia praticamente automatico… volevo chiederti se hai qualche aggiornamento in merito perchè aspetto questa feature in gloria … mi chiedo come sino ad oggi non abbiano pensato di includerla dato che secondo la GDPR nessun cookies deve essere scritto prima del consenso dell’utente e invece non è cosi…
    Altra cosa…attualmente solo mettendo il codice class=”cmp-script” data-cmp-src sui JS dei banner riesco a fare questo blocco preventivo o devo applicare anche tutte le altre parti di codice che vedo indicate e che per me sono un po troppo non masticando bene javascript ? Grazie e buon lavoro.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

copia-incolla
Up Next:

Script js che aggiunge credits durante la copia del testo

Script js che aggiunge credits durante la copia del testo