Eventi JavaScript

---

In questa sezione verrà mostrato come monitorare e gestire gli eventi all'interno su Avacy. Gli eventi sono azioni o interazioni effettuate dall'utente, come la visualizzazione del banner di consenso o la selezione delle preferenze sulla privacy. La piattaforma offre strumenti per raccogliere e monitorare questi eventi, permettendo agli sviluppatori di reagire dinamicamente in base alle azioni dell'utente. Utilizzando la proprietà eventCollection e il metodo isInCollection(), è possibile verificare la registrazione degli eventi e gestire il flusso delle interazioni in modo flessibile.

Elenco Eventi Avacy

Eventi

Evento	Descrizione
avacy_consent	Evento emesso a ogni caricamento della pagina e quando l'utente salva una scelta sul banner

Proprieta dell'evento avacy_consent

Ogni volta che Avacy lancia un evento avacy_consent, viene creato un dato strutturato con le seguenti proprietà.

Proprietà	Descrizione	Esempio
trigger	Indica perché è partito l'evento: page_load al caricamento della pagina, anche alla prima visita prima di qualunque scelta; consent_update quando l'utente salva una scelta.	string
optin	Valore booleano che indica se esiste una scelta salvata. Vale false alla prima visita, prima di qualunque scelta, e true dopo qualunque scelta salvata, anche un rifiuto («Reject all») o la chiusura del banner. Non indica che l'utente ha accettato.	bool
purposes	Elenco degli identificativi delle finalità per cui l'utente ha fornito il consenso. Vuoto se nessuno scopo è stato selezionato.	[int]
customPurposes	Elenco delle finalità personalizzate (non IAB). Ogni elemento ha l'id della finalità e, secondo la base giuridica, c (consenso) e li (interesse legittimo), che valgono 1 o 0. Vuoto se non ci sono finalità personalizzate.	[object]
legitimateInterests	Elenco degli identificativi delle finalità per cui si applica un interesse legittimo senza consenso esplicito. Vuoto se non applicabile.	[int]
specialFeatures	Elenco degli identificativi delle funzionalità speciali che richiedono consenso. Vuoto se non ci sono funzionalità speciali.	[int]
customVendors	Elenco di fornitori con stato di consenso. Ogni elemento include l'id del fornitore e un flag consent che indica se quel fornitore ha il consenso dell'utente o no.	[object]
iabVendors	Elenco di identificativi dei fornitori che seguono lo standard IAB TCF. Vuoto se non ci sono vendor IAB.	[int]
iabVendorsWithConsent	Elenco di fornitori IAB per cui è stato fornito il consenso. Vuoto se nessun consenso è stato accordato. Ogni oggetto ha il proprio id e il name.	[object]
customVendorsWithConsent	Elenco di vendor personalizzati per cui è stato fornito il consenso. Vuoto se nessun consenso è stato accordato.	[object]
gcm	Contiene gli identificatori di consenso delle Google Consent Mode per cui l'utente ha prestato il consenso. Vuoto se non configurato.	[string]

---

Evento	Descrizione
avacy_interaction	Evento emesso a ogni interazione dell'utente con il cookie banner

Proprieta dell'evento avacy_interaction

L'evento avacy_interaction ha una proprietà detail con al suo interno una proprietà optin; il valore di optin è una stringa che cambia in base al tipo di interazione. La seguente tabella mostra i possibili valori di event.detail.optin

Proprietà	Descrizione	Esempio
consent-all	Quando l'utente clicca sul pulsante di accettazione di tutti i cookie.	string
reject-all	Quando l'utente clicca sul pulsante di rifiuto di tutti cookie (o accettazione dei soli cookie strettamente necessari).	string
save-preferences	Quando l'utente imposta le preferenze di consenso dal relativo pannello di gestione	string
close-banner	Quando l'utente clicca sulla 'X' per chiudere il banner	string

---

Evento	Descrizione
avacy_reject_all	Evento emesso quando l'utente clicca sul pulsante di rifiuto di tutti i cookie o sulla 'X' per chiudere il banner

Proprieta dell'evento avacy_reject_all

L'evento avacy_reject_all viene emesso su window e ha una proprietà detail con due proprietà:

Proprietà	Descrizione	Esempio
consent	reject-all se l'utente ha cliccato sul pulsante di rifiuto, close-banner se ha cliccato sulla 'X'	string
layer	Il livello del banner da cui è partito il click. Vale sempre "1": il pulsante di rifiuto e la 'X' sono solo nel primo livello	string

Subito dopo parte anche avacy_interaction, con lo stesso valore in optin.

Ascoltare un evento

Aggiungendo un listener all'evento, è possibile accedere alle proprietà descritte nella tabella precedente e definire il comportamento del sito in maniera programmatica. Il valore optin di avacy_consent vale true anche dopo un rifiuto: per sapere cosa è stato consentito si leggono purposes, customPurposes e i fornitori. Nel seguente esempio, facciamo un semplice console.log che, se l'utente non ha ancora scelto, lo segnala; altrimenti stampa le finalità IAB consentite.

