{"type":"doc","content":[{"type":"paragraph","content":[{"text":"Häufig verursacht das Anpassen des Scripts keine Probleme, solange das angepasste Skript kein visuelles Element auf der Seite ist (bsp. Google Analytics).","type":"text"}]},{"type":"paragraph","content":[{"text":"Bei der Anpassung von visuellen Elementen wie YouTube besteht dann aber das Problem, dass ein Content Block auf der Seite fehlt.","type":"text"},{"type":"hardBreak"},{"text":"Damit dieses Problem gelöst wird nutzten wir Platzhalter, welche dem Nutzer zeigen, was hier eigentlich dargestellt werden soll.","type":"text"}]},{"type":"paragraph","content":[{"text":"Wir teilen die Bereiche in einen JavaScript, HTML und Styling Part auf.","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"1. Skript Part","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Der erste Block besteht aus einem normalen ","type":"text"},{"text":"script","type":"text","marks":[{"type":"code"}]},{"text":" Tag, welches den passenden ","type":"text"},{"text":"data-usercentrics","type":"text","marks":[{"type":"code"}]},{"text":" Wert für den Service hat. In unserem Beispiel ist es ","type":"text"},{"text":"YouTube Video","type":"text","marks":[{"type":"code"}]},{"text":". Wichtig ist, dass der Name des Services exakt mit dem Namen des Services in Usercentrics übereinstimmen muss.","type":"text"}]},{"type":"paragraph","content":[{"text":"Dieses Skript hat den ","type":"text"},{"text":"type=\"text/plain\"","type":"text","marks":[{"type":"code"}]},{"text":" welches vom Browser nichts als JavaScript erkannt wird und deswegen nicht ausgespielt wird. ","type":"text"},{"type":"hardBreak"},{"text":"Sobald die Zustimmung für den Service gegeben wird, ändert sich der ","type":"text"},{"text":"type","type":"text","marks":[{"type":"code"}]},{"text":" und das JavaScript in den Klammern wird ausgeführt.","type":"text"}]},{"type":"paragraph","content":[{"text":"In unserem Beispiel wird dann das Youtube ","type":"text"},{"text":"iframe ","type":"text","marks":[{"type":"code"}]},{"text":"in eine von uns erstellten Div mit der Id ","type":"text"},{"text":"youtubePlaceholder","type":"text","marks":[{"type":"code"}]},{"text":" eingefügt.","type":"text"}]},{"type":"paragraph","content":[{"text":"Wichtig ","type":"text","marks":[{"type":"strong"}]},{"text":"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.","type":"text"}]},{"type":"paragraph"},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"codeBlock","content":[{"text":" ","type":"text"}]},{"type":"codeBlock","content":[{"text":"

","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"2. HTML Part","type":"text"}]},{"type":"paragraph","content":[{"text":"Der zweite Block besteht aus einer ","type":"text"},{"text":"div","type":"text","marks":[{"type":"code"}]},{"text":" mit der Id ","type":"text"},{"text":"youtubePlaceholder","type":"text","marks":[{"type":"code"}]},{"text":" der Content dieser ","type":"text"},{"text":"div","type":"text","marks":[{"type":"code"}]},{"text":" 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.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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. ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In Zeile 13-16 wird ein Button dargestellt, beim klick auf den Button werden mehr Informationen zu Youtube angezeigt.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"die ","type":"text"},{"text":"##ServiceId##","type":"text","marks":[{"type":"code"}]},{"text":" 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 ","type":"text"},{"text":"UC_UI.getServicesBaseInfo()","type":"text","marks":[{"type":"code"}]},{"text":" gesucht werden) ","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"die ","type":"text"},{"text":"##ServiceId##","type":"text","marks":[{"type":"code"}]},{"text":" 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 ","type":"text"},{"text":"UC_UI.getServicesBaseInfo()","type":"text","marks":[{"type":"code"}]},{"text":" gesucht werden) ","type":"text"}]}]}]}]}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

Wir benötigen Ihre Zustimmung, um hier Videos anzuzeigen!

Wir benutzen YouTube als Drittanbietersoftware, um Ihnen an dieser Stelle Videos\n\t\t\tpräsentieren zu können. Mit Klick auf \"Akzeptieren\" stimmen Sie der Datenverarbeitung durch YouTube zu.

\n\n

\n \n \n\n

\n \n

","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1177,"id":"fd5535ef-68dd-4fb7-a2ea-de941221aa0e","collection":"contentId-1253965837","type":"file","height":668}}]},{"type":"paragraph"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"3. Styling","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"In Zeile 3-6 kann die Breite und Höhe des Platzhalters festgelegt werden.","type":"text"}]},{"type":"paragraph","content":[{"text":"In Zeile 34 kann die Farbe des “More Information” Buttons angepasst werden.","type":"text"}]},{"type":"paragraph","content":[{"text":"In Zeile 55 kann die Farbe des “Accept” Buttons angepasst werden.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":"","type":"text"}]},{"type":"paragraph"},{"type":"paragraph"}],"version":1}