Blog - Cookie Consent with Google Tag Manager and Google Analytics 4

In this article, I show you in-depth how to integrate a custom Cookie Consent Bar with Google Tag Manager and Google Analytics 4.

In the European Union, we have the General Data Protection Regulation (GDPR). If you have a homepage and live within the EU, there are certain things you have to do to comply with this regulation. And even if you or your business is not within the EU, this regulation might affect you.

To avoid trouble, providing a visitor of your homepage with information about if and which personal data is processed and stored is essential. For cookies and data stored in the browser’s local storage, you must also allow someone visiting your website to decide which data can be processed. It includes the option to disallow any cookies not deemed essential.

Usually, a pop-up or customized cookie consent bar takes care of this feature.

One important aspect of including a cookie consent bar on your homepage is preventing data storage before a visitor chooses their preference. It is curcial for cookies stored by third-party plugins like Google Analytics.

The three video tutorials below address this problem and show how to properly set up a cookie consent bar with Google Tag Manager and Google Analytics 4.

Custom Cookie Consent Form

The first step is to include a customizable cookie consent form. Most websites use third-party plugins for that. But this creates dependencies, adds requests to your homepage, and introduces code you have no control over.

If I have the option, I prefer to host all code executed if someone visits my homepage on my server. For the inclusion of a cookie consent bar, I could have used one of the more popular libraries from Github to fulfill this requirement.

But popular often means being generic and loaded with options I don’t require.

That’s why I wrote my own minimal cookie consent form in TypeScript and released it as open-source on my GitHub.

In the video, I show how to use it on your homepage.

Google Tag Manager Introduction

If you use Google Tag Manager to add Google Analytics to your website, you must integrate the cookie consent form once it’s set up.

It is easy as I show in the next video.

Google Consent Mode

Google is slowly paving the way for cookie-less Google Analytics with the introduction of “Consent Mode”. For homepages with enough traffic, it allows Google Analytics to fill the gaps created by a visitor disallowing the storage of Google Analytics cookies.

Although the used models will not work if your homepage doesn’t create enough traffic, it is still a good idea to activate consent mode for a future-proof integration of Google Analytics with your website.

Conclusion

If you’ve made it through all three tutorials, you should be comfortable setting up and configuring a cookie consent bar with Google Tag Manager and Google Analytics 4.

I also spent a lot of time on how to use the custom “gtag” function. With that knowledge, you can do even more. Your use of Google Tag Manager doesn’t have to end with setting up Google Analytics.