-
Notifications
You must be signed in to change notification settings - Fork 12
Custom script
Il plugin blocca in automatico tutti gli snippet contenuti nei tag: <script></script> <iframe></iframe> <embed></embed> dentro il body della pagina, sono esclusi dal blocco automatico gli hook wp_header() e wp_footer() i quali dovranno essere aggiunti nell'apposito box di blocco.
I primi due lavorano solo sui widget e sul contenuto (ovvero gli articoli) e attualmente sono deprecati (ovvero in futuro probabilmente potrebbero essere eliminati), questi due non funzionano con i custom script, il terzo lavora su tutto ma con un criterio differente, header e footer sono lasciati a parte (perché in header e footer molto spesso ci sono script importanti per il funzionamento del sito). Ti scompongo la pagina seguendo lo schema del plugin con un esempio di HTML dummy (finto):
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head> <body>
<div>
<div>
<p>Contenuto</p>
</div>
</div> <?php wp_footer(); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>Come vedi da questo schema la pagina è suddivisa in 3 parti principali, quella centrale subirà il blocco automatico, la prima e la terza no.
Prima di continuare è importante comprendere questo passaggio, il tag script a differenza degli altri due può avere differenti "modi" di scrittura dentro il sorgente, qui di seguito indico con tre esempi quali differenze si possono incontrare:
Solitamente usato per inserire il codice javascript inline nella pagina in questo modo:
<script>
// Qui c'è il resto del codice
</script>È uguale a quello precedente ma con l'aggiunta di type="text/javascript" al suo interno
<script type="text/javascript">
// Qui c'è il resto del codice
</script>Questo a differenza dei due precedenti non ha codice inline ma ha la URL del file che il browser dovrà caricare nel quale è inserito il codice javascript da eseguire nella pagina, per esempio usato per caricare la libreria jQuery
<script src="url/del/mio/script.js" ></script>Come hai visto negli snippet qui sopra a seconda di come è scritto il tag script cambia il modo di utilizzare il tag <---------SOMETHING---------> per esempio se il tag script è così <script> allora dovrai usare questo metodo:
<script><---------SOMETHING--------->maybename<---------SOMETHING---------></script>Altrimenti se è scritto negli altri due "modi" lo snippet precedente dovrà essere scritto così:
<script<---------SOMETHING--------->maybename/or/url/file<---------SOMETHING---------></script>Notato la differenza? È mninima ma c'è, nel secondo manca il simbolo "maggiore di" nel tag script.
Premendo CTRL + U sul browser si aprirà una nuova tab/pagina in cui ci sarà il codice sorgente reale della pagina, ovvero quello che il server invia al browser.
In questa pagine si deve ricercare la parte di codice che sarà da inserire nella textarea, per fare una ricerca si usa la combinazione di tasti CTRL + F, nel campo di ricerca si può inserire per esempio <script e vedere in quale tag è prsente lo script che installa cookie e che non viene bloccato, una volta trovato copiare l'intero snippet compreso del suo tag contenitore, es: <script>...</script> e inserirlo nella textarea apposita.
Per inserire i vari banner che sostituiscono gli script presenti nella pagina (non quello standard) viene creato un elemento <div class="el"></div> inserito al posto dello script al cui interno viene "appeso" l'HTML che mostra il banner del blocco degli script quindi per trovarlo basta cliccare sul banner stesso con il tasto destro del mouse e cliccare sulla voce "ispeziona elmento", questo ti mostrerà la posizione e il codice del banner incriminato, ora devi salire di un livello rispetto all'elemento
<div class="tua_classe">
<div class="el">qui c'è il resto del codice</div>
</div>In questo caso clicchi sul div con classe "tua_classe" in modo che venga evidenziato poi clicchi sul pulsante di accettazione (noterai che il banner sparisce sostituito da un tag ) e fai un refresh della pagina, quando la pagina sarà totalmente ricaricata troverai magicamente lo script che era stato bloccato, ora puoi fare copia e incolla e potrai inserirlo nel box per il blocco (in teoria il codice inserito così funziona ma in alcuni casi può non funzionare correttamente quindi è da provare) o utilizzare il nuvo metodo di inserimoneto degli script da bloccare inserendo solo una parola o selezionando dal menù a tendina se presente.
Il secondo metodo si può fare utilizzando il filtro icc_output_html presente nel plugin ma bisogna conoscere il php (seguirà una guida)
Cercare lo script nel codice sorgente della pagina (da browser ctrl + u) e inserire così com'e nella text area separando gli script con <---------SEP--------->
Es google analitycs minificato:
<script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='https://www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create','UA-xxxxxxx-x','auto');ga('send','pageview');</script>Es Facebook non minificato:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.3&appId=150302815027430";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>Es script esterno:
<script async src="//192.168.1.10/italystrap/js.js"></script>Quindi il risultato dovrebbe essere questo>
<script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='https://www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create','UA-xxxxxxx-x','auto');ga('send','pageview');</script>
<---------SEP--------->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.3&appId=150302815027430";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<---------SEP--------->
<script async src="//192.168.1.10/italystrap/js.js"></script>Dalla versione 2.2.0 è possible non bloccare quegli script (o altri contenuti bloccati dal plugin) semplicemente aggiungendo il relativo snippet nell'apposita nuova textarea del pannello del plugin come indicato sopra.
Inoltre sia per esclusione custom script da blocco automatico body, sia per blocca custom script in head e footer è possibile usare una specie di espressione regolare (una regex o espressione regolare serve per trovare all'interno di una stringa (testo) un determinato valore che può essere sia esatto sia un pattern di valori per trovare più di una occorrenza).
Nel nostro caso per semplificare le cose (che sono comunque ancora complesse) è stato introdotto SOMETHING (che non ha nulla a che vedere con SEP), questo pattern serve per trovare un determinato script che contiene una parola specifica, quindi invece di copiare l'intero script così come viene stampato nel sorgente si può usare SOMETHING in questi due modi:
<script src="/assets/js/<---------SOMETHING--------->.js" ></script>oppure
<script<---------SOMETHING--------->esempio-facebook<---------SOMETHING--------->></script>Questi sopra bloccheranno tutti gli script javascript esterni del tipo:
<script src="/assets/js/file1.js"></script>
<script src="/assets/js/file2.js"></script>
<script src="/assets/js/dir1.file3.js ></script>
<script src="/assets/js/dir1/subdir2/file4.js ></script>Questo sotto invece bloccherà uno script inline (es GA):
<script><---------SOMETHING--------->GoogleAnalyticsObject<---------SOMETHING---------></script>e bloccherà lo snippet che contiene GoogleAnalyticsObject al suo interno:
<script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='https://www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create','UA-xxxxxxx-x','auto');ga('send','pageview');</script><script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
<---------SEP--------->
<script<---------SOMETHING--------->parola<---------SOMETHING---------></script>
<---------SEP--------->
<iframe<---------SOMETHING--------->youtube</iframe>
<---------SEP--------->
<embed<---------SOMETHING--------->parola<---------SOMETHING--------->>Come avrai notata dall'ultima versione oltre alla textarea per inserire il codice custom è possibile usare anche le nuove input con relaitva select box (o menù a tendina) sulla destra, questi menù a tendina funzionano allo stesso modo dei tag <---------SOMETHING---------> ma ti danno il vantaggio di saltare la parte di configurazione dello snippet e utilizzare direttamente la tendina inserendo quella piccola porzione di codice che è presente solo in quello snippet, ti faccio un esempio, mettiamo che tu abbia il seguente script (o iframe o embed):
<script>
codice script
var variabile = 1;
faunzione(){
eseguo qualcosa;
}
</script>Ovviamente è codice finto solo per fare un esempio, ora se osservi bene dentro quello snippet noterai che ci sono delle "parole" (chiedo scusa ai programmatori seri ma sto cercando di semplificare), codice, script, variabili ecc, bene, ora potresti per esempio creare uno snippet di blocco in questo modo:
<script><---------SOMETHING--------->variabile<---------SOMETHING---------></script>Come vedi ho sfruttato il nome "variabile" presente nello snippet precedente è ho inserito i tag <---------SOMETHING---------> alla sua sinistra e alla sua destra, la stessa cosa la possiamo fare con gli script che caricano un file piuttosto che avere il codice al suo interno semplicemente usando il tag <---------SOMETHING---------> subito appena dopo "script"
<script<---------SOMETHING--------->NOME DEL FILE<---------SOMETHING---------></script>Vedi la differenza fra i due? Bene, i vari select (le tendine) svolgono la stessa funzione dello snippet precedente ma ti risparmiano il tempo di dover scrivere tutto quel codice poiché verrà aggiunto in automatico da dentro il programma, tu dovrai solo o selezionare le voci presenti nella select box o inserire manualmente la parole dentro la input vuota a sinistra che nel nostro caso è "variabile", ora seguendo questa logica puoi applicare il sistema a script più complessi, ovviamente non è infallibile quindi dovrai tentare finché non trovi la combinazione giusta.
E' capitato un problema con una mappa di google il cui script era molto corposo e con il custom block dava un errore del PHP Warning: preg_replace() https://github.com/ItalyCookieChoices/italy-cookie-choices/issues/127 per ovviare a questo problema l'unico modo è applicare il lazyload alla mappa di google, sul repo ci sono diversi plugin che fanno questo, cerca quello che si adatta meglio alle tue esigenze ed evita quelli non aggiornati da almeno 6 mesi.