Cookie OptIn Dialog öffnen

Damit alle Beispiele richtig dargestellt werden, dürfen Sie die externen Inhalte nicht akzeptieren. Klicken Sie den Link auf der rechten Seite an und schließen Sie dabei die externen Inhalte aus. Speichern Sie danach und laden die Seite neu.

Auf der rechten Seite sehen Sie den Quellcode, der den Link produziert.

<button class="btn btn-md btn-primary" type="button" onclick="SgCookieOptin.openCookieOptin(); 
return false;">Cookie Optin Dialog öffnen</button>

Externe Inhalte freigeben

Das ist ein YouTube Video. Sie können es noch nicht sehen, da es aus einer externen Quelle kommt, die potentiell Cookies setzen könnte. Es wird deshalb vom Cookie OptIn Plugin registriert und durch eine Cookie OptIn Box ersetzt. Nur nach Ihrer Einwilligung wird das Video angezeigt.

Wenn Sie den Quellcode genau betrachten, sehen Sie, dass die Quelle des Videos von der Domain youtube-nocookie.com kommt. Das ist eine spezielle Domain von Google, die keine Cookies setzt, solange man nicht auf den Spielen-Button klickt. Daher kann man in diesem Fall für eine bessere Bedienbarkeit auf die OptIn Box verzichten.

<iframe 
width="560" height="315" 
src="https://www.youtube-nocookie.com/embed/5J3-W28gMlo" allowfullscreen 
data-consent-description="Ein wenig Zusatzbeschreibung" >
</iframe>

Die OptIn Box schalten Sie aus, indem Sie einfach das data-iframe-allow-always="1" Attribut setzen. Das wird dem Cookie OptIn Skript sagen, dass dieses Element immer angezeigt werden soll. Das Gleiche können Sie auch mit der CSS-Klasse frame-external-content-protection erreichen. Das ist die Frame-Klasse, die Sie im Reiter Erscheinungsbild bei jedem Inhaltselement setzen können. Mehr darüber erfahren Sie in unserer  Dokumentation.

<iframe 
width="560" height="315" 
src="https://www.youtube-nocookie.com/embed/5J3-W28gMlo" allowfullscreen 
data-consent-description="Ein wenig Zusatzbeschreibung" data-iframe-allow-always="1">
</iframe>

Design externer Inhalte

Sie haben die Möglichkeit anstatt der grauen Box ein benutzerdefiniertes Hintergrundbild als Ersatz für externe Inhalte festzulegen. Das können sich entweder global im Backend einstellen oder Sie nutzen wie in diesem Beispiel das spezielle Attribut data-sg-cookie-op-n-background-image.

<iframe
width="560" height="315" 
src="https://www.youtube-nocookie.com/embed/5J3-W28gMlo" allowfullscreen 
data-sg-cookie-optin-background-image="/fileadmin/demo/PANO_20160517_123708.jpg">
</iframe>

Aber lässt sich beispielsweise für YouTube Videos ein komplett anderes Design erstellen, als für alle anderen externen Inhalte? Und kann das Vorschaubild eines Videos auch als Hintergrundbild für die Ersatzbox genutzt werden?

Ja, das alles (und noch mehr) ist möglich! Dafür müssen Sie einen YouTube-Service im Cookie Opt-In Modul hinzufügen. Dort können Sie dann ein benutzerdefiniertes Template erstellen, damit die Schaltflächen anders aussehen. Dann muss man dem Cookie Opt-In vermitteln, welche Elemente zu dem Service gehören. Das geht entweder mit dem Atribut data-sg-cookie-optin-service, den Sie auf den Service-Identifikator setzen. Auf diese Weise wird ein bestimmtes Inhaltselement explizit dem Dienst zugeordnet, sodass dann wird die Dienstvorlage verwendet wird.

Wenn das automatisch passieren soll, können Sie das Feld source_regex verwenden und es auf youtube(.*)\.com setzen. Dieser reguläre Ausdruck wird dann mit der Quelle aller potenziellen externen Inhalte abgeglichen, und wenn er übereinstimmt, wird ihnen automatisch der Dienst zugewiesen. 

Wenn der externe Inhalt ersetzt wird, wird ein Ereignis ausgelöst, damit die Seite weiß, dass das geschehen ist. Das ermöglicht es, ein JavaScript-Snippet hinzuzufügen, das ausgelöst wird, wenn dieses Ereignis eintritt, in dem der letzte knifflige Teil ausgeführt wird – wir erhalten die ID des YouTube-Videos aus der Quelle und automatisch die URL des Thumbnails. Dieses Thumbnail wird dann zum Hintergrundbild des Feldes für den Ersatz externer Inhalte. Und schon haben wir eine vollständig dynamische und angepasste Vorlage, die speziell für die genutzten YouTube-Videos erstellt wurde! Beachten Sie bitte, dass es wichtig ist, dass das JavaScript-Snippet zur Ereignisbehandlung vor dem entsprechenden externen Inhaltselement im HTML-Quelltext geladen wird.

