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 quando le preferenze cookie dell'utente vengono modificate

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 il tipo di evento. In questo caso è un aggiornamento del consenso.	`string`
`optin`	Valore booleano che indica se l'utente ha effettuato l'opt-in al consenso.	`bool`
`purposes`	Elenco degli identificativi delle finalità per cui l'utente ha fornito il consenso. Vuoto se nessuno scopo è stato selezionato.	`[int]`
`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 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).	`bool`
`save-preferences`	Quando l'utente imposta le preferenze di consenso dal relativo pannello di gestione	`[int]`
`close-banner`	Quando l'utente clicca sulla 'X' per chiudere il banner	`[int]`

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. Nel seguente esempio, facciamo un semplice console.log di una stringa in base al fatto che l'utente abbia prestato il consenso oppure no.

<script>
    window.addEventListener('avacy_consent', function(event) {  
        const data = event.detail;
        if (data.optin) {
            console.log("L'utente ha effettuato l'opt-in.");
        } else {
            console.log("L'utente ha effettuato l'opt-out.");
        }
    })
</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>

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