Collecting Contextual Consent

Using Cookie Consent, you can allow for contextual consent in the case that a particular consent category does not have active consent. Instead of the element showing (i.e. video/image), a placeholder will be present indicating that in order to view the content, consent is necessary.

To collect contextual consent

  1. Identify any elements on the website page(s) that will utilize this approach (i.e. YouTube/Vimeo videos, product images, etc; any visual element that also performs any tracking where consent is required).
  2. Add the following HTML to the page:
    CODE 
    <div id="youtubeVideoDiv" style="height: 20em">
  <!-- CONTEXTUAL CONSENT / placeholder DIV -->
  <div class="gdpr-info-box js-data-gdpr-not-available-placeholder" style="display: none;">
    <div id="ot-warning-text">
      <p class="title">We're sorry, this content is unavailable.</p>
      <p class="desc">To improve your experience, make sure Targeting cookies are enabled.</p>
    </div>
    <div id="ot-settings-btn">
      <a class="btn btn-tertiary" onclick="OneTrust.ToggleInfoDisplay()">Update your cookie settings</a>
    </div>
  </div>
  <!-- YouTube Video START -->
  <iframe width="560" height="315" class="optanon-category-C0004 embed-responsive-item" data-src="https://www.youtube.com/embed/NAtPAzKwwOw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <!-- YouTube Video END -->
</div>

    Note that the YouTube video has been embedded within a larger <div> that will encapsulate both the contextual consent notice as well as the video <iframe>.

    Also, note on line 13 that you can utilize the method to wrap the <iframe> to honor consent preference based on you iFrame configuration. For more information, see Client-Side Cookie Management.

  3. Replace the existing OptanonWrapper() <script> tag with the following:
    JAVASCRIPT 
    <script type="text/javascript">
    function getCookie(a) {
        var b = "; " + document.cookie;
        a = b.split("; " + a + "\x3d");
        if (2 == a.length) return a.pop().split(";").shift()
    }

    function OptanonWrapper() {
        // Select HTML elements and apply conditional display based on consent
        var a = document.getElementsByClassName("gdpr-info-box")[0]; - 1 < window.OnetrustActiveGroups.indexOf(",C0004,") || (a.style.cssText = "display: flex; flex-direction: column");
        var v = document.querySelector('#youtubeVideoDiv iframe'); -1 < window.OnetrustActiveGroups.indexOf(",C0004,") || (v.style.display = "none");
        b = "OptanonAlertBoxClosed";
        // Banner 'Accept All' CTA
        var x = document.getElementById("onetrust-accept-btn-handler");
        // Preference Center 'Accept All' and 'Save Settings'
        var y = document.getElementById("accept-recommended-btn-handler"),
            z = document.getElementsByClassName("save-preference-btn-handler onetrust-close-btn-handler")[0];
        b = getCookie(b);
        // Page reload after consent confirmed
        !b && a && x.addEventListener("click",
            function() {
                location.reload()
            });
        y && y.addEventListener("click", function() {
            location.reload()
        });
        z.addEventListener("click", function() {
            location.reload()
        })
    };
</script>

    The above code snippet is intended to work for allowing/blocking based on active consent for Targeting cookies (category ID: C0004). Lines 13 and 14 can be modified to alter this criteria.