<script data-ignore="1">
  document.addEventListener('beforeExternalContentReplaced', function(event) {
    try {
      if (event.detail.service !== undefined && event.detail.service == SgCookieOptin.jsonData.mustacheData.services.youtube) {
        var url = event.detail.externalContent.src.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
        var youtubeId = (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
        // Youtube bietet eine Reihe von verschiedenen Miniaturbildern an. Sie können wählen zwischen:
        // maxresdefault.jpg, hqdefault.jpg, sddefault.jpg, 0.jpg, 1.jpg, 2.jpg, 3.jpg
        var thumbnailUrl = 'https://img.youtube.com/vi/' + youtubeId + '/hqdefault.jpg';
        event.detail.container.style.backgroundImage = 'url(' + thumbnailUrl + ')';
        event.detail.container.style.backgroundSize = 'contain';
      }
    } catch (e) {
      // Feher ignorieren
    }
  });
</script>
<iframe
        width="560" height="315" 
        src="https://www.youtube-nocookie.com/embed/5J3-W28gMlo" allowfullscreen
        data-sg-cookie-optin-service="youtube">
</iframe>

Inhaltselemente schützen

Auch der umgekehrte Fall kann eintreten, wobei Elemente persönliche Daten im Hintergrund speichern, jedoch nicht vom Cookie OptIn Skript erkannt werden. Das können zum Beispiel Bilder sein, die über PHP generiert werden und sogar Cookies setzen. Dafür haben wir eine ähnliche Lösung: Sie können entweder das Attribut data-external-content-protection direkt ins HTML setzen oder im Reiter Erscheinungsbild eines Inhaltselementes External Content wählen.

<div style="height: 110px;" class="frame-external-content-protection">
  Das ist ein Element was potenziell persönliche Daten speichern könnte.
</div>
Das ist ein Element, was potenziell persönliche Daten speichern könnte.

Das ist zum Beispiel sehr praktisch für Google Maps oder weitere komplexe Elemente, die man mit JavaScript einbinden kann. In diesem Beispiel haben wir die Frame-Klasse aus dem TYPO3 Backend benutzt.

Externe Inhalte nach dem Laden bearbeiten

Wenn Sie den Quellcode genau betrachten, sehen Sie, dass wir die Höhe des Elementes explizit auf 110 px eingestellt haben. Sonst wäre es zu klein ist für die OptIn Box. Wir möchten jedoch nicht, dass das Inhaltselement so viel Platz einnimmt, nachdem wir es auf der Seite geladen haben. Wir müssen dementsprechend das Element nach dem Laden bearbeiten, sodass es sich ins Design einfügt. Dafür verwenden wir die API-Funktion SgCookieOptin.addAcceptHandlerToProtectedElements.

Als ersten Parameter übergeben wir die Callback-Funktion und als zweiten Parameter den CSS Selector, der das Element eindeutig anspricht. Das wird unser Element aus der Stack mit den ersetzten externen Inhalten holen und unsere Callback-Funktion als EventListener anhängen. Wenn das Element geladen wird, wird die Funktion ausgeführt.

In der Callback-Funktion selbst haben wir den Parameter/das Event, das die Eigenschaft externalContent hat, dort liegt unser Element. Wir sprechen dann diese Eigenschaft an und setzen die Höhe wieder auf "auto" und aus Spaß machen wir den Text grün. Klicken Sie darauf und schauen Sie was passiert.

<div id="external-content-to-edit" style="height: 100px;" class="frame-external-content-protection">
  Das ist ein Element was potenziell persönliche Daten speichern könnte.
</div>
<script>
  function doAfterLoad(event) {
    event.detail.externalContent.style.height = 'auto';
    event.detail.externalContent.style.color = '#629755';
  }
  SgCookieOptin.addAcceptHandlerToProtectedElements(doAfterLoad, '#external-content-to-edit');
</script>
Das ist ein Element, was potenziell persönliche Daten speichern könnte.

Cookie Opt-In Extension für TYPO3

Eine Lösung zur optionalen Cookie- und Script-Einbindung im Einklang mit DSGVO (GDPR) und ePrivacy – Konnten Sie sich bereits von unserer Extension überzeugen oder benötigen Sie weitere Informationen?