Analytics, Insert Menu

How to add a Cookie Banner to your Framer website

9:43

33K views

Sep 7, 2023

About this lesson

We’ve added the Cookie Banner Component to the insert menu. The component allows you to set up a complete cookie consent system through Google Tag Manager. It is fully integrated with Google’s Consent Mode, which allows you to activate Google services, third-party integrations, or custom scripts only when the appropriate consent has been obtained. You can customize every piece of text and adjust the appearance to ensure it blends seamlessly with your website. Learn more here: https://www.framer.com/academy/lessons/cookie-banner-component

https://www.youtube.com/watch?v=0XZRVjInsXY&t=3s Setting up a fully working cookie consent banner connected to Google Tag Manager

https://www.youtube.com/watch?v=0XZRVjInsXY&t=11s Choosing a component for the banner

https://www.youtube.com/watch?v=0XZRVjInsXY&t=33s Adding the component from the insert menu

https://www.youtube.com/watch?v=0XZRVjInsXY&t=47s Customizing the trigger and appearance of the banner

https://www.youtube.com/watch?v=0XZRVjInsXY&t=99s Setting the trigger type to "none" for showing the banner only to first-time visitors

https://www.youtube.com/watch?v=0XZRVjInsXY&t=137s Enabling preview mode and customizing the banner options

https://www.youtube.com/watch?v=0XZRVjInsXY&t=275s Tweaking the style and design of the banner

https://www.youtube.com/watch?v=0XZRVjInsXY&t=427s Setting up Google Tag Manager for the site

https://www.youtube.com/watch?v=0XZRVjInsXY&t=563s Connecting the container ID to the component

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

MB01S5ZYXOY8TO8

