Google Map mit Kick Consent Manager

Hallo,

ich muß eine Google Map auf einer Seite einbauen.

Um eine Einverständniserklärung vom Kunden zu bekommen, dass die Karte geladen werden darf würde ich den Kick Content Manager benutzen.

Leider weiß nicht wie ich daran gehen muß.

Welche Scripts ich hinterlegt muß, und wie ich dafür sorge die Zustimmung zu bekommen, bevor der Kunde die Karte läd.

Har jemand einen Tipp oder dies sogar schon einmal gemacht?

Der KCM ist ja schon installiert, und daher würde ich ihn gerne benutzen.

Über den Kick Consent Manager hätte ich auch die Möglichkeit gleich beim Start der Seite die Zulassung von Google Maps zur Verfügung zu stellen

Danke Pascal,

werde ich mal so ausprobieren und auf Google Maps umbasteln.

Wollte die Map auch über iFrame einbinden.

Die Map ist noch nicht eingebaut, soll aber hier erscheinen: https://www.lr-finanzkonzepte.de/ueber-uns

VG Dirk

Bin mit Nils schon in Kontakt.

Würde erst mal gerne versuchen die Lösung selber zu erarbeiten. Dabei lerne ich am meisten.

So habe ich es jetzt eingerichtet. Funktioniert aber noch nicht. Könnt ihr mir sagen wo der Fehler ist.

Die Einbettung der Map

Der Service in KCM

Das Script in KCM

Die Einbettung der Map habe ich angepasst

Also der Service funktioniert, heißt wenn ich Google Maps über das Cookie-Banne erlauben wird die Karte angezeigt.

Aber der Button funktioniert nicht.

So sieht der Code aus:

Habe den Fehler gefunden:

Hallo Pascal,

es hat jetzt alles funktioniert, bis auf das Ausblenden des Button nach Aktivierung der Google Map.

Unser Team aus Hamburg für Ihre Finanzberatung

Zitat von kitepascal

Hast du mal einen Link zur Seite, wo die Karte eingenbunden ist?

Sind es mehrere?

Geschieht die Einbindung per iframe?

Am Beispiel von YouTube

1) HTML:

Code

<iframe class="ytbe" data-src="https://www.youtube-nocookie.com/embed/khswDvGwXuY" frameborder="0" width="530" height="298" allowfullscreen="allowfullscreen" allow="autoplay; encrypted-media" data-service="youtube" data-managed="kick-kcm"></iframe>


<button class="kcm-yt" onclick="window.KICK_KCM.triggerServiceOptIn('youtube')">Lade YouTube Video</button>

2) Service mit Alias youtube anlegen.

3) Script für den YouTube Service anlegen mit Code:

Code

let ytvid= document.querySelectorAll(".kcm-yt");
if (ytvid) {
ytvid.forEach(el => el.remove());
}

Das Snippet sorgt dafür, dass der Opt-in <button> nach Aktivierung des Services über die Klasse .kcm-yt ausgeblendet wird.

Fertig schaut's so aus:

https://website-bereinigung.de…date-wird-nicht-angezeigt

Das kannst du dir auf Google Maps ummodeln - bei Problemen gern melden.

Gruß

Pascal

Alles anzeigen

Danke, werde ich morgen gleich ausprobieren.

Wegen der Gestaltung der Button muß ich mich an die Vorgaben des Kunden halten, werde das aber noch mal vorschlagen.

Zitat von kitepascal

Probiers mal mit ohne Leerzeichen - so verkettet man mehrere Klassen des selben Elements:

HTML:

class="button kcm-gm"

JavaSript:

let goomap= document.querySelectorAll(".button .kcm-gm");

let goomap= document.querySelectorAll(".button.kcm-gm");

Ich find der Button geht optisch leicht unter - mit einem Map ähnlichen Button Hintergrundbild, etwas mehr Fläche einnehmend, ließe sich das noch aufpeppen.

Alles anzeigen

Hat alles funktioniert. Danke an alle