Versions Compared

Version Old Version 1 New Version Current
Changes made by

Karl Horstmann

Karl Horstmann

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Häufig verursacht das Anpassen des Scripts keine Probleme, solange das angepasste Skript kein Visuelles Element auf der Seite ist (bspOften, customizing the script does not cause any problems as long as the customized script is not a visual element on the page (e.g. 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 YouTube Video. Dieses ordnen wir der Kategorie preferences zu.

Dieses Skript hat den However, when customizing visual elements like YouTube, there is a problem that a content block is missing on the page. To solve this problem we used placeholders, which show the user what should actually be displayed here.

We divide the areas into a JavaScript, HTML and styling part.

1. Script Part

The first block consists of a normal script tag that has the appropriate data-cookieconsent value for the service. In our example it is YouTube Video. We assign this to the preferences category.

This script has the 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 kannwhich is not recognized by the browser as JavaScript and therefore is not played.
As soon as the approval for the service is given, the type changes and the JavaScript in the brackets is executed.

In our example the Youtube iframe is inserted into a div we created with the id youtubePlaceholder.

Important the script should be inserted under the HTML part. So that the HTML placeholder is loaded before the script, otherwise there may be problems when setting the iframe.

Code Block
languagehtml
<script type="text/plain" data-cookieconsent="preferences">
    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 sollAlternatively, the following script can be used.However, it is then necessary to set an empty div in the place where the YouTube video should be displayed.

Code Block
<script type="text/plain" data-cookieconsent="preferences">
    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>
Code Block
<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. Per Klick auf den Button öffnet sich das Cookiebanner.

    • 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

    Hier wird die Funktion

    part

    The second block consists of a div with the id youtubePlaceholder the content of this div will be overwritten with the YouTube iframe from the first block as soon as the approval for Youtube is granted.The background image can also be easily removed if needed.

    • In line 2-3 is the YouTube icon, which is set as background image (Base64 Encoded).This is the YouTube logo in the template, but can be changed for other services or as needed.

    • A button is displayed in lines 13-16.Clicking the button opens the cookie banner.

    • In line 17-21 a button is displayed, when clicking on the button Youtube is accepted and the placeholder disappears and is replaced with the real Youtube video

      • Here the function 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 YouTube der Kategorie Präferenzen zugeordnet wird, wird somit die Funktion folgendermaßen genutzt:
        is used for. The desired consent for the respective categories is given as a parameter.

      • Since the YouTube service is assigned to the preferences category, the function is thus used as follows: Cookiebot.submitCustomConsent(true, Cookiebot.consent.statistics, Cookiebot.consent.marketing)

    Präferenzen

    OptIn in spezifische Kategorie

    Funktion

    to specific category

    Function

    Preferences

    Cookiebot.submitCustomConsent(true, Cookiebot.consent.statistics, Cookiebot.consent.marketing)

    StatistikenStatistics

    Cookiebot.submitCustomConsent(Cookiebot.consent.preferences, true, Cookiebot.consent.marketing)

    Marketing

    Cookiebot.submitCustomConsent(Cookiebot.consent.preferences, Cookiebot.consent.statistics, true)

    Code Block
    languagehtml
    <div id="youtubePlaceholder">
    <img style="width: 100%; height: 100%; object-fit: cover;"
        src='data:image/png;base64,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AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAj9uCQAAAAAEDQ/9d2NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFd7cEACAAAAIOj/63YE6hsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABz5nQC0M0mTMAAAAASUVORK5CYII='>
    <div class="uc-embedding-wrapper">
        <h3>We need your consent to load the Youtube service!</h3>
        <p class="description-text">We use a third party service to embed video content that may collect data about
            your activity. Please review the details and accept the service to watch this video.</p>
        <p class="not-existing-service">This content is not permitted to load due to trackers that are not disclosed
            to the visitor. The website owner needs to setup the site with their CMP to add this content to the list
            of technologies used.</p>

        <div class="uc-embedding-buttons">
            <button ontouchstart="Cookiebot.show();"
                onclick="Cookiebot.show();" class="uc-embedding-more-info">
                More Information
            </button>
            <button ontouchstart="Cookiebot.submitCustomConsent(true, Cookiebot.consent.statistics, Cookiebot.consent.marketing);"
                onclick="Cookiebot.submitCustomConsent(true, Cookiebot.consent.statistics, Cookiebot.consent.marketing);"
                class="uc-embedding-accept">
                Accept
            </button>
        </div>
        <span></span>
    </div>
</div>

    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 werdenFor the placeholder to be styled correctly, CSS is still needed. This can of course be adjusted as desired, so that this corresponds to the style of the page.

    In line 3-6 the width and height of the placeholder can be set.

    In line 34 the color of the "More Information" button can be adjusted.

    In line 55 the color of the "Accept" button can be customized.

    Code Block
    languagecss
    <style>
    #youtubePlaceholder {
        height: 470px;
        width: 100%;
        max-height: 470px;
        max-width: 1000px;
        position: relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


    .uc-embedding-wrapper h3 {
        color: black;

    }

    p.description-text {
        color: black !important;
        max-width: 100% !important;
    }

    .uc-embedding-more-info {
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: none;
        font-size: 16px;
        display: inline-block;
        height: 45px;
        width: 100%;
        max-width: 230px;
        letter-spacing: 1.2;
        background: #ffffff;
        color: #6E6E6E;
        border: 1px solid #6E6E6E;
        margin: 5px 10px 15px 10px;
        line-height:0px;
    }

    .uc-embedding-accept {
        text-transform: uppercase;
        cursor: pointer;
        border: none;
        box-shadow: none;
        font-size: 16px;
        display: inline-block;
        height: 45px;
        width: 100%;
        max-width: 230px;
        padding: 0;
        letter-spacing: 1.2;
        padding-left: 25px;
        padding-right: 25px;
        background: #9b004b;
        color: #fff;
        margin: 5px 10px 15px 10px;
        line-height:0px;
    }

    .uc-embedding-wrapper {
        width: 100%;
        height: 100%;
        justify-content: center;
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        background: rgba(255, 255, 255, 0.75);
        border-radius: 4px;
        box-shadow: 0 3px 6px rgb(0 0 0 / 50%);
        position: absolute;
        padding: 10px;
        top: 50%;
        left: 50%;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        transform: translateX(-50%) translateY(-50%);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        overflow: auto;
        font-family: Arial, Verdana, sans-serif;
    }

    .uc-embedding-buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .uc-embedding-wrapper>h3 {
        margin-top: 0px !important;
        max-width: 100% !important;
    }
</style>