Integration with Cookie information

Created on 22 March 2023, over 1 year ago
Updated 22 April 2023, over 1 year ago

We are maintaining the cookie platform Cookie informations Drupal module at https://www.drupal.org/project/cookieinformation .

To make it easier to implement this module to different third party services, I would suggest creating an example implementation with a few services which can then be used as a template for other services. At the moment the documentation and help for implementing this module to new services seems a bit lacking and I have mostly gotten more information from the issues for example for EU Cookie Compliance and not the actual module documentation.

We are investigating how to implement the recommended approach in Cookie content blocker:

  • A cookieContentBlockerConsentGiven event is triggered on window when consent is given,
  • Your cookie consent manager is triggered when the cookieContentBlockerChangeConsent is fired on window.

There is information for Cookie information here:
https://support.cookieinformation.com/en/articles/4418483-using-the-reop...
https://support.cookieinformation.com/en/articles/5444629-third-party-co...

I am struggling a bit to understand how this would work with CCB.

I have been able to attach the event listener like this for Cookie Information:

window.addEventListener('CookieInformationConsentGiven', function () {
...code...
}); 

But this does not work with CCB:

window.addEventListener('cookieContentBlockerChangeConsent', function () {
...code...
});

 window.addEventListener('cookieContentBlockerConsentGiven', function () {
...code...
});

I have also tried to add the Cookie informations renew event CookieConsent.renew() to the settings but it doesn't seem to have any effect.

Is there something I am missing here?

I have been mostly testing this with the Media blocking module and Youtube videos and I would like to open the Cookie information renew popup when the button in the CCB block is clicked:

<button src="/fi/media/oembed?url=<https://youtube.com>" frameborder="0" allowtransparency="" width="200" height="113" class="media-oembed-content js-cookie-content-blocker cookie-content-blocker button cookie-content-blocker__button js-cookie-content-blocker-consent-change-button" title="Test video">Show content</button>

So far I have been able to make the actual cookie comparison work with a custom cookie but the Cookie informations native cookie seems to be hard to implement because it contains a lot of information inside it. Basically the cookie is an object which contains consents approved array for each category. So it's probably required to make a custom solution to integrate Cookie information to Cookie content blocker.

EDIT:

After investigating the problem I was able to get the listener working like this:

$(window).on('cookieContentBlockerChangeConsent', function (event) {
   window.CookieConsent.renew();
});

This seems to boil down to the fact that according to my research it is impossible to listen to jQuery created events with vanilla JS as jQuery provides an event layer over vanilla JS. That means that vanilla JS cannot talk to that added layer. So in summary, jQuery can catch vanilla JS events, but vanilla JS cannot catch jQuery added events. And I was trying to implement my event listener with vanilla JS instead of jQuery like which is used in https://git.drupalcode.org/project/cookie_content_blocker/-/blob/8.x-2.x....

As a suggestion since Drupal is moving slowly away from jQuery ( https://www.drupal.org/project/drupal/issues/3176441 📌 JavaScript event handling without a full jQuery dependency Needs work ) it might make sense to refactor the JS code here also to vanilla JS.

💬 Support request
Status

Active

Version

2.1

Component

Code

Created by

🇫🇮Finland heikkiy Oulu

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024