Cookie Opt-In Extension für TYPO3

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:

1. Gehen Sie im Backend der TYPO3 Instanz, aus der Sie die Konfigurationen exportieren möchten, auf das Modul Tracking / Cookies, klicken Sie oben auf den Button Konfiguration exportieren und speichern Sie die exportierte Datei ab.
2. Um die Datei zu importieren, wechseln Sie zu einer anderen TYPO3 Instanz und gehen auch hier im Backend auf das Modul Tracking / Cookies.
3. Nutzen Sie jetzt den Konfiguration importieren Button. Wählen Sie die exportierte Datei und laden Sie diese hoch.
4. Sie sehen nun eine Übersicht aller vorhanden Übersetzungen und welche davon in die Instanz hochgeladen werden. Klicken Sie auf Weiter, um den Import abzuschließen.

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.

1. Öffnen Sie die Eigenschaften der gewünschten Seite über Rechtsklick auf die Seite. Wählen Sie im erschienen Menü Bearbeiten aus.
2. Gehen Sie zum Reiter Verhalten und aktivieren Sie die Checkbox 'Als Anfang der Website benutzen'.

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 Opt-In Extension für 24 h im Demo-Modus zu testen.

3. Tab: Externe Inhalte

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).

Farben anpassen

Unter der Spalte Texte (Button-Beschriftungen) befindet sich die Spalte Farben. Hier lassen sich die Box und die Buttons farblich anpassen.

iFrame Ersatz Hintergrundbild

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.

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.

Ändern des Button-Textes für ein bestimmtes externes Inhaltselement

Fügen Sie einfach das Datenattribut data-consent-button-text zu einem HTML-Tag in einem iFrame hinzu.

Externer Inhalt– iFrame Beschreibung

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:

Zusätzliche Schutzschicht für Externe Inhalte

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.

Externer Inhalt bei Nicht-Akzeptieren

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.

Dafür legen Sie zunächst mit dem Button Neu anlegen einen neuen Datensatz unter Services an.

Identifikator

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.

Template

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.

IFrame Ersatz Hintergrundbild

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.

Zuweisung des Services zu einem Element

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.

• Der einfachste Weg ist es, ein HTML-Attribut zum externen Inhalt data-sg-cookie-optin-service hinzuzufügen und es auf den Bezeichner zu setzen. Zum Beispiel: 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.
• Die andere Möglichkeit ist die Verwendung des untersten Feldes in den Services. In diesem Feld können Sie reguläre Ausdrücke eingeben (einen pro Zeile), die versuchen, die Quelle des Elements zu finden. Wenn Sie z. B. eine spezielle Vorlage für alle externen Videos auf Ihrer Website haben möchten, können Sie einen regulären Ausdruck hinzufügen, der mit der URL der verschiedenen von Ihnen verwendeten Videoplattformen übereinstimmt, z. B. YouTube, Vimeo, Dailymotion usw. Wenn einer der regulären Ausdrücke mit der Quelle übereinstimmt, wird der Dienst automatisch diesem Element zugewiesen.

Weitere Funktionen zu den Services hinzufügen

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!

5. Tab: Banner

Cookie Namen

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 User 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.

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.

Vorgehen bei einer Multi-Domain Umgebung

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):

Die ID/Variable wird dann über TypoScript im TS-Template der Instanz gesetzt und kann mit Bedingungen überschrieben werden:

Alternativ können Sie das Skript komplett über das TypoScript einbinden:

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.

8. Tab: Einstellungen

Aktiviere den TEST-Modus

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.

Das OptIn für diese Sprache deaktivieren

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.

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:

• funktionierende Implementierung unserer Cookie Opt-In auf Ihrer Website
• ein für Ihre Website eingerichteter Google Tag Manager (GTM) Container
• Erfahrung mit GTM und Google Consent Mode

Konzept der Consent Modes –  Die zwei verschiedene Zustimmungsmodi

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.

Integration des Basic Consent Mode

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.

• Erstellen Sie eine neue Gruppe (Tab: Weitere Skripte & Cookies)– Google Tag Manager – und fügen Sie das Initialisierungsskript für den Google Consent Mode (Einwilligungsmodus) hinzu.
  • Verwenden Sie jeden der oben erläuterten Schritte, der Ihrem Anwendungsfall entspricht, aber stellen Sie sicher, dass der Code, den Sie am Ende ausführen, in etwa so aussieht:

• Zuordnung der GTM-Einwilligungsgruppen zu den SG-Cookie-Opt-In-Gruppen
  • Erstellen Sie eine neue Gruppe (Tab: Weitere Skripte & Cookies), z. B. Analytics. Diese Gruppe würde dann Ihr Google Analytics-Tag in GTM darstellen. 
  • Im Google Tag Manager können Sie dann den Einwilligungsmodus (Consent Mode) aufrufen und Google mitteilen, dass dieses Tag nur ausgelöst wird, wenn der Nutzer der Gruppe analytics_storage zustimmt. 
  • Im Cookie Opt-In Modul gehen Sie dann zum Feld Google Consent Mode Name (Tab: Weitere Skripte & Cookies) und geben unserer Analytics-Gruppe den Namen analytics_storage. 
  • Wenn Sie mehrere Google-Zustimmungen in einer Gruppe zusammenfassen möchten, tragen Sie weitere Gruppen Komma-separiert ein. 
  • Durch die Einstellung dieses Wertes informiert unsere Cookie Opt-In jedes Mal automatisch den Google Tag Manager, wenn ein Nutzer dieser Analytics-Gruppe zugestimmt hat und die Zustimmung analytics_storage dem Google Tag Manager erteilt wurde. 

