brainsum / cookieconsent Goto Github PK
View Code? Open in Web Editor NEWA Javascript based solution for blocking/allowing even 3rd party cookies to comply with GDPR
Home Page: https://brainsum.github.io/cookieconsent/
License: ISC License
A Javascript based solution for blocking/allowing even 3rd party cookies to comply with GDPR
Home Page: https://brainsum.github.io/cookieconsent/
License: ISC License
What's the best strategy to handle the google tag manager cookies?
<script type="text/plain" data-consent="google-tag-manager">
CookieConsent.wrapper('wrapped', function() {
console.warn('I\'m a google-tag-manager script which was wrapped.');
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new
Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0];var
j=d.createElement(s);var
dl=l!='dataLayer'?'&l='+l:'';j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+'';j.async=true;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXXXXX');
});
</script>
Also what about the extra iframe one that is included ?
<noscript aria-hidden="true"><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" title="Google Tag Manager"></iframe></noscript>
If i exclude a cookie with a local cookie configuration, it is blocked from being added unless i approve of that category. BUT, if i set the category to disabled again, it SHOULD delete the cookie.
It however does not because deleting a cookie is just another set operation which causes the filter to not set the cookie because i asked it not to. Even when my expiration date is way in the past.
Deleting a cookie should always work, regardless if i want to exclude that cookie or not.
It might be the worst solution possible to the problem, but i had to fix it asap and this was the only thing my monkey brain could think of. It does work, but it is not pretty. There is probably a better solution.
How can i remove cookie after accept all cookie?
The Web Storage API supported by modern web browsers describes an alternative interface that JavaScript code can use to store persistent data on users' devices. This API has replaced cookies in several use cases, especially for rich web applications where the server does little processing. However, cookieconsent
does not support blocking Web Storage API calls.
According to common interpretations of the Directive 2002/58/EC of the European Parliament and of the Council of 12 July 2002 concerning the processing of personal data and the protection of privacy in the electronic communications sector (Directive on privacy and electronic communications) (usually called "cookie law"), EU regulations are not limited to cookies. Paragraph 24 of that directive reads (emphasis mine):
Terminal equipment of users of electronic communications networks and any information stored on such equipment are part of the private sphere of the users requiring protection under the European Convention for the Protection of Human Rights and Fundamental Freedoms. So-called spyware, web bugs, hidden identifiers and other similar devices can enter the user's terminal without their knowledge in order to gain access to information, to store hidden information or to trace the activities of the user and may seriously intrude upon the privacy of these users. The use of such devices should be allowed only for legitimate purposes, with the knowledge of the users concerned.
Cookies are later mentioned in the directive as an example of information storage devices, but as the Web Storage API can also be used to implement information storage devices, the directive applies to it.
Given the fact that modern web applications are using the Web Storage API, that this repository aims to make it easy to comply with "EU regulation" and that the word "cookie" has been commonly overloaded to vaguely mean "information storage device" in this context, I think it'd be great for this project to support blocking Web Storage API usage π
I would like to ask you, if you could add any license information to the repository.
Hi, is there a way to reopen the dialog once closed?
The only way found at the time is:
document.querySelector('.ccb__edit').click()
When you have adobe analytics activated, you have a cookie coming from adobe analytics and containing the list of user cookies (included cconsent)
I think
if (item.indexOf('cconsent') >= 0) {
should be replaced by
if (item.indexOf('cconsent**=**') >= 0)
or ensure the string start with ccontent to be sure the correct cookie will be parsed
We are trying to block the google adsense cookie _gcl_au
:
adsense: { category: "marketing", type: "dynamic-script", search: "adsense", cookies: [ {name: "_gcl_au", domain: `.${window.location.hostname}`} ], language: {locale: {es: {name: "Google Adsense"}}} },
Other Google cookies as _ga
are blocked correctly.
Hi folks,
Maybe I'm seeing something wrong here, but when I try things out, I see everything working correctly, except:
When I have for example a cookie which is declined by default (status switch is OFF by default) the icon shows the accepted icon "V" instead of "X". I have to click / tap the corresponding switch 2 times ( status = OFF by default. Tap 1: status= ON, Tap 2: status = OF ) to show the correct icon. This is a bit confusing for me.
I'm absolutely no developer, but it looks like it's not looking at / responding to the default settings before the rest is loaded.
I hope anyone has an idea here :-) Maybe I'm totally wrong.
Hi there π ,
We are looking at using this package in work but we also fall under the remit of WCAG 2.1 and need to maintain an accessible site. At the moment this package appears to be inaccessible by anyone who isn't a sighted user with a mouse (tested with MacOS voiceover) due to a lack of either semantic HTML or aria-*
attributes.
Would you be open to pull requests that address these issues?
How to display the consent as a dialog box so the user has to make a choice?
Hi all,
Using adsense: { category: "<category name>", type: "script-tag", cookies: [ {name: "_gcl_au", domain: '<domain name>'} ], language: {locale: {en: {name: "Google Adsense"}}} },
as one of the services I still see the cookie _gcl_au
popping up when it is supposed to be blocked.
The following scripts are used to generate this cookie:
<script id="googleTagManager2" async src="https://www.googletagmanager.com/gtag/js?id=<ID>">
</script>
<script id="googleTagManager">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '<ID>);
</script>
Does anyone might have an idea what I am doing wrong?
Steps to reproduce
<script type="text/plain" data-consent="googletagmanager">
// tag manager code here
</script>
services: {
google_tag_manager: {
category: 'marketing',
type: 'script-tag',
search: 'googletagmanager',
language: {
locale: {
en: {
name: 'Google tag manager'
}
}
}
}
}
expected behavior: Google tag manager is re-inserted with type="text/javascript" and runs
actual behavior: Nothing happens. The tag manager script will run after user reloads the page
Hi, currenlty the preferences stored in the 'cconsent' cookie expire after 7 days so the user has to set them again. Is there a GDPR reason for that? I looked but couldn't see any option to alter that date via the options.
Is there a way to extend this to a year?
Many thanks!
very nice script.
it works flawlessly in simple sites.
whilst it seems having sort of conflict with mootools, beyond my comprehension & knowledges. :-)
i.e. if i link the scripts like it follows:
i get errors like
TypeError: ({}) is not a function
as if mootools tried to evaluate functions during the "modal" building (in "parseArguments" β¦?)
and, even if i use a "tryβ¦catch" statement to let the script goes to the end, then i get lot of unexpected lines in the categories tab ([Missing language object]), one for each "function" mootools catch.
anyone has a workaround for such weird behavior?
Hello, I am using Google Tag Manager include Google Analytics.
If I accept the consent Google Analytics are available, but after I decline the GA the GA Cookies will not be deleted.
analytics: { // Existing category Unique name // This example shows how to block Google Analytics category: 'tracking', // Type of blocking to apply here. // This depends on the type of script we are trying to block // Can be: dynamic-script, script-tag, wrapped, localcookie type: 'dynamic-script', // Only needed if "type: dynamic-script" // The filter will look for this keyword in inserted scipt tags // and block if match found search: 'analytics', // List of known cookie names or Regular expressions matching // cookie names placed by this service. // These willbe removed from current domain and .domain. cookies: [ { // Known cookie name. name: '_gid', // Expected cookie domain. domain:
.foobar.de}, { // Known cookie name. name: '_gcl_aw', // Expected cookie domain. domain:
.foobar.de}, { // Regex matching cookie name. name: /^_ga/, domain:
.foobar.de}, { // Regex matching cookie name. name: /^__utm/, domain:
.foobar.de}, { // Regex matching cookie name. name: /^_g/, domain:
.foobar.de } ], language: { locale: { de: { name: 'Google Analytics' } } } }
Hi,
Thanks for the library.
I'm confused -- package.json
says ISC
; LICENSE
says GPL
.
Please can you settle on one license, and make these two files match?
You won't get much usage or many contributions until the license is settled!
Relates to :~ #3;
Btw, a more permissive license, e.g. MIT, ISC etc. is common for libraries, while GPL
is often applied to complete applications - WordPress, Moodle etc.
Thank you,
Nick
please fill in more in the documentation
for these four "Types of blocking":
Is it possible to automaticly reload the page as soon as a user has given his consent.
And how exactly is the language change working? I need "de" and "en". I also have set the text for both languages in the code. (The current language is set 'de' but when switching to the englisch site, the content is not changing)
language: {
current: 'de',
locale: {
en: {
barMainText: 'This website uses cookies to ensure you get the best experience on our website.',
barLinkSetting: 'Cookie Settings',
...
},
de: {
barMainText: Diese Website verwendet Cookies um Ihnen...,
barLinkSetting: 'Cookie Einstellungen',
...
}
}
},
Wrong section, sorry
Hi,
is possible get log of granted consent?
Hello! js-cookie works, "text/plain" is replaced with "text/javascript", but cookies in that script are not blocked.
I'd like to handle Accept all, Save settings events without having to subscribe to the click events of the html elements.
I.e. Interface.setCookie has a callback, is there a way to set that to my function?
Before "categories", you have forgotten a comma
this generates an error in browser console
}, <<<<<<<<<<<<<<<<<<< HERE
// List all the categories you want to display
categories: {
When I want to changes my cookies settings, module don't delete settled cookies.
Example :
I have 2 categories, necessary and marketing
in my marketing category
marketing: { needed: false, wanted: false, checked: false,
I have google analytics in these category, I can choice to accept these cookies without problem but if I modify my first choice and deselect the checkbox marketing and choice to save again current settings ... marketing cookies are not deleted.
Is it possible to have a functionality like that ?
How to block Facebook pixel?
This code is not working.
analytics_ext: { // Existing category Unique name // This example shows how to block Google Analytics category: 'tracking', // Type of blocking to apply here. // This depends on the type of script we are trying to block // Can be: dynamic-script, script-tag, wrapped, localcookie type: 'dynamic-script', // Only needed if "type: dynamic-script" // The filter will look for this keyword in inserted scipt tags // and block if match found search: 'analytics', // List of known cookie names or Regular expressions matching // cookie names placed by this service. // These willbe removed from current domain and .domain. cookies: [ { // Known cookie name. name: '_fbp', // Expected cookie domain. domain:
.${window.location.hostname} } ], language: { locale: { de: { name: 'Facebook Pixel' } } }
thanks
I have followed the following code in the readme:Brainsum CookieConsent
I have inserted the code shown in the link (the code under the title Configuration object) inside index.html, and it pops up as it should. However, as soon as I change to another page on my website, the popup is gone, i.e. it is only visible on index.html. My question is, how can I make the cookie consent visible on all pages of my website until the user either accepts or rejects the cookies?
According to the ePrivacy Directive, they should not last longer than 12 months.
https://gdpr.eu/cookies/
Hi. I'm about to implement Brainsum Cookie Consent Mode v2 on my webpage. It seems to work fine, but when I debug with Google Tag Assistent it seems like something is wrong.
I run Google Tag Assistant on this website: https://test.nettdating.no.
Output of AW-959228164 and G-SMHSHTEPSS returns Event Consent State 'Denied' on 'ad_storage', 'analytics_storage', 'ad_user_data' and 'ad_personalization' by default. That seems to be correct. When I click "Accept all cookies" on the consent banner, I get 'Granted' on all Event Content States. Thats seems to be correct as well.
But, if I choose "Cookie Settings" and "Save current settings" with everything 'Off' (default selection), I still get 'Granted' on all Event Content States in Google Tag Assistant. That seems to be wrong, since Analytics, Marketing and Various Cookies was turned off.
Why is Event Consent State set to Granted, even if everything is turned off before clicking "Save current settings"?
After barTimout secondes, the modal is not displayed
After downloading and using the latest version 1.2.3, I want to compile the main, un-minified script together with other scripts in a Webpack pipeline. The compilation works, though it throws a warning:
WARNING in ./scripts/external/cookieconsent.js 38:17-34
Critical dependency: the request of a dependency is an expression
I can't find documentation on script-tag but from looking at the code I'm guessing that you're supposed to modify your script type to be 'text/plain' instead of 'text/javascript' and then cookieconsent will restore it to javascript if there is consent.
If so, is there a reason this is done differently from dynamic-script? Seems like it would be easier for the user if the same mechanism was used in both places?
Since March 31 it's necessary to have an "Reject all" option to be in compliance with the GDPR.
I noticed that it was implemented in #49 which has been closed, any possibility to add this feature?
When the first loading of the website occurs and the button to accept all cookies has not yet been clicked and the consent mode is denied by default, should google analytics track that first visit?
Is there a way we could install this with NPM / Yarn instead of using the minified version?
Hi,
I'm identifying various Web accessibility (accessibility to those with disabilities).
I'd like to submit one or more fixes / pull requests for these β is this OK please?
Things that need fixing:
<div>
) are given a role of 'button' β for screen reader/ non-visual users;A number of the above are fairly straightforward fixes.
I'll let you know how I get on.
Yours,
Nick
Translation of "Cookie notice" in Hungarian ?!
Anyone has suggestions as to how to block Youtube tracking cookies like YSC
and VISITOR_INFO1_LIVE
?
To disable inline rendering of the CSS styles, it would be great to have an option for that.
Maybe the "theme" option could be used. If the value is false the rendering of the CSS styles is disabled.
With this possibility we could render the styles inside our own CSS files.
Hi,
I have the following code:
<title>test</title> <script type="text/javascript" src="cookieconsent.min.js"></script><script type="text/javascript"> <script src="https://www.googletagmanager.com/gtag/js?id=-my-gtag-id" type="text/plain" data-consent="googlead"></script> <script type="text/plain" data-consent="googlead">I've noticed that the language variable learnMore
is not used. I assume this should be used for the modalMainTextMoreLink
. But instead of that, the modalMainTitle
variable is used for the link, which seems wrong.
Every time, on every page - even refresh - I have to take my cookie consent. It does not store my settings.
I use the latest 1.5.0 version.
I use the script with Drupal 10.2.5 in the theme html.html.twig.
I see in the example it works well, what do I miss?
Is any other js need from the project?
It is possible so set text for "learnMore" but there is no possiblity to set a link for "learn more". This is needed to have a link to privacy policy
This looks like a really good solution for what is a really annoying requirement!
I've noticed that the color selected for the Bar main button text color is not persisted. It returns to black.
The color rendered in the UI is #2C7CBF - the original theme color.
The color-control slider for this property doesn't behave in the same way as the other color-controls, remaining on black as the slider is moved. Clicking on the color pallete changes the selected color and then the slider works, but this selection is not persisted.
Would be great to have an option to define that raw HTML code could be used in language snippets or the service descriptions. This would be a great benefit because it is then possible to provide links to external privacy policies or to the own privacy policy.
Additionally with this another "Learn more" link could be placed in the barMainText snippet.
Hello
How can i block vimeo cookies using this package (cookie vuid) loaded by https://player.vimeo.com ?
I believe this cookie is used by the vimeo video we embed using iframe :
I have tried 2 ways with below scripts without much success:
vimeo: {
category: 'analytics',
type: 'script-tag',
search: 'vimeo',
language: {
locale: {
en: {
name: 'Vimeo'
}
}
} }
.vimeo.com
Hi,
To ensure that pull requests, like those for #56, won't break things, I suggest that we add a GitHub workflow to the repository.
This is a generic Node.js starter:
I'll do a pull request!
Thanks,
Nick
.github/workflows/nodejs.yml
;A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.