Platzhalter Usercentrics v2
- Karl Horstmann
- David Nees
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-usercentrics Wert für den Service hat. In unserem Beispiel ist es YouTube Video. Wichtig ist, dass der Name des Services exakt mit dem Namen des Services in Usercentrics übereinstimmen muss.
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 Youtube iframe in eine von uns erstellten Div mit der Id youtubePlaceholder eingefü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-usercentrics="YouTube Video">
document.getElementById('youtubePlaceholder').innerHTML = '';
document.getElementById('youtubePlaceholder').innerHTML += 'HIER BETROFFENES IFRAME EINSETZEN';
</script>
Alternativ kann folgendes Script genutzt werden. Allerdings ist es dann notwendig eine leere Div an der Stelle zu setzten, an der das YouTube Video angezeigt werden soll.
<script type="text/plain" data-usercentrics="YouTube Video">
document.getElementById('youtubePlaceholder').style.display = 'none';;
document.getElementById('positionYouTubeVideo').innerHTML = 'HIER BETROFFENES IFRAME EINSETZEN';
</script> <div id="positionYouTubeVideo"></div>
2. HTML Part
Der zweite Block besteht aus einer div mit der Id youtubePlaceholder der Content dieser div wird mit dem YouTube Iframe aus dem ersten Block überschrieben, sobald die Zustimmung für Youtube erteilt ist. Das Hintergrund Bild kann bei Bedarf auch einfach entfernt werden.
In Zeile 2-3 ist das YouTube Icon, welches als Hintergrundbild festgelegt wird (Base64 Encoded). Dieses ist in der Vorlage das YouTube Logo, kann aber für andere Services bzw. bei Bedarf beliebig geändert werden.
In Zeile 13-16 wird ein Button dargestellt, beim klick auf den Button werden mehr Informationen zu Youtube angezeigt.
die
##ServiceId##muss mit der richtigen Service Id ausgetauscht werden. (ServiceId/TemplateId ist im Admin Interface beim Service zu finden oder kann über die Browser Konsole überUC_UI.getServicesBaseInfo()gesucht werden)
In Zeile 17-21 wird ein Button dargestellt, beim klick auf den Button wird Youtube akzeptiert und der Platzhalter verschwindet und wird mit dem richtigen Youtube Video ausgetauscht
die
##ServiceId##muss mit der richtigen Service Id ausgetauscht werden. (ServiceId/TemplateId ist im Admin Interface beim Service zu finden oder kann über die Browser Konsole überUC_UI.getServicesBaseInfo()gesucht werden)
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 34 kann die Farbe des “More Information” Buttons angepasst werden.
In Zeile 55 kann die Farbe des “Accept” Buttons angepasst werden.