Cookie Manager für TYPO3 mit Optin, Gruppierung und GTM Support

Features

  • HTML/Script tag Management
  • Gruppierung von verschiedenen cookies und entsprechenden javascripts
  • Multi-domain fähig
  • Multi-language fähig
  • Bringt out of the box Sprachsupport für Englisch und Deutsch mit
  • Cookie Informationstabelle (als Plugin) für die Datenschutzseite
  • Consent Panel(Optin Panel), welcher wirklich das entsprechende Javascript und dessen Cookies nach der Auswahl lädt
  • Verwendet keine externen JS Frameworks oder Abhängigkeiten
  • Google Tag Manager support
  • 100% anpassbar, einfach Fluid Templates anpassen und/oder eigenes CSS nutzen
  • Eigene JavaScript events
  • Unterschtützt TypoScript Konstanten im HTML Markup der Cookie Tags

Vielen Dank an Unterstützer und Sponsoren:
gi.de

nerdost.net

Setup

Installiere die Extension "om cookie manager" über den Extension Manager (oder über Composer).

Füge einen Ordner im Seitenbaum hinzu.

Erstelle eine Cookie Panel Datensatz.
INFO:Die Erweiterung rendert immer den ältesten(zuerst angelegten) aktiven Panel pro Sprache

Erstelle eine Cookie Gruppe in dem selben Ordner

Füge Cookies in den gewünschten Gruppen hinzu, zusammen mit dessen Beschreibung(wenn die Infotable genutzt werden soll) und entsprechendem HTML/ Script Tags

INFO:Du kannst natürlich auch cookies anlegen, welche nur eine Beschreibung haben damit diese in der Infotabelle aufgelistet werden. Das ist nützlich wenn über ein Script mehrere Cookies erzeugt werden(z. B. bei google analytics).
Wichtig - die gleichen Scripts nicht mehrmals in unterschiedlichen cookies hinterlegen.

Öffne jetzt erneut den Cookie Panel und wähle die Gruppen aus die du als Auswahl anbieten willst. Die Reinfolge in der die Gruppen im Datensatz angeordnet werden ist relevant für die Ausgabe.

Zu guter letzt füge noch das statische TypoScript Template deinem root Template hinzu und setze die ID des Ordners als storage PID in dem Konstanten Editor.
INFO: So kannst du pro Domain eine komplett unterschiedliche Gruppen Auswahl anbieten.

Herzlichen Glückwunsch! Du bist am Ziel.

INFO: Sollte die standard Darstelltung merkwürdig aussehen, wird das mitgelieferte CSS von dem CSS der Webseite beeinflusst. Das kann leider nicht immer ausgeschlossen werden.
Anmerkung:Im mitgeliefertem Template ist ein kleiner "made by" Text und ein Backlink enthalten, dieser muss nicht beibehalten werden aber ich würde mich sehr darüber freuen, solltest du dich dafür entscheiden.

Informations-Tabelle einrichten

Einfach das Plugin auf der Seite und Stelle einfügen wo die Informationen dargestellt werden sollen, speichern und fertig!

Addtional Information

Automatischer Frontend Cache clear (default:aktiviert - Extension Einstellung):
Der automatische Cache clear löscht bei jeder Änderung an den Gruppen, Cookies oder dem Panel den FE Cache damit die Änderungen entsprechen auf allen Seiten übernommen werden. Wenn du diese Einstellung deaktivierst, werden die Änderungen nur sichtbar nach einem manuellem leeren des Caches.

Google Tag Manager Events:
Google Tag Manager Events werden gepusht wenn ein solches in der Cookie Gruppe definiert sind. Somit kann die gesamte Script/Cookie Steuerung über den GTM erfolgen.

Javascript and CSS:
Die Frontend Assets sind nicht minifiziert, damit diese besser gelesen und angepasst werden können. Du kannst diese einfach aus der Extension kopieren, in deinem Site Package unterbringen, anpassen und gerne auch minifizieren. Danach muss der Path nur in den Konstanten der Extension angepasst werden.

Fallback tracking iframes, tracking bilder(Pixel), noscript Tags usw. über den Cookie Manager einbinden:
Das wird nicht funktionieren, momentan werden die HTML Tags nur per javascript nachgeladen. Eine js fallback oder noscript tag über ein javascript einfügen zu lassen ist nicht die beste Idee ;).

Lokalisierung und ändern der standard Texte:
Sprachanpassungen und/oder Text änderungen können wie gewohnt über TypoScript erfolgen. Wie das geht findest du in der TYPO3 wiki

Template Änderungen:
Wenn du das Fluid Template änderst achte bitte auf die data-tags, diese müssen beibehalten werden damit die javascript Funktionalität nicht beinträchtigt wird.

Javascript events and omCookieConsent cookie (for developers):
Es gibt zwei Events welche vom Cookie Manager gefeuert werden:
cookieconsentscriptsloaded, dieses erfolgt nach dem das gesamte HTML (der ausgewählten Gruppen) hinzugefügt und die Scripte geladen sind.
cookieconsentsave,wird nach dem der nutzer eine auswahl speichert gefeuert.
im omCookieConsent Cookie sind alle aktzeptierten Gruppen aufgelistet (können über die uid identifiziert werden) und die information ob der Panel schonmal gespeichert bzw geschlossen wurden ist. Anhand der vorhandenen Gruppen und den Events wäre es z. B. möglich Google Maps iframes erst zu laden wenn entsprechende option vom Nutzer gewählt worden ist.

Evaluierung von TypoScript Konstanten (default: deaktiviert - Extension Einstellung):
Wenn diese Einstellung aktiviert ist, können innerhalb des HTML Parts von den Cookies, TypoScript Konstanten wie z. B. {$page.trackingid} verwendet werden. Damit ist die Möglichkeit gegeben eine Konfiguration über viele Domains zu verwenden aber trotzdem unterschiedliche tracking IDs zu nutzen.

Voraussetzung

  • TYPO3 7,8 oder 9 (10 folgt in kürze)
  • PHP >= 7.0 (sollte auch mit PHP 5.5 and 5.6 laufen ist aber nicht getestet)
  • Läuft im IE11 und allen modernen Browsern ;) .