oveleon/cookiebar und mehrere Iframes (Spotify)

[dazzle89]

Hallo,

ich habe eine Seite, auf der viele Podcasts eingebunden werden und diese möchte ich gerne nur bei Zustimmung laden. Die Iframes dafür sehen immer folgendermaßen aus:

<iframe style="border-radius: 12px;" src="https://open.spotify.com/embed/episode/XXXXX" width="100%" height="352" frameborder="0" allowfullscreen=""></iframe>

Normalerweise benutze ich immer die addModule-Methode, also z.B.

 // Facebook bei Zustimmung laden
	 document.addEventListener("DOMContentLoaded", function() {
		 cookiebar.addModule(7, initializeFacebook, {
			 selector: '.fb-column',           // [required] Defines the element selector in which the message is output
			 message: 'Um unseren Facebook-Feed anzuzeigen, müssen Sie die Cookies zuerst akzeptieren.',           // [required] The text to be displayed
			 button: {                       
				 show: true,                 // Extends the output by a confirmation button,
				 text: 'Lade Facebook-Feed', // Button text
				 classes: ''     // Own CSS classes for the button separated by spaces
			 }
		 });
	 });
	 function initializeFacebook(){
			(function(){
				
			var i,e,d=document,s="script";i=d.createElement("script");i.async=1;i.charset="UTF-8";
			i.src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4";
			e=d.getElementsByTagName(s)[0];e.parentNode.insertBefore(i, e);
			})();
		}

In diesem Beispiel wird aber nur EIN allgemeines Script geladen. Ich möchte stattdessen, dass bei Zustimmung ALLE Spotify-Iframes geladen werden, die jeweils ein anderes SRC-Attribut haben. Müsste ich hier mit einer Schleife in der Funktion arbeiten? Hat jemand eine Anleitung oder Tipps?

Danke im Voraus.

[Doi]

Im besten Fall legst Du Dir hier einen eigenen iFrame-Typen "Spotify" an:
https://github.com/oveleon/contao-co...TEND_IFRAME.md

Über diesen Weg kümmert sich die Cookiebar bereits darum, dass bei Zustimmung alle iFrames automatisch geladen werden.

LG Doi

EDIT:

Hier ein Auszug aus den FAQ, welcher die Vorgehensweise etwas genauer beschreibt:

Wie kann ich andere Dienste (bspw. OpenStreetMap) blocken?
Andere Dienste, welche über iFrames eingebunden werden, können ganz einfach ergänzt werden. Um einen weiteren iFrame-Typen hinzuzufügen sind zwei Schritte nötig:

Schritt 1: Ein eigenes ce_html-Template anlegen
In diesem Beispiel erweitern wir den Dienst von OpenStreetMap. Hierfür kopieren wir uns einfach das Template ce_html und benennen es in ce_html_openstreetmap um. Sofern Module ebenfalls berücksichtigt werden sollen, kopieren wir uns ebenfalls das mod_html-Template und benennen es in mod_html_openstreetmap.

Schritt 2: Neuen iFrame-Typen im Cookie-Typen iframe ergänzen
Um die Auswahl im Cookie-Typen iframe zu erweitern, können wir unseren eigenen iFrame-Typen über die config.yml-Datei wie folgt ergänzen:

...
    iframe_types: 
        openstreetmap:
          - ce_html_openstreetmap
          - mod_html_openstreetmap

Nachdem wir den Cache geleert haben, können wir nun den neuen Cookie-Typen erstellen und anschließend unseren Einbettungscode von OpenStreetMap (iFrame) in einem Content-Element HTML (oder Modul) einfügen, das neu angelegte Template auswählen und speichern.

[dazzle89]

Danke für die Antwort. Das wäre ja echt simpel, wenn das schon reicht. In meinem Fall aber leider noch nicht, die Iframes werden nicht geblockt. Ich habe das in die config.yml geschrieben:

contao_cookiebar:
    iframe_types:
        spotify: 
            - rsce_podcast.html5

Und danach den Cache geleert. Im Cookie habe ich diesen neuen Typen zugewiesen. Liegt es eventuell am Template, weil es kein reines HTML-Template ist oder nicht mit .ce_ beginnt? Da es sich um ein Rocksolid Element handelt, bin ich auf dieses Template angewiesen. In dem Template befindet sich u.a. der oben genannten Iframe-Code.

