Cookie Law banner per siti multilingua

Nuova rubrica che porta un pizzico di programmazione sul mio blog. In questo primo articolo vediamo come modificare lo script dell’informativa breve fornito da Iubenda (quello che ti ho presentato in questo articolo), per un sito multilingua.

Il tutto senza modificare il tuo sito e lavorando solo su Google Tag Manager.
Unico requisito: il codice della lingua deve essere presente nell’url della pagina (via querystring).

Quindi, se il mio sito fosse disponibile in italiano e in inglese, le pagine dovrebbero avere un indirizzo di questo tipo:

  • https://omarventuri.it/it/titolo-della-pagina
  • https://omarventuri.it/en/page-title

In modo che si possa recuperare la lingua semplicemente analizzando l’indirizzo della pagina. In termini generali, la soluzione che ti descrivo in questo articolo è più flessibile di come te la presento e funziona, con delle piccole modifiche, in tutti i casi in cui è possibile recuperare la lingua corrente utilizzando una funzione javascript.

In questo articolo ti mostro la soluzione relativa alla situazione descritta sopra (https://omarventuri.it/it/titolo-della-pagina). Lasciami pure nei commenti una descrizione del tuo sito; potrei aggiornare questo articolo integrandolo con soluzioni alternative.

Ed ora, partiamo.

Step 1: recuperare il percorso della pagina

Come prima cosa dobbiamo leggere l’indirizzo della pagina corrente. Javascript ci mette a disposizione l’istruzione window.location con la quale poter leggere le informazioni dell’indirizzo della pagina corrente.

Nella finestra qui sotto sono presenti due schede: Javascript e Result.

Nella scheda Javascript vedi un po’ di codice che serve a leggere l’indirizzo della pagina.

Nota che nella scheda Result non vedrai l’indirizzo della mia pagina (cioè di omarventuri.it), ma bensì di fiddle.jshell.net. Non è importante il perchè, ma non è un errore. Quindi non concentrarti su quello.

Concentrati invece sulle righe che iniziano con i numeri 01, 02, 03 e 04.

Quelle sono le istruzioni che ci interessano. Il resto serve a poter generare il risultato.

Quindi, apri la scheda Result (basta cliccare sulla voce Result che trovi lì in alto) e vedrai quattro righe di testo.

A noi interessa la terza, quella che fa riferimento all’istruzione window.location.pathname.

Per una generica pagina del tipo https://miosito.it/it/titolo-della-pagina, l’istruzione javascript window.location.pathname restituirebbe il seguente valore: “/it/titolo-della-pagina”.

Step 2: estrarre la lingua

A questo punto si può procedere in tanti modi diversi.

Uno dei più semplici consiste nel lavorare sul testo. In altre parole, noi abbiamo il testo “/it/qualunquealtracosa” e da qui vogliamo ottenere “it”, che è il codice della lingua.

Chiaramente, la stessa soluzione deve permetterci di ottenere “en” dal testo “/en/qualunquealtracosa“.

Con Javascript, ancora una volta, è molto semplice.

Basta utilizzare l’istruzione substring(start, len), che restituisce un numero “len” di caratteri, partendo dal carattere successivo a “start”.

Noi in particolare dobbiamo partire dal carattere successivo al primo (il primo è “/”) e leggere gli altri due caratteri.

Quindi, l’istruzione window.location.pathname.substring(1,2) mi restituisce il codice di due caratteri della lingua (“it” o “en”).

Step 3: ridurre la probabilità di errore

L’ultima cosa che vorremmo con un sito in produzione, è che si generasse un errore nel nostro codice e che il banner non venisse visualizzato (oltre eventualmente a generare errori a cascata anche su altre parti della pagina).

Per ridurre al minimo questa possibilità, ecco il codice che possiamo usare.

In sostanza, questo codice estrae la lingua dall’indirizzo della pagina corrente. Poi la converte in minuscolo con l’istruzione toLowerCase() (giusto per evitare problemi con il riconoscimento dei caratteri).

A questo punto, con le istruzioni switch e case il codice cerca una corrispondenza con una delle lingue che vogliamo gestire. Il tutto è “avvolto” dalle istruzioni try e catch che permettono di rendere più sicuro il codice.

Infatti, nel caso in cui all’interno della sezione try dovesse verificarsi un errore, verrebbe eseguita la sezione catch (che non viene eseguita invece se non si verifica alcun errore).

È nella sezione catch quindi che imposti la lingua predefinita, che nel nostro caso è “it”, ma che tu puoi modificare come preferisci.

Nota: questa soluzione è supportata dalla maggior parte dei browser (tutti i principali). Per avere un elenco preciso dei browser e del loro supporto fai riferimento a questi link:

Step 4: il codice completo di iubenda

Non resta ora che mettere tutto insieme, unendo quello che abbiamo appena scritto con il codice di Iubenda (nella versione completa che ti ho mostrato nel video che trovi in questo articolo).

Naturalmente, l’elenco delle lingue gestite in questo codice (le istruzioni case) devono corrispondere alle lingue attivate anche iubenda.

In altre parole, non ha senso che tu qui gestisca la lingua tedesca, se in iubenda non hai attivato la stessa lingua.

Nota: rispetto al codice mostrato nel video, il codice da utilizzare ha subito un piccolo aggiornamento, che trovi già applicato nello script qui sotto. Ulteriori informazioni sul sito di iubenda.

Step 5: Google Tag Manager

Questo è il passaggio finale. Ma a questo punto non devi fare altro che un bel copia e incolla del codice che trovi qui sopra, avendo solo cura di sostituire i due commenti in corrispondenza di “siteId” e “cookiePolicyId” con i valori che puoi recuperare da iubenda.

Salva le modifiche e ricordati che in Google Tag Manager, per rendere le modifiche definitive, è necessario Pubblicarle.

Bene, adesso aprendo il tuo sito in italiano (o anche nel caso in cui nell’indirizzo della pagina non vi sia alcun riferimento alla lingua), compare un banner simile al seguente

Mentre aprendo lo stesso sito in tedesco, comparirebbe un banner simile al seguente


Hai qualche domanda? Scrivila nei commenti in modo che possa essere eventualmente utile anche ad altri.

Ti è piaciuto l’articolo? Condividilo con altri tramite i tuoi canali social.