beyonk-group / gdpr-cookie-consent-banner Goto Github PK

First of all, thank you for developing this great plugin.

I'm using it on a static site generated with SvelteKit and is working just great. As it is more important adapt the websites to disabled people, I care a lot my websites to have full score in accessibility area.

The icon button in this plugin (to manage the cookie settings) fails in accessibility area because it misses the "aria-label" tag. You can read more on this here.

Is it possible to add this tag to that button? It would also be great that if the "aria-label" would be the same as the settingsLabel prop.

Hello !

How can i add the props object to the banner component in case i want to use custom props.

When i add the component like described in the readme:

how can i change the cookie settings via the prop object ?
(i am asking because this is not shown)

As far as I can see it, the Accept cookies button is actually a Save button. If a user adjusts their preferences, clicking on Accept cookies won’t accept (all) cookies, but save the selected choices.

Shouldn’t the button label read Save and another button be introduced, which will in fact Accept (all) cookies when clicked?

That way a user has the choice to accept all, reject all, or choose and save.

So the needed buttons and labels would be:

• acceptLabel: Accept all
• rejectLabel: Reject all
• settingsLabel: Cookie settings
• closeLabel: Close settings
• editLabel: Edit cookie settings
• saveLabel: Accept selected

I would like to open the cookie banner from click of different button other than the button provided by the "ShowEditIcon". I want to display a edit cookie option on the site navigation menu which would open the cookie consent modal.
The library function provides only function to attachBanner but there is no other function to trigger the toggle of cookie consent modal.
One other thing with the showing edit modal is for the user to update their preference but if the user disables any of the preferences then I dont get any events. So could you provide a event if the user opts-out of any preferences?

I ask because I need to store the agreement in a database... wonder how I can hook into the selection events.
Also, is there a demo somewhere so I can see its UI?

Thanks!

Does the consent banner work with Sveltekit? I tried to implement it but I get this error:

SyntaxError: The requested module '/node_modules/@beyonk/gdpr-cookie-consent-banner/src/util.js' does not provide an export named 'validate'

Is there a way to dispatch an event when user clicks Reject button or Accept button when choice is inactive?
For example, user comes to website and clicks Accept. To make it simple we only have analytics. It will dispatch an event and using on:analytics={myCustomFunction} we can handle our analytics.

If user decides that he/she wants to revoke consent, but clicking Reject button, nothing happens. Also nothing happens if user clicks Accept when analytics is unchecked under settings. User should be able to revoke/remove cookies via cookie consent element. Yes, they can always clear cookies in browser, but most users aren't tech savvy and I think it's part of GDPR to enable user to revoke its consent.

Under which license(s) is this project developed?

A lot of cookie banners have the ability to dismiss the banner without accepting cookies.
Is that something on the radar, or is it configurable and I missed it?

EventListener can't work in HTML / Web Comments. No event is dispatched.

<script>
  document.getElementsByTagName('cookie-consent-banner')[0].addEventListener('analytics', () => {
    // some fathom analytics tracking code or similar
  })

  // We also emit these events on `window`
  window.addEventListener('consent:analytics', () => {
    // some fathom analytics tracking code or similar
  })
</script>

Currently, the toggles are using the default cursor. To improve the UX I changed them to "pointer". Might be good to implement this by default.

<style>
	:global(.cookieConsentOperations__Item:not(.disabled) input+label::before, .cookieConsentOperations__Item:not(.disabled) input+label::after) {
		cursor: pointer;
	}

</style>

I was in need of a custom callback on confirm which would remove additional cookies as soon as some of the options were not ticked. So I thought a custom callback on confirm would be nice. Could we alter the choose function to something like this?

function choose () {
  setCookie(cookieChoices)
  execute(cookieChoices)
  dispatch('confirm', {
    cookieChoices
  })
}

I can do a PR if necessary.
By the way since we offer the ability for users to opt back in we should consider adding a custom dispatch event even if the selection has been set to false. Let's say I want to remove additional cookies as soon as I confirm I no longer wish to allow google analytics - it's painfully hard to enable/disable analytics as it is. So I've injected the analytics script as soon as on:analaytics was fired, but then again as soon as I summon the cookie prompt and set analytics to false there's no way for me to tell to either reload the page or remove all cookies and scripts associated with it. Hope that makes sense @antony.

