Skip to Content
InstallationConditional HTML tags

Conditional HTML tags

After implementing the CookieHub code on your website, the cookie consent dialog will be displayed to your visitors, allowing them to either accept or reject cookie categories. However, to ensure that your users’ choices are respected, it’s important to adjust the tags used for third-party services that set cookies, track users, or collect personal information, such as web analytics, ad targeting and remarketing services, external form components, embedded videos, and sharing buttons.

CookieHub can automatically handle this for you for the most commonly used services when the automatic cookie blocker is enabled. However, for other services, you may need to manually adjust the tags. This can be done using HTML attributes to delay the loading of the script or content and to specify which cookie category the tag belongs to.

The attributes used by CookieHub for this purpose are:

  • data-consent: This attribute specifies the cookie category that the tag belongs to, and the tag will only be loaded if the user has consented to the linked category. The value of the attribute should be one of the following: necessary, preferences, analytics, marketing, uncategorized.

  • data-src: This attribute is used for script and iframe tags to delay the loading of the URL. When a user allows a category specified in the data-consent attribute, the DOM (Document Object Model) of the tag is modified by copying the value from data-src attribute to the src attribute, telling the browser to load the script or resource.

  • type: When delaying script tags, the type of the tag must be changed to text/plain, which will tell the browser to treat the contents of the tag as plain text instead of JavaScript.

script tags

Here’s an example of a <script> tag used to load an external JavaScript file:

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

After making the necessary changes, the tag should look like this:

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

By changing/add the type property and adding the data-consent attribute and setting its value to the appropriate cookie category (e.g., analytics), the external JavaScript file will only be loaded if the user consents to the linked category.

iframe tags

For <iframe> tags, we can add the same data-consent and data-src attributes to delay loading of the embedded content until the user consents to the related cookie category.

Here’s a standard YouTube embed code:

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

We can modify it with the CookieHub attributes like this:

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

This will ensure that the YouTube video will not be loaded until the user gives their consent to the marketing cookie category.

Placeholders

CookieHub offers a powerful feature to show or hide any HTML element based on the user’s cookie preferences. This can be useful to display or hide specific content based on the user’s consent. You can add the data-consent attribute to any HTML element to define which cookie category the element belongs to. If the user consents to that category, the element will be visible; otherwise, it will be hidden.

For example, consider the following code:

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

In this code, we have two <div> elements, each with the data-consent attribute set to “analytics”. The first <div> will be visible if the user consents to the “analytics” category, while the second <div> will be visible if the user does not consent to the “analytics” category.

In addition to showing or hiding elements, CookieHub also provides a way to display placeholders when certain content is blocked due to the user’s cookie preferences. For example, if you embed a YouTube video on your website, you can add a placeholder element that will be displayed if the user does not consent to the “analytics” category. When the user gives consent, the actual video will be loaded and displayed.

Here’s an example of how to use placeholders with iframes:

<style type="text/css">
    .placeholder {
        width: 560px;
        height: 315px;
        text-align: center;
        background: #eee;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<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>
<div data-consent="analytics">
    <iframe data-consent="analytics" width="560" height="315" data-src="https://www.youtube.com/embed/7-RhgB1INII" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

In this code, we have a <div> element with the class “placeholder” that contains a message to the user asking them to enable analytics cookies to view the YouTube video. This element has the data-consent attribute set to “analytics” and the data-inverse attribute to show the message when the user does not consent to the “analytics” category.

Below the placeholder element, we have an <iframe> element with the data-consent attribute set to “analytics”. This iframe will only be visible if the user consents to the “analytics” category, and the video will be loaded and displayed inside it.

Overall, this feature allows you to customize the user experience based on their cookie preferences and helps you stay compliant with privacy regulations.

Last updated on
Consent overviewCookie declaration