Usage in `dlh_googlemap` #251

githuppi · 2020-08-17T13:56:37Z

githuppi
Aug 17, 2020

Wie schaut es denn mit der Einbindung des Moduls dlh_googlemap für eine aktive Einwilligung aus? Mit ca. 37.000 Einbindungen ist das Modul vermutlich DIE Lösung für die Einbindung einer Google Karte in Contao. Ist in Zukunft etwas geplant um die Einwilligung über eure Cookiebar abzubilden?

Der Knackpunkt ist, dass die dlh_googlemap eigene Cookies zur Einwilligung mit sich bringt. Im Idealfall wäre es wünschenswert in der Cookiebar eine Auswahl treffen zu können, die sich auch auf diese Erweiterung auswirkt.

Habt ihr dazu was auf dem Zettel?

Answered by doishub

Jun 25, 2021

In einer der dlh-Erweiterungen wird im Template die API über folgende Zeile im HEAD platziert:

$GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?key=' . $this->map['key'] . '&language=' . $this->map['language'];

Diese müsste aus kommentiert und erst geladen werden, sofern der Cookie akzeptiert wurde:

- $GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?key=' . $this->map['key'] . '&language=' . $this->map['language'];

Initialisieren der Karte mit Berücksichtigung der akzeptierten Services:

