Documentazione

Indice dei contenuti

Come implementare la Consent Solution in Joomla! con ChronoForms

Questo tutorial usa ChronoForms, popolare estensione per Joomla!, per illustrare come integrare la Consent Solution sui tuoi form Joomla!. Anche se utilizzi un’altra estensione ti consigliamo comunque di proseguire con la lettura in quanto l’approccio da seguire è generalmente lo stesso.

Per configurare la Consent Solution with ChronoForms dovrai ricorrere alla libreria JavaScript.

In breve, bisogna:

  1. integrare il codice della Consent Solution;
  2. creare o modificare un form (completo dei necessari id) con ChronoForms; e
  3. inviare i dati del consenso alle API di iubenda.

Innanzitutto copia il codice che trovi in Consent Solution > Integra > Javascript.

Codice di integrazione della Consent Solution

Incolla il codice nell’head del tuo sito:

  • accedi al Template Manager di Joomla!; oppure
  • se non ti senti a tuo agio a modificare il tuo tema per Joomla!, puoi usare un’estensione come HeadTag per modificare l’head. Una volta installata vai in Extensions > Plugins > System – Headtag > Menu Item Tags e incolla il codice della Consent Solution.
Joomla! - Estensione HeadTag e codice della Consent Solution

2. Crea o modifica il tuo form

Una volta incluso il codice della Consent Solution nell’head del tuo sito, accedi al tuo pannello di amministrazione Joomla! e crea un form – ad esempio “contatti” – utilizzando l’estensione ChronoForms (se invece usi già ChronoForms per il tuo sito Joomla!, vai in Components > ChronoForms6 e fai click sul form che vuoi integrare con la Consent Solution).

ChronoForms per Joomla! - Nuovo form

Ecco un semplice form di contatto (nome, email, messaggio e iscrizione facoltativa alla newsletter):

ChronoForms per Joomla! - Esempio di form di contatto

Su ChronoForms potrebbe essere:

ChronoForms per Joomla! - Impostazioni del form

Una volta definiti il modulo di contatto e gli elementi che lo compongono, uno degli aspetti principali da affrontare è il mapping dei diversi input del form, in modo da rendere chiaro alla Consent Solution quali informazioni gli utenti inseriscono nei vari input.

Per fare il mapping possiamo affidarci alla funzione load (o submit) con l’oggetto map. Per una corretta implementazione delle funzioni load e submit ti servono:

  • un id per l’elemento form;
  • un id per l’elemento submit; e
  • nomi diversi per gli input del subject e delle preferences.

Fai click sull’icona delle impostazioni nella “form area” e aggiungi un id al tuo form:

ChronoForms - Configurazione del form

Analogamente a “Form ID”, aggiungi un id anche ai campi nome, email e messaggio:

ChronoForms per Joomla! - Configurazione del campo di testo

Stesso discorso per le checkbox (nel nostro caso, “generic” e “newsletter”):

ChronoForms per Joomla! - Configurazione delle checkbox

