eRecht24 Usercentrics Consent anpassen

Je nach Nutzungslizenz kann man innerhalb Usercentrics Buttons, Farben, Gestaltung usw. direkt anpassen. Wieweit das datenschutzrechtlich im Ergebnis zu beanstanden ist, muss man selbst abwägen.

Über indirekte Nutzungslizenzen wie eRecht24 kann man den Consent nicht anpassen. Man kann nur bestimmte Versionen auswählen.

eRecht24 empfiehlt nachdrücklich, die neue Version (v2) mit Serverstandort EU (unbedingt) zu verwenden und gleichberechtigte Buttons auszuwählen. Macht man dies, schaut der Standard-Consent von eRecht24 via Usercentrics aus wie folgt:

Technisch macht eRecht24 bzw. eigentlich Usercentrics das mit v2 deutlich besser. Sie nutzen das sogenannte Shadow DOM. Man erkennt das im Inspektor des Browsers meist an #shadow-root (open). Damit ist der Consent technisch isoliert, getrennt von der eigentlichen Seite und versehentliche Vererbungen der optischen Seiteneigenschaften sind ausgeschlossen.

Auch ist der Quellcode nun deutlich besser als früher. Wieso nun die CSS-Klassen randomisiert und wenig aussagekräftig sind, muss man nicht verstehen. Das wäre gerade ein Vorteil der Nutzung des abgekapselten Shadow DOM.

Der Nachteil ist, dass man mit CSS die Darstellung des Consents trotz Einbettung nicht mehr so einfach überschreiben kann. Doch Usercentrics lässt es technisch zu, dass man indirekt doch "durchkommt".

Will man beispielsweise die Buttonreihenfolge verbessern und visuell die Auswahl erleichtern, könnte man dies mit folgendem Code erreichen.

<script>
window.addEventListener('load', function () {   
    const userCentricRoot = document.querySelector('#usercentrics-root');   
    const sheet = new CSSStyleSheet;   
    sheet.replaceSync('[data-testid="first-line-buttons"]{flex-direction:column !important} button[data-testid="uc-accept-all-button"]:before{content:"✓";padding-right:.25em} button[data-testid="uc-deny-all-button"]:before{content:"✗";padding-right:.25em} button[data-testid="uc-deny-all-button"]{order:2} button[data-testid="uc-accept-all-button"]{order:1} button[data-testid="uc-more-button"]{order:3} button[data-testid="uc-save-button"]{order:3}');
    userCentricRoot.shadowRoot.adoptedStyleSheets = [ sheet ]; 
}); 
</script>

Man kann damit mehrere Dinge anpassen, Größen, Farben, Sichtbarkeit usw. - wieweit das datenschutzrechtlich und lizenzrechtlich noch in Ordnung ist, muss man sich allerdings gut überlegen.

Trotz Shadow DOM kann man wichtige, kleine Verbesserungen mit großer Wirkung weiterhin vornehmen, wenngleich nicht mehr so einfach. Wieweit die Anpassungen vertretbar sind, sollte man im Vorfeld abwägen und ggf. abklären.