- if(cookiebar.issetCookie(cookieId)){
-    if(window.addEvent) {
-        window.addEvent('domready', function() {
-            gmap<?= $this->map['id']; ?>_ini…

View full answer

doishub · 2020-08-17T14:12:58Z

doishub
Aug 17, 2020
Maintainer

Hallo @githuppi,

wie genau findet hier die Initialisierung der Map statt?
Sollte das in einem Template passieren, könnte man vor der Initialisierung abfragen ob der Cookie bereits akzeptiert wurde:

if(cookiebar.issetCookie(cookieId)){
  // Initialisierung
}

Grundsätzlich wollen wir mit unseren JS-Methoden so gut wie alles Kompatibel machen können. Sollte hier noch etwas benötigt werden, würde wir versuchen dies nachzureichen. Geplant ist auf jedenfall, dass wir eine weitere Methode bereitstellen, welche quasi eine Callback-Methode triggert um Skripte erst zu initialisieren, wenn die entsprechenden Cookies akzeptiert wurden.

Der Knackpunkt ist, dass die dlh_googlemap eigene Cookies zur Einwilligung mit sich bringt.

Was genau für Cookies sind das? Von Google oder verwendet die Erweiterung Cookies?

0 replies

doishub · 2020-08-17T14:27:34Z

doishub
Aug 17, 2020
Maintainer

Habe gerade mal rein geschaut. Schau mal ob du diese Zeilen entsprechend anpassen kannst.

0 replies

githuppi · 2020-08-18T06:55:29Z

githuppi
Aug 18, 2020
Author

@doishub besten Dank für die schnelle Rückmeldung ich schaue mir das an.

0 replies

githuppi · 2020-08-18T07:04:58Z

githuppi
Aug 18, 2020
Author

if(window.addEvent) { window.addEvent('domready', function() { gmap<?php $this->map['id']; ?>_initialize(); }); } else if(typeof jQuery == "function") { jQuery(document).ready(function(){ gmap<?= $this->map['id']; ?>_initialize(); }); } else { window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500); }
Führt leider zum Fehler er verhaspelt sich mit PHP und jQuery.

Prinzipiell müsste der Cookie von der Erweiterung dlh_googlemap gesetzt werden:
Name: dlh_googlemaps
Wert: ok

Ist das mittels Befehl über eigene Scripte möglich?

0 replies

doishub · 2020-08-18T07:31:37Z

doishub
Aug 18, 2020
Maintainer

Führt leider zum Fehler er verhaspelt sich mit PHP und jQuery.

Wie genau hast du die Abfrage integriert / versucht auf den Cookie zu prüfen?
Könntest du das einmal ausprobieren?

if(cookiebar.issetCookie(cookieId)){
    if(window.addEvent) {
        window.addEvent('domready', function() {
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else if(typeof jQuery == "function") {
        jQuery(document).ready(function(){
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else {
        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
    }
}

Ich denke du wirst es bereits geändert haben aber zur Sicherheit, cookieId muss gegen die ID des definierten Cookie-Typen ausgetauscht werden.

Über eigene Skripte könnte man die Initialisierung abbilden, jedoch scheint die Erweiterung die Karte mittels $this->map['id']; zu initialisieren um mehr als eine Map auf einer Seite darstellen zu können. An diese ID kommen wir in dem Context ohne weiteres nicht dran. Eine Möglichkeit wäre jedoch den Part der Initialisierung in eine Funktion zu packen und diese über ein eigenes Skript aufzurufen wenn der Cookie akzeptiert wurde.

Das Skript könnte in etwa so aussehen:

if (typeof meineNeueFunktion === "function") { 
    meineNeueFunktion();
}

Anpassungen im Template:

function meineNeueFunktion(){
     if(window.addEvent) {
        window.addEvent('domready', function() {
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else if(typeof jQuery == "function") {
        jQuery(document).ready(function(){
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else {
        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
    }
}

Grundsätzlich soll dieses Verhalten zukünftig die oben erwähnte Methode abbilden, aber vielleicht hilft es bis ich diese implementiert habe.

Code ist ungetestet ;)

0 replies

githuppi · 2020-08-18T08:38:14Z

githuppi
Aug 18, 2020
Author

if(cookiebar.issetCookie(cookieId)){
    if(window.addEvent) {
        window.addEvent('domready', function() {
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else if(typeof jQuery == "function") {
        jQuery(document).ready(function(){
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else {
        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
    }
}

Okay ich habe das so in das Template dlh_googlemap gesetzt. Und ja, es funktioniert. Ist der Cookie gesetzt wird nach einem neuen Laden der Seite die Karte angezeigt.

Besteht die Möglichkeit, dass der Aufruf der Karte direkt nach der Bestätigung klappt?

0 replies

doishub · 2020-08-18T08:46:35Z

doishub
Aug 18, 2020
Maintainer

Super, ja die Möglichkeit möchte ich mit der oben genannten Methode realisieren. So wird der Aufruf / die Initialisierung an die Methode geknüpft und automatisch ohne Reload geladen/ausgeführt. Ich schaue mal ob ich noch etwas Zeit finde um die Methode im Laufe der Woche nachzureichen.

0 replies

doishub · 2020-08-20T15:22:23Z

doishub
Aug 20, 2020
Maintainer

Die Methode steht nun ab Version 1.4.0 zur Verfügung.

In deinem Fall müsste die Initialisierung in etwa so aussehen:

-if(cookiebar.issetCookie(cookieId)){
-    if(window.addEvent) {
-        window.addEvent('domready', function() {
-            gmap<?= $this->map['id']; ?>_initialize();
-        });
-    } else if(typeof jQuery == "function") {
-        jQuery(document).ready(function(){
-            gmap<?= $this->map['id']; ?>_initialize();
-        });
-    } else {
-        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
-    }
-}

document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(cookieIdOfGoogleMaps, gmap<?= $this->map['id']; ?>_initialize);
});

Bei Bedarf kannst du auch hier eine Nachricht + Button zum akzeptieren ausgeben lassen, siehe Dokumentation.

Code ist ungetestet ;)

0 replies

doishub · 2021-06-25T09:22:09Z

doishub
Jun 25, 2021
Maintainer

In einer der dlh-Erweiterungen wird im Template die API über folgende Zeile im HEAD platziert:

$GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?key=' . $this->map['key'] . '&language=' . $this->map['language'];

Diese müsste aus kommentiert und erst geladen werden, sofern der Cookie akzeptiert wurde:

- $GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?key=' . $this->map['key'] . '&language=' . $this->map['language'];

Initialisieren der Karte mit Berücksichtigung der akzeptierten Services:

- if(cookiebar.issetCookie(cookieId)){
-    if(window.addEvent) {
-        window.addEvent('domready', function() {
-            gmap<?= $this->map['id']; ?>_initialize();
-        });
-    } else if(typeof jQuery == "function") {
-        jQuery(document).ready(function(){
-            gmap<?= $this->map['id']; ?>_initialize();
-        });
-    } else {
-        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
-    }
- }

+ document.addEventListener("DOMContentLoaded", function() {
+    cookiebar.addModule(YOUR_GOOGLE_MAPS_COOKIE_TOKEN_ID, function(){
+   	
+    	let script = document.createElement('script');
+            script.type = 'text/javascript';
+             
+        script.onload = function() {
+	    gmap<?= $this->map['id']; ?>_initialize();
+	};
+             
+        script.src = 'https://maps.googleapis.com/maps/api/js?key=<?=$this->map['key']?>&language=<?=$this->map['language']?>';
+    	document.head.append(script);
+    }, {
+        selector: '#dlh_googlemap_<?= $this->map['id']; ?>',
+        message: 'YOUT_TEXT',
+        button: {
+            show: true,
+            text: 'YOUR_BUTTON_TEXT',
+            type: 'button',
+            classes: 'my-btn'
+        }
+    });
+ });

Vielen Dank für den Hinweis @operatorone. 😊

0 replies

Total-Reality · 2023-12-12T00:32:48Z

Total-Reality
Dec 12, 2023

Hey, danke für die hilfreichen Tipps, vor allem im letzten Beitrag. Allerdings funktioniert das scheinbar nicht mehr zu 100% mit Contao 4.13.35 und der Cookiebar Version 1.13.1 oder ich mache irgendetwas falsch.

Die Karte an sich lädt und auch das Akzeptieren über die Cookiebar funktioniert. Aber es funktioniert nicht das nachträgliche Akzeptieren über den Button, wenn zuvor über die Cookiebar abgelehnt wurde.

Es kommt folgende Fehlermeldung in der DevTool Console von Chrome:

jquery.min.js,cookiebar.min.js-79b294e9.js:180 Uncaught TypeError: Cannot set properties of undefined (setting 'confirmed') at push (jquery.min.js,cookiebar.min.js-79b294e9.js:180:55) at HTMLButtonElement.<anonymous> (jquery.min.js,cookiebar.min.js-79b294e9.js:910:14)

Wenn ich dann in der JavaScript-Datei die Zeile 177 auskommentiere, dann funktioniert es (aber das kann ja nicht Sinn der Sache sein):
cookiebar.settings.cookies[cookieId].confirmed = true;

Hat zufällig noch jemand einen Tipp?

0 replies

doishub · 2023-12-12T07:01:49Z

doishub
Dec 12, 2023
Maintainer

Was für einen CookieType verwendest du um mit der addModule-Methode zu arbeiten? Sollte es ein einfacher "Hinweis" sein, versuche diesen mal auf "Benutzerdefiniert (Skript)" umzustellen.

0 replies

Total-Reality · 2023-12-12T22:35:16Z

Total-Reality
Dec 12, 2023

Hi dishub,
danke für die schnelle Antwort.

Ein Kollege hat mir geholfen, es lag daran, dass ich an der Stelle mit der ID bei YOUR_GOOGLE_MAPS_COOKIE_TOKEN_ID den Cookie-Token mit einfachen Anführungszeichen aus dem Backend eingetragen habe (also bspw. 'ga_map') und nicht die interne Contao ID, die man aus der Adresszeile des Browsers kopieren muss, in meinem Fall einfach eine 5.
Da wäre ich nie darauf gekommen, dass das damit gemeint ist. Das hat Stunden gedauert darauf zu kommen und ich bin jetzt kein Dummi, da ich selbst einige Contao-Erweiterungen programmiert habe ;)

P.S. Ich hatte Iframe gewählt. Es geht aber beides, habe es ausprobiert.

0 replies

Werbeagentur-Kopfnuss · 2024-03-13T10:11:43Z

Werbeagentur-Kopfnuss
Mar 13, 2024

Hey,

ich hatte es schon mal korrekt eingerichtet, nur bin ich gerade zu blöd, um zwei Karten mit der Erweiterung dlh_googlemap und Cookiebar anzeigen zu lassen. Es wird immer nur eine ausgegeben.
Ich habe in der Cookibar ein Element vom Cookie-Typ "iframe" und iFrame-Typ "Google Maps" eingerichtet (id=8).
Danach das Template bearbeitet "ce_dlh_googlemaps_default_de" und im Inhaltselement für die beiden Google Maps zugewiesen. Es wird aber nur eine Map ausgegeben. Was mache ich falsch?

document.addEventListener("DOMContentLoaded", function() {
	cookiebar.addModule(8, function() {
	    let script = document.createElement('script');
	   	script.type = 'text/javascript';
	             
	   	script.onload = function() {
	   		gmap<?= $this->map['id']; ?>_initialize();
		};
	             
			script.src = 'https://maps.googleapis.com/maps/api/js?key=<?=$this->map['key']?>&language=<?=$this->map['language']?>';
	    	document.head.append(script);
	}, {
    selector: '#dlh_googlemap_<?= $this->map['id']; ?>',           // [required] Defines the element selector in which the message is output
    message: 'Um die Karte anzuzeigen, akzeptieren Sie bitte die Google Maps Cookies.',           // [required] The text to be displayed
        button: {                       
            show: true,                 // Extends the output by a confirmation button,
            text: 'Google Maps Cookies akzeptieren', // Button text
            type: 'button',             // Button type
            classes: 'first second'     // Own CSS classes for the button separated by spaces
        }
    });
});

0 replies

doishub · 2024-03-13T14:54:43Z

doishub
Mar 13, 2024
Maintainer

Mit den Templates hat das erstmal nichts zu tun, da du die addModule-Methode verwendest. Ich schätze. Dein Problem liegt am Inhalt Deiner anonymen Funktion. Hier fügst du das Skript nun zweimal in den Head ein. Möglicherweise erreicht das zweite Skript niemals den onload Status, sodass deine zweite Karte nicht initialisiert wird.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Usage in `dlh_googlemap` #251

{{title}}

Replies: 14 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Usage in dlh_googlemap #251

githuppi Aug 17, 2020

Replies: 14 comments

doishub Aug 17, 2020 Maintainer

doishub Aug 17, 2020 Maintainer

githuppi Aug 18, 2020 Author

githuppi Aug 18, 2020 Author

doishub Aug 18, 2020 Maintainer

githuppi Aug 18, 2020 Author

doishub Aug 18, 2020 Maintainer

doishub Aug 20, 2020 Maintainer

doishub Jun 25, 2021 Maintainer

Total-Reality Dec 12, 2023

doishub Dec 12, 2023 Maintainer

Total-Reality Dec 12, 2023

Werbeagentur-Kopfnuss Mar 13, 2024

doishub Mar 13, 2024 Maintainer

Usage in `dlh_googlemap` #251

githuppi
Aug 17, 2020

doishub
Aug 17, 2020
Maintainer

doishub
Aug 17, 2020
Maintainer

githuppi
Aug 18, 2020
Author

githuppi
Aug 18, 2020
Author

doishub
Aug 18, 2020
Maintainer

githuppi
Aug 18, 2020
Author

doishub
Aug 18, 2020
Maintainer

doishub
Aug 20, 2020
Maintainer

doishub
Jun 25, 2021
Maintainer

Total-Reality
Dec 12, 2023

doishub
Dec 12, 2023
Maintainer

Total-Reality
Dec 12, 2023

Werbeagentur-Kopfnuss
Mar 13, 2024

doishub
Mar 13, 2024
Maintainer