Framer: How to Add a Functional Cookie Banner with Google Consent Mode
Robin Louw
|
Compliance and analytics go hand in hand when launching a professional website. Tracking user data responsibly requires setting up proper consent management.
In this guide, we will walk through the exact steps to add Framer's official Cookie Banner component, configure it with Google’s Consent Mode, and seamlessly connect it to Google Analytics and Google Tag Manager (GTM).
1. Inserting the Cookie Banner Component
Framer provides a built-in Cookie Banner component that is fully compliant with modern data regulations and integrates natively with Google's Consent Mode.
Adding the component: Open the Insert panel, search for "Cookie Banner," and drag it onto your page. It is highly recommended to paste this component into your global navigation or footer component so that it carries across all pages of your site automatically.
Trigger settings: Under the properties panel on the right, you can customize how the banner behaves. To ensure it works out of the box, change the visibility preview to see how it looks. You can set up distinct behaviors for different regions (such as the EU vs. the rest of the world). For strict regions, you can require explicit "Accept" and "Reject" choices.
Linking Policies: Always make sure to populate the link field inside the component properties to point directly to your site's dedicated Privacy Policy or Legal page.
2. Setting Up Google Analytics
To ensure data is only tracked after a user grants consent, you need to tie your cookie banner to your Google Analytics property.
Create a Property: Head over to Google Analytics, create a new property for your website, and set up a web data stream.
Get your Measurement ID: Copy the tracking ID (formatted as
G-XXXXXXXXXX).Connect to Framer: Navigate to your Framer Site Settings > Analytics, paste your Measurement ID into the designated Google Analytics field, and save your changes. Google Analytics will now automatically respect the consent signals sent from Framer’s native banner.
3. Advanced Configuration with Google Tag Manager (GTM)
Next, we need a GTM Container with consent overview via Google Tag Manager.
Create a GTM Container: Sign in to Google Tag Manager and set up a new container for your web property. Copy your GTM Container ID (formatted as
GTM-XXXXXXX).Inject GTM into Framer: In Framer, select the cookie banner component, then add the GTM Container ID to the GTM ID field of the component.
Enable Consent Overview: Within GTM settings, make sure to turn on the "Consent Overview" feature. This allows you to check individual tag settings and specify which cookies (such as analytics storage or ad storage) are required before a specific tag is allowed to fire.
4. Publishing and Testing
Once everything is linked, it's time to verify that your setup handles cookies correctly.
Click Publish in Framer to push your changes live.
Visit your site in an Incognito window to view the banner as a first-time visitor.
Verify consent states: When you click "Reject," check your browser’s developer tools or GTM's Preview Mode to ensure no tracking cookies are dropped. When you hit "Accept," your GA and GTM tags should successfully fire, giving you clean, legally compliant analytics data.
Conclusion
The native Framer Cookie Banner component should now pass the correct consent signals (analytics_storage and ad_storage) directly to Google’s scripts, satisfying Google’s requirements for Consent Mode. However, do consult with a certified professional to be sure your Google Tag Manager and Google Analytics accounts are setup correctly.
You can try Framer for free using this link
Thanks for visiting Design Chillout! While you’re here, don’t forget to checkout the designer toolkit or grab something from the cooler box!
Affiliate disclosure:
As a Framer Partner, I may earn from qualifying plan purchases at no cost to you.
AI disclaimer:
This article contains original content. However, AI may have been used to generate content from transcripts or to correct the grammar, spelling, and formatting of existing content.
