How to use conditional HTML tags and placeholders with CookieHub

After adding the CookieHub script to your website, the cookie consent dialog ensures that users can accept or reject specific cookie categories. To respect these choices, any third-party scripts or embedded elements (such as analytics, advertising, remarketing, video embeds, forms, or social sharing buttons) must only load after consent is given.

CookieHub can handle this automatically for many popular services when automatic cookie blocking is enabled. For other services, you may need to adjust your HTML manually by adding attributes that control when elements are loaded.

Attributes used for consent-based loading

CookieHub supports the following attributes:

  • data-consent : Defines the cookie category that the element belongs to. Accepted values:

    necessary , preferences , analytics , marketing , uncategorized .

    The element will only load if the user consents to this category.

  • data-src : Delays loading of the resource by moving the URL from src to data-src . When consent is given, CookieHub moves the value from data-src to src and loads the content.
  • type="text/plain" : For <script> tags, this prevents the browser from executing the script until consent is granted.

Example: Blocking a script

Here is a standard <script> tag:

<script src="https://www.googleoptimize.com/optimize.js?id=OPT-XXXXXXX"></script>

Modify it to respect consent:

<script type="text/plain" data-consent="analytics" data-src="https://www.googleoptimize.com/optimize.js?id=OPT-XXXXXXX"></script>

This script will now load only if the user consents to the analytics category.

Example: Blocking an iframe (YouTube embed)

Standard iframe:

<iframe src="https://www.youtube.com/embed/NHEaYbDWyQE" frameborder="0" width="560" height="315" allowfullscreen></iframe>

Modified for CookieHub:

<iframe data-consent="marketing" data-src="https://www.youtube.com/embed/NHEaYbDWyQE" frameborder="0" width="560" height="315" allowfullscreen></iframe>

The video will only load after the user consents to the marketing category.

Placeholders for blocked content

You can show alternative content when a user has not given consent. Add the data-consent attribute to any HTML element, and optionally use data-inverse :

  • Without data-inverse : Element is shown only if consent is given.
  • With data-inverse : Element is shown only if consent is NOT given.

Example:

<div data-consent="analytics">
    Analytics category allowed
</div>
<div data-consent="analytics" data-inverse>
    Analytics category not allowed
</div>

Example with a YouTube placeholder:

<style>
.placeholder {
    width: 560px;
    height: 315px;
    text-align: center;
    background: #eee;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<!-- Placeholder message -->
<div class="placeholder" data-consent="analytics" data-inverse>
    <div>
        <p>Enable analytics cookies to show the embedded YouTube video</p>
        <p><a href="#" class="ch2-open-settings-btn">Manage my cookie choices</a></p>
    </div>
</div>

<!-- Actual video -->
<div data-consent="analytics">
    <iframe data-consent="analytics" width="560" height="315"
        data-src="https://www.youtube.com/embed/7-RhgB1INII" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
</div>

When the user has not given consent, the placeholder is displayed. Once consent is given, the iframe loads the video.

Why use placeholders?

  • Improves user experience by explaining why content is blocked.
  • Ensures legal compliance with GDPR and other privacy laws.