Back to DigiConsent

Google Tag Manager Integration and Best Practices

Google Tag Manager (GTM) is a powerful tag management system that allows you to deploy and manage marketing tags, analytics scripts, and conversion tracking pixels without modifying your website’s code directly. When combined with DigiConsent, GTM becomes even more powerful—you can manage all your tracking tools in one place while ensuring they only fire after users provide appropriate consent. This guide explains how to integrate GTM with DigiConsent for complete privacy compliance.

Unlike directly embedding tracking scripts in your website, GTM loads tags dynamically based on triggers and conditions you define. This flexibility makes it ideal for websites running multiple marketing tools, frequent or complex conversion tracking. However, GTM requires careful configuration with consent management to ensure tags respect user privacy choices and comply with GDPR, CPRA, and other regulations.

Understanding GTM in Privacy-Compliant Environments

Google Tag Manager consists of a container—a JavaScript snippet you add to your website—that loads and manages individual tags. Tags are snippets of code or tracking pixels from third-party services like Google Analytics, Facebook Pixel, or custom JavaScript. Triggers determine when tags fire (page load, button click, form submission), and variables store values used by tags and triggers.

From a consent management perspective, GTM presents both opportunities and challenges. The opportunity is centralized control: once GTM integrates with DigiConsent, you can manage consent for all your tags in one place. The challenge is that GTM’s container must load before consent is given (otherwise you can’t detect consent choices), but individual tags within GTM must wait for consent before firing.

The solution is a two-layer approach. The GTM container itself loads immediately without requiring consent—it’s essentially a tag management tool that doesn’t track users on its own. Individual tags within GTM are configured to fire only after users provide consent for their respective categories. This approach complies with privacy regulations because the container doesn’t set tracking cookies, and actual tracking tags wait for consent.

Creating Your GTM Account and Container

If you don’t already have a Google Tag Manager account, create one before proceeding:

  1. Visit tagmanager.google.com and sign in with your Google account
  2. Click “Create Account” if this is your first GTM account
  3. Enter your account name (typically your company or organization name)
  4. Select your country (affects data processing location and legal agreements)
  5. Accept the Terms of Service
  6. Click “Create” to establish your account

After creating an account, you’ll automatically create your first container:

  1. Enter a container name (typically your website name or domain)
  2. Select “Web” as the target platform
  3. Click “Create”
  4. Review and accept the Terms of Service again (container-specific)

GTM displays your container code immediately after creation. This code includes two parts: a <script> tag for the <head> section and a <noscript> fallback for the <body>. Your container ID looks like GTM-XXXXXX where the X’s are alphanumeric characters. Keep this ID handy—you’ll need it for WordPress integration.

Installing GTM on Your WordPress Site

There are several methods to add Google Tag Manager to WordPress, each with different implications for consent management.

Method 1: Direct Code Addition (Recommended for Most Sites)

For most WordPress sites, the simplest approach is adding GTM code directly to your theme. Since GTM’s container needs to load before consent detection, add it outside DigiConsent’s consent management. However, you’ll configure individual tags within GTM to respect consent.

Add the GTM head code to your theme’s header.php file, immediately after the opening <head> tag:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Then add the noscript fallback immediately after the opening <body> tag in your theme (typically in header.php or a separate template file):

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Important: If you modify your theme files directly, changes will be lost when you update the theme. Use a child theme to preserve customizations, or use Method 2 below with a plugin.

Method 2: Using a GTM Plugin

Several WordPress plugins simplify GTM installation. These plugins add the container code automatically without requiring theme file modifications. Popular options include:

  • Google Tag Manager for WordPress by Thomas Geiger (free, lightweight)
  • GTM4WP by DuracellTomi (feature-rich with e-commerce tracking)
  • Site Kit by Google (official Google plugin, includes GTM and other Google services)

When using a plugin, simply install it, enter your GTM container ID in the plugin settings, and save. The plugin handles code placement automatically. Most GTM plugins include options for excluding the container from specific pages or user roles if needed.

Connecting GTM with DigiConsent Consent Signals

With GTM installed, the next critical step is making consent information available to GTM so individual tags can check consent status before firing. DigiConsent stores consent choices in browser storage and provides JavaScript functions to check consent status. You’ll create GTM variables that read these consent states.

Creating Consent State Variables

