"You must set gdpr cookie name"

Jamesking56 commented 4 years ago

Error appears when trying to use this in vanilla JS:

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/

mariojankovic commented 4 years ago

@Jamesking56 your fiddle seems to be empty.

Jamesking56 commented 4 years ago

@mariojankovic sorry I forgot to save it, here's a new one: https://jsfiddle.net/x98jf1m6/

mariojankovic commented 4 years ago

@Jamesking56 So I spent several hours upgrading the whole package (almost replacing it completely) to what seems a more complete solution now. Please see this fiddle which uses my fork: https://jsfiddle.net/f38j7qyk/

Also the fork can be found here: https://github.com/mariojankovic/gdpr-cookie-consent-banner

The fix itself was rather simple though, my main.js file replaces the object options with props which is required by Svelte to pass over props in plain JS.

Other than that, these improvements have been made:

CSS has been detached from the main instance and separated into a file so it can be loaded conditionally (I usually don't prefer having CSS with my components and since Svelte doesn't have renderless components like Vue does I merely separated styles and markup)
visuals have been vastly improved and CSS now uses BEM. I understand that the original uses scoped CSS from Svelte by default, but since I wanted to detach CSS completely I had to namespace my classes
each cookie (necessary, analytics, etc.) now has a description value which is usually a requirement by the EU (e.g. Google analytics is a 3rd party service used to...)
there's additional options for labels. Each cookie choice and every button can now be renamed (see fiddle for example

Word of caution though. This has been scarcely tested and potentially needs to be upgraded further in the next few days. But for the time being, you can try it out and let me know if it suits your needs

@antony do you mind taking a look into this and see if this is a worthy pull request candidate or should I (and actually am I allowed) to maintain this as a completely separate repo?

Jamesking56 commented 4 years ago

It looks really good :+1: thanks for the solid effort I really think it'll be a good candidate for my sites

antony commented 4 years ago

@mariojankovic Oh wow - thanks for this, I think this is a great solution, I'd love to merge it when you're happy that it is ready?

I had been meaning to work on this a little more, and hadn't actually spotted this github issue, so sorry @Jamesking56 !

Let me know when you think it's ready to go (and I'll do some testing of my own also) and we can get it in mainline.

mariojankovic commented 4 years ago

Thank you guys.

@Jamesking56 there's been an issue with saving cookies. If you're using my fork (for now, since @antony agreed to merge my changes to master) you can try the latest update and let me know if it works.

There's a new option too that displays a button by default called showOnInit which enables tweaking of already selected cookies (say users don't want to opt-in for analytics any longer or have misclicked the first time). Here's a fiddle with the newest update: https://jsfiddle.net/2f1phy3t/1/

beyonk-group / gdpr-cookie-consent-banner

"You must set gdpr cookie name" #2