MENU

Add a cookie consent feature to CMS Made Simple

  Previous article Next article  

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 src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

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

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

Note: This was updated in Dec 2023 to use the current domain: document.domain, rather than "yourdomain.com". Alternatively use "yourdomain.com" that needs to be changed for each website to be your domain name, without http, www, etc. ---^

Add to your Stylesheet
[[strip]]
#cookie_consent {
 background: #000;
  position: fixed;
  bottom: 0;
  float: left;
  z-index: 100000;
  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)}
  {include file='cms_template:Advertisement'}
  {include file='cms_template:Facebook'}
{/if}

 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 src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

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

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

Note: This was updated in Dec 2023 to use the current domain: document.domain, rather than "yourdomain.com". Alternatively use "yourdomain.com" that needs to be changed for each website to be 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: 100000;
  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') }
  {include file='cms_template:Advertisement'}
  {include file='cms_template: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}

 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'}
  {include file='cms_template:Advertisement'}
  {include file='cms_template: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 Matomo/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);
Using Google Tag Manager you can do it by changing the following line in the GTM code:

gtag('config', 'UA-xxxxxxxxxx-x');

Change to

gtag('config', 'UA-xxxxxxxxxx-x', { 'anonymize_ip': 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 will not guarantee the methods described and the other information you will find here at this page are adequate for your website!

  Working example



Buy Me A Coffee


  Show related articles:


  Comment Form

ReviewManager

Click here to open the form 

ReviewManager

  24 Comments

Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

Add a cookie consent feature to CMS Made Simple

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.18
  Last updated: 04-12-2023
  Comments: 24
  http://cms.ms/I3d0


Buy Me A Coffee




Advertisement


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!