Der Europäische Gerichtshof (EuGH) hat entschieden, dass Cookie-Banner, die nicht ausdrücklich die Zustimmung von Website Besucher:innen verlangen, nach der DSGVO nicht rechtmäßig sind. Um TYPO3-Entwickler:innen das Umsetzen dieser neuen Forderung zu erleichtern, haben wir die sgalinski Cookie Opt-In entwickelt, ein einfach integrierbares Modul, das eine Einbettung für Cookies und Tracking-Skripte ermöglicht, die mit DSGVO (GDPR) und ePrivacy konform ist. Weiterführende Informationen hierzu finden Sie auch im Blog-Artikel von Herrn Dr. Schwenke.
| TYPO3-Versionen | 9.5.X | 10.4.X | 11.5.X | 12.4.X | 13.4.X Support von TYPO3 v8 bis Cookie Opt-In Version 4 und TYPO3 v7 & v6 bis Version 3 |
| PHP-Versionen | 7.2.X | 7.3.X | 7.4.X | 8.0.X | 8.1.X | 8.2.X | 8.3.X Support von PHP 7.0 & 7.1 bis Cookie Opt-In Version 4 |
| Getestete Browser | Evergreen Browser |
Wir unterstützen Sie gern bei der Integration unserer Cookie Opt-In Extension in Ihre TYPO3-Instanz. Kontaktieren Sie uns einfach mit Ihrer Support-Anfrage! – Alle anderen, die Integration und Konfiguration unseres Cookie Consent Tools selbst übernehmen, finden auf dieser Seite eine Cookie Opt-In Dokumentation als Unterstützung.
Cookies dürfen aufgrund der DSGVO (GDPR) und der ePrivacy-Verordnung nur noch geladen werden, wenn ein:e Besucher:in einer Webseite dem ausdrücklich zustimmt (Cookie Consent). Dadurch entfallen auch Opt-Out Lösungen, bei denen der User aktiv widersprechen muss, um keine Cookies mehr zu erhalten. Deshalb werden mit dem sgalinski Cookie Consent standardmäßig nur Cookies eingebettet, die Sie als essenziell festlegen.
Nicht-essenzielle Cookies werden im mitgelieferten Backend-Modul der Extension in eine beliebige Anzahl von Gruppen einsortiert. Den Besucher:innen Ihrer Seite werden diese Cookies transparent und übersichtlich mit Informationen wie Herkunft, Beschreibung und Laufzeit aufgelistet. Der Nutzende kann dann entscheiden, welche Cookie-Gruppen er akzeptieren möchte und welche Cookies nicht geladen werden sollen.
Die Extension installieren Sie per Composer oder das TER und binden es mit wenigen Zeilen TypoScript in Ihrer Instanz ein. Dank des übersichtlichen Backend-Moduls und einer intelligenten Vorkonfiguration ist Ihr Cookie Opt-In Banner mit ein paar Klicks in kürzester Zeit einsatzbereit. Auch beliebige Tracking-Skripte lassen sich in Windeseile hinzufügen, werden aber erst geladen, wenn Benutzer:innen dem zugestimmt haben.
Im Backend-Modul unsere Cookie Consent Extension lässt sich die farbliche Gestaltung des Cookie Pop-Ups so konfigurieren, dass sich das Banner nahtlos in das Frontend Ihrer Webseite eingliedert. So haben Sie die volle Kontrolle über das Aussehen des Cookie Opt-In Hinweises.
Das Cookie-Banner der TYPO3 Erweiterung lässt sich in beliebig viele Sprachen übersetzen und wird auf jeder Sprache Ihrer Webseite entsprechend ausgespielt.
Zusätzlich können für unterschiedliche Sprachversionen Ihrer Webseite verschiedene Cookie-Gruppen konfiguriert werden. So ist transparenter, flexibler Datenschutz für alle User gesichert.
Sie können beliebige Skripte in den Einstellungen der sgalinski Cookie OptIn einfügen. Sie werden geladen, sobald der jeweilige Benutzende dem zugestimmt hat. Dabei haben wir besonders darauf geachtet, dass durch das OptIn Consent keine Tracking-Informationen verloren gehen.
Sgalinski Cookie Opt-In für TYPO3 ist die einfachste Lösung, um sowohl Tracking-Skripte und -Tags als auch Cookies datenschutzrechtlich einwandfrei auszuspielen. Mit dem übersichtlichen Opt-In-Banner schaffen Sie Vertrauen und Transparenz.
Das Backend-Modul hilft Ihnen, in kürzester Zeit all Ihre Cookies, Tags und Skripte in Gruppen einzuteilen, welche die Nutzenden frei akzeptieren können. Dank unserem Lizenzmodell erhalten Sie alle Updates für sgalinski Cookie OptIn, sobald diese verfügbar sind.
Unsere auf TYPO3 basierende Website-Base ist ein umfangreiches Paket zum Erstellen und Verwalten von Webseiten aller Art. Die sgalinski Cookie Consent Extension ist in der Website-Base inbegriffen. Dabei gibt es grundsätzlich die Möglichkeit eine Webseite zum Fixpreis erstellen zu lassen oder man entscheidet sich für ein Website as a Service Paket, mit dem keine weiteren Kosten für Hosting oder Sicherheits- und Funktionsupdates entstehen. Alle Informationen zu den verfügbaren Editionen der Website-Base finden Sie auf den unten verlinkten Seiten.
Inhalt
1.1 Statistiken
1.2 Consent-Verwaltung
4.1 Cookies identifizieren
4.2 Cookie Consent anlegen
4.3 Cookie Consent bearbeiten
4.3.1 Tab: Texte & Menü
4.3.2 Tab: Template
4.3.3 Tab: Externe Inhalte
4.3.4 Tab: Services
4.3.5 Tab: Banner
4.3.6 Tab: Essenzielle Skripte & Cookies
4.3.7 Tab: Weitere Skripte & Cookies
4.3.8 Tab: Einstellungen
4.4 Cookie OptIn/Consent übersetzen
5 Google Tag Manager Integration mit Consent Mode
6 Google Tag Manager Integration ohne Consent Mode
7.1 JavaScript API
7.2 JavaScript Events
7.3 PHP Symfony Commands
7.4 Die generierte JSON-Datei modifizieren
Nach der erfolgreichen Installation & Konfiguration der sgalinski Cookie Consent Extension wird jede:r neue Besucher:in Ihrer Webseite ein Fenster mit dem Cookie Consent sehen. Sie bestimmen, welche Cookies sie zulassen möchten und welche nicht.
Folgende Cookie Gruppen sind im Cookie Banner zu sehen (essentielle Cookies werden immer akzeptiert, da sie für die Funktion einer Webseite von Bedeutung sind):
Die individuelle Auswahl kann man speichern oder mit nur einem Klick 'nur essentielle Cookies' oder 'alle Cookies' akzeptieren. Schließt ein Seitenbesuchender das Fenster, ohne eine Auswahl getroffen zu haben, werden automatisch nur essentielle Cookies geladen.
Sie haben außerdem die Möglichkeit das Cookie Consent nach der Konfiguration in eine Seite zu integrieren. Dafür stehen Ihnen zwei Cookie Opt-In Inhaltselemente zur Verfügung: eine Cookie-Liste und ein Inhaltselement, mit dem das Consent-Fenster direkt in eine Seite einfügt werden kann.
Das Modul Tracking / Cookies ist in drei Funktionsbereiche eingeteilt:
Standardmäßig gelangen Sie in den Funktionsbereich Einstellungen, sobald Sie das Modul Tracking / Cookies wählen. Um zwischen den Funktionsbereichen zu wechseln, klicken Sie einfach in das Feld über dem Inhaltsbereich, in dem 'Einstellungen' zu sehen ist. Im Dropdown-Menü sind alle drei Funktionsbereiche zu sehen, klicken Sie dann auf den gewünschten Bereich.
In den Statistiken sehen Sie wie viele Personen Ihre Cookies akzeptiert oder abgelehnt haben. Sie können die Ergebnisse nach dem Zeitraum oder nach der Versionsnummer filtern. Das Modul zeigt Ihnen Kreisdiagramme zu den verschiedenen Gruppen an und stellt dar wie groß die Anteile der Personen sind, die die jeweilige Gruppe akzeptiert oder abgelehnt haben. Die essentielle Cookie-Gruppe wird immer zu 100 % akzeptiert, weswegen sie nicht in den Statistiken auftaucht.
Wenn Sie nach der Versionsnummer filtern, sehen Sie nur die Daten zu der bestimmten Version. So lassen sich verschiedene Versionen miteinander vergleichen. Sie können daraus Rückschlüsse ziehen, ob bestimmte Änderungen dazu beigetragen haben, dass mehr Besucher:innen nicht-essentielle Gruppen angenommen haben.
Sollten Besuchende beanstanden, dass Sie Cookies erhalten haben, denen Sie nicht zugestimmt haben, kann das im Consent Management geprüft werden. Dort können Sie auf die OptIn Protokolle zugreifen und nachsehen, ob tatsächlich ungewollte Cookies ausgespielt wurden.
Dafür bekommen Besucher:innen einen User-Hash, den sie am unteren Rand der Cookie-Banners finden. Im Consent Management sind die User-Hashs aufgelistet und es ist zu sehen, wann welche Cookie-Gruppen akzeptiert oder abgelehnt wurden. Wenn Browserdaten gelöscht werden, wird ein neuer User-Hash vergeben.
Die Liste kann nach User-Hash, Zeitraum oder den Cookie-Gruppen gefiltert werden.
Ab TYPO3 9. haben wir für Agenturen oder Kund:innen, die mehrere TYPO3 Instanzen mit unserer Cookie Opt-In Extension haben, eine praktische Export und Import Funktion eingebaut. Sie erlaubt es das Cookie Consent einmal zu konfigurieren und alle Einstellungen in weitere Instanzen zu übertragen.
Beim Import müssen Sie sicherstellen, dass mindestens die Standardsprache in der exportierten Datei vorhanden ist bzw. die ursprüngliche Konfiguration die Hauptsprache der Seite beinhaltet, in die die Datei importiert werden soll. Wenn andere Sprachen nicht komplett übereinstimmen, stellt das kein Problem dar. Sollten in der Datei zu viele Sprachen sein, werden Sie einfach nicht mit in die neue Instanz übernommen. Im umgekehrten Fall, wenn Sprachen (außer der Standardsprache) fehlen, müssen Sie in dieser Instanz lediglich eine neue Übersetzung für das Cookie Opt-In hinzufügen.
Sie werden beim Importvorgang informiert, falls die Standardsprache fehlt oder in den Übersetzungen die Anzahl der Cookies und Skripte nicht übereinstimmt. Letzteres kann dazu führen, dass die Übersetzungen nicht richtig angepasst werden. Dadurch auftretende Probleme können im Nachhinein behoben werden.
Gehen Sie beim Export & Import wie folgt vor:
Sollten Sie bereits einen Eintrag in dieser Instanz angelegt haben, müssen Sie diesen löschen, um die importierten Konfigurationen zu nutzen. Zum Löschen eines Eintrages gehen Sie in das Modul Tracking / Cookies und entfernen über das Papierkorb-Symbol den Eintrag, den Sie nicht benötigen.
Die TYPO3 Extension lässt sich einfach aus dem TER beziehen oder per Composer installieren. Um die Extension per Composer zu installieren, muss einfachcomposer require sgalinski/sg-cookie-optin ausgeführt werden. Im Anschluss muss in beiden Fällen die Extension über das Modul Template hinzugefügt und über das Modul Tracking / Cookies konfiguriert werden.
Damit die Integration problemlos funktioniert, müssen Sie einen sogenannten Siteroot konfigurieren. Ob Sie bereits einen Siteroot für Ihre Website konfiguriert haben, können Sie an dem kleinen Globus-Icon neben dem Namen der Seite im Seitenbaum erkennen. Falls Sie dort keinen Globus sehen, haben Sie noch keine Root-Seite festgelegt. Um einen Siteroot zu konfigurieren, gehen Sie wie folgt vor.
Den Lizenzschlüssel tragen Sie im Backendmodul Einstellungen unter Extension Configuration bei sg_cookie_optin ein. Alternativ besteht außerdem die Möglichkeit, unsere Cookie OptIn Extension für 24 h im Demo-Modus zu testen.
Nach der Installation müssen Sie das statische TypoScript namens Cookie Opt-In zu Ihrer Instanz hinzufügen. Dafür gehen Sie wie folgt vor:
Wenn Ihre TYPO3-Installation in einem Unterverzeichnis liegt z.B. www.example.com/subdirectory, sollten Sie in Ihren Erweiterungseinstellungen im TYPO3-Backend den Wert general.folder anpassen.
Bevor Sie die Cookie Opt-In Extension im Backend konfigurieren, sollten Sie Ihre Webseite nach Cookies untersuchen. Nutzen Sie dafür folgendes Tool (öffnen Sie es am besten in einem neuen Tab oder einem neuen Fenster).
Geben Sie, wie unten zu sehen ist, Ihre Homepage-Adresse ein und bestätigen Sie die Eingabe mit Scan Now.
Neben dem Tool haben Sie außerdem die Möglichkeit Ihre Seite manuell nach Cookies zu überprüfen. Folgen Sie dafür dieser Anleitung.
Im Ergebnis erhalten Sie eine übersichtliche Tabelle, wie sie unten zu sehen ist. Aus dieser Tabelle entnehmen Sie die meisten Informationen, die für die Konfiguration der Extension notwendig sind. Im Abschnitt zu der Gruppe essentieller Skripte & Cookies ist beschrieben, welche Daten Sie an welcher Stelle eintragen müssen.
Beachten Sie bitte, dass diese Liste unvollständig sein könnte.
Es reicht außerdem nicht, nur die Website-URL nach Cookies zu untersuchen. Es ist wichtig, alle Haupt- und Unterseiten zu scannen.
Denn nur wenn alle Cookies und Tracking-Skripte ausschließlich über die Cookie Opt-In Extension geladen werden, ist es möglich eine DSGVO-konforme Webseite zu kreieren. Wenn das der Fall ist, wird das Tool bei erneuter Untersuchung nach der vollständigen Konfiguration keine Ergebnisse mehr liefern können. Sie erhalten in dem Fall den Hinweis: No Cookies Found. Sie müssen so lange Cookies und Skripte in das Cookie Consent einpflegen, bis das Tool auf keiner Seite mehr Cookies findet.
Bevor Sie damit beginnen das Cookie Consent zu bearbeiten, sollten Sie im Reiter Einstellungen den Test-Modus aktivieren! – Damit wird den Besucher:innen im Bearbeitungsprozess kein Cookie Opt-In Fenster angezeigt. Sie können jedoch jederzeit den Cookie Opt-In Dialog mit ?showOptIn=1 am Ende der Adresszeile im Frontend anzeigen lassen, um Aussehen und Funktionalität zu prüfen.
Wenn Sie kritische Änderungen vorgenommen haben und sicherstellen möchten, dass Besucher:innen erneut die Cookie-Gruppen annehmen müssen, auch wenn sie diese bereits akzeptiert haben, tragen Sie an dieser Stelle eine höhere Versionsnummer ein und setzen ein Häkchen, bevor Sie Ihre Änderungen speichern. Wenn das Formular neu geladen wird, sollten Sie Ihre aktuelle Versionsnummer im Feld auf der rechten Seite sehen.
Sie können dann die Präferenzen der Besucher:innen in den Statistiken verfolgen.
Sie sehen in den Abbildungen unten, welche Felder an welchen Stellen im Frontend zu sehen sein werden. Füllen Sie die Felder Titel des Opt-In Fensters bis Link zur Anzeige von Informationen der Cookies einer Gruppe aus.
Füllen Sie nun die vier Felder zu den Cookie Informationstexten aus. Nach diesen vier Informationen werden alle verwendeten Cookies aufgeschlüsselt, hier legen Sie lediglich die Beschriftung fest. Verlinken Sie im Anschluss Ihre Seite mit der Datenschutzerklärung und das Impressum.
Im letzten Schritt verlinken Sie noch das Impressum und die Datenschutzerklärung. Gehen Sie wie folgt vor:
WICHTIG Auf der Seite Ihrer Datenschutzerklärung sollten Sie einen Button/Link zu den Cookie-Einstellungen einbauen ODER das Cookie Consent Inhaltselement einfügen.
Sollten Sie sich für die Button/Link-Variante entscheiden, müssen Besucher:innen mit einem Klick auf den Button zu den Cookie-Einstellungen gelangen. Dafür legen Sie einen externen Link mit der URL Ihrer Datenschutzerklärung mit dem Parameter ?showOptIn=1 an. Der Link kann dann beispielsweise so aussehen: sgalinski.de/datenschutz/?showOptIn=1. Sollten Nutzer:innen bereits entschieden haben, welche Cookies sie laden möchten und gelangen sie zu einem späteren Zeitpunkt auf eine Seite mit dem Parameter ?showOptIn=1, werden die von ihm gewählten Checkboxen wieder angezeigt.
Im ersten Teil des Reiters Template wählen Sie zunächst zwischen zwei Basis-Designvorlagen. In unserem Beispiel handelt es sich um die umfassende Variante. Ihnen steht außerdem das kompakte Design zur Verfügung.
Oder aber Sie setzten ein Häkchen bei Vorlage überschreiben und passen das Template Ihren Vorstellungen nach an. Damit Ihre Änderungen nicht verloren gehen, sollte das Häkchen in der Checkbox jederzeit gesetzt bleiben. Beim Speichern ohne ein gesetztes Häkchen werden alle Änderungen verworfen und das Standard-Template wiederhergestellt.
Das Template lässt sich jederzeit im Frontend anzeigen, indem Sie auf den Button Template-Vorschau (unter dem Template-Code) klicken. In einem neuen Tab sehen Sie dann Ihre Webseite mit dem aktuellen Design.
Wenn das Template gewählt ist, werden die Farben der einzelnen Komponenten angepasst. Als Erstes legen Sie die Farben des oberen Bereiches und der Überschrift sowie des Textes fest.
Das Template kann für jede Sprache individuell angepasst werden. Um in einer übersetzten Sprache ein anderes Template anzuwenden, müssen Sie die entsprechende Sprache wählen und im Reiter Template benutzerdefiniertes Übersetzungsverhalten wählen. Passen Sie im Anschluss das Template nach Ihren Wünschen an. Damit die Änderungen übernommen werden, müssen Sie außerdem (wie in der Standardsprache) die Option Vorlage überschreiben aktivieren.
Die Fingerabdruck-Option ist ab Version 5 der sg_cookie_optin Extension vorhanden. Sie ermöglicht es Usern, ihre Cookie-Einstellungen jederzeit zu ändern und ist standardmäßig aktiviert. Legen Sie die Position des Symbols, sowie Farbe und Hintergrundfarbe fest. Das Fingerabdruck-Symbol berücksichtigt außerdem das Dark Theme.
Des Weiteren folgen hauptsächlich die Farbeinstellungen. Zunächst bestimmen Sie die Fenster- und Textfarben. Danach folgen die Farben für Benachrichtigungen. Die Gruppen-Checkboxen befinden sich in unserem Basis-Template links neben der Cookie-Gruppenbezeichnung. Essentielle Cookies und Skripte können eine andere Farbe bekommen als alle weiteren Gruppen.
Zu jedem Button in dem Cookie Consent Fenster besteht die Möglichkeit den Hintergrund, das Button-Hover (Mouseover-Effekt zum Anzeigen einer verfügbaren Interaktion) und die Textfarbe verschieden zu gestalten. Zum Schluss passen Sie noch die Farben für die Liste der Gruppendetails an.
Sie können den Text Powered by sgalinski Cookie Opt In im Frontend ausblenden, indem Sie hier die Checkbox aktivieren.
Zum Aktivieren des Cookie Consents für Iframes müssen Sie in der Registrierkarte Externe Inhalte ein Häkchen setzen und die Felder Titel und Beschreibung ausfüllen sowie die Texte für die Button-Beschriftungen festlegen.
Ähnlich wie bei essentiellen Cookies können Sie unter dem Feld Beschreibung alle Cookies angeben, die von externen Skripten kommen. Die Informationen sind im Frontend im Cookie-Informationsteil des Opt-In-Feldes zu sehen.
In den Text-Feldern legen Sie die Button-Beschriftungen für externe Inhalte fest. Weiterhin können Sie einen zusätzlicher Text unter dem Button zum Laden des externen Inhaltes vergeben (siehe Screenshot unten).
Unter der Spalte Texte (Button-Beschriftungen) befindet sich die Spalte Farben. Hier lassen sich die Box und die Buttons farblich anpassen.
Diese Option ist ab der Version 5 der Cookie Opt-In Extension verfügbar. In diesem Feld können Sie einen URL-Pfad zu einem Bild eingeben, das als Hintergrund für den iFrame-Ersatz verwendet wird. Wenn Sie ein Bild festlegen, wird es standardmäßig für alle externen Inhaltselemente verwendet. Sollten Sie ein bestimmtes Bild für nur ein Element festlegen wollen, können Sie das HTML-Attribut data-sg-cookie-optin-background-image im Quellcode des Elements verwenden. Das Standard-Hintergrundbild für dieses Element wird durch das HTML-Attribut überschrieben. Wenn Sie möchten, dass mehrere Elemente das gleiche Bild verwenden, oder wenn Sie komplexere Anpassungen am iFrame-Ersatzdesign vornehmen möchten, lesen Sie bitte den Abschnitt zum Services Tab.
Es ist außerdem möglich, direkt im Backend die Designvorlagen anzupassen oder ganz zu ändern. Setzen Sie dafür ein Häkchen bei Template des Einstellungsfensters überschreiben, um den Code für das Design des Fensters mit den Einstellungen zu externen Inhalten zu überarbeiten und ein Häkchen bei iFrame-Ersatz-Template überschreiben, um das Template des Fensters zu ändern, das anstelle des iFrames zu sehen ist. Durch einen überschriebenen Code werden zukünftige Updates nicht mehr automatisch übernommen. Wenn die Option deaktiviert wird, wird das Template wieder zurückgesetzt.
Damit Ihre Änderungen nicht verloren gehen, sollte das Häkchen in der Checkbox jederzeit gesetzt bleiben. Beim Speichern ohne ein gesetztes Häkchen werden alle Änderungen verworfen und das Standard-Template wiederhergestellt.
Wenn auf Ihrer Webseite bestimmte externe Inhalte für die Funktionalität notwendig sind oder aus anderen Gründen unbedingt geladen werden müssen, können Inhalte ohne ausdrückliche Zustimmung der Benutzer und Benutzerinnen geladen werden. Dafür besitzt die Extension eine Whitelisting-Funktion.
Die Liste enthält automatisch reCAPTCHA, ein Dienst, der ein Unterscheiden von Menschen und Bots ermöglicht. Sie können weitere externe Inhalte (IFrame, Objekte, Audio- und Video-HTML-Tags) hinzufügen, diese sind dann vom externen Schutz ausgenommen.
Jedes Inhaltselement kann individuell als externer Inhalt geschützt werden. Das kann z. B. nützlich sein, wenn der externe Inhalt durch ein komplexes JavaScript hinzugefügt wurde oder wenn die Inhalte selbst nur einen kleinen Teil eines großen Blocks darstellen, die Textheader, Steuerelemente usw. enthalten. Für Sie kann es dann bequemer sein, den gesamten Block als geschützt zu kennzeichnen. Es gibt drei Möglichkeiten ein Inhaltselement, als externes Element zu kennzeichnen.
Fügen Sie das Attribut data-external-content-protection dem HTML-Tag hinzu.
<div class="test-content-protection" data-external-content-protection="1">
This content would have not been protected
<iframe src=”some/external/page” />
</div>
Oder tragen Sie die Klasse frame-external-content-protection im HTML-Tag ein.
<div class="test-content-protection frame-external-content-protection">
Content comes here
</div>
Es kann der Fall eintreten, dass Sie einzelne externe Inhalte nicht schützen möchten. Das kann z. B. notwendig sein, wenn die Funktion Ihrer Webseite davon abhängt, wenn es sich um iFrames von Whitelist-Domains handelt, die zu Ihrem Unternehmen gehören oder wenn der externe Inhalt keine Cookies mit sich bringt. Sie sollten also immer darauf achten, dass Ihre Seite DSGVO-konform bleibt.
Es gibt drei Möglichkeiten ein Inhaltselement, das als externes Element nicht automatisch auf der Seite angezeigt werden würde, trotzdem zu laden, ohne Zustimmung der Nutzer:innen.
Fügen Sie ein Attribut data-iframe-allow-always oder data-external-content-no-protection dem HTML-Tag hinzu.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/XYZ" data-iframe-allow-always="1">
</iframe>
Oder tragen Sie die Klasse frame-external-content-protection im HTML-Tag ein.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/XYZ" class="frame-external-content-no-protection">
</iframe>
Fügen Sie einfach das Datenattribut data-consent-button-text zu einem HTML-Tag in einem iFrame hinzu.
<iframe width="560" height="315" src="youtube-nocookie.com/XYZ" data-consent-button-text="Custom text here"></iframe>
Sie können eine Beschreibung des externen Inhaltes einfügen. Dafür müssen Sie in den HTML-Code des iFrames ein entsprechendes Attribut einsetzen: data-consent-description. Das iFrame-Tag im HTML-Inhaltselement kann dann wie folgt aussehen:
<iframe
width="560" height="315"
src="youtube-nocookie.com/XYZ" allowfullscreen
data-consent-description="Ein wenig Zusatzbeschreibung"
data-iframe-allow-always="1">
</iframe>Wenn Sie die Option zum Schutz externer Inhalte aktivieren, blockieren wir automatisch alle Anfragen an externe Server und ersetzen diese Seitenelemente durch das Opt-in-Element. Es gibt jedoch Spuren im Browser, dass solche Anfragen versucht wurden. Wenn Sie auf der sicheren Seite bleiben wollen, können Sie den HTML-Code dieser Elemente bearbeiten und das src-Attribut durch data-content-replace-src ersetzen.
Zum Beispiel kann <iframe src="https://external.website.com"> in <iframe data-content-replace-src="https://external.website.com"> geändert werden. Auf diese Weise wird beim ersten Laden keine Anfrage versucht und unser Cookie Opt-In kümmert sich automatisch um den Rest. Dies funktioniert nur für <iframe> und <object> Tags.
Bitte beachten Sie, dass dies nicht automatisch für Inhalte funktioniert, die Sie nach dem ersten Laden der Seite geladen haben, zum Beispiel mit AJAX. In diesen Fällen müssen Sie den Schutz manuell implementieren. Wir empfehlen Ihnen nachdrücklich, zu diesem Zweck unsere API zu nutzen.
Wenn Benutzer:innen externe Inhalte nicht akzeptieren, werden Iframes nicht geladen und als Box dargestellt. Dann hat man bei jedem Iframe die Option, nur das eine Iframe zu laden. Beim Klick auf den Button Einstellungen öffnen erscheint ein kleines Cookie Consent Fenster (siehe Screenshot unten), dort können alle externen Inhalte oder nur das eine Iframe akzeptiert werden.
Die Services sind Gruppen von externen Inhalten, deren Design oder Verhalten anpasst werden können und sind mit der Version 5 der sg_cookie_optin Extension verfügbar. Technisch versierte Nutzer können die Darstellung einzelner externer Inhalte, bevor sie geladen werden, steuern. Standardmäßig werden alle externen Inhalte durch eine graue Box ersetzt (siehe Tab Externe Inhalte). Das Standard-Template kann für alle externen Inhalte im vorherigen Tab angepasst werden. Angenommen, Sie haben auf Ihrer Website verschiedene Arten von externen Inhalten – etwa YouTube-Videos, Google Maps oder andere Arten von externen Inhalten. Die Services ermöglichen es, eine andere Vorlage für den Ersatz für externe Inhalte zu erstellen und sogar benutzerdefinierte Funktionen hinzuzufügen. Mit den Services können für verschiedene externe Dienste individuelle Boxen oder Vorschaubilder erhalten. Ebenso lassen sich hier eigene Buttons, Links und Beschreibungen hinzufügen. Sie können das Template also beliebig nach Ihrem Wünschen gestalten.
Dafür legen Sie zunächst mit dem Button Neu anlegen einen neuen Datensatz unter Services an.
Wenn wir einen neuen Service erstellen, müssen wir ihm zunächst einen eindeutigen Namen geben. Das ist der so genannte Identifikator. Der Identifikator muss für jeden Dienst eindeutig sein, da sonst die Funktionalität unterbrochen werden könnte, weil das Skript nicht wüsste, welchen Service es genau verwenden soll.
Standardmäßig verwenden die Dienste den standardmäßigen iFrame-Ersatz Template Code. Sie können ihn durch den Service überschreiben und ändern. Dazu müssen Sie die Checkbox Vorlage überschreiben aktivieren und dann einen benutzerdefinierten iFrame-Ersatz Template-Code einfügen.
Im Feld iFrame Ersatz Hintergrundbild können Sie ein spezifisches Hintergrundbild für den Service festlegen. Das überschreibt das Standard-Hintergrundbild, das auf der Registerkarte Externer Inhalt eingestellt ist. Ein Hintergrundbild, das im HTML-Attribut data-sg-cookie-optin-background-image festgelegt ist, wird dadurch jedoch nicht überschrieben. Das HTML-Attribut im Element selbst wird als die spezifischste Beschreibung des Elements betrachtet und hat daher die höchste Priorität.
Als Nächstes müssen wir dem SG Cookie Optin vermitteln, dass ein bestimmtes Element zu diesem Dienst gehört. Das kann auf zwei verschiedene Arten passieren.
data-sg-cookie-optin-service="youtube" würde versuchen, einen Service mit dem Bezeichner "youtube" zu finden und, falls erfolgreich, die Einstellungen von diesem Service laden.Natürlich können Sie auch mehr machen und benutzerdefinierten JavaScript-Code ausführen, wenn Ihr Service übereinstimmt. Dazu müssen Sie einen EventListener zu unserem Ereignis externalContentReplaced hinzufügen. Der EventListener wird ausgelöst, sobald der Inhalt ersetzt wurde, und im event.detail können Sie sehen, welcher Dienst (wenn überhaupt) übereinstimmt. Es enthält auch einen Verweis auf das ersetzte Element. Die Möglichkeiten, die sich daraus ergeben, sind unbegrenzt.
Auf unserer Demo-Seite (im Abschnitt 'Externe Inhalte nach dem Laden bearbeiten') können Sie sehen, wie wir eine dynamische Vorlage erstellt haben, die das Hintergrundbild der Ersatzbox automatisch durch das entsprechende YouTube-Video-Thumbnail ersetzt!
Wenn in dieser Spalte das Häkchen beim weniger auffälligen Banner gesetzt wird, wird statt der ausführlichen Variante nur ein kleines Banner angezeigt. Man kann aber auch eine bestimmte Breite des Browserfensters einstellen, bis zu der das kleine Banner angezeigt wird, ansonsten wird das große, ausführliche Banner zu sehen sein. Selbst wenn Nutzer:innen nicht auf Akzeptieren klicken, bleibt die Website voll funktionsfähig. Die Position des Banners können Sie unten oder oben festlegen. In unserem Beispiel befindet sich der Banner unten. Auch in dieser Form des Cookie Consents soll ein Text den Seitenbesuchenden auf Cookies hinweisen. Den Erklärungstext fügen Sie in das dafür vorgesehene Feld ein (Erklärungstext im Banner). Sie können außerdem das weniger auffällige Banner erzwingen, wenn das Browserfenster des Nutzenden eine bestimmte Maximalbreite hat.
Banner-Farben lassen sich ganz individuell für die einzelnen Komponenten einstellen: Bannerfarben für Hintergrund und Text sowie Farben für Einstellungen sowie Essenziell- und Akzeptieren-Buttons. Der Einstellungs-Button sollte mit dem Setzen des Häkchens aktiviert werden, wenn Ihre Seite Cookies nutzt.
Wie in den Reitern Externe Inhalte oder Template lassen sich direkt im Backend Veränderungen am Design vornehmen. Setzen Sie dafür ein Häkchen bei Vorlage überschreiben.
Durch die Aktivierung dieser Option werden zukünftige Updates nicht mehr automatisch übernommen. Sobald die Einstellung deaktiviert wird, wird das Template wieder auf die Vorlage zurückgesetzt.
Wenn Besucher:innen das Cookie Consent im Frontend aufklappen, sind dort Informationen zu den verwendeten Cookies zu sehen. In diesem Tab müssen Sie alle essentiellen Skripte & Cookies eintragen.
Fügen Sie zunächst einen Gruppentitel ein. Dieser muss nicht unbedingt 'Essentiell' lauten, so wie in unserem Beispiel. Tragen Sie dann die Beschreibung der Cookie-Gruppe ein. Titel und Beschreibung sind auch im zugeklappten Zustand zu sehen.
Die einzelnen Skripte & Cookies, legen Sie im Anschluss an. Klicken Sie dafür jeweils auf den Button Neu anlegen und füllen alle Felder aus. Die notwendigen Informationen zu den Cookies finden Sie in der Auflistung des Tools aus dem ersten Schritt. Die Namen der Cookies befinden sich in der Spalte Cookies. Unter Description finden Sie den Zweck sowie zumeist auch den Provider der Cookies. Die Lebenszeit entspricht der Spalte Duration.
Schließlich verrät Ihnen die letzte Spalte, wie Sie Ihre Cookies gruppieren können: Wenn ein Cookie als Necessary (notwendig) kategorisiert wird, gehört es zu den essentiellen Cookies. Dieses ist also für die Funktionalität der Webseite unabdingbar.
Der Cookie der Cookie OptIn wird benötigt und ist bereits beim Anlegen des Eintrags vorhanden. Hier muss nur noch der Anbieter des Cookies eingetragen werden, was jeweils die Person oder das Unternehmen ist, das die Seite bereitsstellt.
Das Feld Name ist ein regulärer Ausdruck. Diese werden verwendet, um zu prüfen, ob ein gegebener Text einem bestimmten Muster entspricht. Der Wert, den Sie in das Textfeld eingeben, ist das Muster, gegen das jeder Cookie-Name geprüft wird. Cookies, die mit diesem Muster übereinstimmen, werden gelöscht, wenn ein Benutzer der Cookie-Gruppe nicht zustimmt. Sie können die Syntax testen, z. B. auf der Seite: regex101.com. Nach dem Speichern sollten Sie den Cache leeren und Ihre Seite im Frontend neu laden. Versuchen Sie dann, die Zustimmung für ein Cookie zu erteilen und zu entfernen. Prüfen Sie in der Browserkonsole, ob die Cookies gelöscht werden oder ob JavaScript-Fehler auftreten.
Alle nicht essentiellen Cookie- und Skriptgruppen fügen Sie im Reiter Weitere Skript- und Cookiegruppen hinzu. Bei der Einteilung von Cookies in Gruppen können Sie sich an der Tabelle vom ersten Schritt der Konfiguration orientieren.
Legen Sie eine Gruppe an und pflegen die dazugehörigen Cookies und Skripte ein. Zum Bearbeiten jeder Gruppe stehen drei Unterreiter zur Verfügung. Bei Allgemein tragen Sie einfach den Gruppentitel, den Gruppen-ID und die Beschreibung ein. Titel und Beschreibung sind im Frontend im nicht aufgeklappten Zustand des Cookie Consents bereits zu sehen.
Im Tab Cookies fügen Sie alle weiteren Cookies so hinzu, wie die essentiellen Cookies auch.
Sie können Skripte als HTML-Code oder als Javascript implementieren. Die Skripte fügen Sie in Ihren angelegten Gruppen unter Skripte hinzu. Sie entscheiden, ob Sie das Skript als HTML oder als Javascript in die Cookie OptIn Extension einbauen. Je nachdem nutzen Sie einfach die dafür vorgesehene Box. Den Reiter Skripte und die Felder zum Eintragen des Codes sehen Sie hier im Screenshot. Bei einer Multi-Domain Umgebung, können Sie eine andere Vorgehensweise nutzen, die es Ihnen erlaubt, die ID per TypoScript zu setzen.
Es müssen alle Cookie-bezogenen Skripte zur Konfiguration hinzugefügt werden. Sie dürfen nirgendwo sonst geladen werden!
Wenn die angegebene Gruppe Google Analytics oder Google Ads umfasst, können Sie unser vordefiniertes Dropdown-Feld Google Service verwenden. Die Auswahl einer der Optionen erzwingt automatisch die entsprechenden Google-Zustimmungen für den Service: für Google Analytics analytics_storage und für Google Ads ad_storage. Sollten Sie eine andere Kombination der Zustimmungsfolgen benötigen, geben Sie diese im Feld Google Consent Mode Name auf der rechten Seite mit einem Komma getrennt an.
Ab Version 5.4.0 haben wir die Möglichkeit, eingebaut den Google Consent Mode zu nutzen. Wenn im folgenden Feld ein Wert gesetzt ist und Sie den Google Consent Mode auf Ihrer Website eingerichtet haben (Google Tag Manager Integration mit Consent Mode), wird die Google Consent Mode API automatisch über jede Änderung der Nutzereinstellungen informiert. Dann kann der Google Tag Manager diese Einstellungen lesen und die Tags entsprechend auslösen.
Wenn Sie den Google Consent Mode (derzeit Beta-Version) nicht nutzen möchten oder können, besteht die Möglichkeit den unten beschriebenen Weg zu nutzen.
Cookie-Gruppen können voneinander abhängig sein – so kann es beispielsweise sein, dass Sie einen Dienst laden müssen, bevor Sie einen anderen laden. Ein gutes Beispiel ist die Verwendung von Google Tag Manager, von dem aus Sie Google Analytics laden. Zu diesem Zweck können Sie die Gruppe analytics als von der Gruppe tag_manager abhängig festlegen und so sicherstellen, dass bei Erteilung der Zustimmung für Analytics auch die Zustimmung für Tag Manager erteilt wird. Das Feld akzeptiert eine durch Komma getrennte Liste von Werten, sodass Sie eine Gruppe von mehr als einer Gruppe abhängig machen können.
WICHTIG: Wenn ein User beide Gruppen erlaubt, kann nicht garantiert werden, welches loadingScript zuerst geladen wird.
Normalerweise wird das loadingScript in der Reihenfolge ausgeführt, in der die Cookie-Gruppen im Cookie Opt-In Backend geordnet sind, allerdings können in Echtzeit auch andere Faktoren eine Rolle spielen. Das bedeutet, dass Sie diese Logik selbst im loadingScript implementieren müssen – und dafür sorgen, dass der "Master" den "Slave" lädt. Dazu können Sie unsere JavaScript-API oder die Events nutzen. Oder Sie lassen einen anderen Dienst wie den Google Tag Manager diese Logik übernehmen, während Sie unser Tool nur für die Verwaltung der Nutzerzustimmung verwenden.
Der Google Tag Manager kann über ein Skript wie folgt integriert werden (ohne Google Consent Mode). Weitere Informationen zur Integration des Google Tag Managers ohne Consent Mode finden Sie hier.
document.TagManagerLoaded = document.TagManagerLoaded || 0;
if (!document.TagManagerLoaded) {
document.TagManagerLoaded = 1;
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtag/js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','YOUR GTM-CODE');
}Das sieht im Tab Skripte einer Cookie- und Skriptgruppe wie folgt aus:
In einem Multi-Domain System kann die oben beschriebene Methode zu Komplikationen führen, die Sie mit den folgend vorgestellten Vorgehensweisen vermeiden können. Unter anderem erlauben diese Alternativen die ID (Variable) direkt im TypoScript zu setzen.
Bei der ersten Variante geben Sie im HTML-Feld folgenden Code ein (als Beispiel dient wieder der Google Tag Manager):
<!-- Google Tag Manager -->
<script type="text/javascript">
document.TagManagerLoaded = document.TagManagerLoaded || false;
if (!document.TagManagerLoaded) {
document.TagManagerLoaded = true;
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer', document.googleTagManagerId);
}
</script>
<!-- End Google Tag Manager -->Die ID/Variable wird dann über TypoScript im TS-Template der Instanz gesetzt und kann mit Bedingungen überschrieben werden:
page.headerData.14414 = TEXT
page.headerData.14414.value (
<script type="text/javascript">
document.googleTagManagerId = '<MEINE_ID>';
</script>
)Alternativ können Sie das Skript komplett über das TypoScript einbinden:
<!-- Google Tag Manager -->
<script type="text/javascript">
function addTagManager () {
document.TagManagerLoaded = document.TagManagerLoaded || 0;
if (!document.TagManagerLoaded) {
document.TagManagerLoaded = 1;
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new
Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//
www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})
(window,document,'script','dataLayer','{$settings.gtm.id}');
}
}
</script>
<!-- End Google Tag Manager -->Die Konstante settings.gtm.id kann dann über TypoScript Conditions dynamisch gesetzt werden. In der Extension tragen Sie nur noch die Zeile addTagManager(); ein.
Mit letzterer Variante kann die Variable/ID über TypoScript gesetzt werden und gleichzeitig entfällt das Kopieren des Codes in die verschiedenen Domains.
Im Tab Einstellungen der Cookie Opt-In Extension finden Sie weitere Einstellungen für das Cookie Consent.
Das Deaktivieren dieses Häkchens würde dazu führen, dass für jede Sprache und für jedes Site-Root separate Konfigurationen vorhanden wären. Das führt wiederum dazu, dass Besucher:innen ihre Präferenzen jeweils für jede Sprache und jedes Site-Root auswählen müssen.
Hier können Sie die Laufzeit unseres Cookies anpassen. Nach Ablauf dieser Zeit werden Nutzer:innen erneut aufgefordert werden, das Cookie Consent auszufüllen. Standardmäßig sind 12 Monate eingestellt, hier können Sie diesen Zeitraum anpassen. Weiterhin können Sie in der Checkbox daneben festlegen, dass bei User:innen, die nur essentielle Cookies akzeptieren, sich die Lebensdauer unseres Cookies nur auf die aktuelle Sitzung beschränkt ist. Zusätzlich können Sie einstellen, dass das Cookie Consent den Nutzer:innen, die nicht alle Cookie-Gruppen ausgewählt haben, nach einer bestimmten Zeit wieder angezeigt wird.
Unser Cookie ist essentiell für die Funktion der Cookie Opt-In Extension. Es muss gespeichert werden, damit das Tool weiß, welche Cookie-Gruppen der Nutzer akzeptiert hat. Die Struktur unseres Cookies sieht wie folgt aus:
Die Beispieldaten bedeuten: Der User hat die essentiellen Cookies und Performance-Gruppen akzeptiert, jedoch nicht die Analysegruppen.
Sie können dieses Feld verwenden, um die URL zu überschreiben, von der die Dateien auf Ihrer Website geladen werden. Wenn die URL sich auf einer (Sub-)Domain befindet, stellen Sie bitte sicher, dass Sie sie in Ihre CORS-Policy-Header aufnehmen.
Alle CSS- und JavaScript-Dateien sind komprimiert. Sollten Sie das nicht wollen, müssen Sie die das Häkchen bei Erzeugte Dateien minifizieren herausnehmen.
Den TEST-Modus sollten Sie aktivieren, sofern Sie auf einer bereits bestehenden Webseite das Cookie Consent noch einrichten. Mit dieser Einstellung wird den Besucher:innen kein Cookie OptIn Fenster angezeigt. Um das Aussehen und die Funktionalität zu prüfen, kann der Dialog jederzeit mit ?showOptin=1 am Ende der Adresszeile im Frontend aufgerufen werden.
Nicht alle User Ihrer Seite kommen auf dem EU-Raum? – Dann müssen sich diese auch nicht mit einem Cookie Banner beschäftigen. Setzen Sie ein Häkchen in der entsprechenden Übersetzung, um dort das Banner zu entfernen.
Dieses Design ist ab Version 5 der Cookie Opt-In verfügbar. Wenn Sie dieses Kästchen aktiviert lassen, wird automatisch ein monochromes Design verwendet, wenn Sie dem <body> Tag die Klasse sg-cookie-optin-dark-theme hinzufügen oder wenn die Browsereinstellungen des Benutzers ein dunkles oder kontrastreiches Design fordern.
Wenn Sie diese Option aktivieren, wird der gesamte JavaScript- und CSS-Inhalt des Cookie OptIns direkt im head-Element gerendert. Das bewirkt eine Verbesserung der Seitenladezeit, weil sie dann weniger blockierende HTTP-Anfragen enthält (dazu gehören CSS- und JavaScript-Inhalte).
Sollten User:innen in ihrem Browser die ‘Do not track’-Option aktiviert haben, können Sie mit dieser Checkbox entscheiden, ob Sie diese Einstellung berücksichtigen möchten oder ob das Cookie Consent Fenster trotzdem angezeigt werden soll.
Sollten Sie die Cookie OptIn in einer Multidomain Umgebung anlegen, haben Sie hierfür einige weitere Einstellungsmöglichkeiten.
Subdomains unterstützen
Bitte beachten Sie, dass das im Normalfall nicht DSVGO-konform ist. Sie benutzen diese Option auf Ihr eigenes Risiko!
Ohne diese Einstellung gilt diese Konfiguration nur für die Domäne, in der sie gespeichert ist. Mit dieser Einstellung können Sie die Cookie-Konfiguration für mehrere Domänen verwenden, z. B. wenn Ihre Domäne de.example.com ist, wird die Konfiguration sowohl für de.example.com als auch für .example.com gespeichert und gilt somit auch für en.example.com.
Domain, für die der Cookie gesetzt werden soll, überschreiben
Bitte beachten Sie, dass das im Normalfall nicht DSVGO-konform ist. Sie benutzen diese Option auf Ihr eigenes Risiko!
Sie können dieses Feld verwenden, um manuell den Domainnamen für die Cookie Opt-In Konfiguration festzulegen. Ohne diese Einstellung gilt diese Konfiguration nur für die Domain, wo sie hinterlegt ist. Mit dieser Einstellung können Sie die Cookie-Konfiguration für mehrere Domains verwenden, z. B. indem Sie example.com schreiben, sodass die Konfiguration sowohl für dev.example.com als auch www.example.com verwendet wird.
Wenn eine Gruppe nicht akzeptiert wird, Cookies auch von folgenden Domains löschen
Hier können Sie Domains eintragen, bei denen die gleichen Cookies gelöscht werden sollen, wie bei der Domain, auf der die Cookie OptIn angelegt ist.
Das Cookie-Banner auf diesen Seiten/URLs nicht anzeigen
Auf Ihrer Datenschutzseite werden Sie das Cookie-OptIn Inhaltselement platzieren. Deshalb muss dort das Banner nicht nochmals auftauchen. Dafür fügen Sie die URL in das Feld ein. Jede neue Zeile wird als neuer, regulärer Ausdruck interpretiert. Prüfen Sie, ob ihr regulärer Ausdruck mit der URL Ihrer Seite übereinstimmt, indem Sie z. B. diese Seite nutzen. Prüfen Sie außerdem nach dem Speichern im Frontend in der Browserkonsole (zu Öffnen mit F12), dass keine JavaScript-Fehler auftauchen.
Mit dieser Option lassen sich die Statistiken und die Verfolgbarkeit ausstellen. Ohne diese Einstellung finden Sie in den Funktionsbereichen Statistiken und Consent-Verwaltung Informationen über Akzeptanz der Cookies.
Wenn Sie dieses Kontrollkästchen aktivieren, wird die gtag-API nicht mehr automatisch für jeden Zustimmungsstatus des Benutzers benachrichtigt.
Wenn Sie den erweiterten Google-Zustimmungsmodus aktivieren, wird die Datei cookieOptin.js nicht mehr automatisch eingebunden und die Standard-Zustimmungsvorlage an Google Services gesendet. Sie müssen dies dann selbst über den Google Tag Manager oder einen anderen Tag-Management-Dienst eines Drittanbieters tun, um unser Skript zu laden – z. B. den Google Tag Manager. Das CSS und die Datei mit den Einstellungsdaten werden jedoch weiterhin geladen, da Sie sonst Fehler im Google Tag Manager erhalten.
Wenn Sie möchten, dass Google-Dienste wie PageSpeed Ihre Seite nicht mit dem Cookie-Banner bedeckt sehen, können Sie Alles akzeptieren einstellen. Das würde dazu führen, dass der Bot automatisch den gesamten Dienst akzeptiert – alle Inhalte werden sofort geladen und es wird kein Cookie-Banner angezeigt. Wenn Sie es vorziehen, keine Inhalte von Drittanbietern zu laden und alle Cookies sofort abzulehnen, setzen Sie es stattdessen auf Alle ablehnen. Standardmäßig ist diese Funktion ausgeschaltet.
Alternativ können Sie einen speziellen GET-Parameter zu Ihrer URL hinzufügen: autoOptIn=accept für automatische Annahme oder autoOptIn=reject für automatische Ablehnung.
Um den Inhalt zu übersetzen, müssen Sie lediglich über dem Inhaltsbereich die Sprache auswählen, für die Sie eine Übersetzung anlegen möchten. Passen Sie einfach alle Inhalte an diese Sprache an und sichern Sie die Änderungen mit dem Speichern Button über dem Inhaltsbereich.
Für jede Sprache kann auch ein individuelles Template angewendet werden. Mehr dazu finden Sie im Abschnitt zum Reiter Template.
Wir beschreiben hier, wie unsere CMP (Consent Management Platform) mit dem Google Consent Mode für die Optionen Basic und Advanced Consent integriert werden kann. Der Google Consent Mode ermöglicht eine differenziertere Herangehensweise an die Zustimmung der Nutzer, indem er eine gewisse Datenerfassung auch dann zulässt, wenn die Nutzer die Möglichkeit der Personalisierung ausschließen.
Voraussetzungen dafür sind:
Basic Consent Mode
Dieser Modus bietet eine einfachere Einrichtung, bei der Sie wählen können, ob Sie alle Tags blockieren oder alle Tags auf der Grundlage der Zustimmung des Benutzers zulassen möchten. In diesem Modus können begrenzte, nicht personalisierte Informationen gesammelt werden, selbst wenn die Benutzer ihre Zustimmung für Personalisierungszwecke verweigern.
Advanced Consent Mode
Dieser Modus bietet eine detailliertere Kontrolle und ermöglicht es Ihnen, festzulegen, welche Tags auf der Grundlage bestimmter Zustimmungszwecke (z. B. Analysen, Personalisierung) ausgelöst werden. Dieser Modus bietet eine feinere Steuerung, mit der Sie festlegen können, welche Zwecke und Anbieter die Zustimmung der Benutzer für die Datenerfassung nutzen können.
Der Basic Consent Mode ist der Standardmodus und der strengste Modus in Bezug auf DSGVO-Vorschriften. Die Funktionsweise besteht darin, dass Ihre Besucher ausdrücklich ihre Zustimmung erteilen müssen, damit Sie Google Tag Manager überhaupt auf Ihrer Website laden können. Dafür befolgen Sie die oben stehende Dokumentation, aber wir werden hier noch ein wenig mehr ins Detail gehen.
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>
<!-- End Google Tag Manager -->
<!-- SG Cookie Optin -->
<script>
var sGcookieOptinUrl = 'https://{yourdomain.com}/fileadmin/sg_cookie_optin/siteroot-{ID}/cookieOptin.js?{cachebuster}';
var sgCookieOptinScript = document.createElement('script');
sgCookieOptinScript.src = sGcookieOptinUrl;
sgCookieOptinScript.setAttribute('data-ignore', 1);
sgCookieOptinScript.setAttribute('crossorigin', 'anonymous');
var sgCookieOptinCallback = function() {
console.log('Cookie Optin loaded from Tag Manager');
SgCookieOptin.initialize();
};
// Track when the script has finished loading
sgCookieOptinScript.onload = function() {
// Set gtag default values
gtag('consent', 'default', {
ad_personalization: "denied",
ad_storage: "denied",
ad_user_data: "denied",
analytics_storage: "denied",
functionality_storage: "denied",
personalization_storage: "denied",
security_storage: "denied"
});
// Once loaded, execute the callback
if (typeof sgCookieOptinCallback === 'function') {
sgCookieOptinCallback();
}
};
// Append the script to the document
document.body.appendChild(sgCookieOptinScript);
</script>
<!-- End SG Cookie Optin -->
Die meisten Dienste und Tags, die nicht von Google stammen, respektieren die Einstellungen für den Google-Zustimmungsmodus nicht, weshalb sie ohne vorherige Zustimmung des Nutzers nicht einmal sicher auf Ihrer Seite geladen werden können. Für diese Fälle empfehlen wir, dass Sie unsere Standardmethode zum Abfeuern von Tags über Trigger verwenden.
Voraussetzung dafür ist zunächst das Erstellen der Tracking-Gruppen in der Cookie OptIn Extension und das Hinzufügen der GTM Skriptes in allen relevanten Gruppen. Das vermeidet doppeltes Laden. Beachten Sie außerdem alternative Vorgehensweisen bei Nutzung von Multi-Domain Systemen.
Die folgenden Erläuterungen basieren auf den beispielhaften Skript- und Cookiegruppen Analytics und Marketing aus. Die dazugehörigen Gruppen-Keys, die Sie im Reiter Allgemein einer Gruppe eintragen, lauten in unserem Beispiel marketing und analytics.
Das Skript für den Google Tag Manager und den Tab Skripte sehen Sie in den unteren Abbildungen.
Nach der Konfiguration des Cookie Consents auf Ihrer Website müssen Sie nun für eine vollständige und erfolgreiche Integration mehrere Aktionen im GTM durchführen.
Nun müssen Sie die neuen Trigger in Ihren Google Analytics Tags einstellen. Je nachdem welcher Cookie-Gruppe Sie einen Tag zugeordnet haben, passen Sie den entsprechenden Trigger im Tag an. Zum Umstellen des Triggers gehen Sie wie folgt vor:
Komplexere Trigger werden nicht auf jeder Seite ausgeführt. Im GTM müssen diese als Trigger-Gruppe umgesetzt werden. Um eine Trigger-Gruppe anzulegen, gehen Sie wie folgt vor:
Trigger-Gruppen fügen Sie auf die gleiche Art und Weise wie andere Trigger einem Tag bei. In unserem Beispiel sehen Sie, dass die erstellte Trigger-Gruppe Trigger Group Event im Tag UA - Event zu finden ist. Dieses Tag wird nur aktiviert, wenn beide Trigger der Gruppe erfüllt sind.
Wenn Ihr spezieller Anwendungsfall es erfordert, können Sie die Verwendung von Triggers auch mit der Verwendung von Google Consents kombinieren.
Sie sind nun mit der Installation & Konfiguration des sgalinski Cookie Consent fertig!
Für einige Anwendungsfälle haben wir es Entwickler:innen ermöglicht, mit unserem Cookie Opt-In System zu interagieren. Die Anwendungsfälle sehen Sie in unserer Demo.
Die Funktion öffnet den Cookie Opt-In Dialog.
In 99 % der Fälle werden Sie die Funktion ohne Parameter aufrufen und der Dialog wird geöffnet:
SgCookieOptin.openCookieOptin();
Der Parameter fügt allen geschützten Elementen eine Trigger-Funktion hinzu. Sie wird ausgelöst, wenn das jeweilige Element die Zustimmung erhalten hat. Sie können die Elemente durch einen CSS-Selektor filtern.
Das ist sehr praktisch, wenn Sie nach dem Hinzufügen eines Elements zum DOM eine spezielle Logik angewendet werden soll (z. B. Größenänderung des Elements oder Verwendung eines Highlight-Effekts).
callback {function} – Stellt die Callback-Funktion dar, die im Falle des Ereignisses ausgelöst wird.
selector {string} (optional) – Ein CSS-Selektor wird verwendet, um nicht akzeptierte externe Inhaltselemente zu filtern. Bitte beachten Sie, dass an dieser Stelle der Runtime diese Elemente aus dem DOM herausgelöst und durch die Consent-Elemente ersetzt werden. Sie können also keine übergeordneten Selektoren in diesem String verwenden. Diese Selektoren können nur verwendet werden, um das externe Element selbst auf Attribute zu prüfen – id, class, src usw.
Im Beispiel wird das Element mit ID rce-event über die vordefinierte Funktion resizeIframeAfterAccept in der Größe verändert.:
SgCookieOptin.addAcceptHandlerToProtectedElements(resizeIframeAfterAccept, '#rce-event');
Mit dieser Funktion können Sie jedes Element auf der Seite programmatisch durch ein Consent-Feld ersetzen. Probieren Sie in den Entwicklertools zu Test-Zwecken den unteren Befehl auszuführen.
Diese Funktion kann für externe Elemente genutzt werden, die mit AJAX nachgeladen werden.
externalContent {dom}: Stellt das DOM-Element dar, das ersetzt werden soll.
SgCookieOptin.replaceExternalContentWithConsent(document.getElementById('c20534'));
Wir haben einige JavaScript-Ereignisse eingeführt, um Entwickler:innen weitere Möglichkeiten zu bieten, das Verhalten des Cookie-OptIns programmatisch zu beeinflussen. Es handelt sich um Bubbling-Events, die an das document.body oder ein beliebiges anderes DOM-Element angehängt werden können, das sich auf einer höheren Ebene als das Element selbst befindet. Die Elemente sind JavaScript CustomEvent-Objekte, mit denen man wie mit jedem anderen JavaScript-Event arbeiten kann. Folgende Events stehen zur Verfügung.
Das Event kann verwendet werden, um zusätzliche Logik und Skripte hinzuzufügen, die ausgeführt werden, nachdem der Cookie-OptIn-Dialog angezeigt wurde.
Wird ausgelöst, wenn der Cookie-OptIn-Dialog angezeigt wurde.
Event Target: document.body
Event Detail: {}
Das Event kann verwendet werden, um zusätzliche Logik und Skripte hinzuzufügen, die ausgeführt werden, nachdem der Cookie-OptIn-Dialog ausgeblendet bzw. geschlossen wurde.
Wird ausgelöst, wenn Cookie-OptIn-Dialog augeblendet bzw. geschlossen wurde.
Event Target: Parent des Cookie OptIns
Event Detail: {}
Das Event kann verwendet werden, um zusätzliche Logik und Skripte hinzuzufügen, die ausgeführt werden, nachdem der OptIn-Dialog für externe Inhalte angezeigt wurde.
Wird ausgelöst, wenn die Details für einen externen Inhalt angezeigt wurden.
Event Target: Wrapper-Element des externen Inhalts selbst
Event Detail: {}
Das Event hilft, die Einstellungen der Benutzer:innen zu lesen und zusätzliche benutzerdefinierte Logik hinzuzufügen. Es kann verwendet werden, wenn man ein eigenes Statistik-Tracking hinzufügen oder das Cookie auf anderen Domains und Subdomains setzen möchte usw. Verwenden Sie dieses Event, wenn Sie eine komplexe Logik mit anderen komplexen Tag-Management-Lösungen von Drittanbietern, wie Google Tag Manager oder ähnlichen Alternativen, benötigen.
Wird ausgelöst, wenn Benutzer:innen ihre Präferenzen ausgewählt haben und das Cookie gesetzt wurde (Akzeptieren oder Alle akzeptieren).
Event Target: document.body
Event Detail: {cookieValue: String}
Tipp: Um die Cookie Value-Informationen zu extrahieren, können Sie sie es anschließend an die Methode SgCookieOptin.readCookieValues(event.detail.cookieValue) übergeben.
Mit diesem Event können Sie dieses HTML ändern oder in bestimmten Fällen weiteres HTML hinzufügen.
Wird ausgelöst, wenn das loadingHTML eines benutzerdefinierten Skripts hinzugefügt wurde.
Event Target: document.head
Event Detail: {src: String}
Das Event kann verwendet werden, um dem JavaScript mehr Logik hinzuzufügen oder es in einem bestimmten Kontext zu ändern.
Wird ausgelöst, wenn das loadingScript eines benutzerdefinierten Skripts hinzugefügt wurde.
Event Target: Skript selbst
Event Detail: {src: String}
Dieses Ereignis kann verwendet werden, um die Ersatzbox oder das ersetzte Element zu ändern, nachdem es ersetzt wurde.
Event Target: Ersatzcontainer
Event Detail: {externalContent: HTMLElement, container: HTMLElement}
Dieses Ereignis kann verwendet werden, um die Ersatzbox oder das ersetzte Element zu ändern, bevor es ersetzt wurde und nachdem das Service-Template angepasst (oder nicht angepasst) wurde.
Event Target: Ersatzcontainer
Event Detail: {externalContent: HTMLElement, container: HTMLElement, service: service}
document.body.addEventListener('cookieOptinShown', function() {
console.log('Wir haben gerade den Cookie-Optin-Dialog geöffnet! Wir können jetzt an dieser Stelle das Styling einiger Elemente dynamisch ändern.');
});
document.body.addEventListener('cookieOptinHidden', function() {
console.log('Wir haben gerade den Optin-Dialog geschlossen! Wir können jetzt diese Stylings wieder so zurücksetzen, wie sie ursprünglich waren.');
});
Unten finden Sie eine Liste von Befehlen, die Sie auf Ihrem Webserver verwenden oder als Scheduler-Tasks hinzufügen können. Sie verwenden sie in Ihrer Shell wie folgt.
./vendor/bin/typo3 sg_cookie_optin:command_name arg1 arg2 ...
sg_cookie_optin:generate_static_files [siteRootId] – Erzeugt die statischen JavaScript-, JSON- und CSS-Dateien in Ihrem fileadmin-Verzeichnis. Es repliziert die gleiche Funktion, wie wenn Sie Ihre Konfiguration speichern. Sie ist z. B. für das Deployment, Unit-Tests oder ähnliche CI/CD-Aufgaben nützlich. int siteRootId ist notwendig – Das ist die PID des Site-Root. Wenn man sich in einem (inkonsistenten) Zustand befindet, der mehr als einen Konfigurationeintrag für den Site-Root beinhaltet, ist zu beachten, dass das Skript nur den ersten exportiert, den es findet, vorausgesetzt, es ist der richtige.Sie können dies tun, indem Sie den Hook $GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['sg_cookie_optin']['GenerateFilesAfterTcaSave']['preSaveJsonProc'] anhängen.
Es sendet ein Array $params mit den folgenden Einträgen:
pObj = Eine Instanz des StaticFileGenerationService. Sie enthält die siteRootId sowie einige öffentliche Methoden, die nützlich sein können.data = Ein Verweis auf das Daten-Array, das in die JSON-Datei geschrieben wird.languageUid = Die uid der aktuellen SpracheBeispiel:
$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['sg_cookie_optin']['GenerateFilesAfterTcaSave']['preSaveJsonProc'][] =
function ($params) {
$params['data']['newDataEntry'] = 'newValue';
};
Zum aktuellen Zeitpunkt steht nur das Standardlayout zur Verfügung. Es ist jedoch möglich, das CSS des Cookie-Fensters zu überschreiben.
Langfristig ist geplant, unterschiedliche Layouts zur Auswahl anzubieten.
Wir gehen davon aus, dass es mit der sgalinski Cookie OptIn Extension möglich ist, eine DSGVO-konforme Webseite zu kreieren. Dazu ist es jedoch unter anderem notwendig, alle Cookies und Tracking-Skripte ausschließlich über die Extension zu laden. Da dies in der Verantwortung der einzelnen Webseitenverwalter:innen liegt, können wir keine Verantwortung für die Rechtssicherheit der Software übernehmen.
Des Weiteren gehören zur DSGVO-Konformität einer Webseite noch weitere Aspekte, die nicht durch sgalinski Cookie OptIn abgedeckt werden.
Sie können sehr gerne jegliche Art von Verbesserungsvorschlägen und Feedback zu Fehlern in unserem Tracker in unserem internen Gitlab melden. Sie können dies ebenfalls über unsere Mail-Adresse support@sgalinski.de direkt an unseren Support schicken.
Dies ist durch das neue Inhaltselement, welches seit der Version 2.0 integriert ist, möglich. Dieses findet man im Backend mit dem Namen "Cookie-Opt-In" innerhalb des Tabs "Plugins". Sobald man dieses angelegt hat, wird das modulare OptIn, auf dieser Seite, nicht mehr dargestellt.
[1] Es besteht keine Garantie für dauerhafte Verfügbarkeit oder Support der Software. Lizenzinhaber:innen können die Software während der Lizenzlaufzeit verwenden, solange sie offiziell unterstützt wird und verfügbar ist.
Kontaktieren Sie uns
Unsere Cookie Consent Extension hat Sie überzeugt und Sie möchten Ihr nächstes Webprojekt oder Ihre individuelle Software-Idee gemeinsam mit uns realisieren? – Dann kontaktieren Sie uns für ein unverbindliches Angebot!