Per una checkbox come la “generic” che l’utente dovrà obbligatoriamente spuntare (pena l’impossibilità di inviare il form):

  • Disabilita la validazione Chronoforms per Joomla! - Configurazione delle checkbox
  • Disabilita l’opzione “ghost” Chronoforms per Joomla! - Configurazione delle checkbox
  • Aggiungi due eventi che abiliteranno/disabiliteranno il pulsante di submit (nota l’id #contact-submit, così come indicato nella configurazione che troverai poco sotto): Chronoforms per Joomla! - Configurazione delle checkbox

Infine, aggiungi un id anche al pulsante di submit:

Chronoforms per Joomla! - Configurazione del pulsante di submit

Vorrai anche aggiungere un messaggio di conferma da mostrare quando l’utente ha completato il form (submit > Actions):

Chronoforms per Joomla! - Configurazione del messaggio di conferma invio

Salva le modifiche e assicurati che il tuo form sia pubblicato.

Integrazione del form

Se stai editando un form esistente, passa direttamente alla sezione successiva, se invece stai creando un nuovo form, copia lo shortcode generato da ChronoForms:

{chronoforms6}contatti{/chronoforms6}

E incollalo in una pagina del tuo sito Joomla! (che potresti ad esempio chiamare “Contattaci”).

3. Invia i dati del consenso alle API di iubenda

Ora che il form di contatto è pronto dobbiamo inviare le informazioni alla Consent Solution quando l’utente lo compila. Ci sono due modi per farlo:

  • il metodo load, che invia i dati del consenso alle API di iubenda in modo asincrono; oppure
  • il metodo submit, che invia i dati del consenso alle API di iubenda in modo sincrono.

Metodo load

La funzione load permette di associare i parametri dell’oggetto consent ai campi del tuo <form> e salvare il consenso all’invio impostando una funzione trigger in submitElement: oppure in modo programmatico tramite un trigger dedicato.

Per impostazione predefinita, questo metodo scrive in localStorage, così da proteggersi da un’eventuale perdita di dati nel caso in cui venga caricata una nuova pagina prima che il JavaScript abbia finito di essere eseguito.

Attenzione

La funzione load può essere chiamata solo dopo la dichiarazione dell’oggetto form (come puoi vedere dall’esempio sottostante).

A seguire un esempio di funzione load con l’oggetto map. Ti invitiamo a notare:

  • gli id contact-submit e contact-form;
  • il mapping del subject con first_name e email (ti ricordiamo che hai 4 opzioni non modificabili a disposizione: first_namelast_namefull_name e email);
  • le preferenze espresse tramite checkbox, dove sei libero di usare delle chiavi personalizzate (in questo caso generic e newsletter);
  • le legal_notices, che sono in gran parte automatizzate se sincronizzi con la Consent Solution i documenti legali creati con iubenda (ti basta utilizzare gli identifier standard privacy_policy e cookie_policy).
<script>
    _iub.cons_instructions.push(["load", {
        submitElement: document.getElementById("contact-submit"),
        form: {
            selector: document.getElementById("contact-form"),
            map: {
                subject: {
                    first_name: "name",
                    email: "email"
                },
                preferences: {
                    generic: "generic",
                    newsletter: "newsletter"
                }
            }
        },
        consent: {
            legal_notices: [{
                    identifier: "privacy_policy",
                },
                {
                    identifier: "cookie_policy",
                }
            ],
        }
    }])
</script>

Inserisci lo script del metodo load dopo il form (ad esempio all’interno del footer del sito o della tua pagina di contatto) e avrai terminato. Una volta raccolti i consensi, sarai in grado di recuperarli e analizzarli tramite la dashboard della Consent Solution.

Leggi la documentazione JS per maggiori informazioni sul metodo load.

Metodo submit

A differenza del metodo load, il metodo submit invia i dati del consenso alle API di iubenda in modo sincrono.

Attenzione

Tieni presente che tale metodo non funziona se dopo l’invio del form si viene reindirizzati a un’altra pagina.

<script>
    document.getElementById("contact-submit").onclick = function() {
        sendToConsentSolution()
    };

    function sendToConsentSolution() {
        var inputName = document.getElementById("name").value;
        var inputEmail = document.getElementById("email").value;
        var inputMessage = document.getElementById("message").value;
        var subjectId = inputEmail.toLowerCase().replace(/\W/g, '-'); //facoltativo
        _iub.cons_instructions.push(["submit", {
            form: {
                selector: document.getElementById("contact-form"),
                map: {
                    subject: {
                        first_name: "name",
                        email: "email"
                    },
                    preferences: {
                        generic: "generic",
                        newsletter: "newsletter"
                    }
                }
            },
            consent: {
                subject: {
                    id: subjectId
                },
                legal_notices: [{
                        identifier: "privacy_policy"
                    },
                    {
                        identifier: "cookie_policy"
                    }
                ]
            }
        }])
    }
</script>

Come per il metodo load, nel codice di esempio soprastante nota:

  • gli id contact-submit e contact-form;
  • il mapping del subject con first_name e email (ti ricordiamo che hai 4 opzioni non modificabili a disposizione: first_namelast_namefull_name e email);
  • le preferenze espresse tramite checkbox, dove sei libero di usare delle chiavi personalizzate (in questo caso generic e newsletter);
  • le legal_notices, che sono in gran parte automatizzate se sincronizzi con la Consent Solution i documenti legali creati con iubenda (ti basta utilizzare gli identifier standard privacy_policy e cookie_policy);
  • facoltativo: anziché lasciare che venga generato automaticamente, puoi personalizzare il subjectId con – ad esempio – l’indirizzo email dell’interessato, tutto minuscolo e con il simbolo “-” al posto di “.” e “@”. Così facendo per mario.rossi@iubenda.com il subjectId diventerebbe mario-rossi-iubenda-com.

Analogamente al load, anche il metodo submit va incluso dopo il form (ad esempio all’interno del footer del sito o della tua pagina di contatto).

Una volta raccolti i consensi, sarai in grado di recuperarli e analizzarli tramite la dashboard della Consent Solution.

Leggi la documentazione JS per maggiori informazioni sul metodo submit.

Leggi anche