[Doi]

Am Namen des Templates sollte es erstmal nicht scheitern, sofern dieser auch so in der config.yml aufgenommen wurde.

Du konntest den neuen iFrame-Typen "spotify" bereits in deinem Cookie-Typen auswählen?
Kannst du den Inhalt des Templates einmal posten?

[dazzle89]

Ja genau, es wird im Dropdown angezeigt. Das Cookie ist vom Typ iFrame und der iframe-Typ ist "spotify".

Mein RSCE-Template:

<div class="ce_podcast">
	<div class="left">
		<h2><?php echo $this->headline; ?></h2>
		<?php echo $this->iframe; ?>
	</div>
	<div class="right">
		<h3>Beschreibung der Folge</h3>
		<div class="text">
			<?php echo $this->text; ?>
		</div>
	</div>
</div>

Der Inhalt von $this->iframe kommt aus einer Textarea, wo der Benutzer den gesamten iFrame-Code eingibt.

[Doi]

Das dürfte eigentlich funktionieren. Ist der Typ ggf. bereits aktiviert, sodass du den Unterschied nicht siehst, weil es direkt angezeigt wird?
Schau mal, ob im Frontend die iFrame-SRC irgendwas mit `cookiebar/block/...` lautet.

[dazzle89]

Ich habe schon den Browser-Cache geleert, Cookies gelöscht, alle Cookies in der Cookiebar deaktiviert, aber die Iframes sind immer sichtbar.

Im Frontend wird das ausgegeben:

<iframe style="border-radius: 12px;" src="https://open.spotify.com/embed/episode/ABCDEF?utm_source=generator" width="100%" height="352" frameborder="0" allowfullscreen=""></iframe>

[Doi]

Das sollte eigentlich keinen Unterschied machen, aber versuche bitte zum Test einmal den iFrame so wie er ist direkt im Template aufzunehmen.

[Doi]

Ansonsten hier noch ein paar Testmöglichkeiten:

• Entferne das style-Attribute aus dem iFrame / bzw. beginne mit dem src-Attribute
• Überprüfe die Feldeinstellungen des RSC-Element (Schlagwort: decode-entities); Ggf. erkennt der Regex nicht den iFrame wegen kodiertem HTML (<iframe)
• Nutze den Debugger und überprüfe, ob dein Template korrekt erkannt wird: https://github.com/oveleon/contao-co...tener.php#L120
• Überprüfe, ob in deiner YML die Templates unter deinem neuen Typen korrekt eingerückt sind

[Doi]

Hallo,
In diesem Beispiel wird aber nur EIN allgemeines Script geladen. Ich möchte stattdessen, dass bei Zustimmung ALLE Spotify-Iframes geladen werden, die jeweils ein anderes SRC-Attribut haben. Müsste ich hier mit einer Schleife in der Funktion arbeiten? Hat jemand eine Anleitung oder Tipps?

Um aber auch deine erste Frage nicht unbeantwortet zu lassen...
Jap musst du. Die Funktion wird natürlich nur einmal aufgerufen, solltest du also mehrere iFrames über die addModule-Methode aktivieren wollen, müsstest du diese hier durchlaufen.

Solltest du diesen Weg bevorzugen, würde ich es womöglich so lösen, dass ich den Kunden nur den Spotify-Link eintragen lassen würde (sollte sich der Link nicht ändern, sondern nur die Nummer, würde ich auch nur diese Abfragen) und diese im Template dann in ein data-src-Attribute schreiben. In der addModule könntest du dann einfach hingehen und alles von data-src in src schreiben lassen.

[derRenner]

contao_cookiebar:
    iframe_types:
        spotify: 
            - rsce_podcast.html5

mal ins Blaue geraten:
rsce_podcast.html5 » rsce_podcast
also ohne die Dateiendung?

[Doi]

Autsch, ja, die Dateiendung darf hier nicht mit aufgenommen werden, good catch

[dazzle89]

Ohje, so ein blöder Fehler ich würde es schon gerne ohne diese addModule Methode und Schleifen lösen. Hoffentlich reicht es, die Dateiendung zu entfernen. Ich werde es am Montag mal probieren. Vielen Dank für die Mühe!