TL;DR: either enable a callback on confirm which would return the currently selected cookie states (a simple true/false for each of them) or dispatch events for each selection no matter if the choice was true or false.

When trying to use this with Astro, It never shows the banner and just the little cookie in the corner.
Furthermore, it says Cannot find name 'initAnalytics'

Doses this just not work with Astro or have I done something wrong?
I put the svelte object in the body.

I have this in my body:

<GdprBanner cookieName="foo" description="bar" on:analytics={initAnalytics} />

<script>
  import '@beyonk/gdpr-cookie-consent-banner/dist/style.css' // optional, you can also define your own styles
  import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'

  function initAnalytics () {
    // do something with segment.io or google analytics etc
    alert('analytics enabled')
  }
</script>

Error appears when trying to use this in vanilla JS:

"You must set gdpr cookie name"

I'm using the code from your Readme:

const options = {
  /**
   * You must set the cookie name.
   **/
  cookieName: 'beyonk_gdpr',

  /**
   * The cookie configuration, such as domain and path.
   **/
  cookieConfig: {
    domain: 'example.com',
    path: '/'
  },

  /**
   * These are the top two lines of text on the banner
   * The 'description' field can include html such as links
   **/
  heading: 'GDPR Notice',
  description: "We use cookies to offer a better browsing experience, analyze site traffic, personalize content, and serve targeted advertisements. Please review our <a href=\"/privacy-policy\">privacy policy page</a>. By clicking accept, you consent to our privacy policy & use of cookies.",
  
  /**
   * These are the functions which are run if a user opts-in to that category.
   * You should drop your cookies here (or set a variable to control the later dropping of cookies.
   * 
   * If you are using svelte, you can use events instead - see the Svelte section below.
   **/
  categories: {
    analytics: function () {
      console.log('No analytics cookies specified')
    },
    tracking: function () {
      console.log('No tracking cookies specified')
    },
    marketing: function () {
      console.log('No marketing cookies specified')
    },
    necessary: function () {
      console.log('No necessary cookies specified')
    },
  },

  /**
   * These are the default opt-ins.
   * When set to true, the option will automatically be checked on load.
   *
   * If you don't want to show a category, simply remove the specified key from this object.
   **/
  choices: {
    necessary: true,
    marketing: true,
    analytics: true,
    tracking: true
  }
}

GdprConsent.attachBanner(document.body, options)

Here is a JSFiddle: https://jsfiddle.net/7L1magne/

Greetings!

Thank you so much for this wonderful piece of code. Surprisingly few SvelteKit options that work well, but finally came across yours, which is excellent.

For my use case, we are using only necessary cookies, and tho I have toggled the other types of cookies to false by default, internal users are finding this confusing as it's not clear that those toggle are either on or off. And since they are unable to toggle off necessary cookies, many seem to feel that the toggle state of the others should match that, which they don't.

So for this simplest of all use cases, giving the user the ability to edit cookie settings is just confusing.

But we may eventually add other cookies, so keeping with a library that will support those should the time come is preferable to hacking up a vanilla solution...

I forked your repo, added a "canEditCookies" prop, and added an {#if} in Banner.svelte around the button, following your same code flow for the optional edit cookie settings overlay.

However, when trying to add the forked repo from github, ran into errors since the project actually has to be compiled to get a /distro folder. Experienced w/ SvelteKit, but not w/ building libraries for such...

So just did a build (unsure of the package command), but had to get into changing @beyonk in some places, but not all, to get it to build a working /dist that I've manually copied to the appropriate node_modules folder.

Wondering if you might consider adding this to the project proper? 🙏

I do believe there are others looking for the simplest use case, but with room to grow. Found several threads bemoaning lack of a good SvelteKit lib for same.

My diffs are so simple, don't know that it's worth a pull request. But if it's of help, I would clean it up, remove the name change, and update the documentation, and issue the pull request.

Thanks much,
Morgan

Hi,

A compile error is generated with version 11:

[vite-plugin-svelte] /node_modules/@beyonk/gdpr-cookie-consent-banner/src/lib/Ba
nner.svelte:1:16 The 'customElement' option is used when generating a custom element. Did you forget the 'customElement: true' compile option
?
1: <svelte:options customElement="cookie-consent-banner" />

To resolve this, I had to include in my svelte.config.js the following:

compilerOptions: {
customElement: true,
},

It does not seem right that I have to mod my config to compile.

Thanks,

Pierre

Hey 👋

Thanks for the awesome cookie banner :) Works like a charm with nuxtjs!
I was wondering if the banner's headings should really be h1/h2 – I'm no SEO expert, but these seem a bit "over the top" for me on first inspection.

