Cookie Consent Extension
Extension von mindshape mindshape_cookie_consent
Die Extension von mindshape bietet eigentlich alles was man braucht (Ab Version 9).
Im BE-Modul kann man alle Einstellungen für verschiedene Cookies vornehmen und die FE-Ausgabe anpassen.
In der Sites-Configuration muß ein Route-Enhancer hinzugefügt werden:
routeEnhancers: PageTypeSuffix: type: PageType default: '' index: 'index' map: 'cookie.json': 8641
Aufrufen der Anwendung im FE für google Analytics
Als Beispiel wird hier google analytics aufgeführt. Das ganze geht aber auch für google maps.
window.analyticsLoaded = false; window.addEventListener('cookieConsent', function (event) { if (event.detail.hasOption('google_analytics')) { if (false === window.analyticsLoaded) { // load analytics window.analyticsLoaded = true; } } else { // do not load analytics } });
Aufrufen der Anwendung im FE für google Maps
Je nach Zustimmung zum Cookie wird die Karte ausgegeben oder anstatt dessen ein Link zu den EInstellungen, damit man das Cookie aktivieren kann.
Wichtig ist hier der korrekte Name des identifiers (google_maps), der im BE-Modul gesetzt wird.
<div id="maps"></div> <script> var htmliframe='<iframe src="https://www.google.com/maps/embed?your_code" width="100%" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>'; var nomaps='<p style="border: 1px solid white; width:50%; height:200px; align: center; padding:20px; text-align: center;"><b>Google Maps konnte nicht geladen werden. Bitte ändern sie die Cookie-Einstellungen:</b><br /><br /><input type="button" onclick="document.getElementById(\'cookie-consent\').style.display = \'block\';" value="Einstellungen öffnen" style="color: black;"></p>'; window.mapsLoaded = false; window.addEventListener('cookieConsent', function (event) { if (event.detail.hasOption('google_maps')) { if (false === window.mapsLoaded) { // load maps document.getElementById('maps').innerHTML=htmliframe; window.mapsLoaded = true; } } else { document.getElementById('maps').innerHTML=nomaps; } }); </script>
Aufrufen der Anwendung im FE mit FLUID
<m:consent identifier="google_maps" scripts="{ googleMaps: '{ src: \'//maps.googleapis.com/maps/api/js?key={apikey}\', async: 1, defer: 1 }' }"> <div id="maps"></div> </m:consent> <script type="text/javascript" data-ignore="1"> window.addEventListener('googleMaps', function () { // initialize google Maps }); </script>