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 %}
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.
<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;
})