DSGVO-konforme externe Inhalte

Einführung

Auf vielen Websites werden externe Inhalte, wie beispielsweise Google Karten oder Buchungssysteme eingebunden.

Nutzt man hierzu die in WordPress (Classic Editor, Gutenberg) oder Page Buildern (Beaver, Bricks, Divi, Elementor, Oxygen, WPBakery und viele andere) vorgesehenen Standard-Verfahren und fragt nicht vorher die Zustimmung des Besuchers ab, verstößt man in der EU gegen die Datenschutzrichtlinien (DSGVO, GDPR): Bei der Anzeige einer Seite, die Inhalte von einem externen Server nachlädt, wird automatisch eine Verbindung zu diesem Server aufgebaut. Dabei werden die IP-Adresse, Browser-Informationen und weitere Daten des Besuchers, und damit personenbezogene Information, an den externen Server übertragen. Das ist nicht erlaubt ohne explizite Zustimmung.

Wie kann man also externe Inhalte auf der Website DSGVO-konform einbinden?

Lösung

MA Content Consent stellt einen WordPress Shortcode zur Verfügung, der eine DSGVO-konforme und gleichzeitig möglichst einfache und effiziente Einbettung von externen Inhalten ermöglicht.

Mittels dieses Shortcodes wird zunächst ein Hinweis-Text und ein Zustimmungs-Button angezeigt. Erst nach Klick durch den Besucher wird der externe Inhalt geladen. Dieses Verfahren ist DSGVO-konform, weil der Besucher zunächst aktiv bestätigen muss, dass er die externen Inhalte laden will.

MA Content Consent wirkt sich auch deutlich positiv auf die Ladegeschwindigkeit der Seite, und damit auch auf die bekannten Speed Test Tools (Page Speed Insights, GTMetrix, …) aus, da keine Daten von externen Servern geladen werden, bevor der Besucher dem nicht zugestimmt hat.

Warum als Shortcode?

Die Verwendung eines Shortcodes ist die vielseitigste Methode, um die Verfügbarkeit im gesamten WordPress-Ökosystem sicherzustellen.

• Universelle Kompatibilität: Shortcodes funktionieren nahtlos im Classic Editor, in Gutenberg (Block-Editor) und in beliebten Page-Buildern wie Beaver, Bricks, Divi, Elementor, Oxygen, WPBakery und vielen anderen.
• Theme-Flexibilität: Im Gegensatz zu fest programmierten Skripten können Shortcodes in Widgets, Seitenleisten oder benutzerdefinierten Vorlagen platziert werden, wodurch die Funktionalität unabhängig vom Layout des Themes gewährleistet ist.
• Einfachheit & Geschwindigkeit: Es bietet eine schlanke „Kopieren-Einfügen“-Lösung, mit der komplexe Logik ausgelöst werden kann, ohne eine einzige Zeile Code schreiben zu müssen.
• Zukunftssicher: Selbst wenn das Theme oder der Editor gewechselt wird, bleibt der Shortcode funktionsfähig, sodass die externen Inhalte ohne zusätzliche Konfiguration verfügbar bleiben.
• Detaillierte Steuerung: Dank dutzender Parameter innerhalb des Shortcodes können Aussehen und Funktionalität – wie Abmessungen, Texte, Metadaten – für jedes einzelne Video präzise gesteuert werden.

Shortcode

Der Shortcode besteht aus einem öffnenden und einem schließenden Tag. Dazwischen wird der zu bestätigende Inhalt eingebettet.

[ma-content-consent] 

externer Inhalt

[/ma-content-consent]

Hier ein Beispiel für die Einbettung einer Google Karte:

[ma-content-consent] 

<iframe src="https://www.google.com/­maps/embed?pb=..." width="100%" height="300" 
style="border:0;" allowfullscreen="" loading="lazy"></iframe>

[/ma-content-consent]

Auf der Seite wird nun zunächst ein Hinweis-Text mit Link zur Datenschutzerklärung angezeigt. Darunter fordert ein Button die Zustimmung vom Besucher an, die externen Inhalte zu laden. Erst nach Klick auf den Button wird tatsächlich eine Verbindung zum externen Server aufgebaut und der eigentliche Inhalt geladen und angezeigt.

Funktionsweise und HTML Struktur

MA Content Consent erzeugt einen Zustimmungsdialog aus drei Hauptelementen: Container, Notice, Content.
Der Container ist das äußere Hauptelement.
Darin wird die Notice, also der Datenschutzhinweis, bestehend aus Text und Button, angezeigt.
Darunter ist im anfänglich nicht sichtbaren Content der eigentliche Inhalt in kodierter Form abgelegt.

Bei Zustimmung durch den Besucher wird die Notice entfernt, und durch den anfänglich nicht sichtbaren Content ersetzt.

Struktur vor Zustimmung

Struktur nach Zustimmung

Shortcode Parameter

