Skip to main content

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.