A GDPR Requirement Every Web Manager Should Know About

Posted by Dan Katz

In all likelihood, you have probably heard something about the European Union’s General Data Projection Regulation (EU GDPR). The intent of the EU GDPR, which became enforceable in May of 2018, is to affirm and codify a person’s right to the ownership and control of their personal information. An element of this regulation enables the individual to permit or deny tracking of their presence on websites. The EU GDPR has many practical implementations for website managers.

But while the parameters of the EU GDPR are quite clear, uncertainty surrounds how the EU may will apply and enforce the rules when it comes to U.S. companies. Digital transactions increasingly cross oceans and political jurisdictions. California has also imitated legislation like the GDPR that would necessitate almost every site in the US to meet similar compliance regulations. Combined these mean there is at least is one crucial element of compliance that all U.S. businesses and web managers should know about and consider imemplement: cookie opt-in banners.

Cookie Opt-In Banners

The EU GDPR requires websites to display a banner informing the user that they may be tracked and give them the ability to remove any tracking mechanisms, including cookies. There are many ways to provide these banners and to enable visitors to deny (opt-out of) the use of cookies to identify them.

We have a client who requested such a banner, but with the requirement that visitors should opt-in to receive the cookie and analytics tracking. This would then exclude visitors by default from cookies and Google analytics tracking. Here’s how REQ helped our client do this … and how you can do the same thing.

We adapted the cookie consent script from Cookie Consent by Insites (https://cookieconsent.insites.com/) <link> combined with the location plugin from geoplugin.net to enable our desired opt-in tracking function via Google Tag Manager (GTM).

Obtain your GeoPlugIn Account

Surf to premium.geoplugin.net and register for an account and pay the annual fee for SSL API access. SSL is critical as your GDPR complaint website should be using SSL.  Implementing with the unsecured version will result in mixed content errors that can disable the banner script. Obtain your GeoPlugin APIKey to be inserted into the script.

Designing the Banner

Design your banner and copy by adapting the script available at https://cookieconsent.insites.com/.  This will then form the basis for the main section of the script.

Create your HTML Tag with its Script

<CODE>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsen..." />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsen..."></script>

<script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script>

 

 

    <script>   

    var geoPluginAPIKey = 'place_API_key_here';

    var cookie = false;

    var isDeclined = window.localStorage.getItem("declinedCookie");

    console.log("this is: ", isDeclined);

    console.log(cookie);

      if(isDeclined == null) {

          jQuery.getJSON('https://ssl.geoplugin.net/json.gp?k=' + geoPluginAPIKey + '&jsoncallback=?')

            .done(function(data) {

                var isInEU = geoplugin_inEU();

               console.log(isInEU);

   

                if(isInEU !== 0){

   

    window.cookieconsent.Popup.prototype.deleteCookies = function() {

            //List of essential cookies - set as an empty array to delete everything - i.e. var essential = [];

            var essential = ["cookieconsent_status", "DYNSRV"];

   

            //create array of cookies set

            var cookies = document.cookie.split(";");

   

            //loop through the cookies

            for (var i = 0; i < cookies.length; i++) {

                var cookie = cookies[i];

   

                //Get the cookie name

                var eqPos = cookie.indexOf("=");

                var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;

   

                //Delete all cookies except those listed in essential

                if (essential === undefined || essential.length == 0 || essential.indexOf(name) == -1){

                    //Note assuming path is always = '/'

                    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

                }

            }

        }

    window.addEventListener("load", function(){

    window.cookieconsent.initialise({

      "palette": {

        "popup": {

          "background": "#000"

        },

        "button": {

          "background": "#f1d600"

        }

      },

      "content": {

      "header": 'Cookies used on the website!',

      "message": '<p style="font-size:12px;line-height:1.6;color:white">This website uses cookies to personalize content and ads, to provide social media features and to analyze our traffic. We also share information with our advertising and analytics partners who may combine it with other information that you have provided to them or that they have collected from your use of our services. <a style="color:white" href="http://www.yoursite.com/privacy-policy">Learn more by clicking here</a>. You may opt out of receiving emails or surveys from us at any time by clicking on the "Unsubscribe" link in the footer of any email or emailing optout@yourdomain.com.</p>',

      "dismiss": 'Decline',

      "allow": 'Got it!',

      "deny": 'deny',

      "link": 'Learn more',

      "href": "http://www.yourdomain.com/privacy-policy",

      "close": '&#x274c;',

      },

     "type": "opt-in",

   

    onStatusChange: function(status, chosenBefore) {

                             console.log(status);

                //If cookies not allowed delete them

                if (status != 'allow'){

                             console.log("declined cookie");

                    console.log(cookie);

                             window.localStorage.setItem("declinedCookie", true);

                            

                    this.deleteCookies();

                    console.log(cookie);

                                   

                } else {

                  cookieConsent = true;

                  console.log(cookie);

            }

     

    }

    })

   

    });

        

            }}).fail(function(jq, status, msg) {

              console.log('Geolocation failed: ' + status + ' - ' + msg);});

     

      }   

    </script>

 

</CODE>

The cookieConsent Variable and Custom Event Trigger

Create a JavaScript Variable matched with the cookieConsent variable from the above script. This will be assigned a Custom Event Trigger to fire when the visitor does not consent to the banner.

Apply the Trigger as an Exception

Apply the Custom Event Trigger as an Exception to each Tag that is not permitted without consent. Do not apply this Trigger to the Cookie Consent Script.

Transfer Coded Tags to GTM

This method only applies to Tags managed in GTM.  This is then an excellent time to review the site for Facebook pixels or any other Tags that must be removed from the page code and transferred to GTM.

Next Steps

A cookie banner is just one small step to comply with the various aspects of the GDPR and pending California regulations. Privacy policies, data security and management, and response to consumer inquiries are all critical elements that can be more complex.  Feel free to reach out to us for any assistance.