JavaScript Events

This section will show how to monitor and manage events within Avacy. Events are actions or interactions made by the user, such as displaying the consent banner or selecting privacy preferences. The platform provides tools to collect and monitor these events, allowing developers to dynamically respond to user actions. By using the eventCollection property and the isInCollection() method, it's possible to verify event registration and manage the flow of interactions in a flexible way.

List of Avacy Events

Events

Event	Description
`avacy_consent`	Event triggered on every page load and when the user saves a choice on the banner

Properties of the `avacy_consent` Event

Whenever Avacy fires an avacy_consent event, it creates structured data with the following properties:

Property	Description	Example
`trigger`	Tells why the event fired: `page_load` on page load, including the first visit before any choice; `consent_update` when the user saves a choice.	`string`
`optin`	Boolean value indicating whether a choice has been saved. It is `false` on the first visit, before any choice, and `true` after any saved choice, including a refusal ("Reject all") or closing the banner. It does not mean the user accepted.	`bool`
`purposes`	List of identifiers for the purposes for which the user has provided consent. Empty if no purposes were selected.	`[int]`
`customPurposes`	List of custom (non-IAB) purposes. Each element has the purpose `id` and, depending on the legal basis, `c` (consent) and `li` (legitimate interest), set to `1` or `0`. Empty if there are no custom purposes.	`[object]`
`legitimateInterests`	List of identifiers for purposes where legitimate interest applies without explicit consent. Empty if not applicable.	`[int]`
`specialFeatures`	List of identifiers for special features requiring consent. Empty if no special features are present.	`[int]`
`customVendors`	List of vendors with consent status. Each element includes the vendor's `id` and a `consent` flag indicating whether the user has provided consent for that vendor.	`[object]`
`iabVendors`	List of identifiers for vendors following the IAB TCF standard. Empty if there are no IAB vendors.	`[int]`
`iabVendorsWithConsent`	List of IAB vendors for which consent has been provided. Empty if no consent was granted. Each object contains its `id` and `name`.	`[object]`
`customVendorsWithConsent`	List of custom vendors for which consent has been provided. Empty if no consent was granted.	`[object]`
`gcm`	Contains identifiers for Google Consent Mode purposes for which the user has given consent. Empty if not configured.	`[string]`

Event	Description
`avacy_interaction`	Event triggered on every user interaction with the cookie banner

Properties of the `avacy_interaction` Event

The avacy_interaction event has a detail property containing an optin property. The value of optin is a string that changes depending on the type of interaction.
The following table lists the possible values of event.detail.optin:

Property	Description	Example
`consent-all`	When the user clicks the button to accept all cookies.	`string`
`reject-all`	When the user clicks the button to reject all cookies (or to accept only strictly necessary cookies).	`string`
`save-preferences`	When the user sets their consent preferences via the corresponding management panel.	`string`
`close-banner`	When the user clicks the 'X' to close the banner.	`string`

Event	Description
`avacy_reject_all`	Event emitted when the user clicks the button to reject all cookies or the 'X' to close the banner

Properties of the `avacy_reject_all` event

The avacy_reject_all event is dispatched on window and has a detail property with two properties:

Property	Description	Example
`consent`	`reject-all` if the user clicked the reject button, `close-banner` if they clicked the 'X'	`string`
`layer`	The banner layer the click came from. It is always `"1"`: the reject button and the 'X' are only on the first layer	`string`

Right after it, avacy_interaction is emitted too, with the same value in optin.

Listening to an Event

By adding a listener to the event, you can access the properties described in the table above and programmatically define the behavior of the site. The optin value of avacy_consent is true even after a refusal: to find out what was consented to, read purposes, customPurposes and the vendors. In the following example, we perform a simple console.log that reports when the user has not chosen yet; otherwise it prints the allowed IAB purposes.

<script>
    window.addEventListener('avacy_consent', function(event) {  
        const data = event.detail;
        if (!data.optin) {
            console.log("The visitor has not made a choice yet.");
        } else {
            console.log("Allowed IAB purposes:", data.purposes);
        }
    });
</script>

In this example, we can listen to avacy_interaction to determine actions to perform based on whether the user accepted cookies via the button or through preferences:

<script>
    window.addEventListener('avacy_interaction', function(event) {  
        const data = event.detail;
        if (data.optin === 'consent-all') {
            console.log("The user clicked the acceptance button.");
        } else if (data.optin === 'save-preferences') {
            console.log("The user set their consent preferences.");
        }
    });
</script>

In another example, we iterate through the list of vendors to check whether the user has granted consent for each vendor. This can be useful for implementing custom blocking logic:

<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 this example, we can check if the user's preferences include consent for Google (vendor with ID 755 in the IAB TCF list):

<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(`Consent for the vendor with ID ${vendorId} has been given: ${isVendorConsented}`);
    });
</script>

In this example, we can check if the user's preferences include consent for one or more data processing purposes:

<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>

Post-Message Events

The following table lists all the events Avacy sends during user interaction with the cookie banner:

Event	Description
`oil-checked-optin`	Event triggered when the user's opt-in status is checked.
`oil_shown`	Event triggered when the CMP banner is displayed to the user.
`oil_optin_done_button_clicked`	Event triggered when the user clicks the button to confirm opt-in.
`oil_optin_done`	Event triggered when the opt-in process is successfully completed.
`oil_soi_optin_done`	Event triggered upon completing opt-in for secondary consent (second layer).
`oil_optout_done`	Event triggered when the opt-out process is successfully completed.
`oil_close_banner_button_clicked`	Event triggered when the user clicks the button to close the CMP banner.
`oil_as_cpc_privacy_selected`	Event triggered when the user selects the advanced privacy configuration option.
`oil_click_advanced_settings`	Event triggered when the user accesses the CMP's advanced settings.

Listening to a Post-Message Event

Below is an example of how to listen for a message event and write logic based on the type of interaction with the banner. Specifically, it logs the event details if the event type after the message is oil_shown:

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

##### Checking Sent Events To retrieve a list of all events recorded so far, use the eventCollection property:

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

Verifying the Presence of an Event

The isInCollection(eventName) method checks whether a specific event is present in eventCollection. If the event is not present, the method returns 0:

if (isInCollection("oil_optin_done")) {
    console.log("The 'oil_optin_done' event has been recorded.");
} else {
    console.log("The 'oil_optin_done' event has not been recorded.");
}

Example with a Nonexistent Event

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

List of Avacy Events​

Events​

Properties of the avacy_consent Event​

Properties of the avacy_interaction Event​

Properties of the avacy_reject_all event​

Listening to an Event​

Post-Message Events​

Listening to a Post-Message Event​

Verifying the Presence of an Event​

Example with a Nonexistent Event​