🏷️ Google Tag Manager Integration

Google Consent Mode v2 Integration

This example demonstrates how OpenConsent v2 automatically integrates with Google Consent Mode v2 and Google Tag Manager.

What's happening:

✅ CMP initializes before GTM
✅ Google Consent Mode default values are set automatically
✅ GTM script is blocked until analytics consent is given
✅ Consent signals are updated in real-time (no page reload)
✅ All Google services respect the consent choices

⚠️ Important Setup Notes

Replace GTM-XXXXXXX with your actual GTM container ID
The GTM script must have type="text/plain" data-category="analytics"
CMP must be loaded before GTM in the HTML
In GTM, configure your tags to respect Consent Mode signals

Current Consent Mode Status

The following shows the current Google Consent Mode values:

Test Consent Changes

Use these buttons to test how consent changes affect Google Consent Mode:

Implementation Code

Here's the complete implementation for GTM integration:

<!-- 1. Load OpenConsent v2 CMP first -->
<script src="https://cdn.example.com/cmp.min.js" data-site-id="your-site-id"></script>
<script>
    window.RSCMP.init({
        siteId: 'your-site-id',
        apiUrl: 'https://your-api-server.com',
        config: { /* your config */ }
    });
</script>

<!-- 2. Load GTM with type="text/plain" and data-category="analytics" -->
<script type="text/plain" data-category="analytics">
    (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-XXXXXXX');
</script>
    

Google Consent Mode Mapping

OpenConsent v2 automatically maps consent categories to Google Consent Mode:

OpenConsent Category	Google Consent Mode Parameter
`analytics`	`analytics_storage`
`marketing`	`ad_storage`, `ad_user_data`, `ad_personalization`
`preferences`	`personalization_storage`
`necessary`	`functionality_storage`, `security_storage`

Testing in GTM

How to verify it's working:

Open GTM Preview mode
Load this page
In GTM Preview, check the "Consent" tab
You should see the consent state values
Change consent preferences and watch the values update
Verify that tags fire/block based on consent

Advanced: Custom Events

You can listen to consent changes and push custom events to dataLayer:

// Listen to consent updates
window.addEventListener('rscmp:consent-updated', (event) => {
    console.log('Consent updated:', event.detail);
    
    // Push to dataLayer for GTM
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'consent_updated',
        'consent_analytics': event.detail.categories.analytics,
        'consent_marketing': event.detail.categories.marketing,
        'consent_preferences': event.detail.categories.preferences
    });
});
    