A free cookie banner for WordPress that blocks before consent

#Why WordPress sites leak trackers

A typical WordPress site does not have one place where trackers live. The analytics plugin prints gtag.js, the theme adds a font service, a form plugin loads a captcha, and editors embed YouTube videos in posts. Each of them prints its scripts in wp_head or wp_footer, usually without asking anyone. A cookie banner plugin that only shows a notice leaves all of that running.

cookieowl solves it from the front of the queue. Printed as the very first thing in wp_head, it sets the Consent Mode defaults and starts watching the page, so every tracker printed after it is held until the visitor accepts its category.

#Install with one hook

Add this to the functions.php of a child theme, or save it as a file in wp-content/mu-plugins/ so a theme update never removes it. Priority 1 makes it print before the scripts that WordPress and plugins enqueue:

<?php
/**
 * Plugin Name: cookieowl
 * Description: Cookie consent for LGPD and GDPR that blocks trackers until consent.
 */

add_action('wp_head', function () {
    $policy = esc_url(get_privacy_policy_url() ?: home_url('/privacy/'));
    echo '<script src="https://cdn.jsdelivr.net/npm/cookieowl@0.1.0/dist/cookieowl.js"'
        . ' data-lang="auto" data-policy-url="' . $policy . '"'
        . ' data-consent-mode data-auto-block></script>' . "\n";
}, 1);

get_privacy_policy_url() returns the page you chose under Settings, Privacy, so the banner links to it automatically. With data-lang="auto" the banner follows the site language: a site set to Português do Brasil gets the LGPD text.

#Holding scripts printed by plugins

Auto mode covers the well known trackers by URL. For any other script a plugin enqueues, WordPress has a filter that lets you rewrite its tag. Find the script handle (it is in the id attribute, without the -js suffix) and mark it:

add_filter('script_loader_tag', function ($tag, $handle) {
    $categories = [
        'my-chat-widget'   => 'preferences',
        'my-ab-testing'    => 'analytics',
        'partner-tracking' => 'marketing',
    ];
    if (isset($categories[$handle])) {
        $tag = str_replace(
            '<script ',
            '<script type="text/plain" data-cookieowl="' . $categories[$handle] . '" ',
            $tag
        );
    }
    return $tag;
}, 10, 2);

The new type comes first in the tag, and when an element has the same attribute twice, browsers keep the first one, so this also works on themes that still print type="text/javascript".

#YouTube and Vimeo in posts

The block editor turns a YouTube link into an iframe. With auto mode, cookieowl swaps it for a placeholder that explains the video sets cookies, with a button to load it once and another to allow marketing cookies. For other embeds, such as maps, add the attributes in a Custom HTML block:

<iframe data-cookieowl="marketing" data-cookieowl-name="Google Maps"
  data-cookieowl-src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
  width="600" height="400" title="Map to our shop"></iframe>

#A Cookie settings link and caching

Withdrawal must stay easy. cookieowl shows a small owl button on every page, and you can add a link to your footer menu: create a custom link with the URL #, then add data-cookieowl-open through a small filter, or place a Custom HTML block with <a href="#" data-cookieowl-open>Cookie settings</a> in a footer widget.

Caching and optimization plugins are compatible because nothing is rendered on the server. Two settings to check: exclude cookieowl.js from deferring, delaying and combining JavaScript, since it must run first and synchronously, and do not lazy load scripts marked text/plain, which some delay features rewrite.

#Questions

#Keep reading

Chapter VHow to block Google Analytics until consentHow to block Google Analytics 4 until cookie consent: hold gtag.js and the config as text/plain, catch injected tags with auto mode, and verify it in DevTools.7 min readChapter IIA cookie consent banner for the LGPD, in Portuguese, that really blocksAdd an LGPD cookie banner in Portuguese that blocks trackers before consent, follows the ANPD cookie guide and lets visitors revoke consent at any time.8 min readChapter IXA free cookie consent script, with nothing held backA free, open source cookie consent script with no page view limits or account: one script tag, real blocking, Consent Mode v2, five languages, under 15 kB.7 min read