Modal creates a lot of Functional cookie toggles

[fgd007]

Environment

---

• Operating System: Linux
• Node Version: v18.17.1
• Nuxt Version: 3.7.4
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: npm@9.6.7
• Builder: -
• User Config: devtools, build, app, hooks, plugins, modules, cookieControl, graphqlCodegen, apollo, css, postcss, vite, gtm, $production
• Runtime Modules: @vueuse/nuxt@10.4.1, @nuxtjs/apollo@5.0.0-alpha.9, @pinia/nuxt@0.5.1, @nuxtjs/device@3.1.1, @zadigetvoltaire/nuxt-gtm@0.0.13, @dargmuesli/nuxt-cookie-control@7.2.0

• Build Modules: -

Reproduction

• Implement the package on an existing website with loads of content

Describe the bug

A lot of functional cookies toggles are created.

There is not documentation on how this plugin works. Does it scan of existing cookies? Should they all be declared in the config? This would be unmaintainable since it already loads a mere 50, and with every exotic embed that number will increase. It cannot be true that they all have to be defined beforehand?

Or is this another type of bug?

Additional context

cookieControl: {
    locales: ['nl'],
    closeModalOnClickOutside: true,
    cookieExpiryOffsetMs: 1000 * 60 * 60 * 24 * 365, // one year
    isIframeBlocked: true,
    isControlButtonEnabled: true,
    localeTexts: {
        nl: {
            bannerDescription: 'Lees hier meer of pas je cookievoorkeuren aan.',
            bannerTitle: 'Deze website maakt gebruik van cookies.',
            accept: 'Cookies toestaan',
            decline: 'Niet toestaan',
            acceptAll: 'Cookies toestaan',
            declineAll: 'Niet toestaan',
        },
    },
},

Logs

No response

[dargmuesli]

Hey there, please provide a minimal reproduction according to the requirements in the issue template i.e. a link to a StackBlitz project to allow me to understand if there is a potential bug.

Should they all be declared in the config

Yes, as I see no way for this module to know the source of cookies.

it already loads a mere 50, and with every exotic embed that number will increase

I recommend to rethink this usage of cookies as I'd be intimidated as a user by that amount of cookies and reasoning to have them.

It cannot be true that they all have to be defined beforehand

If it can't, a fork that shows how would be very interesting! I want to invite to share a prototype of that idea. If there is no idea yet, I'd enjoy wording that was a bit more appreciating of the free software that seems to be used by the software mentioned above.

[fgd007]

Thanks for the quick reply and sorry for the frustrated wording. I do appreciate your work and effort you and others have put into this.

It turns out that when cookies are specified in the cookieControl config it reduces the amount of toggles. Onboarding this plugin felt a bit buggy, but it starts to make more sense now. A short introduction describing what the module does exactly helps understanding and appreciating the software more I think.

BTW: The huge amount of cookies are mainly third party cookies set by Youtube, Spotify, Vimeo, Soundcloud embeds.

[dargmuesli]

Thank you for that feedback! As someone who just went though adopting this module you're very valuable as you understand the obstacles best you've encountered. Would you add one or two sentences you deem missing to the README in a PR? :pray: I would be very thankful.

[Lucas-Gardini]

@fgd007 How did you solve this issue?

[fgd007]

@Lucas-Gardini I'm not a user of this package anymore, but I recall that once I specified the cookies in the configuration the issue was resolved. I.e. in the cookieControl.cookies specifying the different kind of cookies:

...
cookieControl: {
    locales: ['en'],
    closeModalOnClickOutside: true,
    cookieExpiryOffsetMs: 1000 * 60 * 60 * 24 * 365, 
    cookies: {
      optional: [
        {
          description: {
            en: 'This cookie gathers statistics.',
          },
          id: 'analytics', 
          name: {
            en: 'Google Analytics',
          },

          targetCookieIds: ['_ga', '_ga_XXX'],
        },
      ],
      necessary: [
        {
          description: {
            en: 'These cookies keeps track of certain states',
          },
          id: 'functional',
          name: {
            en: 'Functional cookies',
          },
          targetCookieIds: [
            'cookie_x',
            'ncc_e',
            'ncc_c',
          ],
        },
      ],
    },
...
}