MA Content Consent implementiert ein recht einfaches Design für den Hinweis-Text und den Button.
Mittels Shortcode-Parametern kann das Aussehen beeinflusst werden.

[ma-content-consent alt="Externer Inhalt" title="Externer Inhalt"] ... [/ma-content-consent]

display: flex;
flex-direction: column;

[ma-content-consent container-style="min-height: 300px;"] ... [/ma-content-consent]

[ma-content-consent container-class="my-consent-container featured"] ... [/ma-content-consent]

position: relative;
isolation: isolate;
flex: 1;
padding: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2em;
justify-content: center;
background-color: #efefef;
border: 1px solid lightgray;
text-align: center;

[ma-content-consent notice-style="color: maroon;"] ... [/ma-content-consent]

[ma-content-consent notice-class="my-consent-notice featured"] ... [/ma-content-consent]

[ma-content-consent gdpr-text="Bitte lesen Sie vor dem Klick zuerst die {Datenschutzerklärung}."] ... [/ma-content-consent]

[ma-content-consent text-style="color: firebrick; font-weight: 900;"] ... [/ma-content-consent]

[ma-content-consent text-class="my-text featured"] ... [/ma-content-consent]

[ma-content-consent button-text="Karte laden"] ... [/ma-content-consent]

margin-inline: auto;
width: fit-content;
border-style: none;
border-radius: 1.5em;
background-color: #333;
padding: 0.5em 1em;
color: white;
text-decoration: none;

[ma-content-consent button-style="background-color:#2a4b9b; padding:2px 10px; border-radius:5px;"] ... [/ma-content-consent]

[ma-content-consent button-class="my-button primary"] ... [/ma-content-consent]

[ma-content-consent background-image="/wp-content/..."]
...
[/ma-content-consent]

[ma-content-consent background-image="1234"]
...
[/ma-content-consent]

z-index: -1;
position: absolute;
inset: 0;
opacity: .5;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;

[ma-content-consent background-image="@form"]
Beispiel-Inhalt
[/ma-content-consent]

[ma-content-consent background-image="@play"]
Beispiel-Inhalt
[/ma-content-consent]

[ma-content-consent background-image="@video"]
Beispiel-Inhalt
[/ma-content-consent]

[ma-content-consent background-image="@waveform"]
Beispiel-Inhalt
[/ma-content-consent]

[ma-content-consent background-image="@world""]
Beispiel-Inhalt
[/ma-content-consent]

Globale Parameter

Alle Shortcode Parameter können global definiert werden.
Das erleichtert die einheitliche Gestaltung der Zustimmungsdialoge und erspart die Definition der Parameter für jeden einzelnen Dialog.

Dazu wird eine globale Variable $GLOBALS['ma_content_consent'] als Array angelegt und mit den gewünschten Einstellungen versorgt.
Das geht recht einfach mit einem Code Snippet mit z.B. folgendem Inhalt:

$GLOBALS['ma_content_consent'] = [
 'background-image' => '@world',
 'container-style' => 'border: 1px solid blue;',
];

Eine Sonderlösung gilt hierbei für die Parameter gdpr-text und button-text, die sprach-sensitiv sind.
Die Angabe der globalen Parameter gdpr-text und button-text setzen den Text und die Button-Beschriftung global auf einheitliche Werte.
Die Ergänzung um ein Sprachkennzeichen steuert die Text-Ausgabe je Sprache.

$GLOBALS['ma_content_consent'] = [
 'gdpr-text' => 'Loading map from Google. Read the {privacy policy}.',
 'gdpr-text-de' => 'Karte wird von Google geladen. Siehe {Datenschutzerklärung}.',
 'button-text' => 'Load Map',
 'button-text-de' => 'Karte laden',
];

Einstellungen

WordPress Admin-Menü > Einstellungen > MA Content Consent zeigt die Administrations-Seiten, auf der die Voreinstellungen für die Shortcodes festgelegt werden können.

Shortcode Voreinstellungen

Auf dieser Seite können globale Voreinstellungen für die Shortcodes getroffen werden.
Wenn auf der gesamten Website beispielsweise ein bestimmtes Styling verwendet werden soll, kann dies hier zentral statt bei jedem einzelnen Shortcode als Parameter angegeben werden.
Diese zentralen Voreinstellungen können jedoch bei Bedarf bei einzelnen Shortcodes durch Parameter wieder überschrieben werden.

Tipp:
Die Texte für gdpr-text und button-text können für bis zu 10 Sprachen vorgegeben werden.
Wird eine andere Sprache benötigt, kann eine bestehende Sprache einfach überschrieben werden.

Download

Disclaimer

Diese Software habe ich nach bestem Wissen und Gewissen entwickelt und getestet.
Ich stelle die Software zur freien Verwendung zur Verfügung.
Eine Garantie für die Funktionalität in allen denkbaren WordPress Umgebungen kann ich nicht geben. 
Download und Nutzung dieser Software erfolgen auf eigene Gefahr und Verantwortung.

Change Log

Source Code