In your GTM container, create custom JavaScript variables that check DigiConsent’s consent status for each cookie category:

  1. In GTM, navigate to Variables in the left sidebar
  2. Click “New” under User-Defined Variables
  3. Click the variable configuration area to choose a variable type
  4. Select Custom JavaScript
  5. Name the variable Consent - Analytics
  6. Enter this JavaScript code:
function() {
  // Check if DigiConsent consent object exists
  if (typeof digiconsentConsent !== 'undefined' && digiconsentConsent) {
    // Return true if analytics cookies are accepted
    return digiconsentConsent.analytics === true;
  }
  // Return false if consent not yet determined
  return false;
}

Create similar variables for other consent categories:

  • Consent – Marketing: Check digiconsentConsent.marketing
  • Consent – Functional: Check digiconsentConsent.functional
  • Consent – Necessary: Check digiconsentConsent.necessary (though necessary cookies typically don’t require consent checks)

Note: The exact JavaScript object name and structure depend on DigiConsent’s implementation. Check DigiConsent’s documentation or browser console to verify the consent object structure. You may need to adjust the code above to match DigiConsent’s specific API.

Alternative: Using dataLayer Events

A more robust approach is pushing consent changes to GTM’s dataLayer. Add custom code to DigiConsent that fires whenever consent changes:

In DigiConsent’s custom JavaScript settings (if available) or through a WordPress hook, add:

// Push consent state to dataLayer when user makes choice
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'consent_updated',
  'consent_analytics': consentChoices.analytics ? 'granted' : 'denied',
  'consent_marketing': consentChoices.marketing ? 'granted' : 'denied',
  'consent_functional': consentChoices.functional ? 'granted' : 'denied'
});

Then in GTM, create dataLayer variables that read these values:

  1. Create a new variable in GTM
  2. Choose Data Layer Variable as the type
  3. Set Data Layer Variable Name to consent_analytics
  4. Name the variable DLV - Consent Analytics
  5. Save the variable

Repeat for marketing and functional consent states. These dataLayer variables update automatically when the consent_updated event fires.

Configuring Tags to Respect Consent

With consent state variables created, configure individual tags in GTM to fire only when appropriate consent is granted.

Example: Google Analytics 4 Tag with Consent

Here’s how to configure a GA4 tag that only fires when users accept analytics cookies:

  1. In GTM, go to Tags and click “New”
  2. Name the tag “GA4 – Page View”
  3. Click the tag configuration area
  4. Select Google Analytics: GA4 Configuration
  5. Enter your GA4 Measurement ID
  6. Under Triggering, click the trigger configuration area
  7. Select All Pages as the base trigger
  8. But don’t save yet—add an exception
  9. Click “Add Exception” under the trigger
  10. Create a new trigger named “Consent – Analytics Denied”
  11. Trigger Type: Custom Event
  12. Event name: .* (matches all events)
  13. Add a condition: Consent - Analytics equals false
  14. Save the exception trigger

This configuration fires the GA4 tag on all pages EXCEPT when the Consent – Analytics variable returns false. Effectively, the tag only fires when analytics consent is granted.

Example: Facebook Pixel Tag with Consent

For marketing pixels like Facebook, check marketing consent:

  1. Create a new tag in GTM
  2. Select Custom HTML as the tag type
  3. Paste your Facebook Pixel code
  4. Under Triggering, choose All Pages
  5. Add an exception: “Consent – Marketing Denied”
  6. The exception trigger should fire when Consent - Marketing equals false

This ensures Facebook Pixel only loads for users who accept marketing cookies.

Using Google Consent Mode with GTM

Google Consent Mode v2 provides native integration between consent management and Google’s advertising and analytics products. When using GTM, implement Consent Mode through GTM rather than directly on your site.

Create a Consent Initialization tag in GTM:

  1. Create a new tag
  2. Select Custom HTML tag type
  3. Add this code:
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  
  // Set default consent states (denied until user consents)
  gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'wait_for_update': 500
  });
</script>
  1. Under Advanced Settings, set Tag firing priority to 100 (ensures this runs before other tags)
  2. Trigger: Consent Initialization – All Pages (built-in trigger that fires very early)
  3. Save the tag

Then create an Update Consent tag that fires when users accept cookies:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  
  // Update consent when user accepts
  gtag('consent', 'update', {
    'analytics_storage': 'granted',
    'ad_storage': 'granted',
    'ad_user_data': 'granted',
    'ad_personalization': 'granted'
  });
