Cookie notices made easy

Recently I created a new web site for the first time in a long time and was aware I needed to have a notice appear to visitors that the site made use of cookies. I wasn?t fully across why it was needed just that the European Union (EU) passed some law requiring web sites to state if they used cookies along with details on how the collected information was handled by the site operator in their privacy policy. Even though the business I was building the site for existed outside of the EU I recommended that we needed to display a cookie notice just to be on the safe side. Technically or rather legally I should say the site didn?t need a cookie/GDPR notice, but it will receive visitors from all over the world was the angle I sold the client on including the EU.

I started searching the web for a simple implementation to copy but was finding it challenging so I decided to create my own. I was hoping with Bootstrap and some JavaScript I could have a notice feature in no time. This article outlines how I implemented a cookie notice on the homepage of a site using only Bootstrap and JavaScript.

The solution

The solution uses Bootstrap and JavaScript, Bootstrap for the responsive display the user interacts with and JavaScript to record if the user has agreed to the cookie notice so not to display the cookie notice again if the user returns to the site.

Bootstrap component

A standard toast control has all the elements a notice needs except for positioning and width. Most cookie notices appear at the bottom of a site's homepage and occupy the entire width of the page. To achieve this with the above toast component there are two styling properties you need to apply to the component which are adding the ?fixed-bottom? stylesheet class to fix the toast component to the bottom of the page and setting the ?max-width? style property to 100% so the toast component spans the width of the page. These two properties are implemented in the Bootstrap component section below and are highlighted in orange.

JavaScript

Very little JavaScript was required, the requirements for the JavaScript were:

1. Display the cookie notice if the user hasn?t accepted the cookie/GDPR notice
2. Record that the user has accepted the GDPR notice by setting a cookie value ?gdpr-acceptance? to true and provide an expiry date for the cookie
3. Calculate an expiry date for the ?gdpr-acceptance? cookie value

The Implementation

Bootstrap component

I mentioned earlier the Bootstrap component I chose for the appearance of the GDPR/Cookie notice is the Toast component. Features of this component make it very useful for displaying notices, in fact the Bootstrap creators intended for the Toast control to serve as a mechanism to provide push notifications to visitors of a site. Link to the toast component.

Below is the HTML snippet for the Toast component I used on the site.

                                                
    <div class="toast fixed-bottom fade show" data-autohide="false" style="max-width:100%;">
        <div class="toast-header">
            <strong class="mr-auto text-primary">About cookies on this site</strong>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
        </div>
        <div class="toast-body">
            <p>This site uses cookies for a number of purposes such as enhanced user experience and site security.
            Click "Agree and proceed" to accept cookies and continue using the site. See our <a href="/PrivacyPolicy.html">privacy policy</a> for a more details.</p>
            <button type="button" class="btn btn-success" id="gdpr-agree">Agree and proceed</button>
        </div>
    </div>
                    
                

The three parts of a Toast component that make it a good option to serve as a notice are:

1. The Toast header (class name ?toast-header?)
Place the content of your cookie/GDPR notice header here.
2. The close button
Allows the user to close the notice without accepting.
3. The Toast body (class name ?toast-body?)
Place the text regarding the notice and a link to your privacy policy here.

JavaScript component

The JavaScript written to implement the cookie/GDPR notice consists of three functions and a global variable. The code is listed below:

1. function displayDataPrivacyMessage() checks if the ?gdpr-acceptance? cookie exists, if so, the visitor has already accepted the cookie/GDPR notice and no notice is displayed. If the cookie does not exist the notice is displayed.
2. function userConsent() is called when the user clicks on the accept button on the notification, it records that the user has accepted the notice by setting a cookie on the user's browser called ?gdpr-acceptance? to true and an expiry date.
3. function getExpiryDate() returns a date twelve months from the current date to be used as the cookies expiry date.

                        
    var gdprAgree = null;

    function displayDataPrivacyMessage() {
        if (!cookieExists('gdpr-acceptance')) {
            $('.toast').toast('show');
            gdprAgree = (document.getElementById('gdpr-agree') != null)? document.getElementById('gdpr-agree') : null;
            if (gdprAgree != null)
                gdprAgree.onclick = userConsent;
        }
    }

    function userConsent() {
        setCookie('gdpr-acceptance', 'true', getExpiryDate());
        $('.toast').toast('dispose');
    }

    function getExpiryDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        return new Date(year + 1, month, day);
    }