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 when the user's cookie preferences are modified.

`consent_update` Event Properties

Whenever Avacy fires a consent_update event, it creates structured data with the following properties:

Property	Description	Example
`trigger`	Specifies the type of event. In this case, it indicates a consent update.	`string`
`optin`	A boolean value indicating whether the user has opted in to consent.	`bool`
`purposes`	List of identifiers for the purposes for which the user has provided consent. Empty if no purposes were selected.	`[int]`
`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 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).	`bool`
`save-preferences`	When the user sets their consent preferences via the corresponding management panel.	`[int]`
`close-banner`	When the user clicks the 'X' to close the banner.	`[int]`

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. In the following example, we perform a simple console.log of a string based on whether the user has opted in or out:

<script>
    window.addEventListener('avacy_consent', function(event) {  
        const data = event.detail;
        if (data.optin) {
            console.log("The user has opted in.");
        } else {
            console.log("The user has opted out.");
        }
    });
</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>

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