Externen Content (z.B. YouTube) blockieren mit Real Cookie Banner— WordPress Cookie Banner (mit Gutschein)

Michael
5 min readJan 29, 2023

--

Article is available in English too

Durch die DSGVO ist es heute immer wichtiger, dass die Webseite keine externen Inhalt wie z.B. YouTube Videos anzeigt ohne die vorherige Zustimmung des Benutzers.

In diesem Tutorial zeige ich, wie man mit dem WordPress Plugin Real Cookie Banner diese Inhalte blockiert und über einen Cookie Banner freigeben kann.

Das Plugin ist umsonst, es hat aber eine Premium Version mit vielen nützlichen Erweiterungen. Benutze den Code `MIGAWEB` für 20% Rabatt im ersten Jahr! Einfach zum Real Cookie Banner gehen und am Ende bei der Bestellung den Gutschein `MIGAWEB` eingeben.

Inhalt

Installation

Zuerst müssen wir das Plugin in der WordPress Seite installieren. Gehe dazu zu “Plugins — Neues Hinzufügen” und suche nach “Real Cookie Banner”. Installiere und aktiviere es:

Danach erscheint ein neuer Eintrag “Cookies” im WordPress Menü und man wird zur “First start” Seite weitergeleitet:

Klicke dort auf “Start configuration” und im nächsten Fenster entweder auf “Continue…” (unter dem blauen Button) oder — wenn du immer Updates erhalten willst — auf den “Activate free license & Continue” Button:

Danach sieht man das vollständige Real Cookie Banner Menü:

Plugin aktivieren

Guckt man sich gerade die Frontend Seite an sieht man noch keinen Cookie Banner. Wir müssen Real Cookie Banner zuerst aktivieren.
Gehe im Backend auf “Cookie” und wähle den “Settings” Tab.

Hier einfach den Schalter bei “Cookie Banner/Dialog” an schalten und unten auf “save settings” klicken.

Aktualisiert man die Frontend Seite erscheint der Cookie Banner:

Externe Inhalte blockieren

Jetzt fügen wir weitere Funktionen zum Cookie Banner hinzu. Für dieses Tutorial arbeiten wir mit einem YouTube Video Player und aktivieren diesen erst, wenn der Nutzer der Seite zustimmt. Werden die Cookies nicht akzeptiert oder abgelehnt wir der Player durch eine Fläche ersetzt, wo man es wieder aktivieren kann.

Als erstes brauchen wir eine Seite mit einem YouTube Player. Füge dazu einfach ein Video in eine WordPress Seite ein:

Guckt man sich die Seite dann an wird der Player ganz normal angezeigt und auch im Netzwerk-Reiter der Browser Devtools sind externe Aufrufe sichtbar.

Um externe Inhalte zu blockieren gehen wir jetzt in den “Cookies — Content Blocker” Tab und drücken auf “Add content blocker”:

Real Cookie Banner zeige eine ganze Auswahl von vorgefertigten Templates an:

Ein Vorteil der Pro Version ist, dass man viele dieser Templates nutzen kann und es einem viel Arbeit erspart, diese per Hand anzulegen!
Der YouTube Blocker ist aber auch in der kostenlosen Version erhältlich! Suche nach “youtube” und klicke auf die Box:

Dann erscheinen die Einstellungen für den Content Blocker, welche Links blockiert werden, welcher Text (Description Feld) auf der Box angezeigt wird — hier einen Text eintragen, warum der Nutzer diesen Bereich freischalten soll. Z.B. “Um das Video zusehen erlauben Sie bitte die YouTube Cookies”

und wie die Blocker-Box aussehen soll (in der freien Version nur eine Version verfügbar):

Es muss noch ein wichtiges Feld ausgefüllt werden: “Connected services”:

auch hier kann man wieder auf “YouTube — Create now” klicken, um mit einer Vorlage zu arbeiten.
In einem neuen Popup erscheinen jetzt die “Content Service” Einstellung:

Das gibt nachher an, wo das Cookie im Cookie Banner zu finden ist (“Group” Feld — z.B. Funktionale Cookies, Marketing Cookies, Analyse Cookies,…) und Daten über den Betreiber.
Lasse alles bei den Standardeinstellungen und drücke auf “Save”.

Das war’s!

Schaust du jetzt die Seite mit dem YouTube Video an, dann wird es hinter dem Cookie Banner blockiert und keine externen Aufrufe zu YouTube vorgenommen:

Klickt man auf “weiter ohne Einwilligung”, dann kann man die Box sehen und das Video auch nachträglich freischalten:

Erst danach wird das Video angezeigt und externe Aufrufe getätigt.

Im Reiter “individuelle Einstellungen” des Cookie Banners ist jetzt unter “Funktional — YouTube” unser neuer Eintrag zu sehen:

Abschließende Worte

Wie du siehst kann man schnell und einfach Real Cookie Banner dazu nutzen um externe Inhalte zu blockieren und die WordPress Seite DSGVO sicher zu machen. Das ganz geht auch mit anderen Elementen wie Calendly, Facebook Posts, Google Maps und vielen mehr. Gerade bei vielen externen Inhalten lohnt es sich, die Pro Version von Real Cookie Banner zu kaufen, damit man die vorgefertigten Templates nutzen kann (nutze den Code `MIGAWEB` für 20% Rabatt im ersten Jahr!).
Willst du bei der kostenlosen Version bleiben, kannst du auch alles per Hand anlegen. Klicke dazu einfach oben auf den “create from scratch” Button:

Danach kannst du die Content Blocker Seite selbst ausfüllen. Schaue dir dazu am besten die YouTube Seite an und übernehme es für andere Content Provider.

Wenn du mehr Tutorials zu Real Cookie Banner, WordPress, Elementor oder App Entwicklung mit Titanium SDK lesen willst, dann folge diesem Account!

--

--

Michael

freelance web/app developer - Wordpress/Elementor/Titanium SDK