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>