Custom Events
How to create custom events?
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 |
| Fires when the visitor accepts all cookies used on the website, no matter if you use cookie categories or not. |
| Fires when visitor accepts some cookie categories, only fires when cookie categories are used. Accepted categories are passed together with events (see example below). |
| Fires when the visitor rejects all cookies, no matter if cookie categories are used or not. |
| Fires when the visitor closes the cookie consent banner. |
| Fires when |
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 |
| Fires if the user agreed to Functionality cookies. |
| Fires if the user agreed to Strictly necessary cookies. |
| Fires if the user agreed to Targeting cookies. |
| Fires if the user agreed to Performance cookies. |
| 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?