How to Add a Free GDPR Cookie Banner to Your Website

Cookie banners are legally required if your website is accessible to EU users and you use any non-essential cookies — analytics, advertising pixels, social media embeds, A/B testing scripts, and so on. But "legally required" does not mean "expensive." You can implement a fully compliant GDPR cookie banner for free. This guide shows you exactly how.

What the law actually requires

The ePrivacy Directive and GDPR together create the legal framework for cookie consent. The core requirements are straightforward, but often misunderstood:

• Prior consent: Non-essential cookies must not load until the user actively opts in. "Scrolling counts as consent" and "by continuing to browse" language are both explicitly non-compliant.
• Granular choice: Users must be able to accept or reject cookies by category — at minimum, analytics and marketing should be separate options.
• Equal prominence: Accepting and rejecting must be equally easy. A big "Accept All" button next to a tiny grey link to "Manage preferences" is a dark pattern that regulators are actively penalising.
• Freely given: Cookie walls — where access to the site requires accepting all cookies — are prohibited in most EU jurisdictions.
• Withdrawal: Users must be able to withdraw consent as easily as they gave it. A floating icon or footer link to reopen the preferences panel is the standard approach.
• Records: You should store consent records — timestamp, version of your cookie policy, and the choices made — for audit purposes.

What a compliant banner actually needs to do

Most websites get the visual part right but fail on the technical side. A compliant banner does not just show a notice — it actively blocks scripts from loading until consent is given. This is the part that trips up DIY implementations.

The mechanism works like this: tracking scripts (Google Analytics, Meta Pixel, etc.) are prevented from loading by default. When the user accepts a category, the corresponding scripts are released. When the user rejects or ignores the banner, those scripts never fire.

If you use a banner that only records consent but does not block scripts, you are still non-compliant — even if the banner looks perfect. Regulators check for actual cookie firing, not just visual presentation.

Step 1: Audit your cookies

Before you can configure a consent banner, you need to know what cookies your site sets. Open your browser's developer tools, go to the Application tab, and look at the Cookies section for your domain. Note every cookie and which service sets it.

• Essential: Session tokens, login cookies, CSRF protection, shopping cart — these do not require consent.
• Functional: Language preferences, UI state — typically do not require consent but should be disclosed.
• Analytics: Google Analytics, Plausible, Matomo, Hotjar — require consent.
• Marketing: Meta Pixel, Google Ads, LinkedIn Insight Tag — require consent, often the most sensitive category.

Step 2: Create your ShieldPage account

ShieldPage's free tier covers one website and includes a fully compliant GDPR consent widget with script blocking. Sign up at shieldpage.io — no credit card required.

Once inside the dashboard: 1. Click Add Website and enter your domain. 2. Go to Consent Widget in the left navigation. 3. Select your jurisdiction preset — EU/GDPR, UK/ICO, or custom. 4. Configure your cookie categories and add a description for each one that your users will actually understand. 5. Customise the banner appearance to match your site's colours and typography.

Step 3: Configure script blocking

In the ShieldPage dashboard, go to Blocked Scripts. Add each tracking script you identified in Step 1 and assign it to the correct consent category. ShieldPage will automatically prevent these scripts from loading until the matching category is accepted.

For Google Analytics 4, the configuration looks like this — add your GA4 measurement ID and assign it to the Analytics category. ShieldPage generates a consent-aware loader that replaces your standard gtag snippet.

Step 4: Embed the consent script

Copy the embed snippet from your ShieldPage dashboard. It will look similar to this:

``html <script src="https://cdn.shieldpage.io/consent/v2/loader.js" data-site-id="YOUR_SITE_ID" async ></script> ``

Paste this snippet as the first script in your <head> element — before any other scripts, including your analytics or tag manager. This ordering is critical. If a tracking script loads before the consent loader, it will fire without consent.

For sites using Google Tag Manager: add the ShieldPage snippet before your GTM snippet. Inside GTM, you can use ShieldPage's consent state as a trigger condition, but the loader itself must be outside GTM to initialise before GTM fires.

Step 5: Add the re-open trigger

Users must be able to change their consent choices at any time. Add a link in your footer (typically labelled "Cookie Settings" or "Manage Cookies") that reopens the preferences panel. ShieldPage provides a simple data attribute for this:

``html <a href="#" data-shieldpage="open-preferences">Cookie Settings</a> ``

This link can go anywhere on the page — footer, privacy policy, or a floating widget. The important thing is that it is reachable without scrolling through the page.

Step 6: Test before going live

Use your browser in incognito mode (which clears any existing consent records) and visit your site. Check: 1. The consent banner appears immediately on first load. 2. No non-essential cookies appear in DevTools before you click accept. 3. After accepting Analytics, your analytics cookies appear. 4. After clicking "Reject All," no non-essential cookies are set. 5. The "Cookie Settings" link in your footer reopens the preference panel.

Also test on mobile — the banner must be usable on small screens without obscuring important content or making the reject option inaccessible.

Common mistakes to avoid

• Loading GTM before the consent script: GTM will fire tags immediately, bypassing all script blocking.
• Hardcoding GA4 snippet: If you have the standard gtag script in your HTML alongside a CMP, both will run. Remove the hardcoded snippet and let ShieldPage manage the loading.
• Forgetting to test withdrawal: Many sites implement "accept" correctly but never test what happens when a user changes their mind. Consent withdrawal must immediately stop data collection and delete the corresponding cookies.
• Using a banner without script blocking: Purely visual banners that do not actually block scripts are the most common compliance failure. Regulators scan for cookie firing, not just banner presence.

What you get on the free tier

ShieldPage's free plan includes one website, the full consent widget with script blocking, consent record storage, and a customisable banner UI. If you manage multiple sites, the Starter plan at $49/month adds multi-site support (up to 3 sites). The Professional plan at $149/month supports 10 sites, and the Business plan at $349/month covers unlimited sites with the full feature set.

For most single-site owners — personal projects, small business websites, freelancers — the free tier covers everything needed for full GDPR compliance. There is no reason to remain non-compliant when a working solution is available at no cost.