We build a Cookie policy from scratch using Vanilla JS in Webflow. We also show you how to use Google Analytics 4 with Webflow and how to properly implement a GDPR compliant cookie policy banner.
https://www.youtube.com/watch?v=MvmT9EBt7CM
Transcript
Hello and welcome to another episode of Webflow and Code where I teach you the underlying code you’re writing in Webflow..huh they didn’t think I was going to say that did you so what we’re going to go over today is how to properly build a GDPR compliant cookie policy Banner because what I see a lot of times nowadays is that people are building these cookie policies and enabling people to accept but if someone doesn’t accept their cookie policy they’re still tracking those users I’ve seen it in the past so what we want to do is build a cookie policy that if it’s not accepted that we don’t make any calls to Google analytics but if they do then we allow those calls.
Now I’m going to build a very very simple version whereby basically if they don’t want to accept the the cookie policy then they are constantly annoyed with the cookie policy Banner if they do then the cookie crop the the policies Banner goes away so some prerequisites here I don’t need to teach you how to create a cookie Banner again I’ve made one here very very basic with a basic accept button.
I don’t need to tell you how to make a privacy policy page because you should be linking to that privacy policy page for the people to read and understand where their cookies and what how their cookies are being used and all the rest of it now you can generate a privacy policy just by searching online cookie policy or privacy policy generator it’s very very easy and it should get you going for most cases.
You’ll of course want to include your cookie policy on every single page that you have so you might want to create a component or something like that so you can see here a very very basic version but what I’m going to do is I’ve created a show class that shows its final position but when the class is removed then it goes off to the side of the page that’s the mechanism I’m going to do so if I’m going to plan this code out the user lands on a…on a page I check the cookie and if they have not accepted the cookie policy then I’m going to add that class to the the privacy policy.
If they click accept I’m going to set that cookie to say that they have accepted it and then I’m going to trigger the Google analytics code that can run so we’re going to dive into it right in raw JavaScript we have access to jcrew so I might dip into a bit jcrew depending on how I’m feeling I don’t know but we’re going to jump into some code and we’re going to make a properly GDPR compliant basic cookie policy Banner.
Now obviously you can get way more advanced in this sort of stuff you can actually deny and or allow certain cookies and and whatever. I’ve seen examples where they do not allow you to turn off essential cookies and then you’ve got tracking cookies and under that that you can turn off and on and it sort of builds up in sort of you know more uh more I’ve forgotten the word that I was going to use more basically a more intrusive is what you’re trying to say Sam.
It’s less private basically as you you know go up the chain so you’ve got essential basic uh tracking of usage of the website and then you’ve got advertisements and things like that so you can turn those off we’re not going to do all that but I’m going to assume that you Dean Google analytics as essential cookies but hopefully this tutorial will teach you that we should not be allowing any tracking whatsoever if the user has either turned it off however you want to do that or they’ve not accepted that cookie policy to be properly GDPR compliant as well we have to anonymize IP addresses through Google analytics, so I’m going to show you how to do that a super simple and with that then let’s just dive into it.
So, I’m going to assume that you’ve got a Google analytics account that you’ve set up a ga4 property let’s start from fresh go on why not let’s go bonkers so we’ve added our ga4 property and now we want a tracking code for this so where do we get that so I went to data streams here and we’ve got this view tag instructions come instant manually let’s take this code now I want you to put this at the top of the head so we want to apply this to every single page so let’s do that now.
Oh of course I need a site plan so I’m going to be buying a site plan just for you eighteen dollars man this shit is expensive oh dude you guys what are you doing okay so we brought it okay the best we can do is at the end of the head so let’s do that pop that in there so what we want to do is write some JavaScript to kind of hide and show this um Banner so let’s give this cookie policy uh policy see an ID of cookie policy cookie policy equals document dot query oh let’s get in one by the get them and buy these a little bit quicker so get element get element by ID so we’ve got our cookie policy.
Next we want to check for a cookie that does not exist right now you can either store this in cookies I find it a lot easier and a lot kind of simpler to use if we store it in local storage now you’ve got two different types your session storage and local storage, session storage is literally within that session the moment they close the window and then go back to your website they’re going to see that cookie policy again local storage is more permanent so you can set expiry dates on those things but the way I see it as if is is if someone accepts your cookie policy they’ve accepted it if you update those policies you might want to then show them a new Banner to make sure that they’ve accepted it again but for me local storage is a bit more modern way unless anyone’s got any good reasons to why they want to use cookies.
Let’s go with local storage so if local storage now we need to decide what we’re going to call this cookie policy um storage item I’m going to call it cookie under sort… underscore accepted so if that exists which right now oh sorry if it doesn’t exist we want to show or add that class to the cookie policy so cookie policy class list dot add and I think it was a show class so we’re just going to do that let’s just add that code in right now and just see how we get on… save changes publish so there we go you can see my cookie policy has appeared.
Now what we want to do is on the click of that cookie policy that we remove that show class and that we set that cookie I’ve also given the button an ID of cookie except so let’s take that d cookie accept…now we want to add event listener click so what we’re going to do is go to local storage dot set item and we’ve named it quick accepted.
I’m going to set that to true and then we’re also going to remove that show class now you can do some clever stuff with CSS to kind of have it fade out or fade in I’m going to leave that up to you, you can use gsap to kind of transition it in but unfortunately Webflow doesn’t allow you to kind of create a pre-set animation and then fire or at least I’ve not found a way to do that I’ve tried looking into the code it just it’s just a complicated mess so, we are going to remove that class so it’s just going to pop off really it looks boring but I don’t want to take your creative control away from it.
So, once again we’ve saved that let’s just let’s just prepare ourselves because we don’t want to just dive in and and check that everything’s going to work so obviously if the class gets removed then that’s going to go away so that’s really easy to see but what we want to do is if we go to if we inspect the page and we go through to application now you can go to local storage and then click on the domain you’ll see that there’s a couple of items in there that Webflow has set in the local storage.
I’m expecting our cookie accepted to be to populate in here when I click that button so, let’s just see how we get on so, I’m clicking around and then accept it’s disappeared and I can see cookie accepted in the window. Now the true test is now when I refresh will I see that cookie policy just hit refresh no cookie policy so let’s get on to actually preventing googleized analytics from firing or you know tracking your website unless you’ve got that cookie so we already know how to check for a cookie or in our case local storage um cookie accepted was it.. um. So, all we’re going to do is simply move that code it just won’t fire unless that cookie policy is accepted so once again if we just go here okay I’ve been wrestling around with Webflow for the last 15 minutes.
Basically the old Google analytics code was still in the in the website because I noticed the old one was still being loaded into the page so we added the new one but what seems to have happened is even though I’ve removed my Google analytics tag from the back end of Webflow it’s still inside of the HTML of my website uh you’ve got the old one there this is my old one the you the the the non-ga4 one is still in there for some reason and this is the new one so I’m constantly getting readings basically up to Google analytics, which is kind of going to ruin how I test this and and kind of show that it’s working but we’re going to push on because maybe maybe you have not used webflow’s backend to load your Google analytics.
So, let’s just push on and see how we get on we’ve added an if statement to say only if the cookie accepted local storage item exists then what we’re going to do we’re going to create a script element this was all done whilst I was testing so I’m just going to go through it we’re going to make it async we’re going to make it that source that you should have in your which is given to you in the tag instructions and then we’re going to add it to the head and then we’re going to fire off our gtag functions right and the last thing we’re going to do here is to we’re going to anonymize IP so that we are GDPR compliant so if I save this and publish it oh there’s a syntax error.
What we’re going to do we’re going to refresh this page and because I’ve removed our local storage item we’re going to see our cookie policy Banner pop up so refreshed lo and behold the cookie policy Banner is still up there we inspect the code and now I should not see any kind of reference well we’ve got this reference we’ve got uh one up here as well so other than those two we shouldn’t see any reference to the code here what I’m going to do is accept our cookie policy Banner refresh the page and then I should expect to see a new script tag so if accepted now I’m going to refresh scroll down to the bottom so here is that script tag that we added to the page.
So, now we’re just going to go one step further now and add this Google tag page to the page as soon as they click that accept button instead of waiting for a page refresh to have that happen so all we’re simply going to do is go back into Google tag manager we’re going to copy this code here and then add it into our click function so we save that…publish, we’re going to remove our cookie accepted and refresh the page so we see our banner which we do now if I go to our elements here pop into our head and just scroll down to the bottom what I expect to see is the script tag get added to the page when I click this accept button and there it is get out to the page.
So, I hope you enjoyed that as a bit of a blast from the past wasn’t it really to dip into a bit of Webflow if you’ve got any other questions about any kind of GDPR related stuff I’ll do my best to answer those in the comments but I’m by no means an expert about this about this stuff I just kind of know a few of the technicalities behind it do subscribe to the channel if you want to see more tutorials like this with no code tools like Webflow and Pinegro and also join my Discord which I’ll leave a link to in the in the description where you can kind of ask me questions or keep up to date with what’s going on the various things I have going on so until next time happy no coding.