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
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.