Cookies Policy

The modern web requires consent that the users information is being tracked.

This requires us to make 2 changes, get consent, enable tracking.

By default we generate a modal, however this requires custom css to be added to make it look appropriate.


<div id="page_cms_accept_cookies_policy">  <div>the cookie policy info is in here... this is a constant field</div>  <form action="/page_cms/accept_policy/" method="post">    <input type="hidden" name="url" value="{{ request.get_full_path }}">    <button id="page_cms_accept_cookies_policy_exit">exit</button>  </form> </div>


Only once consent is given can we track. We can test if they have consented by seeing if they've accepted_cookies variable this should be done on the base.html


{% if accepted_cookies %}  {% comment %}    ADD GOOGLE analytics in here, we are not allowed to GA if they don't accept  {% endcomment %}{% endif %}


Override default cookie

You can override the default HTML for the modal by adding a file templates/page_cms/front-end-accept.html

Be sure to still have the form.

An example


<script type="text/javascript">  var COOKIES_ACCPTED_1 = " async src='https://www.googletagmanager.com/gtag/js?id=UA-16066829-1'>";  var COOKIES_ACCPTED_2 = ">window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-16066829-1');"; </script>
{% if accepted_cookies %}   <!-- Global site tag (gtag.js) - Google Analytics -->   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-16066829-1"></script>   <script>   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());   gtag('config', 'UA-16066829-1');  </script>{% endif %}


Then in the main JS file, on the submission of the form we load the analytics.


$("[action='/page_cms/accept_policy/']").submit(function(event) {  event.preventDefault();  $("#page_cms_accept_cookies_policy").remove();  $.post({   "url": "/page_cms/accept_policy/",   "data": {    "url": "/"   }  })  $("body").append($("<script " + COOKIES_ACCPTED_1 + "</script>"));  $("body").append($("<script " + COOKIES_ACCPTED_2 + "</script>"));  return false;})