Streaming live at 10am (PST)

Cookie warning script


#1

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.

https://www.cookiechoices.org

Take care :slight_smile:


#2

You did something I never wanted to spend time on, I'll blindly follow your advice :slight_smile:

Thanks a metric ton!


#3

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…


#4

Hi,

I’ve just checked your tip for cookie consent - works great!

There is also the option to block cookies - therefore you need to implement the following piece of code.

Do you have any idea, where to put that in Webflow?

Thanks!

onInitialise: function (status) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == ‘opt-in’ && didConsent) {
// enable cookies
}
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
}
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
}
},


#5

Robit97: Have you heard anything to your question?


#6

Unfortunately no.

Hope to find a solution soon.


#7

@PixelGeek - could you provide any input on this (although its third party code, but it seems its the most used toll out there and also recommended by Google).

As GDPR will affect A LOT of users - this could be a part of an easy solution for this.

This thread is about the same topic: Give Visitors ability to disable Cookies

Please help!

Thanks!


#8

Hi Robit, did you ever get an answer on implementing the option to Block Cookies?


#9

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.


#10

Hi Monty3540,

sorry, but no.


#11

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 : https://cookies.insites.com/disable-cookies/

Hopefully we get a full answer soon, as I can imagine there are plenty of people requiring this feature


#12

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.


#13

My friend developer coded a simple script for me to disable Google Analytics with Cookie Consent by Insites.
Here is a simple solution:

  1. Go to your Project Settings, Custom Code tab

  2. 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" />

  3. 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!


Give Visitors ability to disable Cookies
Is it possible to use this script with FB Pixel integration?
#23

I have add the code to my site, but it is not popping up.

Any idea why?


#24

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.


#25

Thanks, I’m glad I could help. I also found this tool a while back, very pleased with that.
https://www.cookiehub.com


#26

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?


#27

Hi! Could you share the code to to disable google maps or iframe embeds?


#28

I’m not sure what you mean. It’s not the embedding itself that violate GDPR.


#29

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();
              }