Free GDPR-Compliant Cookie Banner

Prerequisites

Before starting, ensure you have:

• Google Tag Manager installed on your website

• Admin access to your GTM container

• Basic understanding of GTM tags and triggers

• Google Analytics 4 and/or Google Ads tags to manage

Step 1: Generate Your Cookie Banner Code

Configure the Banner

1. Visit the Cookie Banner Wizard tool

2. Select your preferred language (the banner supports both English and Dutch)

3. Enter your company name (not your URL - e.g., "Sprint Marketing" not "www.sprintmarketing.nl")

4. Customize your banner text and colors

5. Choose which buttons to display:

   • Accept All (always recommended)

   • Reject All (recommended for transparency)

   • Customize (allows granular control)

   • Settings Icon (permanent access to preferences)

Generate and Copy Code

1. Click through to Step 4

2. Wait for code generation (about 2 seconds)

3. Click "Copy" to copy the entire script

Step 2: Implement in Google Tag Manager

Create the Custom HTML Tag

1. In GTM, go to Tags → New

2. Name it "Cookie Banner - Consent Implementation"

3. Choose Custom HTML as tag type

4. Paste your generated code

5. Set trigger to DOM Ready - All Pages (not Page View)

6. Under Advanced Settings → Tag Firing Priority, set to 999 (highest priority)

7. Save the tag

Why This Matters

Timing sequence should be:

1. GTM loads →

2. DOM Ready triggers →

3. Cookie banner initializes →

4. Consent state established →

5. Other tags check consent and fire accordingly

Using Page View can cause tags to race each other. DOM Ready ensures proper sequencing.

Your instinct was correct - DOM Ready is the professional choice for consent management implementation.

Step 3: Set Up Consent Variables

Create Built-In Consent Variables

1. Go to Variables in GTM

2. Click Configure under Built-in Variables

3. Enable ALL consent-related variables:

   • Analytics Storage Granted

   • Ads Storage Granted

   • Functionality Storage Granted

   • Personalization Storage Granted

   • Security Storage Granted

Create Custom Variables for Blocking

For more granular control, create these Data Layer Variables:

Has Analytics Consent:

• Name: Has Analytics Consent

• Variable Type: Data Layer Variable

• Data Layer Variable Name: analytics_storage

Has Marketing Consent:

• Name: Has Marketing Consent

• Variable Type: Data Layer Variable

• Data Layer Variable Name: ad_storage

Step 4: Configure Blocking Triggers

Method 1: Using Built-in Variables (Recommended)

Create exception triggers that prevent tags from firing without consent:

Block Analytics Without Consent:

1. Create new trigger

2. Type: Custom Event

3. Event name: .* (regex matching all events)

4. Enable regex matching

5. Conditions: Analytics Storage Granted does not equal granted

6. Name: "Block - No Analytics Consent"

Block Marketing Without Consent:

1. Same process as above

2. Conditions: Ads Storage Granted does not equal granted

3. Name: "Block - No Marketing Consent"

Method 2: Using Consent Mode (Automatic)

If your tags support Consent Mode v2 (Google Ads, GA4), they automatically respect consent:

• No blocking triggers needed

• Tags wait for consent before processing

• Data modeling fills gaps for non-consented users

Apply Blocking to Existing Tags

For each analytics/marketing tag:

1. Open the tag configuration

2. Go to Triggering

3. Add your firing trigger (e.g., "All Pages")

4. Add exception: Click "Add Exception"

5. Select appropriate blocking trigger

6. Save

Example for Facebook Pixel:

• Trigger: All Pages

• Exception: Block - No Marketing Consent

Step 5: Consent Mode & Data Modeling

How Consent Mode Works WITH Blocking Triggers

The dual approach provides maximum compliance:

When User Declines Cookies:

1. Consent Mode sends cookieless pings to Google

2. Blocking triggers prevent non-Google tags from firing

3. Google uses machine learning to model behavior

4. You get aggregated insights without personal data

When User Accepts Cookies:

1. Consent Mode updates to "granted"

2. Variables change, removing blocks

3. All tags fire normally

4. Full tracking resumes

Benefits of This Approach:

• Compliance: Non-consented users aren't tracked

• Data Recovery: Google's modeling recovers ~70% of conversion data

• Flexibility: Non-Google tags properly blocked

• Future-Proof: Works with upcoming privacy regulations

Step 6: Testing Your Implementation

GTM Preview Mode

1. Click Preview in GTM

2. Navigate your website

3. Check the consent banner appears after 1.5 seconds

4. Test each button:

   • Accept All → Check all tags fire

   • Reject All → Verify blocked tags don't fire

   • Customize → Test individual selections

Verify Consent State

In Preview mode's Variables tab, confirm:

• Analytics Storage Granted shows correct state

• Ads Storage Granted reflects user choice

• Custom variables update properly

Check Data Layer Events

Look for these events:

javascript

{
  event: 'cookie_consent',
  consent_type: 'all|necessary|custom',
  consent_details: {
    preferences: true/false,
    statistics: true/false,
    marketing: true/false
  }
}

Step 7: Tracking Consent Rates

Set Up GA4 Reporting

1. In GA4, go to Configure → Events

2. Look for cookie_consent event

3. Create custom dimensions:

   • Name: "Consent Type"

   • Event parameter: consent_type

4. Build reports showing acceptance rates

Create a Consent Dashboard

In GA4 Explore:

• Dimension: Consent Type

• Metric: Event Count

• Metric: Users

• Visualization: Pie chart

This shows your accept/decline ratio without additional tools.

Frequently Asked Questions