Platzhalter Usercentrics v1

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>

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 usercentrics.getConsents(); 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 überusercentrics.getConsents(); gesucht werden)

<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="usercentrics.toggleConsentInfoModalIsVisible('##ServiceId##');"
                onclick="usercentrics.toggleConsentInfoModalIsVisible('##ServiceId##');" class="uc-embedding-more-info">
                More Information
            </button>
            <button ontouchstart="usercentrics.updateConsents([{'templateId':'##ServiceId##', 'status':true}]);"
                onclick="usercentrics.updateConsents([{'templateId':'##ServiceId##', 'status':true}]);"
                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 werden.

<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>

Usercentrics Dokumentation

Platzhalter Usercentrics v1

1. Skript Part

2. HTML Part

3. Styling

Related content