Surinder Bhomra

Kentico 13: Cookiebot Blocking Page Builder Scripts

Published on
-
3 min read

Cookiebot was added to a Kentico 13 site a few weeks ago resulting in unexpected issues with pages that contained Kentico forms, which led me to believe there is a potential conflict with Kentico Page Builders client-side files.

As all Kentico Developers are aware, the Page Builder CSS and JavaScript files are required for managing the layout of pages built with widgets as well as the creation and use of Kentico forms consisting of:

  • PageBuilderStyles - consisting CSS files declared in the </head> section of the page code.
  • PageBuilderScripts - consisting of JavaScript files declared before the closing </body> tag.

In this case, the issue resided with Cookiebot blocking scripts that are generated in code as an extension method or as a Razor Tag Helper.

<html>
<body>
    ...
    <!-- Extension Method -->
    @Html.Kentico().PageBuilderScripts()    
    ...
    <!-- Razor Tag Helper -->
    <page-builder-scripts />
    ...
</body>
</html>

Depending on the cookie consent given, Kentico Forms either failed on user submission or did not fulfil a specific action, such as, conditional form element visibility or validation.

The first thing that came to mind was that I needed to configure the Page Builder scripts by allowing it to be ignored by Cookiebot. Cookiebot shouldn't hinder any key site functionality as long as you have configured the consent options correctly to disable cookie blocking for specific client-side scripts via the data-cookieconsent attribute:

<script data-cookieconsent="ignore">
    // This JavaScript code will run regardless of cookie consent given.
</script>

<script data-cookieconsent="preferences, statistics, marketing">
    // This JavaScript code will run if consent is given to one or all of options set in "cookieconsent" data attribute.
</script>

Of course, it's without saying that the data-cookieconsent should be used sparingly - only in situations where you may need the script to execute regardless of consent and have employed alternative ways of ensuring that the cookies are only set after consent has been obtained.

But how can the Page Builder scripts generated by Kentico be modified to include the cookie consent attribute?

If I am being honest, the approach I have taken to resolve this issue does not sit quite right with me, as I feel there is a better solution out there I just haven't been able to find...

Inside the _Layout.cshtml file, I added a conditional statement that checked if the page is in edit mode. If true, the page builder scripts will render normally using the generated output from the Tag Helper. Otherwise, manually output all the scripts from the Tag Helper and assign the data-cookieconsent attribute.

<html>
<body>
    ... 
    ...
    @if (Context.Kentico().PageBuilder().EditMode)
    {
        <page-builder-scripts />
    }
    else
    {
        <script src="/_content/Kentico.Content.Web.Rcl/Scripts/jquery-3.5.1.js" data-cookieconsent="ignore"></script>
        <script src="/_content/Kentico.Content.Web.Rcl/Scripts/jquery.unobtrusive-ajax.js" data-cookieconsent="ignore"></script>
        <script type="text/javascript" data-cookieconsent="ignore">
            window.kentico = window.kentico || {};
            window.kentico.builder = {};
            window.kentico.builder.useJQuery = true;
        </script>
        <script src="/Content/Bundles/Public/pageComponents.min.js" data-cookieconsent="ignore"></script>
        <script src="/_content/Kentico.Content.Web.Rcl/Content/Bundles/Public/systemFormComponents.min.js" data-cookieconsent="ignore"></script>
    }
</body>
</html>

After the modifications were made, all Kentico Forms were once again fully functional. However, the main disadvantage of this approach is that issues may arise when new hotfixes or major versions are released as the hard-coded script references will require checking.

If anyone can suggest a better approach to integrating a cookie compliance solution or making modifications to the page builder script output, please leave a comment.

Useful Information

Before you go...

If you've found this post helpful, you can buy me a coffee. It's certainly not necessary but much appreciated!

Buy Me A Coffee

Leave A Comment

If you have any questions or suggestions, feel free to leave a comment. I do get inundated with messages regarding my posts via LinkedIn and leaving a comment below is a better place to have an open discussion. Your comment will not only help others, but also myself.