<script>
    window.addEventListener('avacy_consent', function(event) {  
        const data = event.detail;
        if (!data.optin) {
            console.log("Il visitatore non ha ancora scelto.");
        } else {
            console.log("Finalità IAB consentite:", data.purposes);
        }
    })
</script>

In quest'altro esempio, possiamo ascoltare avacy_interaction per determinare delle azioni da compiere in base al fatto che l'utente abbia accettato i cookie dal pulsante oppure dalle preferenze:

<script>
    window.addEventListener('avacy_interaction', function(event) {  
        const data = event.detail;
        if (data.optin === 'consent-all') {
            console.log("L'utente ha cliccato sul pulsante di accettazione.");
        } else if (data.optin === 'save-preferences') {
            console.log("L'utente ha impostato le preferenze di consenso.");
        }
    })
</script>

In quest'altro esempio, invece, possiamo scorrere la lista dei fornitori e verificare se l'utente ha prestato il consenso a quel fornitore oppure no. Questo può essere molto utile per implementare logiche personalizzate di blocco preventivo.

<script>
    window.addEventListener('avacy_consent', function(event) {  
        const data = event.detail;
        if (data.customVendors && data.customVendors.length > 0) {
            data.customVendors.forEach(vendor => {
                console.log(`id: ${vendor.id} - consent: ${vendor.consent}`);
            });
        }
    })
</script>

In questo esempio possiamo verificare se nelle preferenze espresse dall'utente è presente il consenso a Google (fornitore con identificativo 755 nella lista dello IAB TCF):

<script>
    window.addEventListener('consent_update', function(event) {  
        const data = event.detail;
        const vendorId = 755;
        const isVendorConsented = data.iabVendorsWithConsent.some(vendor => vendor.id === vendorId);

        console.log(`Il consenso per il vendor con ID ${vendorId} è stato dato: ${isVendorConsented}`);
    });
</script>

In questo esempio possiamo verificare se nelle preferenze espresse dall'utente è stato dato il consenso a una o più finalità di trattamento dei dati:

<script>
    window.addEventListener('consent_update', function(event) {  
        const data = event.detail;

        // Funzione per verificare se il consenso è stato dato a una o più purposes
        const arePurposesConsented = (purposeIds) => {
            return purposeIds.every(purposeId => data.purposes.includes(purposeId));
        };

        const purposesToCheck = [1, 3];
        const hasConsentForPurposes = arePurposesConsented(purposesToCheck);

        console.log(`Il consenso per le purposes [${purposesToCheck.join(", ")}] è stato dato: ${hasConsentForPurposes}`);
    });
</script>

Eventi post-message

Di seguito vi è una tabella con l'elenco completo degli eventi che Avacy invia ad ogni interazione dell'utente con il cookie banner:

Evento	Descrizione
oil-checked-optin	Evento emesso quando viene verificato lo stato dell'opt-in dell'utente.
oil_shown	Evento emesso quando il banner della CMP viene mostrato all'utente.
oil_optin_done_button_clicked	Evento emesso quando l'utente clicca sul pulsante per confermare l'opt-in.
oil_optin_done	Evento emesso quando il processo di opt-in viene completato con successo.
oil_soi_optin_done	Evento emesso al completamento dell'opt-in per il consenso secondario (second layer).
oil_optout_done	Evento emesso quando il processo di opt-out viene completato con successo.
oil_close_banner_button_clicked	Evento emesso quando l'utente clicca sul pulsante per chiudere il banner della CMP.
oil_as_cpc_privacy_selected	Evento emesso quando l'utente seleziona l'opzione di configurazione avanzata per la privacy.
oil_click_advanced_settings	Evento emesso quando l'utente accede alle impostazioni avanzate della CMP.

Ascoltare un evento post message

Di seguito è mostrato un esempio di come ascoltare un evento message e scrivere delle logiche in base al tipo di interazione con il banner. Nel caso specifico, viene effettuato un semplice console.log con i dettagli dell'evento se, dopo il message, l'evento è di tipo oil_shown.

<script>
window.addEventListener('message', function(event) {  
    if(event.data === 'oil_shown'){
        console.log(event);
    }
})
</script>

Verifica degli eventi inviati

Per ottenere una lista di tutti gli eventi registrati fino a quel momento. Attraverso la proprietà eventCollection è possibile verificare tutti gli eventi che sono stati inviati fino a quel momento.

console.log(eventCollection);
/* Output: [
    {
        "name": "oil-checked-optin",
        "timestamp": 1735816751078
    },
    {
        "name": "oil_shown",
        "timestamp": 1735816751158
    },
    {
        "name": "oil_optin_done_button_clicked",
        "timestamp": 1735817532126
    }
    // ...
]
*/

Controllo della presenza di un evento

Il metodo isInCollection(eventName) consente di verificare se uno specifico evento è stato aggiunto a eventCollection. Se l'evento non è presente, il metodo restituirà 0.

if (isInCollection("oil_optin_done")) {
    console.log("L'evento 'oil_optin_done' è stato registrato.");
} else {
    console.log("L'evento 'oil_optin_done' non è stato registrato.");
}

Esempio con un evento inesistente o non ancora registrato

const result = isInCollection("oil_nonexistent_event");
console.log(result); // Output: 0