Building a Compliant Consent Banner for Google Analytics 4
Best practices of a compliant consent banner
Implementing a consent banner on your website can be daunting. There are many different things you need to think about, and on the search for a compliant consent banner, all you find is expensive platforms that sell their banner to you. But what if you just want to build your own banner, with your own design and logo, and not pay a monthly fee? This article has all the information you need to be aware of when you create your own, custom made and compliant banner for your business’ website.
We have summarised all we learnt from working with different advertisers and agencies integrating their own consent banners on their sites, and it’s time to share our knowledge with you to help you further during these unsteady times of privacy regulation changes.
There are several things you need to think about. From compliance to design, to consent mode integrations, respecting the user’s preferences and the communication with platforms such as Google Analytics 4. It’s best to approach these considerations step by step.
Compliance Requirements
In order for your consent banner to be GDPR compliant, it needs to meet the following ten requirements:
- The information presented in the banner needs to be clear and transparent. Explain in simple terms what cookies you are collecting, why you are doing this and what they can be used for.
Refrain from using complex, technical terminology and ambiguous terms. Simply using ‘accept all’ and ‘reject’ on the buttons is the most clear way to show your users you respect their choices. - Link to a detailed cookie policy that provides further information. The link needs to be part of your consent banner.
- Avoid pre-ticked boxes – it’s just not compliant.
- Give granular consent choices. Allow the users to accept some, and reject other type of cookies.
- The banner should be clear and easy to see, without obstructing website content.
- Use contrasting colors and a readable font size.
- Be responsive and function properly on all devices (desktop, mobile).
- Make it possible for the users to revoke their consent at any time, by adding an option on each page to change the cookie preference settings.
- You should be able to demonstrate proof of consent if needed.
- Avoid making continued website usage conditional on accepting all cookies.
Design Best practices
From extensive online research and our experience working with consent banners for different advertisers, we have learnt how important it is to think of the UX-design of your banner equally as the compliance requirements. This is because it’s essential to have your users trust you, and understand that granting consent isn’t such a bad thing after all. Actually, research showed that most website visitors don’t mind giving consent for analytics or advertising purposes – they just care about getting rid of the consent banner as soon as possible!
A few simple design tips can help making the experience for the user seamless, and increase your consent rates:
- The ‘accept all’ button is usually in the right bottom corner of the banner. Most users will accept cookie collection when it’s right there.
- Research showed that dark colour patterns have a higher consent rate (research linked below).
- A consent banner that matches the design of the overall website have a better performance than banners that do not match the overall website design. Using the same colours and font as the general look of the site is therefore the way to go.
- Consent banners taking up significant space on the page have a higher consent rate, as users don’t have another option than to express their preferences. Websites that let users browse without expressing their preferences, have a lower consent rate and therefore, since the default state of consent is ‘denied’, less information about their users is available.
It can also be a good idea to let the banner move along with the scroll of the user. - Delaying the pop-up of your consent banner by a few (mili)seconds gives users the chance to interact with your site and grow trust. However, don’t delay it for too long; a few (mili)seconds should be enough.
Link to source
Consent State based on User’s preferences
Now that you have designed a consent banner that is also compliant, it is important to keep the user’s expressed preferences in mind when communicating with other platforms that communicate with your site. There are two options for consent states:
- Denied
- Granted
There is nothing in between. There is no ‘Maybe’, or ‘Maybe later’. This is it! Simple as that.
Since the beginning of march, every consent banner should have a default state of ‘denied’.
What does this mean?
It means that when a user visits your site for the first time and did not grant consent yet, you are not allowed to collect any user specific information about your website visitor. His consent state is ‘denied’, until he or she tells you differently.
With a consent banner that has granular control, a user can choose to:
- Give consent to all cookies
- Give consent to some categories of cookies
- Deny all cookies
Now, when a user grants consent to all cookies, all consent states move from ‘denied’ to ‘granted’. If a user chooses to deny all cookies, the consent state remains denied. However, there are two exceptions to the rule: usually, two categories are still set to granted, despite a user rejecting the collection of cookies: Functionality and Security cookies. These cookies are often crucial for the basic operation of the website. They might manage things like user sessions, login credentials, or form submissions. Without them, the website might malfunction or become unusable. Therefore, it is OK to set these cookies to ‘granted’ by default.
(Fun fact: Did you know that Google has pushed the deprecation of third-party cookies to 2025, contradicting earlier messaging stating that they would be deprecated by the end of 2024?)
Mapping consent states to consent categories
If you are manually integrating the categories in your banner to the consent states for platforms such as Google Analytics, you can map the consent states to the categories accordingly.
To understand how to map these, it’s important to know about the four different categories of consent the system can interpret:
- analytics_storage: controls whether data can be used for analytics purposes
- ad_storage: controls whether data can be used for advertising purposes
- ad_user_data: data about the user that can be used for advertising purposes
- ad_personalization: controls whether personalised advertising can be enabled
These four categories are the four states that Google’s consent mode v2 will read to decide how to use the data of the user, and whether it can leverage personal data, or if it should model your user’s data without using personally identifiable information (predict what the user would have done, what it’s characteristics are, to make an estimation of the user’s profile and behaviour).
We provide you with an example of a possible mapping of consent categories to the consent mode categories:
Marketing | ad_storage, ad_user_data, ad_personalization |
Analytics | analytics_storage |
Personalization | personalization_storage |
Essential | functionality_storage, security_storage |
As you see here, the essential cookies are those that are usually set to granted by default. The marketing cookies are the most common ones that businesses use for advertising. Personalisation can be linked to remarketing campaigns – using user lists to place ads where it’s most relevant.
How Google Analytics 4 reads Consent States
Now that you know how to integrate your consent banner with consent states for different categories, it’s also important to know what Google analytics 4 will do with the data it has collected. There are two options here.
- The user granted consent
- The user did not grant consent
What Google Analytics 4 will do depends on the implementation of consent mode.
Again, there are two options:
- Basic consent mode
- Advanced consent mode.
We will explain all four scenario’s of how Google analytics 4 will interpret the user data.
Basic Consent Mode:
- Consent Denied: In this scenario, GA4 will collect very limited data. This might include basic information about the session (e.g., timestamp, IP address in a masked format) but will not include any user-identifiable information or track user behavior across the website. You’ll have very restricted data available for analysis, making it difficult to understand user behavior and website performance.
- Consent Granted: With consent, GA4 can collect a wider range of data about user behavior on your website. This might include page views, events, conversions, and potentially some user demographics (depending on your implementation). You’ll have access to more comprehensive reports and insights into user activity, allowing for better website optimization and marketing strategies.
Advanced Consent Mode:
- Consent Denied: GA4 utilizes behavioral modeling in advanced consent mode when users deny consent for data collection.
When users deny consent, GA4 can’t associate their behavior with a persistent identifier like cookies. This creates gaps in your data.
To address these gaps and still provide insights, GA4 leverages modeled data. This modeled data is based on the behavior of users who granted consent. Essentially, GA4 uses machine learning to analyze the actions of consenting users and create a statistical model to estimate how users who denied consent might have behaved.
- Consent Granted:
- In advanced consent mode with granted consent, you have more control over the specific data collected from users. You can define which data points require consent and configure GA4 to only collect information users explicitly allow. The above will apply to rejected cookies, and a wider range of data about user behaviour will be collected for those cookies with the consent granted.
- In advanced consent mode with granted consent, you have more control over the specific data collected from users. You can define which data points require consent and configure GA4 to only collect information users explicitly allow. The above will apply to rejected cookies, and a wider range of data about user behaviour will be collected for those cookies with the consent granted.
With all this newly acquired knowledge about the compliance, design and integration of a consent banner of your site, the only thing left for us to do is to address that the complete integration of a consent banner, consent state, and the communication to Google Analytics 4 is a technical process.
It requires coding skills.
Therefore, we highly encourage you to get a web developer involved in the process if you choose not to work with a Consent Management Platform or paid website plugin.
Our team at UP Analytics is available to collaborate with your development team to provide more details and explain the process further if needed.
If you want to simplify the process, consider signing up for a GA4 UP subscription. With this subscription, we audit your setup, implement new feature releases and update you on new privacy releases (stay updated with GDPR / CCPA) for a small monthly fee. This subscription allows you to focus on your priorities while the experts handle the rest. Learn more about how we can support you here
Blog by Tika Spijkerman, Analyst at UP Analytics
