Getting Started
To set up a working cookie banner, you need three things:
The Cookie Banner component
A Google Tag Manager container
A site on a Pro plan
Adding the component to your site
![](https://framerusercontent.com/images/b17nXKNgyTngXrdNGJvqexpzw.png)
To access the Cookie Banner Component, simply go to the Insert Menu and drag it onto the Canvas to begin working with it. Remember to add the component to every page where you want it to be visible. For convenience, it’s recommended to add it to a common component that appears on every page such as a navbar, footer, or sidebar.
Previewing
The Cookie Banner component operates differently from traditional components. It handles the setup of positioning rules, animations, and responsive layouts, eliminating the need for such busy work. To use it, add the component to the desired page. Note that the component on the Canvas serves as the trigger for opening and closing the banner when the user clicks it, and not the actual banner itself.
![](https://framerusercontent.com/images/aDpMdKBeLqLMUCVOWftv8ZSWPT4.png)
You have the flexibility to place the component anywhere on your page without impacting where the opened banner will appear. For easy customization of your banner’s appearance, there is a Preview
option available. Simply turning this option on and off allows you to switch between the component’s appearance on your page and the actual banner’s appearance when it is active.
Hidden Mode
![](https://framerusercontent.com/images/xWGg0hgFezpSEPGtjNIWuuvkWSk.png)
To open or close the banner, the component serves as the default trigger. However, if you wish to display the banner to visitors without a visible trigger (when they land on your site without consent), you can eliminate the trigger entirely. In the properties panel, open the Trigger
options and select the None
type. This will produce a placeholder that will not appear in the preview or published site. You can position it anywhere on your page, and it will activate the cookie banner, regardless of whether the component’s opacity is set to 0
.
Controlling Behaviour
You can adjust the banner settings for both the EU and the rest of the world as per your preferences. Usually, a basic banner is set as the default option, but a more detailed version is used for the EU to comply with GDPR regulations. The relevant banner will be displayed on the Canvas when preview mode is enabled.
For each region, you have the option to determine the choices that users are presented with:
No Choice: Default cookies are automatically accepted.
Accept/Reject: Users can choose to accept or reject all cookies.
Customizable: Users can select from four levels of consent:
Necessary: Enables security and basic functionality.
Preferences: Enables personalized content and settings.
Analytics: Enables tracking of performance.
Marketing: Enables personalized ads and tracking.
Connect to Google Tag Manager
Once you are satisfied with the appearance of your component, connect it to Google Tag Manager. This will enable you to utilize consent mode for tag firing.
Setup Container
![](https://framerusercontent.com/images/auNcA3aScf3G2Lei8FeahfKLURo.png)
If you haven’t done so already, create a container in Google Tag Manager. Then, enable consent mode by going to Admin
→ Container Settings
→ Enable Consent Overview
.
Connect to Framer
![](https://framerusercontent.com/images/iNckrgka84Y1lgux0aJoztKLZxk.png)
You can connect your container in Framer by adding its ID to the properties panel. The ID can be found in the top right of the dashboard.
Consent types
Google Consent mode has different types you can choose from. To keep things simple, the Cookie Component maps the consent types from Google to these options in the UI:
Necessary:
security_storage
+functionality_storage
Preferences:
personalization_storage
Analytics:
analytics_storage
Marketing:
ad_storage
+ad_user_data
+ad_personalization
![](https://framerusercontent.com/images/yBreQM7WabSoKawjg8TmBlpL4.png)
You can customize each option by changing its title and description in the properties panel.
Google Tag Behaviour
When consent mode is enabled, Google tags (Analytics, Ads, etc.) will automatically adjust their behavior according to the given consent:
“When you enable consent mode, Google measurement products ensure that a visitor’s consent mode state is preserved across the pages they visit. If consent is denied, tags that fire do not store cookies; instead, they communicate a minimum of information about user activity.”
For example, when no analytics consent has been given:
“...cookieless pings are sent to Google Analytics. No Analytics cookies are set, accessed, or read from the device. Consequently, cookieless pings are anonymized and non-identifiable Google Analytics events.
Cookieless pings, as part of regular HTTP/browser communication, may include the following information: user agent, screen resolution, IP address. Note that Google Analytics 4 does not store or log IP addresses.”
— From the Google help page.
Custom Tags
![](https://framerusercontent.com/images/PqZykE61MF0o0NI5UO9HuCrWT0.png)
You can control when tags are fired based on consent from the UI:
Open any tag
Go into advanced options
Open Consent Settings
Pick a combination of consent
Learn more on the Google help page.
Please note, the tag will only fire on the next page load. If you want your tag to fire after the consent update (without a page refresh), you'll need to follow the next steps.
Run a tag after consent update
To make sure the custom tag runs after the consent update, we offer an event called cookie_consent_update
. Make sure to update the Cookie Banner component in the 'Assets' tab to ensure you have the latest version.
Here's how you can use the event:
In GTM, go to "Triggers" -> Create a new trigger:
Trigger Type: Custom Event
Event Name: cookie_consent_update
This trigger fires on: All Custom EventsUpdate your event to fire based on that new trigger (keep "All Pages" as well if wanted)
Tip: If you load 3rd-party scripts through this mechanism, make sure your tag contains a check that ensures the tag is only executed once, as users can update their consent whenever they want to. If you don't ensure it's only executed once, you might accidentally add the 3rd-party script repeatedly. An example could look like this when using a "Custom HTML" tag: