Cookie Opt-In Demo

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>

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>

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>

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>