Getting Started

To set up a working cookie banner, you need three things:

1. The Cookie Banner component

2. A Google Tag Manager container

3. A site on a Pro plan

Adding the component to your site

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.

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

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

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

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

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

You can control when tags are fired based on consent from the UI:

1. Open any tag

2. Go into advanced options

3. Open Consent Settings

4. 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 The Consent Update

By default, when a user confirms the consent, Google Tag Manager will load, but none of the tags that trigger on a page view will run. That’s because the page view has already happened by the time the consent was given.

To allow running a custom tag after the consent update, we trigger an event called cookie_consent_update. (If you do not see the event triggered, update the Cookie Banner component in the “Assets” tab to the latest version.)

Here’s how to use the event to run a tag when a consent is updated:

1. In GTM, go to “Triggers” → Create a new trigger:
   Trigger Type: Custom Event
   Event Name: cookie_consent_update
   This trigger fires on: All Custom Events

2. Update your event to fire based on that new trigger (keep the “All Pages” trigger as well if wanted)

Note: a user can update consent several times within a single session. If you load third-party scripts through this mechanism, ensure your tag contains a check that ensures it is only executed once. Otherwise, you might accidentally add the third-party script repeatedly.

Here’s an example of the check when using a "Custom HTML" tag:

<!-- Prevent Segment from being loaded multiple times -->
<script>
window.segmentWasLoaded = false // ← This initializes the check
function loadSegment() {
  window.segmentWasLoaded = true // ← We now have called the function, so we update the check

  // here comes the Segment snippet:
  !function(){var analytics=window.analytics;//...
}
if (!window.segmentWasLoaded) { loadSegment(); } // ← Only call our function if we haven't run it yet
</script>