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!

[kinomaniac]

Ich habe gerade ein ähnliches Problem mit Spotify. Erst hatte ich klassisch versucht, den iframe über ein eigenes HTML-Template zu blocken. Da das alles nicht funktionierte, habe ich es analog zu diesem Thread versucht und ein Custom-Element angelegt, welches nur die URL des Frame aufnimmt und im Template (rsce_spotify.html5) ausgibt:

<div class="ce_spotify col-12 align-center">
	<iframe src="<?php echo $this->iframe; ?>" width="100%" height="450"></iframe>
</div>

In der config.yml ist folgendes eingetragen:

contao_cookiebar:
  consider_dnt: false
  anonymize_ip: false
  consent_log: false
  lifetime: 63072000
  storage_key: ccb_contao_token
  page_templates:
    - fe_page
  iframe_types:
    youtube: 
      - ce_youtube
    vimeo: 
      - ce_vimeo
    googlemaps:
      - ce_html_googlemaps
      - mod_html_googlemaps
    spotify:
      - rsce_spotify

Bei der Konfiguration der Cookiebar kann ich Spotify auch als iframe-Type auswählen.

Caches sind alle gelöscht – leider wird der iframe nicht geblockt....
Contao 5.3.15 Cookiebar 2.1.7

[zoglo]

Schau hier:
https://community.contao.org/de/show...icht-blockiert

Bei RSCE noch ce_ oder mod_ davor

[kinomaniac]

das wars, danke!

[Thomas Pyrin]

Ich hab folgendes in der /config/config.yml

contao_cookiebar:
    iframe_types:
        Spotify: 
            - ce_html_spotify

den Iframe-Type im Backend in den Cookiebar-Einstellungen anlegen und zuweisen

dann habe in einer Artikel-Spalte ein neues HTML-Element erstellt und wollte diesem das Template

ce_html_spotify.html

zuweisen - bekomme das Template in der Liste gar nicht angezeigt.

Was mache ich noch falsch?


Danke

[dazzle89]

Ich hab folgendes in der /config/config.yml

contao_cookiebar:
    iframe_types:
        Spotify: 
            - ce_html_spotify

den Iframe-Type im Backend in den Cookiebar-Einstellungen anlegen und zuweisen

dann habe in einer Artikel-Spalte ein neues HTML-Element erstellt und wollte diesem das Template

ce_html_spotify.html

zuweisen - bekomme das Template in der Liste gar nicht angezeigt.

Was mache ich noch falsch?


Danke

Hast du evtl. den Cache nicht geleert?

[Thomas Pyrin]

doch, schon mehrfach (und das nervt, weil das immer so lange dauert )

ce_html.png

Ich bekomme in dem Inhaltselement einfach nicht das Template ce_html_spotify zugewiesen,
was aber in meinem Template-Ordner liegt:

ce_html_spotify.html5

[dazzle89]

Du schreibst oben, dass die Datei die Endung .html hat, dann heißt es aber .html5

Welche ist nun? Ich denke, es muss .html5 sein

Ansonsten habe ich leider keine Idee

[Thomas Pyrin]

Anderer Versuch:

ich habe das Template in den Templater-Ordner

/content_element/ce_html_spotify.html.twig

kopiert

mit dem Code:

{% extends "@Contao/content_element/html.html.twig" %}

{% block html %}
  {{ html|raw }}
{% endblock %}

aber auch da erscheint das Template nicht in der Select-Liste

- - - Aktualisiert - - -

Du schreibst oben, dass die Datei die Endung .html hat, dann heißt es aber .html5

Welche ist nun? Ich denke, es muss .html5 sein

Ansonsten habe ich leider keine Idee

Ja, war ein Tipp-Fehler, ich hatte erst .html5

[Thomas Pyrin]

ich habe die config.yml

mal auf das Standard-Element verändert:

contao_cookiebar:
iframe_types:
Spotify:
- ce_html

Das funktionierte ... ich will aber nicht alle ce_html Elemente von der Cookie-Bar blockieren, ich benötige schon ein eigenes Template

[Thomas Pyrin]

so, nach einigem Hin- und Her:

die Kopie des ce_html musste abgelegt werden unter:

templates/content_element/html/ce_html_spotify.html.twig

(also nicht unter dem im Theme angegebenem Template-Ordner - eine Ebene höher)

und die config.yml musste auch angepasst werden auf:

contao_cookiebar:
    iframe_types:
        Spotify:
            - content_element/html/ce_html_spotify

dann klappt es bei mir.

[Spooky]

so, nach einigem Hin- und Her:

die Kopie des ce_html musste abgelegt werden unter:

templates/content_element/html/ce_html_spotify.html.twig

(also nicht unter dem im Theme angegebenem Template-Ordner - eine Ebene höher)

und die config.yml musste auch angepasst werden auf:

contao_cookiebar:
    iframe_types:
        Spotify:
            - content_element/html/ce_html_spotify

dann klappt es bei mir.

Hast du das Template wirklich "ce_html_spotify.html.twig" benannt? Das wäre ein komischer Mix aus Alt & Neu. Wie hier erwähnt würde templates/content_element/html/spotify.html.twig eher dem Standard entsprechen.