Custom Events

How to create custom events?

Nelson
Written by NelsonLast update 1 month ago

In some cases, your website scripts need to know if the user agreed to the cookie policy (for example to enable certain functionality that the user agreed to). This is what events are used for: once the user makes/changes his cookie policy choice, an event is fired on the page. You can set up your website to listen to such events and perform necessary actions. Below you can find a list of events as well as some JavaScript code examples of how those events can be used. 

List of CookieScript events

Those events are assigned to the window, but can as well be listened from a Cookie-Script code instance (more examples below). Events are fired each time user interacts with a banner, so it can fire multiple times on the same page.

Event

Description

CookieScriptAcceptAll

Fires when the visitor accepts all cookies used on the website, no matter if you use cookie categories or not.

CookieScriptAccept

Fires when visitor accepts some cookie categories, only fires when cookie categories are used. Accepted categories are passed together with events (see example below).

CookieScriptReject

Fires when the visitor rejects all cookies, no matter if cookie categories are used or not.

CookieScriptClose

Fires when the visitor closes the cookie consent banner.

CookieScriptLoaded

Fires when CookieScript.Instance is ready and its functions are available to use.

Note: The event handlers for these events can be assigned to the Window or to CookieScript.Instance . See more on these choices in the code examples below.

Cookie category events

In addition to the generic events above, we have included category-specific events. This might be useful if you want to include some third-party functionality for a specific category. Those events are designed to fire once per page, so you can include some third-party code without checking if this code was included before. Events fire once a visitor agrees to a certain cookie category or on page load if a visitor agreed to a cookie category on the previous page. 

These category events are designed to not fire more than once per page, which is perfect for loading extra features without being afraid to include the same code twice.

Event

Description

CookieScriptCategory-functionality

Fires if the user agreed to Functionality cookies.

CookieScriptCategory-strict

Fires if the user agreed to Strictly necessary cookies.

CookieScriptCategory-targeting

Fires if the user agreed to Targeting cookies.

CookieScriptCategory-performance

Fires if the user agreed to Performance cookies.

CookieScriptCategory-unclassified

Fires if the user agreed to Unclassified cookies.

Remember: You are not limited to existing category names, you can rename them in Cookie-Script item settings. For example, you can use  targeting  category in code, but rename it to "Marketing" when displaying to visitors.

We have also included similar events for Google Tag Manager. Please follow this article for more details on how to fire GTM Tags with CookieScript events.

CookieScript initialisation event

If you need to use  CookieScript.instance functions, you might need to wait until it is initialized. Just sign up for an CookieScriptLoaded event like this: 

window.addEventListener('CookieScriptLoaded', function() {
    // CookieScript.instance is available here
});

Code examples

1. Listen to a global AcceptAll event:

window.addEventListener('CookieScriptAcceptAll', function() {
    // your code here
});

or listen to a CookieScript.Instance event:

window.addEventListener('DOMContentLoaded', function(event) {
    CookieScript.instance.onAcceptAll = function() {
        // some code
    }
});

2. Listen to a global Accept event: 

window.addEventListener('CookieScriptAccept', function(e) {
    // e.detail will include this data:
    // { categories: ['strict', 'functionality'] }
    
    // some code
});

or use a CookieScript.Instance event:

window.addEventListener('DOMContentLoaded', function(event) {
    CookieScript.instance.onAcceptAll = function(data) {
        // data will include this object:
        // { categories: ['strict', 'functionality'] }
        
        // some code
    }
});

3. Listen when the user agrees to Functionality cookies:

window.addEventListener('CookieScriptCategory-functionality', function() {
    // some code here
});

4. Display a div on my web page until cookie consent is given:

window.addEventListener('CookieScriptAcceptAll', function() {
    var element = document.getElementById("myElement");
    element.style.display = "none";
});

CookieScript functions

CookieScript also provides a variety of custom functions to control your Cookie Banner behavior programmatically. Read here a detailed explanation of how custom functions work.

Did this answer your question?