Would you be open to changing them to e.g. h3/h4? Or simply a strong paragraph and a usual one?

I'd be happy to prepare a pull request 😊

Hi antony,
First of all thanks for this great repo, it really helps me a lot to finally get the GDPR on my site up and running. Providing my own look & feel was a snap. My problem is also less the code from you, but more my lack of understanding of cookies in general (noob-spoiler).

In the readme, under "Configuration", you describe how to create functions for the individual (selected) "categories". Unfortunately it's not clear to me how this config now interacts with the "Banner"-component and the cookie-functions there (setCookie, removeCookie etc.). In the comment you write:

These are the functions which are run if a user opts-in to that category.
You should drop your cookies here (or set a variable to control the later dropping of cookies.

If you are using svelte, you can use events instead - see the Svelte section below.

I use svelte and it would help me a ton if you could possibly provide an example of how such a function or event could look like e.g. for "necessary" maybe setCookie.
Any help appreciated
Thx in advance

Just updated the component in our Sveltekit-based project:

• now it works without this vite trick: #47 (comment) (thanks and congrats!)
• Our project is in Typescript and I noticed this small error:

First of all, thanks for writing and sharing this component.

I'd like to change the background-color of only the checked toggles.

This works to turn all of them green, even the unchecked ones:

<style>

:global(.cookieConsentOperations__Item label::before) {
	background-color: green !important;
}

</style>

I've tried this to target only the checked ones using the following code:

<style>

:global(.cookieConsentOperations__Item label::part(operations--list-item-label--checked)::before) {
	background-color: green !important;
}

</style>

Unfortunately, with this, none of them turn green. How to do this correctly?

Thanks a lot in advance.

Hi,

I copied your code you can see improperly placed.

<button
type="button"
class="cookieConsent__Button"
on:click={() => { settingsShown = true } }>
{settingsLabel}
aria-label={settingsLabel} <<<<<<<===================

Thanks

Pierre

The configuration says:

If you don't want to show a category, simply remove the specified key from this object.

But removing the key, e.g. marketing from the object simply leads to the cookie banner displaying the default values.

To not show the category, e.g. marketing you have to set the value to false, e.g.

marketing: false

I can offer a PR, but this is just a one-liner.

Instead of assigning properties individually to each configuration property, I want to group these properties into an object that can be applied collectively. This simplifies the process, especially for other languages.
I want:

<script>
const props = {
  cookieName: 'beyonk_gdpr',
  cookieConfig: {
    domain: 'example.com',
    path: '/'
  },
  heading: 'GDPR Notice',
  description: 'We use cookies to offer a better browsing experience, analyze site traffic, personalize content, and serve targeted advertisements. Please review our <a href="/privacy-policy">privacy policy page</a>. By clicking accept, you consent to our privacy policy & use of cookies.',
  acceptLabel: 'Confirm all',
  rejectLabel: 'Reject all',
  settingsLabel: 'Preferences',
  closeLabel: 'Close window',
  editLabel: 'Edit settings',
  choices: {
      necessary: {
          label: "Necessary cookies",
          description: "Used for cookie control. Can't be turned off.",
          value: true
      },
      tracking: {
          label: "Tracking cookies",
          description: "Used for advertising purposes.",
          value: true
      },
      analytics: {
          label: "Analytics cookies",
          description: "Used to control Google Analytics, a 3rd party tool offered by Google to track user behavior.",
          value: true
      },
      marketing: {
          label: "Marketing cookies",
          description: "Used for marketing data.",
          value: true
      }
  },
  showEditIcon: true,
  categories: {
    analytics: function() {
      console.log('No analytics cookies specified')
    },
    tracking: function() {
      console.log('No tracking cookies specified')
    },
    marketing: function() {
      console.log('No marketing cookies specified')
    },
    necessary: function() {
      console.log('No necessary cookies specified')
    }
  }
}
</script>
<GdprBanner {props} />

instead of:

[...]
<GdprBanner
  choices={props.choices}
  editLabel={props.editLabel}
  closeLabel={props.closeLabel}
  settingsLabel={props.settingsLabel}
  rejectLabel={props.rejectLabel}
  acceptLabel={props.acceptLabel}
  description={props.description}
  heading={props.heading}
  on:analytics={initAnalytics} />

Is in roadmap?
Or is there a possibility to use this awesome package with React?

Thanks a lot

Is there a way to change transition speed and timing function for settings modal? Now it's default 400ms linear.

It took me a while to figure out how to add a "reject cookies" button. Turns out it's already implemented and can be used like this:

<GdprBanner cookieName="foo" description="bar" on:analytics={initAnalytics} canRejectCookies="true" />

It would be great if this were added to the documentation in the Readme.

It would be great to get TypeScript typings and a declaration for this package. Currently, I'm getting the following error:

Could not find a declaration file for module '@beyonk/gdpr-cookie-consent-banner'. '/home/lena/bespinian/bespinian.io-svelte/node_modules/@beyonk/gdpr-cookie-consent-banner/dist/esm/bund
 le.js' implicitly has an 'any' type.
      Try `npm i --save-dev @types/beyonk__gdpr-cookie-consent-banner` if it exists or add a new declaration (.d.ts) file containing `declare module '@beyonk/gdpr-cookie-consent-banner';`

The workaround with declare module '@beyonk/gdpr-cookie-consent-banner'; works but doesn't provide any typings of, for example, the GdprBanner Svelte component or its options.

Hi,

I tried to implement the banner into my nuxt application. I followed you instructions from the Readme, but Nuxt gives me this error:

TypeError: attachBanner is not a function
    at VueComponent.mounted (CookieBanner.vue?33b7:10)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6494)
    at Vue._update (vue.runtime.esm.js?2b0e:3945)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)

