Platzhalter nach Script Anpassung
- Karl Horstmann
Häufig verursacht das Anpassen des Scripts keine Probleme, solange das angepasste Skript kein Visuelles Element auf der Seite ist (bsp. Google Analytics).
Bei der Anpassung von visuellen Elementen wie YouTube besteht dann aber das Problem, dass ein Content Block auf der Seite fehlt. Damit dieses Problem gelöst wird nutzten wir Platzhalter, welche dem Nutzer zeigen, was hier eigentlich dargestellt werden soll.
Wir teilen die Bereiche in einen JavaScript, HTML und Styling Part auf.
1. Skript Part
Der erste Block besteht aus einem normalen script Tag, welches den passenden data-cookieconsent Wert für den Service hat. In unserem Beispiel ist es Google Maps. Dieses ordnen wir der Kategorie preferences zu.
Dieses Skript hat den type="text/plain" welches vom Browser nichts als JavaScript erkannt wird und deswegen nicht ausgespielt wird.
Sobald die Zustimmung für den Service gegeben wird, ändert sich der type und das JavaScript in den Klammern wird ausgeführt.
In unserem Beispiel wird dann das Google Maps iframe in eine von uns erstellten Div mit der Id mapsPlaceholdereingefügt.
Wichtig das Script sollte unter dem HTML Part eingefügt werden. Damit der HTML-Platzhalter vor dem Script geladen wird, da es sonst zu Problemen beim Setzen des Iframes kommen kann.
<script type="text/plain" data-cookieconsent="preferences">
document.getElementById('mapsPlaceholder').innerHTML = '';
document.getElementById('mapsPlaceholder').innerHTML += '<iframe src="https://www.google.de/maps/embed?pb=!1m14!1m8!1m3!1d9844.40583401872!2d7.388249999999999!3d51.91386!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b9ace10dbdb23b%3A0x39c8a46b1ed2b7af!2sHagemeister+GmbH+%26+Co.+KG+-+Klinkerwerk!5e0!3m2!1sde!2sde!4v1430236434545" class="googleMaps" frameborder="0" style="border:0; width:100%; height: 500px;"></iframe>';
</script>
Alternativ kann folgendes Script genutzt werden. Allerdings ist es dann notwendig eine leere Div an der Stelle zu setzten, an der die Karte angezeigt werden soll.
<script type="text/plain" data-cookieconsent="preferences">
document.getElementById('mapsPlaceholder').style.display = 'none';
document.getElementById('positionMaps').innerHTML = '<iframe src="https://www.google.de/maps/embed?pb=!1m14!1m8!1m3!1d9844.40583401872!2d7.388249999999999!3d51.91386!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b9ace10dbdb23b%3A0x39c8a46b1ed2b7af!2sHagemeister+GmbH+%26+Co.+KG+-+Klinkerwerk!5e0!3m2!1sde!2sde!4v1430236434545" class="googleMaps" frameborder="0" style="border:0; width:100%; height: 500px;"></iframe>';
</script> <div id="positionMaps"></div>
2. HTML Part
Der zweite Block besteht aus einer div mit der Id mapsPlaceholderder Content dieser div wird mit dem Google Maps Iframe aus dem ersten Block überschrieben, sobald die Zustimmung für Google Maps erteilt ist. Das Hintergrund Bild kann bei Bedarf auch einfach entfernt werden.
In Zeile 9-13 wird ein Button dargestellt. Per Klick auf den Button öffnet sich das Cookiebanner.
In Zeile 14-18 wird ein Button dargestellt, beim klick auf den Button wird die Kategorie “Präferenzen” akzeptiert und der Platzhalter verschwindet und wird mit dem richtigen Karte ausgetauscht
Hier wird die Funktion
Cookiebot.submitCustomConsent(bool optinPreferences,bool optinStatistics,bool optinMarketing)für genutzt. Dieser wird als Parameter der gewünschte Consent für die jeweiligen Kategorien mitgegeben.Da der Service Google Maps der Kategorie Präferenzen zugeordnet wird, wird somit die Funktion folgendermaßen genutzt:
Cookiebot.submitCustomConsent(true, Cookiebot.consent.statistics, Cookiebot.consent.marketing)
OptIn in spezifische Kategorie | Funktion |
|---|---|
Präferenzen | Cookiebot.submitCustomConsent(true, Cookiebot.consent.statistics, Cookiebot.consent.marketing) |
Statistiken | Cookiebot.submitCustomConsent(Cookiebot.consent.preferences, true, Cookiebot.consent.marketing) |
Marketing | Cookiebot.submitCustomConsent(Cookiebot.consent.preferences, Cookiebot.consent.statistics, true) |
3. Styling
Damit der Platzhalter richtig gestylt ist, wird noch CSS benötigt. Dies kann natürlich beliebig angepasst werden, damit dieses dem Style der Seite entspricht.
In Zeile 3-6 kann die Breite und Höhe des Platzhalters festgelegt werden.
In Zeile 30 kann die Farbe des “More Information” Buttons angepasst werden.
In Zeile 50 kann die Farbe des “Accept” Buttons angepasst werden.