diff --git a/Classes/Eel/Helper/KlaroHelper.php b/Classes/Eel/Helper/KlaroHelper.php index 93e1f6f..eea8830 100644 --- a/Classes/Eel/Helper/KlaroHelper.php +++ b/Classes/Eel/Helper/KlaroHelper.php @@ -7,28 +7,28 @@ class KlaroHelper implements ProtectedContextAwareInterface { /** - * Build apps config + * Build services config * * @param array $apps * @return array */ - public function buildAppsConfig(array $apps) { + public function buildServicesConfig(array $services) { // Remove disabled apps and set default position - $appsConfig = []; - foreach ($apps as $appName => $appSettings) { - if (isset($appSettings['enabled']) && $appSettings['enabled'] === true) { - $appSettings['klaro']['position'] = isset($appSettings['position']) ? $appSettings['position'] : 0; - $appsConfig[] = $appSettings['klaro']; + $servicesConfig = []; + foreach ($services as $serviceName => $serviceSettings) { + if (isset($serviceSettings['enabled']) && $serviceSettings['enabled'] === true) { + $serviceSettings['klaro']['position'] = isset($serviceSettings['position']) ? $serviceSettings['position'] : 0; + $servicesConfig[] = $serviceSettings['klaro']; } } // Sort by position key - usort($appsConfig, function ($app1, $app2) { - return $app1['position'] <=> $app2['position']; + usort($servicesConfig, function ($service1, $service2) { + return $service1['position'] <=> $service2['position']; }); - return $appsConfig; + return $servicesConfig; } /** diff --git a/Configuration/Settings.Consent.Cloudflare.yaml b/Configuration/Settings.Consent.Cloudflare.yaml index 24da499..a5641fc 100644 --- a/Configuration/Settings.Consent.Cloudflare.yaml +++ b/Configuration/Settings.Consent.Cloudflare.yaml @@ -10,7 +10,7 @@ Tms: cloudflare: description: 'Protects us from attackers and helps to distribute our content quickly worldwide.' - apps: + services: cloudflare: enabled: false diff --git a/Configuration/Settings.Consent.GoogleAnalytics.yaml b/Configuration/Settings.Consent.GoogleAnalytics.yaml index cb4938b..375e750 100644 --- a/Configuration/Settings.Consent.GoogleAnalytics.yaml +++ b/Configuration/Settings.Consent.GoogleAnalytics.yaml @@ -10,7 +10,7 @@ Tms: googleAnalytics: description: 'Allows us to analyse website usage anonymously (e.g. pageviews, channels, devices, screen resolutions, etc.)' - apps: + services: googleAnalytics: enabled: false diff --git a/Configuration/Settings.Consent.GoogleMaps.yaml b/Configuration/Settings.Consent.GoogleMaps.yaml index 4cb4299..0c9c8ef 100644 --- a/Configuration/Settings.Consent.GoogleMaps.yaml +++ b/Configuration/Settings.Consent.GoogleMaps.yaml @@ -10,7 +10,7 @@ Tms: googleMaps: description: 'Allow embedded Google Maps on this site' - apps: + services: googleMaps: enabled: false @@ -21,5 +21,5 @@ Tms: name: googleMaps default: false title: 'Google Maps' - purposes: ['functionality'] + purposes: ['content'] callback: toggleNoConsentPlaceholders diff --git a/Configuration/Settings.Consent.Matomo.yaml b/Configuration/Settings.Consent.Matomo.yaml index c64cc8c..32a6451 100644 --- a/Configuration/Settings.Consent.Matomo.yaml +++ b/Configuration/Settings.Consent.Matomo.yaml @@ -4,13 +4,13 @@ Tms: translations: de: matomo: - description: 'Ermöglicht uns eine anonymisierte Auswertung der Website Nutzung (z.B. Seitenaufrufe, Kanäle, Endgeräte, Bildschirmauflösungen, etc.)' + description: 'Ermöglicht uns eine Auswertung der Website Nutzung (z.B. Seitenaufrufe, Kanäle, Endgeräte, Bildschirmauflösungen, etc.)' en: matomo: - description: 'Allows us to analyse website usage anonymously (e.g. pageviews, channels, devices, screen resolutions, etc.)' + description: 'Allows us to analyse website usage (e.g. pageviews, channels, devices, screen resolutions, etc.)' - apps: + services: matomo: # Each app must include the 'enabled' key and should be disabled # by default within this package @@ -22,9 +22,9 @@ Tms: klaro: name: matomo - # If "default" is set to true, the app will be enabled by default + # If "default" is set to true, the service will be enabled by default # Overwrites global "default" setting. - # We recommend leaving this to "false" for apps that collect + # We recommend leaving this to "false" for services that collect # personal information. default: false @@ -40,7 +40,7 @@ Tms: # given app, Klaro will then automatically delete all matching # cookies. # You can also explicitly provide a path and a domain for - # a given cookie. This is necessary if you have apps that + # a given cookie. This is necessary if you have services that # set cookies for a path that is not "/" or a domain that # is not the current domain. If you do not set these values # properly, the cookie can't be deleted by Klaro diff --git a/Configuration/Settings.Consent.Youtube.yaml b/Configuration/Settings.Consent.Youtube.yaml index ae8ceca..5a9a174 100644 --- a/Configuration/Settings.Consent.Youtube.yaml +++ b/Configuration/Settings.Consent.Youtube.yaml @@ -10,7 +10,7 @@ Tms: youtube: description: 'Allow embedded Youtube videos on this site' - apps: + services: youtube: enabled: false @@ -21,5 +21,5 @@ Tms: name: youtube default: false title: 'Youtube' - purposes: ['functionality'] + purposes: ['content'] callback: toggleNoConsentPlaceholders diff --git a/Configuration/Settings.Translations.De.yaml b/Configuration/Settings.Translations.De.yaml index e9e9190..c8330e8 100644 --- a/Configuration/Settings.Translations.De.yaml +++ b/Configuration/Settings.Translations.De.yaml @@ -3,14 +3,27 @@ Tms: config: translations: de: + # See default DE translation - https://github.com/kiprotect/klaro/blob/master/src/translations/de.yml consentNotice: learnMore: 'Anpassen' - acceptAll: 'Alle Anwendungen akzeptieren' + decline: 'Ablehnen' + ok: 'Alle Dienste akzeptieren' acceptSelected: 'Auswahl speichern' purposes: - performance: 'Sicherheit & Performance' - functionality: 'Funktionalität' - analytics: 'Webstatistik' - targeting: 'Anzeigen von Werbung' + performance: + title: 'Sicherheit und Performance' + description: '' + functionality: + title: 'Funktionalität' + description: '' + content: + title: 'Externe Inhalte' + description: '' + analytics: + title: 'Webanalyse' + description: '' + marketing: + title: 'Marketing' + description: '' diff --git a/Configuration/Settings.Translations.En.yaml b/Configuration/Settings.Translations.En.yaml index b09fafb..cfe2937 100644 --- a/Configuration/Settings.Translations.En.yaml +++ b/Configuration/Settings.Translations.En.yaml @@ -3,14 +3,31 @@ Tms: config: translations: en: + # See default EN translation - https://github.com/kiprotect/klaro/blob/master/src/translations/en.yml consentNotice: learnMore: 'Customize' - acceptAll: 'Accept all applications' + decline: 'Decline' + ok: 'Accept all services' acceptSelected: 'Accept selected' + service: + purpose: Purpose + purposes: Purposes + purposes: - performance: 'Security & Performance' - functionality: 'Functionality' - analytics: 'Analytics' - targeting: 'Targeting and Advertising' + performance: + title: 'Security and Performance' + description: '' + functionality: + title: 'Functionality' + description: '' + content: + title: 'External Content' + description: '' + analytics: + title: 'Analytics' + description: '' + marketing: + title: 'Marketing' + description: '' diff --git a/Configuration/Settings.yaml b/Configuration/Settings.yaml index 71424c2..2cb2a74 100644 --- a/Configuration/Settings.yaml +++ b/Configuration/Settings.yaml @@ -11,11 +11,13 @@ Tms: Consent: enabled: true + # Disable includes if you use your own or want to add them to your favorite build tool autoInclude: config: true scripts: true styles: true + enableStickyConsentSettingsButton: true config: @@ -26,8 +28,8 @@ Tms: privacyPolicy: '' # Find all general translations in setting files, separated by language - see 'Settings.Translations.De.yaml' - # App related translations should be within each app setting file - see 'Settings.Apps.Matomo.yaml' + # App related translations should be within each app setting file - see 'Settings.Consent.Matomo.yaml' translations: [] - # Find individual app configurations in separated setting files - apps: [] + # Find individual service configurations in separated setting files + services: [] diff --git a/README.md b/README.md index 3a3e553..37e9291 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,6 @@ Let your users decide, which scripts should be loaded and executed while visitin --- -**!!! This is currently experimental code, please do not rely on any parts yet.** - **IMPORTANT: We are developers, no lawyers. Using this package without further adaptation will most likely NOT result in GDPR, ePrivacy nor CCPA compliance!** --- @@ -18,11 +16,20 @@ Let your users decide, which scripts should be loaded and executed while visitin composer require tms/consent ``` +## What's included? + +* Klaro Script + opinionated Klaro Config (override or use your own anytime) +* Klaro Config editing via `Settings.yaml` & predefined services +* Klaro default styles & themes [`/Resources/Private/Styles/Theme`](https://github.com/tmsdev/Tms.Consent/tree/master/Resources/Private/Styles/Theme) +* Placeholder for blocked content elements (Fusion Component + JS) +* Consent settings button (Fusion Component + JS) +* Overrides for common Neos packages [`/Resources/Private/Fusion/PresetPackages`](https://github.com/tmsdev/Tms.Consent/tree/master/Resources/Private/Fusion/PresetPackages) + ## Usage -### Step 1: App configuration via `YAML` settings +### Step 1: Service configuration via `YAML` settings -This package includes default consent management settings for these apps +This package includes default consent management settings for the following services. Enable them in your `Settings.yaml` or add your own services. * Cloudflare * Matomo @@ -31,22 +38,25 @@ This package includes default consent management settings for these apps * Youtube ```yaml -# Example configuration +# Example Tms.Consent configuration Tms: Consent: config: # The privacy policy uri can be specified by node type, path, identifier or simply an absolute/relative link privacyPolicy: '#4999814e-61c2-4ce1-ab46-c1145f2285d7' - # Enable the apps you need consent management for - apps: + # Enable the services you need consent management for + services: matomo: enabled: true + # Use the position key to render services in your favorite order + position: 100 youtube: enabled: true + position: 200 ``` -#### Extend your apps +#### Extend your services Simply extend the `YAML` settings within your Neos package. @@ -54,37 +64,37 @@ Simply extend the `YAML` settings within your Neos package. Tms: Consent: config: - apps: - yourAppName: + services: + yourServiceName: enabled: true # ----------------------------------------------------------------- # Klaro! Config # ----------------------------------------------------------------- klaro: - name: yourAppName - title: 'Your App Title' - description: 'Short description, why your website use the app...' + name: yourServiceName + title: 'Your Service Title' + description: 'Short description, why your website use this service...' purposes: ['functionality'] ``` -Think your app configuration is useful for others too? -Don't hesitate to submit a PR. All the app related configuration should be combined in one settings -file named like `Settings.Consent.YourAppName.yaml`. +Think your service configuration is useful for others too? +Don't hesitate to submit a PR. All the service related configuration should be combined in one settings +file named like `Settings.Consent.YourServiceName.yaml`. ### Step 2: Modify HTML -In order to control your configured apps (e.g. to stop loading and/or execution without consent) it is necessary to +In order to control your configured services (e.g. to stop loading and/or execution without consent) it is necessary to modify the resulting HTML of your webpages. This can be achieved by simply replacing some attributes - see https://github.com/KIProtect/klaro#managing-third-party-appstrackers We try to provide preconfigured solutions for some common Neos packages, please have a look at [`/Resources/Private/Fusion/PresetPackages`](https://github.com/tmsdev/Tms.Consent/tree/master/Resources/Private/Fusion/PresetPackages) -what we've already covered. Your package is missing? Submit a PR, if you think the app configuration could be useful for others. +what we've already covered. Your package is missing? Submit a PR, if you think the service configuration could be useful for others. ### Step 3: Verify -Check your site - have you blocked all your critical apps? +Check your site - have you blocked all your critical services? * by using the dev tools of your favorite browser * or simply run a check on https://webbkoll.dataskydd.net/ @@ -92,13 +102,8 @@ Check your site - have you blocked all your critical apps? ## Wishlist * Add multi-site support -* Make it work with lazyloaded elements -* Make apps sortable -* Placeholder for blocked content elements (like Youtube, Maps, etc.) -* Support more apps by default * Backend module with some basic statistics on acceptance rate * User location based configurations -* Additional layouts & styles Any feedback, pull request or other contribution is very welcome! diff --git a/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.fusion b/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.fusion index 65cfa00..e300772 100644 --- a/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.fusion +++ b/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.fusion @@ -1,18 +1,19 @@ prototype(Tms.Consent:Component.Atom.NoConsentPlaceholder) < prototype(Neos.Fusion:Component) { @if.consentEnabled = ${Configuration.setting('Tms.Consent.enabled')} - @if.appConfiguredAndEnabled = ${this.appName && Configuration.setting('Tms.Consent.config.apps.' + this.appName + '.enabled')} + @if.serviceConfiguredAndEnabled = ${this.serviceName && Configuration.setting('Tms.Consent.config.services.' + this.serviceName + '.enabled')} - appName = '' + serviceName = '' imageUri = '' i18nContentBlocked = ${Translation.translate('noConsentPlaceholder.contentBlocked', 'content blocked', [], null, 'Tms.Consent')} - i18nReviewSettings = ${Translation.translate('noConsentPlaceholder.reviewSettings', 'review your consent settings', [], null, 'Tms.Consent')} + i18nConsentButton = ${Translation.translate('noConsentPlaceholder.consentButton', 'Show this content', [], null, 'Tms.Consent')} renderer = afx` -
+

- {props.appName} {props.i18nContentBlocked} - {props.i18nReviewSettings} + {props.serviceName} {props.i18nContentBlocked}

+
` diff --git a/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.js b/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.js index c92fb8b..2cd4ad1 100644 --- a/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.js +++ b/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.js @@ -1,34 +1,23 @@ -// Handle no-consent placeholders -// TODO: needs better implementation / to prevent names this function is separated from the bundle and copied to Resources/Public/JavaScript/NoConsentPlaceholder.js -// function toggleNoConsentPlaceholders(consent, app) { -// if (app === undefined) -// return; -// -// var appName = app.name; -// var appConsent = consent; -// -// document.querySelectorAll('.tms-consent_no-consent-placeholder').forEach(item => { -// if (appName !== item.dataset.name) -// return; -// -// if (appConsent === false) { -// item.classList.add('consent-needed'); -// } else { -// item.classList.remove('consent-needed'); -// } -// }); -// } -// document.addEventListener("DOMContentLoaded", toggleNoConsentPlaceholders); - -function getKlaroAppTitles() { - var apps = klaro.getManager().config.apps; - - document.querySelectorAll('[data-klaro-app-title]').forEach(item => { - for (var i=0; i < apps.length; i++) { - if (apps[i].name === item.getAttribute('data-klaro-app-title')) { - item.innerHTML = apps[i].title; +function getKlaroServiceTitles() { + let services = klaro.getManager().config.services; + document.querySelectorAll('[data-klaro-service-title]').forEach(item => { + for (var i=0; i < services.length; i++) { + if (services[i].name === item.getAttribute('data-klaro-service-title')) { + item.innerHTML = services[i].title; } } }); } -document.addEventListener("DOMContentLoaded", getKlaroAppTitles); +document.addEventListener("DOMContentLoaded", getKlaroServiceTitles); + +document.querySelectorAll('[data-consent-button]').forEach(item => { + item.addEventListener('click', event => { + event.preventDefault(); + let serviceName = item.getAttribute('data-name'); + if (serviceName) { + let manager = klaro.getManager(); + manager.updateConsent(serviceName, true) + manager.saveAndApplyConsents(); + } + }, false); +}); diff --git a/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.scss b/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.scss index 91b9164..f008946 100644 --- a/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.scss +++ b/Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.scss @@ -15,6 +15,17 @@ display: block; } + button[data-consent-button="true"] { + border: none; + background: white; + padding: .25rem .5rem; + outline: none; + + &:hover { + background: rgba(white, .9); + } + } + img { max-width: 66%; height: auto; diff --git a/Resources/Private/Fusion/Klaro/Config.fusion b/Resources/Private/Fusion/Klaro/Config.fusion index 282fed9..20c4514 100644 --- a/Resources/Private/Fusion/Klaro/Config.fusion +++ b/Resources/Private/Fusion/Klaro/Config.fusion @@ -1,9 +1,24 @@ +# See config example - https://github.com/kiprotect/klaro/blob/master/dist/config.js prototype(Tms.Consent:Klaro.Config) < prototype(Neos.Fusion:RawArray) { # You can customize the ID of the DIV element that Klaro will create # when starting up. If undefined, Klaro will use 'klaro'. elementID = 'klaro' + # Setting this to true will render the descriptions of the consent + # modal and consent notice are HTML. Use with care. + htmlTexts = false + + # Setting 'embedded' to true will render the Klaro modal and notice without + # the modal background, allowing you to e.g. embed them into a specific element + # of your website, such as your privacy notice. + embedded = false + + # You can group services by their purpose in the modal. This is advisable + # if you have a large number of services. Users can then enable or disable + # entire groups of services instead of having to enable or disable every service. + groupByPurpose = true + # How Klaro should store the user's preferences. It can be either 'cookie' # (the default) or 'localStorage'. storageMethod = 'localStorage' @@ -20,15 +35,15 @@ prototype(Tms.Consent:Klaro.Config) < prototype(Neos.Fusion:RawArray) { privacyPolicy = Tms.Consent:Helper.PrivacyPolicyUri # Defines the default state for applications (true=enabled by default). - default = true + default = false # If "mustConsent" is set to true, Klaro will directly display the consent # manager modal and not allow the user to close it before having actively - # consented or declines the use of third-party apps. + # consented or declines the use of third-party services. mustConsent = false - # Show "accept all" to accept all apps instead of "ok" that only accepts - # required and "default: true" apps + # Show "accept all" to accept all services instead of "ok" that only accepts + # required and "default: true" services acceptAll = true # Do not show "decline" button in cookie notice @@ -41,13 +56,13 @@ prototype(Tms.Consent:Klaro.Config) < prototype(Neos.Fusion:RawArray) { #lang = 'en' translations = ${Configuration.setting('Tms.Consent.config.translations')} - apps = ${Configuration.setting('Tms.Consent.config.apps')} - apps.@process.build = ${Tms.Consent.Klaro.buildAppsConfig(value)} + services = ${Configuration.setting('Tms.Consent.config.services')} + services.@process.build = ${Tms.Consent.Klaro.buildServicesConfig(value)} @process.toJson = ${Json.stringify(value, ['JSON_UNESCAPED_SLASHES'])} - # TODO: needs better implementation / since we do the app configration via YAML, this workaround is needed to use Klaro!'s callback function feature - @process.setCallbackFunction = ${String.replace(value, '"toggleNoConsentPlaceholders"', 'function(consent, app) { toggleNoConsentPlaceholders(consent, app); }')} + # TODO: needs better implementation / since we do the service configration via YAML, this workaround is needed to use Klaro!'s callback function feature + @process.setCallbackFunction = ${String.replace(value, '"toggleNoConsentPlaceholders"', 'function(consent, service) { toggleNoConsentPlaceholders(consent, service); }')} - @process.wrap = ${''} + @process.wrap = ${''} } diff --git a/Resources/Private/Fusion/Klaro/ConsentAttributes.fusion b/Resources/Private/Fusion/Klaro/ConsentAttributes.fusion index 6d41b19..6ffcdf1 100644 --- a/Resources/Private/Fusion/Klaro/ConsentAttributes.fusion +++ b/Resources/Private/Fusion/Klaro/ConsentAttributes.fusion @@ -1,8 +1,8 @@ prototype(Tms.Consent:Klaro.ConsentAttributes) < prototype(Neos.Fusion:Component) { @if.consentEnabled = ${Configuration.setting('Tms.Consent.enabled')} - @if.appConfiguredAndEnabled = ${this.name && Configuration.setting('Tms.Consent.config.apps.' + this.name + '.enabled')} + @if.serviceConfiguredAndEnabled = ${this.name && Configuration.setting('Tms.Consent.config.services.' + this.name + '.enabled')} - # The app name used in your yaml configuration + # The service name used in your yaml configuration name = '' type = null src = null diff --git a/Resources/Private/Fusion/Override.Page.fusion b/Resources/Private/Fusion/Override.Page.fusion index 3fface3..beb0f80 100644 --- a/Resources/Private/Fusion/Override.Page.fusion +++ b/Resources/Private/Fusion/Override.Page.fusion @@ -20,24 +20,25 @@ prototype(Neos.Neos:Page) { config = Tms.Consent:Klaro.Config config.@if.autoIncludeConfig = ${Configuration.setting('Tms.Consent.autoInclude.config')} - bundle = Neos.Fusion:Tag { + noBundle = Neos.Fusion:Tag { @if.autoIncludeScripts = ${Configuration.setting('Tms.Consent.autoInclude.scripts')} tagName = 'script' attributes { defer = true src = Neos.Fusion:ResourceUri { - path = 'resource://Tms.Consent/Public/JavaScript/main.bundle.js' + path = 'resource://Tms.Consent/Public/JavaScript/NoConsentPlaceholder.js' } } } - noBundle = Neos.Fusion:Tag { + bundle = Neos.Fusion:Tag { @if.autoIncludeScripts = ${Configuration.setting('Tms.Consent.autoInclude.scripts')} + @position = 'after noBundle' tagName = 'script' attributes { defer = true src = Neos.Fusion:ResourceUri { - path = 'resource://Tms.Consent/Public/JavaScript/NoConsentPlaceholder.js' + path = 'resource://Tms.Consent/Public/JavaScript/main.bundle.js' } } } diff --git a/Resources/Private/Fusion/PresetPackages/Flowpack.Neos.Matomo/Override.TrackingCode.fusion b/Resources/Private/Fusion/PresetPackages/Flowpack.Neos.Matomo/Override.TrackingCode.fusion index 4b26509..bf33647 100644 --- a/Resources/Private/Fusion/PresetPackages/Flowpack.Neos.Matomo/Override.TrackingCode.fusion +++ b/Resources/Private/Fusion/PresetPackages/Flowpack.Neos.Matomo/Override.TrackingCode.fusion @@ -5,5 +5,5 @@ prototype(Flowpack.Neos.Matomo:TrackingCode) { type = 'text/javascript' } # Used to disable the