Add a cookie consent feature to CMS Made Simple

  Previous article Next article  

Add a cookie consent feature to CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.5
  Last updated: 08-09-2016
  Comments: 8

An easy to customize feature to make your CMS Made Simple™ website comply with the EU Cookie Law. In this tutorial I will show you how easy it is to add a cookie consent bar to your CMSMS™ site. A visitor can accept or decline browser cookies. Depending on the visitors choice the, in example advertisement or social media code can be added to the site or not...

I will describe TWO methods:
1 - the "light" version, inform the visitor at the first visit at the website it uses cookies and you assume when the visitor doesn't change his browser settings he doesn't mind you set cookies at his device. Kind of a user friendly cookie wall...
2 - give the user a real choice which he can decline, so you can't set cookies at your website.

 METHOD 1

  How to use

Add to your HTML template, just after <body>
{if empty($smarty.cookies.cookie_consent)}
  <div id="cookie_consent">
    <p>We use cookies to ensure that we give you the best experience on our website. We also use cookies to ensure we show you advertising that is relevant to you.<br />
    If you continue without changing your browser settings, we will assume that you are happy to receive all cookies on this website.<br />
    <br />
    <a class="accept_cookies">Continue</a><a href="cookies" class="more_info">More info</a></p>
  </div>
{/if}
Put this jQuery code just before </body> in your HTML template
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">
  $(".accept_cookies").click(function () {
    $("#cookie_consent").toggle("slow");
    location.reload();
  } );

  $(document).ready(function() {
    $.cookie("cookie_consent", "yes", { domain: "yourdomain.com", path: "/", expires: 1095 } );
  } );
</script>

Note: Change this code to your domain name, without http, www, etc. ---^

Add to your Stylesheet
[[strip]]
#cookie_consent {
 background: #000;
 position: fixed;
  bottom: 0;
  float: left;
  z-index: 10000000000000;
  width: 100%;
  padding: 30px 0;
  /*filter: alpha(opacity=70);
  opacity: 0.7;*/

}
#cookie_consent p {
 text-align: center;
  color: #fff;
 font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 0 0 10px 0;
  /*filter: alpha(opacity=100);
  opacity: 1;*/

}
#cookie_consent a.accept_cookies {
 margin: 0 5px;
  padding: 5px;
  color: #000;
 font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  background: #6c0;
}
#cookie_consent a.more_info {
 margin: 0 5px;
  padding: 5px;
  color: #000;
 font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  background: #ccc;
}
[[/strip]]
Now you can add to your pages, module or HTML templates
{if isset($smarty.cookies.cookie_consent)}
  {global_content name='Advertisement'}
  {global_content name='Facebook'}
{/if}

A2 Webhosting CMS Made Simple

 METHOD 2

  How to use

Add to your HTML template, just after <body>
{if empty($smarty.cookies.cookie_consent)}
  <div id="cookie_consent">
    <p>To be of better service to you this website makes use of cookies <a class="accept_cookies">Accept cookies</a><a href="cookies" class="more_info">More info</a><a class="decline_cookies">Decline cookies</a></p>
  </div>
{/if}
Put this jQuery code just before </body> in your HTML template
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">
  $(".accept_cookies").click(function () {
    $("#cookie_consent").toggle("slow");
    $.cookie("cookie_consent", "yes", { domain: "yourdomain.com", path: "/", expires: 1095 } );
    location.reload();
  } );

  $(".decline_cookies").click(function () {
    $("#cookie_consent").toggle("slow");
    $.cookie("cookie_consent", "no", { domain: "yourdomain.com", path: "/", expires: 1095 } );
    location.reload();
  } );
</script>

Note: Change this code to your domain name, without http, www, etc. twice ---^

Add to your Stylesheet
[[strip]]
#cookie_consent {
 background: #000;
 position: fixed;
  bottom: 0;
  float: left;
  z-index: 10000000000000;
  width: 100%;
  padding: 15px;
  filter: alpha(opacity=70);
  opacity: 0.7;
}
#cookie_consent p {
 text-align: center;
  color: #fff;
 font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 0;
  filter: alpha(opacity=100);
  opacity: 1;
}
#cookie_consent a.accept_cookies {
 margin: 0 5px;
  padding: 5px;
  color: #000;
 font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  background: #6c0;
}
#cookie_consent a.decline_cookies {
 margin: 0 5px;
  padding: 5px;
  color: #000;
 font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  background: #f33;
}
#cookie_consent a.more_info {
 margin: 0 5px;
  padding: 5px;
  color: #000;
 font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  background: #ccc;
}
[[/strip]]
Now you can add to your pages, module or HTML templates
{if isset($smarty.cookies.cookie_consent) and ($smarty.cookies.cookie_consent == 'yes') }
  {global_content name='Advertisement'}
  {global_content name='Facebook'}
{/if}

{if isset($smarty.cookies.cookie_consent) and ($smarty.cookies.cookie_consent == 'no') }
  <p>You can't use this function without cookies...</p>
{/if}

A2 Webhosting CMS Made Simple

 Other information

 Do Not Track

Smarty can read the browsers DNT setting like this:

{if !isset($smarty.server.HTTP_DNT)  || $smarty.server.HTTP_DNT != '1'}
  {global_content name='Advertisement'}
  {global_content name='Facebook'}
{/if}

You could use this setting in combination with the logic above, like if a person doesn't want to be tracked don't give him the cookie consent question...

 Analytics code

When you have analytics software at your website, you don't need to ask permission to set cookies when you don't store personal information.
You can do this by anonymizing the visitors' IP addresses, like 192.168.xxx.xxx or 192.168.100.xxx.

Do you use Piwik you can go to Settings >> Privacy Settings and choose the recommended settings.

Using Google Analytics you can do similar by adding the following line to the GA code:

_gaq.push (['_gat._anonymizeIp']);

or depending on your Google Analytics version

ga('set', 'anonymizeIp', true);

 The cookie information page

At your website you need to create a page with information about the cookies you use at your website. Link this page in the footer of your website.

 More information

For more information about the cookie law requirements visit this website Aboutcookies.org
Also visit the website of your government and other related websites giving information of the Cookie Law in your own language.

DISCLAIMER

The EU Cookie Law is very complex and not all countries use it the same way.
I can't guarantee the methods described and the other information you will find here at this page are adequate for your country!


A2 Webhosting CMS Made Simple

  Working example


Show related articles:



A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  8 Comments

CMS Made Simple 2.2.3.1 - Tutorials, tips and tricks - CMSMS 2.2.3.1

Add a cookie consent feature to CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.5
  Last updated: 08-09-2016
  Comments: 8

A2 Webhosting CMS Made Simple