0:00foreign 0:01I'm Flo 0:03and in this video I'll show you how to 0:06set up a fully functioning cookie 0:08consent Banner powered by Google tag 0:10manager 0:11let's take a look at our project 0:13here we have a documentation website 0:16with the sidebar on the left and a 0:18Content section on the right 0:20we want our cookie Banner to show up on 0:23the entire website so it's smart to pick 0:25a component that is already set up on 0:28every page 0:29in our case that is the sidebar 0:31component 0:33let's add the component from the insert 0:35menu 0:37we'll first drop it on the canvas so 0:39that we can customize it 0:41to make it work with Google tag manager 0:43we need a container ID 0:45but we'll set that up later 0:47here you can see that preview is enabled 0:50by default 0:51this makes it easy to tweak the look and 0:53feel of the banner 0:54turning off preview will show what the 0:56component will actually look like on 0:58your page 0:59currently it will show as a trigger that 1:02allows your users to open up the banner 1:04let's tweak the way the trigger looks 1:06that it feels at home in the sidebar 1:09we'll give it a different font family 1:14update the weight 1:16we'll use the same size as the sidebar 1:18and now we can pick a color 1:21that's better now we'll drop it into the 1:23sidebar so that it's part of our page 1:26and let's publish this so that we can 1:28check it out in the browser 1:32now when we load our page the cookie 1:34Banner automatically shows up because we 1:36haven't given any consent yet 1:39and when we switch to another page it 1:42will stay put until we dismiss it 1:47there are times where you don't want to 1:49trigger at all and only want to show the 1:51cookie Banner when the visitor visits 1:53your site for the first time 1:55for those cases you can set the trigger 1:58type to none 2:00and then if we take a look in the 2:02preview you can see that it is 2:03completely hidden you can even set the 2:06opacity to zero and it would still work 2:09for this demo we do want to trigger so 2:11let's revert the trigger type to text 2:17I'll drag the component out to the 2:19sidebar and enable preview so that we 2:21can customize it further 2:23we can control the component's behavior 2:24for the EU and the rest of the world 2:26specifically 2:28for most of the world a simple Banner 2:30that lets users know you're using 2:31cookies is enough 2:33for the EU you might want to go for 2:35something more elaborate 2:37toggling between EU and world will show 2:39the corresponding Banner on the campus 2:42for each region we can control the types 2:44of choices a user has we can use a 2:46different copy we can add a link to our 2:48cookie policy set the default consent or 2:51render a blocking backdrop behind our 2:53Banner 2:54there are three different types of 2:55choices you can give users none which 2:58will render is simple notice Banner with 3:00the confirmation button and will Auto 3:02accept cookies 3:04accept reject 3:06giving an All or Nothing choice or 3:08customizable 3:09offering four different consent options 3:12with customizable selected we can see an 3:15additional options prop 3:17if we open this up we can control the 3:20text or the look and feel of the options 3:23that you see when you click the 3:24customize button 3:26let's click preview so we can see it on 3:28the canvas 3:30you can tweak the copy of each option so 3:32you can be as explicit as you want 3:34let's first tweak the general look and 3:36feel of the banner so let's close this 3:37up for a bit and focus on the banner and 3:39buttons props 3:41here you can see that we have full 3:43control over positioning with batting 3:45and layout 3:47but let's first focus on tweaking our 3:49style 3:52I'll speed it up for a bit so you can 3:53see in real time how I'm tweaking this 3:55component 3:58I'm trying to use color variables as 4:00much as possible so that we have 4:02automatic support for dark mode 4:05and here I'm replacing the border with a 4:08shadow to make it pop a little bit 4:11next we're opening up our buttons prop 4:13where we control the primary button and 4:16the secondary button and we also have 4:18full control over all the labels that 4:20are being used in the banner 4:24and finally we enable preview for our 4:27options so that we can tweak them and 4:29also make them fit into our design 4:31[Music]4:33I think we're done 4:35so let's disable preview mode drop it 4:38back into our sidebar and hit publish 4:41when we open up the browser you can see 4:43that the banana perfectly fits our 4:45design 4:46and we can set four different levels of 4:48consent with the customize button 4:53now let's switch over to Google tag 4:54manager so that we can set it up on that 4:56side 4:57I have a brand new container so let's 4:59first enable consent mode 5:03if we go into the admin settings and 5:05then container settings we can simply 5:07enable consent overview 5:10done 5:12next 5:16let's set up our first tag 5:19we'll set up a tag for Google analytics 5:21because the Google tags are the easiest 5:23to set up 5:24I'll paste in my analytics ID 5:27then I'll go into consent settings and 5:31you can see that automatically the 5:34Google tag looks for certain consent 5:37and without it it will only send 5:39anonymous Bings to Google Analytics 5:42we'll finish up this tag by making it 5:45trigger on every page 5:47then we'll hit save and we're done 5:52we can also Fire custom tags based on 5:55consent 5:57to do this we can simply create a new 5:59tag 6:01we can select any service that we want 6:04or in this case we can fire some custom 6:06HTML 6:10then we open up the consent settings 6:13again 6:19and now we can simply say what kind of 6:21consent we need before we want to fire 6:23this tag 6:25in this case I'm only looking for 6:27consent for ad storage 6:29but you can also select multiple so that 6:32they all have to be true before this 6:33stack fires 6:35and again we'll make this one trigger on 6:38all pages 6:39[Music]6:42we'll save this one as well 6:45and let's take a look at what we have 6:47there is a Google analytics tag which 6:49will always fire but will adjust Its 6:52Behavior based on given consent and we 6:55have a custom tag that will only fire if 6:58ad storage consent has been given 7:00we're good to go 7:03let's publish this container so that we 7:04can use it in our site 7:07[Music]7:11the last thing we need to connect it to 7:13our component is the container ID 7:16let's copy it over 7:18we can simply paste it in the properties 7:20panel 7:21and we're done 7:23now let's update our site so that we can 7:25check if everything is wired up 7:27correctly 7:29Google tag manager offers some great 7:30tools to track what's happening on your 7:33site if you go into tag manager and then 7:35click the preview button this will open 7:37up the tag assistant 7:39the tag assistant shows you everything 7:41that Google tag manager is doing on your 7:43site and everything that is not 7:46for example in the summary here we can 7:49see that the Google analytics tag has 7:51been fired and our custom marketing tag 7:54has not been fired because we haven't 7:56given the proper consent yet in the 7:58sidebar we can see all the events that 8:00Google tag manages firing 8:03the one that we need to keep track of is 8:05consent which is the first one in this 8:07case 8:09as this is the first step you can see 8:11that none of the tags have been fired 8:13yet 8:14we're first setting the default consent 8:16and then tag manager will figure out 8:18which tags need to be fired 8:21let's check out what happens when we 8:23update the consent in the cookie Banner 8:28hit customize 8:30and we'll just enable Analytics 8:33we'll hit save 8:35and on the right you can see that a new 8:37consent event has been fired 8:40and in this event you can see that we 8:42have given consent for analytics storage 8:45that means that the Google analytics tag 8:47will go back to its default behavior and 8:50will track everything 8:52now let's make our custom tag fire we'll 8:55open up the cookie Banner again 8:57and will enable marketing 9:00under the hood this maps to the add 9:02storage consent in Google 9:05and you can see that that is now granted 9:08if we now reload the page our marketing 9:11tag fires and you can see the alert that 9:13we have just added to Google tag manager 9:17the cookie Banner component allows you 9:19to connect framer to Google tag manager 9:21and this is a powerful setup in framer 9:25you can set up a beautiful cookie Banner 9:27to collect and send from your visitors 9:29an attack manager you can fully control 9:32the behavior of your site 9:33we hope that this will make dealing with 9:35cookies a lot easier 9:37thank you for watching

TeachesPlugins Visitor Analytics

Also coversComponents Links Stacks Themes Typography Variables

Watch on YouTube ↗

‹ Framer Update: Bold & Italic

Framer Update: Quick Page Switcher ›