Hi there
I was looking for a nice script that helps me with a pop up for visitors to accept cookies. Tried many but wasn’t happy with none. I did found one and this is the best one yet.
Also find this from Google with relevant information.
Take care 
5 Likes
You did something I never wanted to spend time on, I’ll blindly follow your advice
Thanks a metric ton!
5 Likes
Gaah, I’m getting this on iPad
Not when resizing browser window only on iPad. Tried changing some css with no result. I t should be stretched out with 100% width.
When you think you find something nice…
Robit97: Have you heard anything to your question?
Hi Robit, did you ever get an answer on implementing the option to Block Cookies?
1 Like
I’m also looking for a Webflow solution that acts like Cookie Notice and Category Country Aware on Wordpress.
I use Webflow for all my sites and do Facebook Ads marketing with all of them.
Hi @Robit97
Ah thats a pain, I would have thought the Webflow staff would have been all over this! As it is a simple to install plugin and we only need to know how to set up the Opt-Out feature to benefit loads of people
Until then we may just need to edit the link text to a site page that allows cookies to be blocked, such as : Browser Redirect
Hopefully we get a full answer soon, as I can imagine there are plenty of people requiring this feature
Just logically we’d have to remove our google tracking ID from our project settings in Webflow, in Integrations tab
Then we’d have to insert Analytics tracking code on each page manually in the head tag and paste our code below //enable cookies comments…somewhat like that
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=ANALYTICS_ID_HERE"></script>
<script>
onInitialise: function (status) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in' && didConsent) {
// enable cookies
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'ANALYTICS_ID_HERE');
}
if (type == 'opt-out' && !didConsent) {
// disable cookies
}
},
onStatusChange: function(status, chosenBefore) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in' && didConsent) {
// enable cookies
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'ANALYTICS_ID_HERE');
}
if (type == 'opt-out' && !didConsent) {
// disable cookies
}
},
onRevokeChoice: function() {
var type = this.options.type;
if (type == 'opt-in') {
// disable cookies
}
if (type == 'opt-out') {
// enable cookies
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'ANALYTICS_ID_HERE');
}
},
</script>
And given we inserted Insite’s main code into your project settings “Custom code” tag it should be doing the job, however it still doesn’t seem to work for me.
My friend developer coded a simple script for me to disable Google Analytics with Cookie Consent by Insites.
Here is a simple solution:
-
Go to your Project Settings, Custom Code tab
-
Place this in the Head Code
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" /> -
Place this in the Footer Code and make sure to replace GOOGLE_ANALYTICS_ID with the proper ID (find your ID)
If you have this ID placed in the “Integrations” tab in your Project Settings, remove it from there.<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script> <script> var enableGA = function() { (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'GOOGLE_ANALYTICS_ID', 'auto'); ga('send', 'pageview'); }; window.addEventListener("load", function() { window.cookieconsent.initialise({ "palette": { "popup": { "background": "#EEEEEE" }, "button": { "background": "#F89406", "text": "#ffffff" } }, revokable:true, "theme": "classic", "type": "opt-in", "content": { "message": "We use cookies to provide you best experience on our website. We also use Google analytics for our internal statistics. You may choose to disable analytics if you prefer. ", "dismiss": "Disable analytics", "allow": "Got It!", "link": "Learn More", "href": "http://dsign.site/privacy-policy" }, onInitialise: function (status) { var type = this.options.type; var didConsent = this.hasConsented(); if (type == 'opt-in' && didConsent) { // enable cookies enableGA(); } if (type == 'opt-out' && !didConsent) { // disable cookies // NOTHING TO DO } }, onStatusChange: function(status, chosenBefore) { var type = this.options.type; var didConsent = this.hasConsented(); if (type == 'opt-in' && didConsent) { // enable cookies enableGA(); } if (type == 'opt-out' && !didConsent) { // disable cookies // NOTHING TO DO } }, onRevokeChoice: function() { var type = this.options.type; if (type == 'opt-in') { // disable cookies // NOTHING TO DO } if (type == 'opt-out') { // enable cookies enableGA(); } } }, function (popup) { $('#revoke-cc-btn').on('click', function() { popup.revokeChoice(); }); }) }); </script>
This script also includes a function to revoke consents.
If you wish to do so simply add a button on your page and give it an ID: revoke-cc-btn
You can see a demo here https://www.dsign.site/cookie-consent
I’ve tested this by checking what cookies are stored in the browser’s inspector and also simply by going to Real-Time reports in Google Analytics.
This solution works just fine for me.
If anyone is interested I will share a more complex code which will allow you to include several functions, not only google analytics. For instance if you would want to disable google maps or iframe embed additionally to analytics.
Good luck!
6 Likes
I have add the code to my site, but it is not popping up.
Any idea why?
Thanks a million for your contribution Jorn, I was struggling with so many options and issues and this one worked instantly and also looks very nice.
Best.
Thanks, I’m glad I could help. I also found this tool a while back, very pleased with that.
1 Like
Jorn,
Do you know how to embed youtube/vimeo videos or google maps without violating the GDPR? Or you don’t use video embeds in your projects?
Hi! Could you share the code to to disable google maps or iframe embeds?
I’m not sure what you mean. It’s not the embedding itself that violate GDPR.
Hi @Josef
Before I share, a short notice, that I’ve just tried the code myself on our site and it only disables the embed only if I don’t click any button on the cookie banner, whether it is agreeing or declining, whereas before it was also blocking the embed for me if I clicked “disable analytics”. Maybe something changed in their API or I have confused something, but here is how it was implemented originally.
This code is modified, with added variables. You don’t need to embed this code on each page, just in the custom code in the project settings.
So this goes to your Project Settings - Custom Code - Header
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
This goes to Project Settings - Custom Code - Footer
Make sure to replace ID’s and KEY’s, etc in CAPS with your data.
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
var enableGA = function() {
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'YOUR GOOGLE ANALYTICS ID HERE', 'auto');
ga('send', 'pageview');
};
var renderEventMap = function() {
var $eventMapNode = $('#event-map');
if ($eventMapNode.length) {
var query = $eventMapNode.data('query');
$eventMapNode.replaceWith(
$('<iframe width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen>')
.attr('src', 'https://www.google.com/maps/embed/v1/place?key=YOUR_MAP_KEY_HERE&q=' + query)
);
}
};
var enableCookieConsent = function() {
enableGA();
renderEventMap();
if (window.initFbButton) {
initFbButton();
}
};
window.addEventListener("load", function() {
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#fafafa"
},
"button": {
"background": "#f78f1e",
"text": "#ffffff"
}
},
revokable:true,
"theme": "classic",
"type": "opt-in",
"content": {
"message": "We use cookies to provide you best experience on our website. We also use Google analytics for our internal statistics. You may choose to disable analytics if you prefer.",
"dismiss": "Disable analytics",
"allow": "Got It!",
"link": "Learn More",
"href": "LINK_TO_YOUR_PRIVACY_POLICY"
},
onInitialise: function (status) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in' && didConsent) {
// enable cookies
enableCookieConsent();
}
if (type == 'opt-out' && !didConsent) {
// disable cookies
// NOTHING TO DO
}
},
onStatusChange: function(status, chosenBefore) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in' && didConsent) {
// enable cookies
enableCookieConsent();
}
if (type == 'opt-out' && !didConsent) {
// disable cookies
// NOTHING TO DO
}
},
onRevokeChoice: function() {
var type = this.options.type;
if (type == 'opt-in') {
// disable cookies
// NOTHING TO DO
}
if (type == 'opt-out') {
// enable cookies
enableCookieConsent();
}
}
}, function (popup) {
$('#revoke-cc-btn').on('click', function() {
popup.revokeChoice();
});
})
});
</script>
In my particular case it is a google map embed which I am placing on a dynamic page template, it is showing the address on a map which is being taken from the dynamic field in my collection.
So you place this within a code embed on your static or dynamic page. If you don’t need a search query, I believe you can just remove the data-query class altogether and replace the iframe with your particular iframe in the project settings script.
It is easy to check if it is working or not, if you do not agree to cookies, you should not see your map embed.
CORRECTION Also this code has a revoke button support, so you can place a default Webflow button on any page and give it an ID revoke-cc-btn
Additionally it disables any facebook buttons if they are placed on the site, since I figured it was also pulling some analytics, if that is not needed, I believe you can just remove this bit
if (window.initFbButton) {
initFbButton();
}
1 Like
I mean, if you embed youtube videos and co they will actually get your visitors IP addresses which is not GDPR compliant
Let your visitors know that and get them to consent. I haven’t really looked into to that any deeper.
1 Like
Follow up: just checked what happens with Google Analytics if I opt out of it (declining banner) and the analytics still activates, whereas when I originally posted this method in July, it was only activating upon opting in, I’ve tested it several times back then. So something must have changed within their opt-in/opt-out API, and unfortunately I’m not a code geek to understand . If someone could comment on it, would be awesome.
1 Like
Any update to save that problem by now?