Druckbare Version
Hallo Leute,
ich habe auf einer Seite OSM via iframe eingebunden. Nun soll das ganze noch mit einer einfachen Opt-In-Lösung verbunden werden – im Sinne von: Man sieht nur ein Bild und muss per Klick dann aktiv die Karte laden.
Hat das schon mal jemand erfolgreich umgesetzt?
Jupp mit der cookiebar von oveleon.
https://extensions.contao.org/?p=ove...bar&_locale=en
Ergänzend zur Antwort von @planepix findest Du hier eine kleine Anleitung für die Integration:
https://github.com/oveleon/contao-cookiebar/issues/32
Contao 4.9.12
Danke für die Tipps an planepix und Doi
Ich möchte ebenfalls OpenStreetMaps mit der con4gis-Erweiterung in die Cookieabfrage mit einbeziehen. Habe die templates für html_ und mod_ wie beschreiben angelegt. Nun will ich die config/config.yml entsprechend den Anleitungen ergänzen - finde aber die config/config.yml nicht. Wo finde diese Datei? In meinem config-Verzeichnis liegt nur die parameters.yml
Danke im Voraus.
Wenn die Datei nicht existiert musst Du sie anlegen.
Sollte die Installation mal von einer älteren Version von Contao 4 upgedatet worden sein, dann könnte sie auch in einem Unterordner unter app liegen. Dann am besten an die neue Stelle verschieben,
Vielen Dank. Die verwendete Contao-Installation ist kein update. Ganz neu installierte Testumgebung.
Ich war der Meinung, da in der Erweiterung ja schon die iframe-Typen "YouTube, vimeo und Google Maps" vorinstalliert sind, müsste auch eine config.yml schon exisitieren, die man dann um die gewünschten Typen ergänzt. Wie auch hier https://github.com/oveleon/contao-cookiebar/issues/32
steht: "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: ..."
Ich habe die Erweiterung nicht im Einsatz.
Normal ist in einer neuen Installation keine config.yml vorhanden und muss angelegt werden, wenn diese benötigt wird.
Die Cookiebar setzt folgende Einstellungen als Standard:Zitat:
Zitat von Alok
https://github.com/oveleon/contao-co...-configuration
Diese werden direkt in der Erweiterung verarbeitet.
Eine YML-Datei ermöglicht Dir Erweiterungen, die Du in Deinem Projekt installiert hast, zu konfigurieren oder wie in diesem Fall zu erweitern.
Jetzt sehe ich gerade, dass Du die Karte über con4gis einbindest und blocken möchtest. Hier wird der iFrame-Typ höchstwahrscheinlich nicht zum gewünschten Ziel führen, da die Karte hier über ein eigenes Skript (statt eine einfach iFrame einbindung) stattfindet.
Um beliebige Skripte zu blockieren, kannst Du die addModule-Methode der Cookiebar verwenden.
Die Initialisierung der Karte müsste hier von der Cookiebar übernommen werden statt initial gefeuert zu werden. Bedeutet, dass du in diesem Fall ausschließlich das Template, welche die Karte initialisiert, anpassen müsstest.
@Doi: Danke für die Hilfe. Habe mir die verlinkten Infos duchgelesen. Leider muss ich an der Stelle zugeben, dass meine Script-Kenntnisse nicht ausreichen, um die benötigten Änderungen in richtiger Form an der richtigen Stelle vorzunehmen. Kannst Du mir helfen?
Ja klar, kannst du mir dafür nur kurz das Template zukommen lassen (Link zum Repo reicht), welches bei Dir in Verwendung ist? Es scheint hier mehrere zu geben.
EDIT:
Es scheint doch nur das eine Template zu geben:
https://github.com/Kuestenschmiede/M...c4g_maps.html5
Außerdem wird die Initialisierung der Karte scheinbar nicht direkt in diesem Template getriggert, sondern nur Daten an das Window-Objekt übergeben, welche anschließend abgearbeitet werden.
Das verkompliziert die Sache ein wenig, sollte aber nicht unmöglich sein.
Ich schaue mir das mal genauer an, befürchte jedoch, dass nach aktivieren der Karte ein reload der Seite zwingend notwendig sein wird.
Danke für Deine schnelle Antwort und Dein Hilfsangebot. Hier das Template c4g_maps.html5
Code:<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline) {
echo '<' . $this->hl . '>' . $this->headline . '</' . $this->hl . '>';
} ?>
<?php if (!$this->mapData['mapDiv']): ?>
<div id="<?php echo 'c4g_map_' . $this->mapData['mapId'] ?>" class="c4g_map">
<div id="<?php echo 'c4g-map-container-' . $this->mapData['mapId'] ?>"></div>
</div>
<?php endif; ?>
<?php if (\Environment::get('isAjaxRequest')): ?>
<script>
window.mapData = window.mapData || {};
window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?> = <?php echo json_encode($this->mapData) ?>;
window.initMap(window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?>);
</script>
<?php else: ?>
<script>
window.mapData = window.mapData || {};
window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?> = <?php echo json_encode($this->mapData) ?>;
</script>
<?php endif; ?>
</div>
<!-- indexer::continue -->
So, ich habe mal rein geschaut und etwas gebastelt.
Dazu muss ich sagen, dass ich das Skript nicht getestet, sondern ausschließlich anhand der Gegebenheiten vorbereitet habe.
Als Basis wird folgendes Template verwendet:
https://github.com/Kuestenschmiede/M...c4g_maps.html5
In diesem Template befinden sich zwei Stellen, welche wir anpassen müssen.
a) Aufruf per Ajax
b) Direkter Aufruf
Für den Aufruf per Ajax (a), ersetzen wir folgend die Zeilen 17-19 durch folgenden Code:
Hier wird der Cookiebar eine neue Funktion bekannt gemacht, welche ausschließlich ausgeführt werden soll, wenn der Cookie-Typ mit der ID "YOUR_COOKIE_TYP_ID" akzeptiert wurde. Innerhalb dieser Funktion ist nun der Code eingebettet, welcher ursprünglich in den Zeilen 17-19 zu finden war.Code:cookiebar.addModule(YOUR_COOKIE_TYP_ID, function(){
window.mapData = window.mapData || {};
window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?> = <?php echo json_encode($this->mapData) ?>;
window.initMap(window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?>);
},{
selector: "#<?php echo 'c4g_map_' . $this->mapData['mapId'] ?>",
message: "YOUR_CONSENT_TEXT",
button: {
show: true
}
});
Für den direkten Aufruf der Karte (b) sind die Zeilen 24 und 25 relevant, welche wir nun ebenfalls ersetzen müssen:
Hier passiert im Endeffekt genau das gleiche wie im Aufruf per Ajax, außer dass die Seite anschließend neu geladen wird. Dadurch, dass wir jedoch bereits erkennen konnten, dass die Erweiterung das Initialisieren der Karte "on-the-fly" über die Methode initMap erlaubt, können wir m.E. folgende Zeile ersetzen um uns einen reload der Seite zu sparen:Code:cookiebar.addModule(YOUR_COOKIE_TYP_ID, function(){
window.mapData = window.mapData || {};
window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?> = <?php echo json_encode($this->mapData) ?>;
window.location.reload();
},{
selector: "#<?php echo 'c4g_map_' . $this->mapData['mapId'] ?>",
message: "YOUR_CONSENT_TEXT",
button: {
show: true
}
});
ersetzen durchCode:window.location.reload();
An dieser Stelle sollte nun alles korrekt geblockt werden und die Karte müsste sich nach bestätigen und ohne neu laden der Seite initialisieren.Code:window.initMap(window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?>);
Dadurch, dass wir diese Zeile nun ersetzt haben, sehen beide Aufrufe identisch aus und ermöglicht uns somit den Code zu verkleinern und auf eine gemeinsame Funktion zu referenzieren:
Beide zuvor eingebauten Skripte können nun also durch folgenden Code ersetzt werden:
Anschließend müssen wir die Funktion an einer globalen Stelle zur Verfügung stellen. Ich habe diese nun zwischen Zeile 28-29 eingebaut:Code:cookiebar.addModule(YOUR_COOKIE_TYP_ID, initMapFromCookiebar,{
selector: "#<?php echo 'c4g_map_' . $this->mapData['mapId'] ?>",
message: "YOUR_CONSENT_TEXT",
button: {
show: true
}
});
Folgende Werte müssen noch ersetzt werden:Code:function initMapFromCookiebar(){
window.mapData = window.mapData || {};
window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?> = <?php echo json_encode($this->mapData) ?>;
window.initMap(window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?>);
}
YOUR_COOKIE_TYP_ID: Die ID des Cookie-Typen auf den reagiert werden soll
YOUR_CONSENT_TEXT: Text welcher angezeigt wird, solange die Karte nicht akzeptiert wurde
Ich bin gespannt ob es funktioniert. ;)
LG Doi
EDIT:
Wir konnten das ganze nun in Kombination der beiden Erweiterungen durchtesten. Wichtig ist, dass kein reload der Seite stattfinden darf, da es logischerweise sonst zu einer Endlosschleife kommt. Hier sollte direkt die Initialisierung der Karte stattfinden:
Code:- window.location.reload();
+ window.initMap(window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?>);
Erstmal vielen Dank für Deine Mühe. Super Service. Ich werde das umsetzen gebe Dir dann noch Bescheid, wie es funktioniert hat.
Habe auch zwischenzeitlich der Küstenschmiede (con4gis) einen Link zu diesem Thema gegeben
Hallo Doi, Wie Du in #9 angegeben hast, habe ich ausschließlich das Temlate geändert, also auch kein neues Elemente in der Cookiebar-Erweiterung angelegt - ist das korrekt bis hierher?
Dann habe ich im Template die beiden ersten Scripte (Zeilen 17-19 und 24-25) getauscht. Die Karte wird wie gewünscht nicht mehr geladen. Aber es zeigt sich auch kein "YOUR_CONSENT_TEXT" und keine Möglichkeit Cookies zu akzeptieren und die Karte neu zu laden. Die Bezeichnung YOUR_COOKIE_TYP_ID habe ich nicht geändert - ist wahrscheinlich wichtig für die Funktion? Wo finde ich aber diese ID?
Wenn es hilfreich ist, kann ich Dir gerne die Einloggdaten fürs Backend senden.
Hallo Alok,
die ID referenziert auf einen von Dir angelegten Cookie-Typen. Um die ID herauszufinden, kannst du auf das (i) Icon des entsprechenden Cookie-Typen (in der Liste) klicken.
Die addModule-Methode wird somit also immer einem angelegten Cookie-Typen zugewiesen. Dadurch wird dann auch der entsprechende Punkt in der Cookiebar aufgelistet.
Für den Fall von OpenStreetMap, wäre es natürlich sinnvoll, hier einen Cookie-Typen einzurichten, welcher auch eingebundene OpenStreetMap iFrames blockiert, und zusätzlich die API Einbindung (con4gis) über die entsprechende addModule-Methode berücksichtigt. Somit würde der Benutzer nur einmal OpenStreetMap akzeptieren, egal wie diese eingebunden werden.
Um das Verhalten jedoch erst einmal zu erproben, reicht es einen "leeren" Cookie-Typen vom Typ "Benutzerdefiniert (Skript)" mit dem Namen OpenStreetMap o.ä. anzulegen und diese ID entsprechend in der addModule-Methode anzugeben.
Sollte dieser Cookie-Typ dann in der Cookiebar akzeptiert werden, wird auch die addModule-Methode gefeuert und die Karte entsprechend initialisiert.
Das der Text "YOUR_CONSENT_TEXT" noch nicht in das DIV geladen wird, könnte an einem kleinen Fehler in meinem Vorschlag liegen. Hier fehlt im selector-Paramter die Raute (#) um auf die ID des DIVs zu referenzieren :rolleyes:
Ich passe meinen Beitrag gleich entsprechend an.Code:selector: "#<?php echo 'c4g_map_' . $this->mapData['mapId'] ?>",
Schau mal ob es mit diesen Anpassungen funktioniert. Sollte es noch Probleme geben, kannst du mir gerne kurz die Zugangsdaten per PN schicken und ich schaue sobald ich Zeit habe mal rein.
Es funktioniert. Vielen Dank für die große Hilfsbereitschaft von Dir, Doi. Und wirklich sehr schnell erledigt.
Hallo Leute,
vielen Dank erstmal für diesen Thread, ich habe nämlich auch dieses Problem. Mit oben beschriebener Anleitung habe ich es auch nicht hinbekommen, da wurde die Map gar nicht mehr angezeigt (Fehlermeldung Konsole: cookiebar is undefined.
Nach einer Suche zum Thema addModule habe ich cookiebar.addModule... mit einem EventListener umschlossen. Jetzt sehe ich Text und Button, die Map wird aber bei Cookie-Zustimmung nicht geladen.
Contao 4.9.16 (Update, nicht neu mit 4.9 aufgesetzt)
Contao Cookiebar 1.9.2
con4gis-Maps 8.0.16
Aktueller Stand: Ich habe
- einen leeren Cookie-Typ angelegt (Benutzerdefiniert(Script))
- das Template c4g_maps.html5 wie oben beschrieben angepasst und
- die Cookie-ID an den entsprechenden Stellen in den Code im Template eingefügt
- nach Misserfolg den EventListener eingefügt, der die Funktion initMapFromCookiebar aufruft.
Vielleicht kann mir jemand helfen
Hallo jula,
die Map hast du aber ohne Cookiebar schon mal angezeigt bekommen?
EDIT: Bekommst du nach dem "akzeptieren" Fehler in der Konsole?
Hallo Doi,
danke für deine rasche Antwort.
Nach Klick auf den Akzeptieren-Button wird in der Konsole (Edge) Folgendes angezeigt:
c4g-maps.js:2 Uncaught TypeError: Cannot read property 'empty' of null
at window.initMap (c4g-maps.js:2)
at initMapFromCookiebar (map.html:175)
at jquery.min.js,mootools.min.js,mobile-menu.jquery.min.js,cookieba...-e70f21d9.js:6
at Array.forEach (<anonymous>)
at g (jquery.min.js,mootools.min.js,mobile-menu.jquery.min.js,cookieba...-e70f21d9.js:6)
at HTMLButtonElement.<anonymous> (jquery.min.js,mootools.min.js,mobile-menu.jquery.min.js,cookieba...-e70f21d9.js:6)
window.initMap @ c4g-maps.js:2
initMapFromCookiebar @ map.html:175
(anonymous) @ jquery.min.js,mootools.min.js,mobile-menu.jquery.min.js,cookieba...-e70f21d9.js:6
g @ jquery.min.js,mootools.min.js,mobile-menu.jquery.min.js,cookieba...-e70f21d9.js:6
(anonymous) @ jquery.min.js,mootools.min.js,mobile-menu.jquery.min.js,cookieba...-e70f21d9.js:6
Die Map wird nach manuellem Reload korrekt angezeigt, aber die Initialisierung im Template passt nicht.
Hier das Template c4g_maps.html5
Ich steh irgendwie auf der Leitung. Wäre super, wenn du mir helfen könntest.Code:<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline) {
echo '<' . $this->hl . '>' . $this->headline . '</' . $this->hl . '>';
} ?>
<?php if (!$this->mapData['mapDiv']): ?>
<div id="<?php echo 'c4g_map_' . $this->mapData['mapId'] ?>" class="c4g_map">
<div id="<?php echo 'c4g-map-container-' . $this->mapData['mapId'] ?>"></div>
</div>
<?php endif; ?>
<?php if (\Environment::get('isAjaxRequest')): ?>
<script>
document.addEventListener("DOMContentLoaded", function() {
cookiebar.addModule(5, initMapFromCookiebar,{
selector: "#<?php echo 'c4g_map_' . $this->mapData['mapId'] ?>",
message: "Der Anfahrtsplan (OpenStreetMap) wird direkt von einem Server geladen, der sich in der EU befindet. Für die Anzeige wird Ihre IP-Adresse an den Server übertragen.",
button: {
show: true
}
});
});
</script>
<?php else: ?>
<script>
document.addEventListener("DOMContentLoaded", function() {
cookiebar.addModule(5, initMapFromCookiebar, {
selector: "#<?php echo 'c4g_map_' . $this->mapData['mapId'] ?>",
message: 'Der Anfahrtsplan (OpenStreetMap) wird direkt von einem Server geladen, der sich in der EU befindet. Für die Anzeige wird Ihre IP-Adresse an den Server übertragen.',
button: {
show: true, // Extends the output by a confirmation button,
text: 'Akzeptieren und laden', // Button text
type: 'button', // Button type
}
});
});
</script>
<?php endif; ?>
<script>
function initMapFromCookiebar() {
window.mapData = window.mapData || {};
window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?> = <?php echo json_encode($this->mapData) ?>;
window.initMap(window.mapData<?php echo '['.$this->mapData['mapId'] . ']' ?>);
}
</script>
</div>
<!-- indexer::continue -->
Hallo jula,
da ich gerade nicht wirklich sehen kann, was den Fehler verursacht, bräuchte ich am besten Mal einen Link.
Ich habe gerade leider nicht ganz so viel Zeit, aber wenn ich etwas Luft habe kann ich gerne mal rein schauen.
Am besten meldest Du Dich für Unterstützung noch einmal über unser Kontaktformular.
Hallo Doi,Zitat:
Zitat von Doi
der Fehler scheint mir laut Stack-Trace eher im Code von Maps zu liegen. Da dieser minified und uglified ist, dürfte es schwierig sein den so zu lösen. Lokal konnte ich den Fehler leider nicht nachstellen.
Jetzt haben ich die Cookiebar direkt in Maps implementiert. Die Version sollte heute noch kommen.
Dafür muss dann lediglich im Kartenprofil unter Experteneinstellung das "Consent-Banner" aktiviert, ein "Consent-Text" eingegeben und beim "Cookie-Wert" die Id des Cookies eingegeben werden.
Ich hätte nochmal eine Frage zur JS-API der Cookiebar. Die Funktion issetCookie wertet, beim Übergeben der Datensatz-Id aus, ob der Cookie gesetzt wurde, beim Übergeben eines Tokens scheint der mir lediglich auszuwerten, ob es den Token gibt, nicht ob er auch bestätigt wurde. Das hat mich vom Handling etwas verwirrt. Ist das so gewünscht?
Es wird durchaus geprüft, ob der Token / die ID bereits akzeptiert wurde. Die issetCookie-Methode prüft allerdings nur den aktuellen Status beim Aufruf. Wird die Methode also verwendet, um beim betreten der Seite etwas auszuführen, muss der Cookie bereits zuvor aktiviert worden sein. Vielleicht kam der Effekt dadurch? Ansonsten könnte ich mir noch vorstellen, dass der Token ggf. nicht als String übergeben wurde?Zitat:
Zitat von coastforgefsc
Für die dynamische Variante empfehle ich die Implementierung über die addModule-Methode. Diese wird automatisch ausgeführt, wenn der Cookie bereits akzeptiert wurde (bspw. beim betreten der Seite) und auch wenn die Cookiebar live auf der Seite betätigt wird.
LG Doi
Ich hab die addModule-Funktion mit einem Token-String aufgerufen und da der dann nicht numerisch war, ist der in die folgende Schleife reingegangen und obwohl ich gerade zuvor noch die localstorage gelöscht hatte, war in cookiebar.settings.cookie der Cookie mit dem Token drin.Zitat:
Zitat von Doi
Code:for(cookieId in cookiebar.settings.cookies){
if(null !== cookiebar.settings.cookies[cookieId].token && cookiebar.settings.cookies[cookieId].token.indexOf(varCookie) !== -1){
return true;
}
}
Danke erstmal an Doi und coastforgefsc fürs Kümmern!
Ich habe inzwischen das Map-Paket aktualisiert und im Kartenprofil das Consent Banner wie beschrieben aktiviert sowie die Cookie-ID angegeben. Dann habe ich mit dem Originaltemplate getestet, was nicht funktioniert hat. Die Map sehe ich inzwischen gar nicht mehr, auch bei Zustimmung.
Vorsichtshalber werde ich das alles bei einer originalen 4.9 Installation noch mal probieren.
Hast du da zufällig in der Browser-Konsole einen Fehler?Zitat:
Zitat von jula
Genau, so sollte es sein.Zitat:
Zitat von coastforgefsc
Das dürfte eigentlich gar nicht möglich sein.Zitat:
Zitat von coastforgefsc
Wenn die localStorage leer ist, legt die Cookiebar nach erneutem Aufruf ausschließlich eine "leere Hülle" an:
Erst bei erneutem speichern / betätigen der Cookiebar wird die localStorage befüllt.Code:objStorage = {
configId: cookiebar.settings.configId,
pageId: cookiebar.settings.pageId,
version: -1,
saved: -1,
cookies: []
};
Wie angekündigt habe ich die Einbindung der Contao Cookiebar im Zusammenspiel mit con4gis-Maps bei einer ganz frischen Contao 4.9-Installation ausprobiert. Das hat mit der von coastforgefsc erwähnten Änderung - Consent Banner Angaben im Kartenprofil - super funktioniert.
Ich werde die auf Contao 4.9. aktualisierte Website, die die Probleme verursacht hat, mit Contao 4.9 nochmal frisch aufsetzen, dann sollte es dort auch klappen.
Vielen Dank an Doi und coastforgefsc für die Unterstützung!
Kleiner Nachtrag zur Info: Nachdem ich dasselbe Problem bei einer Website hatte, die im Mai mit Contao 4.9.? aufgesetzt und später auf 4.9.16 aktualisiert wurde, habe ich diese nochmal ganz frisch mit Contao 4.9.16 erstellt. Keine Änderung, das Problem bestand noch immer.
Dann habe ich die Einstellungen mit einer (der einzigen) Website verglichen, bei der es funktioniert hat. Und siehe da: das Laden der MooTools ist der Übeltäter. Sind diese geladen, habe ich beim Zusammenspiel von Contao Cookiebar und der con4gis Map nur Probleme. Auf die Map alleine haben die MooTools keine Auswirkungen gehabt, das habe ich vor Installation der Cookiebar getestet.
Im Jahr 2021 gibt es keinen Grund mehr, ein veraltetes Framework wie Mootools zu nutzen. Aber schön, dass Du das auch herausgefunden hast.
Hallo jula,Zitat:
Zitat von jula
danke für deinen Nachtrag.
Ich habe das Ganze einmal in einer frischen Contao Installation getestet, in der ausschließlich die Cookiebar installiert ist. Leider kann ich das Problem nach aktivieren von MooTools nicht reproduzieren. Auch die Templates wie "moo_accordion" etc. machen alle keine Probleme.
Bindest du vielleicht ein weiteres Plugin ein, welches auf MooTools basiert?