Platzhalter nach Script Anpassung v2

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 += '<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com" frameborder="0" allowfullscreen=""></iframe>'; </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 = '<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com" frameborder="0" allowfullscreen=""></iframe>'; </script>
<div id="postitionYouTubeVideo"></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 über UC_UI.getServices() 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 über UC_UI.getServices() 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.