Adjust script and iframe tags to delay load

When you have implemented the CookieHub code to your web site, the cookie consent dialog will be shown and the user will be able to allow or deny cookie categories but in order to respect the users choices you need to adjust tags used for 3rd party services setting cookies and tracking the user or collecting personal information. These services may include web analytics, ad targeting and remarketing services, external form components collecting user data, embedded components including embedded videos and sharing buttons.

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

The attributes that CookieHub uses are:

  • data-consent The value of this attribute indicates what cookie category the tag belongs to. The tag will only be loaded if the user has consented to the linked category. Value of the attribute should be one of the following: necessary, preferences, analytics, marketing, uncategorized ( Cookie categories)
  • data-src 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 how you would adjust the Microsoft Clarity tracking script which usually looks like this:

<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "xxxxxxxxxx");
</script>

We will only need to modify the first line, changing the type to text/plain and adding the data-consent attribute. When there's no type attribute for the script, you'll have to add it.

Fully implemented with CookieHub, the script should look like this:

<script type="text/plain" data-consent="analytics">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "xxxxxxxxxx");
</script>

By making these changes to the tag, it will be ignored by the browser unless the user consents to the analytics cookie category.

<script> tags loading external URL

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

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

In this case, we will have to add the data-consent attribute and change the src attribute to data-src.

Fully implemented with CookieHub, the script should look like this:

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

By making these changes to the tag, the external javascript file won't be loaded unless the user consents to the analytics cookie category.

<iframe> tags

Here's a standard YouTube embed code:

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

In this case, we will have to add the  data-consent attribute and change the src attribute to data-src, just like we did in the <script> example above.

Fully implemented with CookieHub, the html code should look like this:

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

Still need help? Contact Us Contact Us