Skip to content
Click here to read the Consent Mode v2 upgrade guide →
Advanced
Known issues & workarounds

Known issues & workarounds

VWO flickering issues

A few users have encountered problems while integrating VWO with CookieHub, which results in a momentary white page display after all elements have loaded and rendered in the browser. To prevent this issue, you can resolve it by incorporating the following CSS code into your website, ensuring that VWO cannot modify the opacity of the body element:

body {
  opacity: 1 !important;
  filter: none !important;
}

WP Rocket

WP Rocket is a popular caching solution for WordPress sites, designed to improve website performance and load times. However, caching mechanisms can sometimes interfere with the proper functioning of other important website tools, such as CookieHub. To ensure seamless operation, it's crucial to configure WP Rocket to exclude CookieHub's JavaScript files from being cached. This guide provides comprehensive instructions on how to achieve optimal compatibility.

Understanding the Issue

Caching by WP Rocket can occasionally lead to issues with the CookieHub widget, such as:

  • Delayed loading or initialization of the CookieHub widget.
  • The automatic cookie blocking feature may not function as intended, potentially leading to compliance issues.

These problems arise because caching can serve static versions of JavaScript files, which may not interact correctly with dynamic content or user consent preferences managed by CookieHub.

Excluding CookieHub from WP Rocket

To prevent these issues, follow these steps to exclude CookieHub's JavaScript from WP Rocket's caching:

  1. Navigate to WP Rocket Settings: Log into your WordPress dashboard and go to the WP Rocket settings page, focusing on areas related to file optimization and caching.
  2. Locate the JavaScript Files Exclusion Section: Within the WP Rocket settings, find the section dedicated to excluding JavaScript files from caching.
  3. Specify CookieHub Script Patterns for Exclusion: Instead of identifying individual script URLs, use the following patterns to exclude all relevant CookieHub scripts:
https://cdn.cookiehub.eu/c2/(.*).js
https://cookiehub.net/c2/(.*).js

These patterns instruct WP Rocket to ignore caching for any JavaScript files loaded from these paths, ensuring that CookieHub functions correctly.

  1. Apply and Save Changes: After entering the exclusion patterns, save your modifications. It’s advisable to clear your site's cache to immediately apply the new settings.

Further information are available in the WP Rocket documentation: Exclude files from Load JavaScript Deferred (opens in a new tab)

Cloudflare Rocket Loader

While Cloudflare's Rocket Loader is a powerful tool for improving website load times by optimizing the delivery of JavaScript, its aggressive optimization techniques can sometimes interfere with the functionality of crucial scripts, such as those used by CookieHub for GDPR and CCPA compliance. To ensure that CookieHub operates seamlessly on your site without being impacted by Rocket Loader, Cloudflare offers a straightforward solution: marking specific scripts to be ignored by Rocket Loader using the data-cfasync="false" attribute. Here's how to apply this adjustment for optimal compatibility.

Understanding the Compatibility Adjustment

Rocket Loader enhances site performance by loading JavaScript files asynchronously. However, this can cause timing issues or initialization delays for scripts that require a more synchronous loading pattern, like CookieHub's cookie consent management scripts. By adding data-cfasync="false" to a script tag, you explicitly instruct Rocket Loader to exclude this script from its asynchronous loading process, ensuring it loads in the order specified by the web page.

How to Apply the data-cfasync="false" Attribute for CookieHub

To ensure CookieHub is excluded from Rocket Loader's optimization and function correctly, follow these steps:

  1. Identify the CookieHub Script Tag: Locate the HTML script tag for CookieHub on your web pages. It's typically inserted into the head or body of your HTML and can be identified by the source URL, which include CookieHub's domain (cdn.cookiehub.eu or cookiehub.net).

  2. Modify Script Tag: Add the data-cfasync="false" attribute to the CookieHub script in your site's HTML. For example, a script tag would be modified as follows:

Before:

<script src="https://cdn.cookiehub.eu/c2/xxxxxxxx.js"></script>

After adding the attribute:

<script data-cfasync="false" src="https://cdn.cookiehub.eu/c2/xxxxxxxx"></script>

This modification tells Rocket Loader to load this script synchronously, respecting its position and dependencies.

Content Security Policy (CSP)