• Fügen Sie alle abhängigen Gruppen hinzu (falls vorhanden)
  • Im letzten Feld des obigen Bildschirms haben wir die Analytics-Gruppe so eingestellt, dass sie von der Tag Manager-Gruppe abhängig ist. Auf diese Weise kann der Nutzer nicht die Zustimmung für Analytics erteilen, ohne gleichzeitig die Zustimmung für Google Tag Manager zu erteilen, da Google Analytics von Google Tag Manager geladen wird und nicht allein existieren kann. Das bedeutet, dass im Consent Fenster jedes Mal, wenn Analytics ausgewählt wird, automatisch auch Tag Manager ausgewählt wird. Umgekehrt wird jedes Mal, wenn Tag Manager abgewählt wird, auch Analytics automatisch abgewählt.
     
• Konfigurieren Sie GTM-Tags für den Basic Consent Mode
  • gehen Sie im Google Tag Manager zum Abschnitt Tags
  • suchen Sie für jeden Tag, den Sie mit dem Einwilligungsmodus (Consent Mode) verwalten möchten, den Abschnitt Triggering
  • wählen Sie den Trigger-Typ für jeden Tag
    • Beachten Sie, dass bei dieser Konfiguration keines der Google Tag Manager-Tags ausgelöst wird, wenn der Besucher nicht seine Zustimmung für die Google Tag Manager-Gruppe gegeben hat, denn nur dann wird GTM auf die Webseite geladen. Und sobald GTM auf die Webseite geladen ist, werden alle Einwilligungseinstellungen aus unserem Cookie Opt-In an Google Tag Manager übertragen, wo Sie Ihre Tags und Einwilligungslogik so einrichten können, wie Sie es für Ihren Anwendungsfall benötigen.
  • wählen Sie in denTriggereinstellungen den entsprechenden Einwilligungsstatus, der das Auslösen des Tags ermöglichen soll (z. B. analytics_storage)
     
• Prüfen und Verifizieren
  • Testen Sie Ihre Implementierung gründlich, um sicherzustellen, dass sich die Tags wie erwartet verhalten, wenn der Benutzer seine Zustimmung erteilt hat.
  • Verwenden Sie Tools wie den Google Tag Assistant, um das Auslösen von Tags anhand des Zustimmungsmodus zu überprüfen.

• Zuordnung der Google-Zustimmungen zu unseren Cookie-Gruppen
  • Das funktioniert wie im Basic Consent Mode.
     
• Konfigurieren Sie GTM-Tags für den erweiterten Einwilligungsmodus (Advanced Cosent Mode)
  • Jetzt wird die Cookie Opt-In auf jeder Seite vor allen anderen geladen. Unsere Cookie Opt-In informiert Google dann sofort über die aktuelle Einwilligungseinstellung und alle nachfolgenden Einwilligungsänderungen des Besuchers auf der Website. Von hier aus müssen Sie nur noch Ihre GTM-Tags so einrichten, dass sie die zugehörigen Einwilligungen respektieren, die unseren Cookie-Gruppen zugeordnet sind:
    • Gehen Sie in Ihrem Google Tag Manager zum Abschnitt Tags.
    • Suchen Sie für jeden Tag, den Sie mit dem Zustimmungsmodus verwalten möchten, den Abschnitt Triggering.
    • Definieren Sie in den Trigger-Einstellungen den/die erforderlichen Einwilligungszweck(e), der/die das Auslösen des Tags ermöglichen soll(en) (z. B. analytics_storage).
       
• Prüfen und Verifizieren
  • Testen Sie Ihre Implementierung, um sicherzustellen, dass die Tags nur dann ausgelöst werden, wenn der Nutzer seine Zustimmung erteilt hat.
  • Nutzen Sie den Google Tag Assistant und Simulationen der Nutzerzustimmung, um das Tag-Verhalten zu überprüfen.

Weitere Hinweise

• Google bietet umfangreiche Informationen zur Implementierung des Consent Modes: https://developers.google.com/tag-platform/security/guides/consent
• Bei komplexen Konfigurationen oder der Fehlersuche sollten Sie einen GTM-Experten hinzuziehen.
• Wenn Sie diese Schritte befolgen, können Sie unser CMP effektiv in den Google-Einwilligungsmodus integrieren und Ihren Nutzern mehr Kontrolle über ihre Daten bieten und die Einhaltung der Vorschriften zur Nutzereinwilligung gewährleisten.

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.

Wenn Ihr spezieller Anwendungsfall es erfordert, können Sie die Verwendung von Triggers auch mit der Verwendung von Google Consents kombinieren.

Die Funktion öffnet den Cookie Opt-In Dialog.

Parameter

• contentElement {dom} (optional) – Falls der Parameter angegeben wird, wird der Dialog als child des angegebenen Inhaltselements angehängt, wenn nicht, wird er an den <body> Tag angehängt.
• options (optional) – Sie können andere Optionen als JSON weitergeben. Die unterstützte Option dabei ist:
  • {boolean} hideBanner: Blendet das Cookie-Banner aus, wenn es in den Einstellungen aktiviert wurde.

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).

Parameter

• 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.

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. 

Parameter

• externalContent {dom}: Stellt das DOM-Element dar, das ersetzt werden soll.

Beispiel

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.

cookieOptinShown

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: {}

cookieOptinHidden

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: {}

externalContentConsentDisplayed

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: {}

consentCookieSet

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.

addedLoadingHTML

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}

addedLoadingScript

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}

externalContentReplaced

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}

beforeExternalContentReplaced

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}

Beispiel

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.
  • Arguments
    • 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 Sprache

Beispiel:
$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['sg_cookie_optin']['GenerateFilesAfterTcaSave']['preSaveJsonProc'][] =
    function ($params) {
        $params['data']['newDataEntry'] = 'newValue';
    };