Cookie Opt-In Demo für Entwickler

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>

Wenn Sie möchten, dass Ihre externen Inhaltselemente ein kreativeres Aussehen haben als die typische graue Box, können Sie ein benutzerdefiniertes Hintergrundbild für sie festlegen. Sie können dies entweder global im Backend einstellen oder das spezielle Attribut data-sg-cookie-optin-background-image wie in diesem Beispiel verwenden.

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

Aber könnten wir das noch weiter treiben? Könnten wir ein völlig anderes Design für unsere YouTube-Videos haben als für den Rest des Inhalts? Und vielleicht sogar so, dass wir automatisch das Vorschaubild eines jeden YouTube-Videos erhalten und es als Hintergrund für die Ersatzbox verwenden? Damit die Nutzer eine Vorstellung davon bekommen, was kommt, nachdem sie ihre Zustimmung gegeben haben?

Ja, das können wir! Dazu müssen wir zunächst einen YouTube-Service im Backend erstellen. Dort können wir eine benutzerdefinierte Vorlage einstellen, damit die Schaltflächen anders aussehen. Dann müssen wir dem Cookie Opt-In irgendwie mitteilen, welche Elemente zu diesem Service gehören. Das können wir entweder mit dem data-sg-cookie-optin-service-Attribut machen und es auf den Service-Identifikator setzen. Auf diese Weise ordnen wir dieses Inhaltselement explizit dem Dienst zu, und dann wird die Dienstvorlage verwendet.

Wenn wir dies automatisch tun wollen, können wir 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, lösen wir ein Ereignis aus, damit die Seite weiß, dass dies geschehen ist. Dies ermöglicht es uns, ein JavaScript-Snippet hinzuzufügen, das ausgelöst wird, wenn dieses Ereignis eintritt, in dem wir den letzten kniffligen Teil ausführen - 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 die Ersetzung externer Inhalte. Und schon haben wir eine vollständig dynamische und angepasste Vorlage, die speziell für unsere YouTube-Videos erstellt wurde! Beachten Sie, dass es wichtig ist, dass das JavaScript-Snippet zur Ereignisbehandlung vor dem entsprechenden externen Inhaltselement im HTML-Quelltext geladen wird.

<script>
  document.addEventListener('beforeExternalContentReplaced', function(event) {
    try {
      if (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 = 'http://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>

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>