Opt-in Cookie Panel for Enonic XP.
Cookie Panel works by setting a few user-definable functional control cookies to communicate with other apps that they shouldn't add their tracking to the the site. By default, before the user has consented to tracking cookies, all these cookies are set to their rejected value by Cookie Panel.
Once the user has consented to the specific cookie categories, Cookie Panel will set the control cookies to their accepted value to communicate to the other apps that they now can render their content.
- Opt-in cookie consent for your users
- Custom cookie groups/categories that users can enable/disable individually
- Easy integration with other applications
- Built-in light and dark themes to fit most site designs
- Custom styling if you want something different from the built-in themes
- Content Security Policy compatible
You can add CSS styling in your own applications to make the panels fit any design you want.
There are 2 ways to add buttons that directly open the cookie settings panel.
If you add a cookie_settings=true parameter to your URL, Cookie Panel will load and open its settings ?cookie_settings=true
You can add your own button to open the the panel with the attribute data-cookie-panel-selector="open-settings"
<button data-cookie-panel-selector="open-settings">
Open cookie settings
</button>
If you have serverside rendered components that need specific consent from the user before presenting it to the user (external video players etc), you can tell Cookie Panel that the page needs refreshing after saving cookie settings. To do this, you add an application/json script block to your page with a specific selector attribute Cookie Panel can pick up. If you add this using page contributions from the parts that require a reload to properly render, this behaviour will only affect pages using those parts and not reload if the parts aren't used.
<script data-cookie-panel-selector="page-config">
{ reloadOnSave: true }
</script>
Your app can add a function to run both on page load and when user consent is given. When consent is granted for a specific category, the app will execute a function for each cookie within that category—if any exist. On page load, the function will run for every cookie across all categories.
Register a function on the window.__RUN_ON_COOKIE_CONSENT__ object, the key being the same as the cookie name in the cookie panel app config.
With this site config:
You would register in your app frontend JS like this:
window.__RUN_ON_COOKIE_CONSENT__ = window.__RUN_ON_COOKIE_CONSENT__ || {};
window.__RUN_ON_COOKIE_CONSENT__["com-enonic-app-ga_disabled"] = function () {
// Code to be run on consent
}`;
It's important the RUN_ON_COOKIE_CONSENT function is set on the window object before the cookie panel app tries to execute it. The cookie panel front-end script that executes it is added to the body end, is deferred and runs on DOMContentLoaded, so your script needs to be loaded and executed before that.
Cookie Panel works out of the box with these apps: