Volto DSGVO Banner

The Volto DSGVO Banner addon gives the user the possibility to accept certain cookies.

Screenshots

When you visit the website for the first time you will get the following overlay:

If you select "Adjust Privacy Settings" you can select which cookies you want to accept:

If you view a piece of content where you haven't accepted the cookie for you will be notified and have the option to change the cookies.

There is also a block which you can insert on your data protection page to adjust the settings there.

Installation

Create a new Volto project (you can skip this step if you already have one):

npm install -g yo @plone/generator-volto
yo @plone/volto my-volto-project --addon @kitconcept/volto-dsgvo-banner
cd my-volto-project

Add @kitconcept/volto-dsgvo-bannerto your package.json:

"addons": [
    "@kitconcept/volto-dsgvo-banner"
],

"dependencies": {
    "@kitconcept/volto-dsgvo-banner": "*"
}

Download and install the new add-on by running:

yarn install

Start Volto with:

yarn start

Go to http://localhost:3000, and the cookie confirmation screen will popup.

Compatibility

From 2.0.0 version on, it supports Google Analytics 4 and deprecates version 3. If you are still using GA3, you should use a version of this package of the 1.x.x series.

Version	GA version
>=2.0.0	GA4
<2.0.0	GA3

Customization

You can customize your Google Analytics tracking id, the url where your privacy page is located and the modules you want to enable.

config.settings.DSGVOBanner = {
  ...(config.settings.DSGVOBanner || {}),
  trackingId: 'UA-123456789-1',
  modules: ['tracking', 'youtube', 'facebook'],
  privacy_url: '/privacy',
};

If you want to use Matomo instead of Google Analytics:

config.settings.DSGVOBanner = {
  ...(config.settings.DSGVOBanner || {}),
  tracker: {
    type: 'matomo',
    id: 3,
    urlBase: "https://matomo.example.com/"
  },
  modules: ['tracking', 'youtube', 'facebook'],
  privacy_url: '/privacy',
};

You can customize the style of the modal buttons

config.settings.DSGVOBanner.cssClasses = {
  bannerAgreeButton: "branded olive",
  bannerAdjustButton: "branded blue",
}

Or something like

config.settings.DSGVOBanner.cssClasses = {
  bannerAgreeButton: "red",
  bannerAdjustButton: "pink",
}

Keep in mind though, that the 'Adjust privacy Setting' Button will always stay inverted

By default, the banner to configure cookies will be shown in an overlay the first time a user visits the site. You can disable this by setting the useBanner setting to false. In this case, you must add the "DSGVO Banner" block to a page (such as a privacy settings page) to allow users to configure their cookies.

config.settings.DSGVOBanner.showBanner = false ;

You can also hide the greyed-out 'Technically required' option.

config.settings.DSGVOBanner.showTechnicallyRequired = false ;

Supported Modules

Per default only the 'tracking' , 'youtube' , 'facebook' and 'google' Modules are enabled. However, the following List contains all supported Modules :

• 'tracking'
• 'youtube'
• 'facebook'
• 'google'
• 'twitter'
• 'vimeo'

License

The project is licensed under the MIT license.