</script>

Configure this tag to fire on a custom event that DigiConsent triggers when consent is granted (you’ll need to configure DigiConsent to push a consent_granted event to dataLayer).

Testing Your GTM and Consent Integration

GTM includes built-in debugging tools that make testing straightforward.

Using GTM Preview Mode

  1. In your GTM container, click Preview in the top right
  2. Enter your website URL when prompted
  3. Click “Connect” to start debug mode
  4. Your website opens in a new tab with GTM’s debugger active
  5. The Tag Assistant panel appears showing tag activity in real-time

In Tag Assistant, test your consent flow:

  1. Start with cookies cleared (or reject all cookies in DigiConsent banner)
  2. Check Tag Assistant Summary—marketing and analytics tags should show “Not Fired” or “Blocked by Exception”
  3. Accept analytics and marketing cookies
  4. Navigate to a new page
  5. Tags should now show “Fired” in Tag Assistant
  6. Review the Variables tab to confirm consent variables return true

If tags fire before consent is granted, check:

  • Exception triggers are configured correctly
  • Consent variables return accurate true/false values
  • Tags are properly linked to exception triggers
  • No duplicate tags exist outside GTM

Testing with Browser Developer Tools

Supplement GTM Preview Mode with browser developer tools:

  1. Open browser console (F12)
  2. Go to Network tab
  3. Reject all cookies
  4. Verify no requests to Google Analytics, Facebook, or other tracking services
  5. Accept cookies
  6. Confirm tracking requests now appear in Network tab
  7. Check Console tab for any JavaScript errors

Advanced GTM Strategies with Consent

Partial Consent Scenarios

Users might accept analytics but reject marketing cookies. Configure tags to handle partial consent:

  • Analytics tags fire when Consent - Analytics is true, regardless of marketing consent status
  • Marketing tags require Consent - Marketing to be true
  • Tags using both analytics and marketing data should check both consent states

Consent Expiration Handling

If DigiConsent expires consent after a set period, ensure GTM respects expired consent:

  • Consent variables should return false when consent expires
  • Tags stop firing automatically when variables return false
  • Test expiration by manually deleting consent cookies and refreshing

Region-Specific Tag Configurations

With DigiConsent Pro’s geolocation features, create GTM tags that fire differently based on visitor location:

  • Create a variable that detects visitor country (from DigiConsent or another source)
  • Add conditions to tags: “Fire only if Country equals ‘US'” or “Block if Country is in EU list”
  • Combine location and consent conditions for maximum control

Common GTM Integration Issues

Tags Fire Before Consent Variables Load

If tags fire on initial page load before consent state is determined, there’s a timing issue. Solutions:

  • Use Google Consent Mode’s wait_for_update parameter to delay tag firing
  • Set consent default states in GTM initialization tag before other tags fire
  • Configure tags to fire on custom events after consent is determined rather than immediate page load

Consent Variables Return Undefined

If consent check variables return undefined instead of true/false:

  • Verify DigiConsent’s JavaScript object name and structure
  • Check browser console to see how DigiConsent stores consent data
  • Add fallback logic to variables that returns false when consent object doesn’t exist
  • Ensure DigiConsent loads before GTM checks consent (may require adjusting script order)

Best Practices for GTM with DigiConsent

  • Document your setup: Keep records of which tags require which consent categories
  • Use naming conventions: Prefix tag names with consent requirements (“[Analytics] GA4 Page View”, “[Marketing] Facebook Pixel”)
  • Regular audits: Periodically review all tags to ensure exception triggers remain configured correctly
  • Test after changes: Any time you add or modify tags, test consent flow in Preview Mode
  • Minimize tag bloat: Only implement tags you actively use—unused tags increase complexity and testing burden
  • Use built-in tag templates: GTM’s official tag templates (GA4, Facebook, etc.) are regularly updated and more reliable than custom HTML
  • Monitor GTM errors: Check GTM’s error reports regularly to catch tags firing incorrectly or blocked by consent

Google Tag Manager combined with DigiConsent creates a powerful, flexible, and compliant tracking infrastructure. By properly configuring consent checks for every tag and thoroughly testing your implementation, you’ll maintain full privacy compliance while leveraging GTM’s powerful tag management capabilities for sophisticated marketing and analytics tracking.

Similar Articles

Back to DigiConsent