My vue file

<template>
  <div ref="gdprBanner" />
</template>

<script>
export default {
  name: 'CookieBanner',
  mounted () {
    const { attachBanner } = require('@beyonk/gdpr-cookie-consent-banner/dist/esm/bundle.js')
    attachBanner(this.$refs.gdprBanner, {
      heading: 'Cookie policy'
    })
  }
}
</script>

Integration in default layout:

<template>
  <div>
    <div class="stretched clearfix">
      <AppHeader />
      <nuxt />
      <CookieBanner />
      <AppFooter />
    </div>
  </div>
</template>

<script>
import AppHeader from '../components/AppHeader'
import AppFooter from '../components/AppFooter'
import CookieBanner from '../components/elements/CookieBanner'

export default {
  components: {
    AppHeader, AppFooter, CookieBanner
  }
}
</script>

Its possible to tab behind the cookie banner, is there a way to disable it?

A web component named for example "cookie-consent" could be created so that it would facilitate usage in all frameworks.

I receive an error when trying to use this in a project when running locally using Svelte. The error is:

 The requested module '/node_modules/.vite/deps/@beyonk_gdpr-cookie-consent-banner.js?v=6c7b1300' does not provide an export named 'default'

I believe this is due to my Svelte project using Modules and typescript, as in my package.json file I have:

"type": "module"

I do not receive this error when building and deploying to production however.

When trying to update our sveltekit project (to use svelte4), we have this error:

npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/svelte
npm ERR! dev svelte@"^4.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^3.54.0" from @beyonk/[email protected]
npm ERR! node_modules/@beyonk/gdpr-cookie-consent-banner
npm ERR! dev @beyonk/gdpr-cookie-consent-banner@"^10.0.0" from the root project

we used the "official" npx svelte-migrate@latest svelte-4 command.

There is a small PR proposal to fix this: #51