Google Tag Manager Integration

This guide shows you how to install CookieFrame using Google Tag Manager (GTM). The CookieFrame GTM template includes built-in support for Google Consent Mode v2, making it the recommended integration method for websites already using GTM.

Prerequisites

Before you begin, make sure you have:

• A CookieFrame account with your domain added
• A Google Tag Manager account with a container for your website
• GTM installed on your website

Step 1: Find Your Domain ID

You'll need your CookieFrame Domain ID to configure the GTM template.

1. Log in to your CookieFrame Dashboard
2. Select your domain from the list
3. Navigate to Settings → Integration
4. Your 8-character Domain ID is displayed in the integration instructions

[SCREENSHOT PLACEHOLDER: Dashboard showing Domain ID location]

Copy this code—you'll need it in the next steps.

Step 2: Add the CookieFrame Template

1. Log in to your Google Tag Manager account
2. Select the container for your website
3. Go to Tags in the left sidebar
4. Click the New button

[SCREENSHOT PLACEHOLDER: GTM Tags section with New button highlighted]

5. Click the Tag Configuration area
6. Click Discover more tag types in the Community Template Gallery

[SCREENSHOT PLACEHOLDER: Tag Configuration panel showing Community Template Gallery link]

7. Search for "CookieFrame"
8. Select CookieFrame CMP from the results

[SCREENSHOT PLACEHOLDER: Community Template Gallery search results showing CookieFrame CMP]

9. Click Add to workspace to add the template

Step 3: Configure the Template

After adding the template, you'll see the configuration panel:

[SCREENSHOT PLACEHOLDER: CookieFrame CMP tag configuration panel]

Required Settings

Step 4: Set the Trigger

The CookieFrame tag must fire on the Consent Initialization trigger to work correctly:

1. Click the Triggering area below the tag configuration
2. Select Consent Initialization - All Pages

[SCREENSHOT PLACEHOLDER: Trigger selection showing Consent Initialization - All Pages]

Step 5: Save and Publish

1. Click Save in the top right corner
2. Name your tag (e.g., "CookieFrame CMP")
3. Click Save again

[SCREENSHOT PLACEHOLDER: Save dialog with tag name]

4. Click Submit in the top right to publish your changes
5. Add a version name and description, then click Publish

[SCREENSHOT PLACEHOLDER: Submit/Publish dialog]

Verifying Your Installation

Using GTM Preview Mode

1. In GTM, click Preview in the top right
2. Enter your website URL and click Connect
3. Navigate to your website in the new tab
4. Return to the Preview tab and check:
   • The CookieFrame tag appears in Tags Fired
   • The Consent tab shows consent types as "Denied" initially

[SCREENSHOT PLACEHOLDER: GTM Preview mode showing CookieFrame tag fired]

Using Browser Developer Tools

1. Open your website in Chrome or Firefox
2. Open Developer Tools (F12 or right-click → Inspect)
3. Go to the Console tab
4. Enable Debug logging in the GTM tag settings (see Advanced Settings)
5. Refresh the page and look for messages starting with [CookieFrame GTM]

[CookieFrame GTM] Initializing CookieFrame consent mode
[CookieFrame GTM] Default consent state set
[CookieFrame GTM] No stored consent found, waiting for user interaction

Using Google Tag Assistant

1. Install Google Tag Assistant
2. Navigate to your website
3. Click the Tag Assistant icon in your browser
4. Check the Consent tab to verify consent signals are being sent

How Google Consent Mode Works with CookieFrame

CookieFrame maps its cookie categories to Google's consent types:

When a user interacts with the consent banner:

1. CookieFrame saves their preferences
2. The GTM template immediately updates Google's consent state
3. Tags with built-in consent support (Google Analytics, Google Ads, Floodlight) automatically adjust their behavior

Script Blocking with GTM

CookieFrame uses a two-tier approach to ensure comprehensive consent management:

Why Two Tiers?

When GTM fires a tag like Google Analytics, it doesn't create a visible <script> element in your page's HTML. Instead, GTM executes code internally. This means:

• Consent Mode is the only way to control tags managed by GTM
• Script Blocker is needed for scripts you've added directly to your HTML (outside GTM)

Example Scenario

If your website has:

• GA4 and Google Ads tags in GTM → Controlled by Consent Mode
• Facebook Pixel added directly to HTML → Controlled by Script Blocker

Both systems work together automatically. The GTM container itself is never blocked.

Excluding Scripts from Blocking

If you have scripts that should never be blocked (besides GTM, which is automatically excluded), add the data-cookieframe="ignore" attribute:

<!-- This script will never be blocked -->
<script src="https://example.com/essential-script.js" data-cookieframe="ignore"></script>

CookieFrame also recognizes data-cookieconsent="ignore" for compatibility with Cookiebot migrations.

Google Consent Mode Settings in CookieFrame

You can configure Google Consent Mode behavior in your CookieFrame dashboard under Settings → Integration.

Basic Mode vs Advanced Mode

Google Consent Mode supports two implementation modes:

Wait for Consent Update

The Wait for update setting controls how long Google tags wait for consent before firing with default (denied) values. The default is 500 milliseconds.

This setting is available in both the GTM template configuration and the CookieFrame dashboard under Settings → Integration → Google Consent Mode v2.

Debug Mode

Enable Debug Mode to log all Google Consent Mode operations to the browser console. This helps troubleshoot consent signaling issues.

When enabled, you'll see messages like:

[CookieFrame GCM] setDefaultGoogleConsentMode() called
[CookieFrame GCM] Calling gtag('consent', 'update', ...)
[CookieFrame GCM] gtag consent update called successfully

Verify Setup

Click Verify Setup to check that Google Consent Mode is properly configured. This checks:

• Widget configuration exists
• Google Consent Mode is enabled
• Widget has been published
• Domain is active

Configuring Other Tags for Consent

Tags from Google (GA4, Google Ads, Floodlight) have built-in consent mode support and work automatically. For third-party tags, you need to configure consent settings manually.

Adding Consent Checks to Tags

1. Open the tag you want to configure
2. Scroll to Consent Settings
3. Click Require additional consent for tag to fire
4. Add the appropriate consent types:
   • For analytics tags: analytics_storage
   • For advertising tags: ad_storage

[SCREENSHOT PLACEHOLDER: Tag consent settings configuration]

Using the Consent Overview

GTM provides a Consent Overview to help identify tags that may need configuration:

1. Go to Tags in the left sidebar
2. Click the Consent Overview icon (shield icon)
3. Review tags marked as "No consent configured"

Troubleshooting

The consent banner doesn't appear

1. Verify your Domain ID is correct (8 characters, uppercase)
2. Check that "Inject CookieFrame widget script" is enabled
3. Ensure the domain in CookieFrame matches your website exactly
4. Check the browser console for errors

Tags fire before consent is given

1. Confirm the CookieFrame tag uses the Consent Initialization - All Pages trigger
2. Verify other tags have appropriate consent settings configured
3. Check that consent defaults are set to "Denied"

Consent state doesn't update after user choice

1. Enable debug logging and check console for errors
2. Verify the CookieFrame widget is loading correctly
3. Clear your browser's localStorage and try again

Returning visitors aren't recognized

CookieFrame stores consent in localStorage under the key cf_consent. If this is cleared (e.g., by browser privacy settings), consent must be given again.

Next Steps

• Configure your consent banner design
• Set up cookie scanning
• Learn about compliance frameworks

Need Help?

If you're having trouble with the GTM integration:

• Email us at support@cookieframe.com
• Check our FAQ for common questions