To implement django-cookie-consent
in your Django project, you can follow these steps:
- Install
django-cookie-consent
using pip by running the following command in your terminal:
pip install django-cookie-consent
- Add
'cookie_consent'
to theINSTALLED_APPS
list in your project'ssettings.py
file:
INSTALLED_APPS = [
# ...
'cookie_consent',
]
- Include the
cookie_consent
URLconf in your project'surls.py
file:
from django.urls import path, include
urlpatterns = [
# ...
path('cookie_consent/', include('cookie_consent.urls')),
]
- Go to the Github account that is maintained by jazzband https://github.com/jazzband/django-cookie-consent and download the package to your computer in order to extract the files and folder that you need in your project . Find the folder in that download named
cookie_consent
and open it. Copy and pasttemplates/cookie_consent
folder to your templates folder andstatic/cookie_consent
folder to your static folder. Then collect static.
python mangage.py collectstatic
- Include the the following css styling into the
head
of yourbase.html
template. This styling can be customized as needed to fit your projects style:
<style type="text/css" media="screen">
body.with-cookie-bar {
padding-top: 35px;
}
.cookie-bar {
position: fixed;
width: 100%;
top:0;
text-align:center;
height:25px;
line-height: 25px;
background: #eee;
}
</style>
- Include the the following java script code to the
footer
of yourbase.html
template. This script can also be customized as needed to fit your projects style:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
<script type="text/javascript" src={% static "cookie_consent/cookiebar.js" %}></script>
<
{% if request|cookie_consent_enabled %}
{% not_accepted_or_declined_cookie_groups request as cookie_groups %}
{% if cookie_groups %}
{% url "cookie_consent_cookie_group_list" as url_cookies %}
{% cookie_consent_accept_url cookie_groups as url_accept %}
{% cookie_consent_decline_url cookie_groups as url_decline %}
<script type="text/javascript">
var cookie_groups = [];
{% for cookie_group in cookie_groups %}
cookie_groups.push("{{ cookie_group.varname }}");
{% endfor %}
function ready(fn) {
if (document.readyState != 'loading') {
fn();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', fn);
} else {
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading')
fn();
});
}
}
ready(function() {
showCookieBar({
content: "{% filter escapejs %}{% with cookie_groups=cookie_groups|join:", " %}<div class="cookie-bar">This site uses {{ cookie_groups }} cookies for better performance and user experience. Do you agree to use cookies? <a href="{{ url_accept }}" class="cc-cookie-accept">Accept</a> <a href="{{ url_decline }}" class="cc-cookie-decline">Decline</a> <a href="{{ url_cookies }}">Cookies info</a></div>{% endwith %}{% endfilter %}",
cookie_groups: cookie_groups,
cookie_decline: "{% get_decline_cookie_groups_cookie_string request cookie_groups %}",
beforeDeclined: function() {
document.cookie = "{% get_decline_cookie_groups_cookie_string request cookie_groups %}";
}
});
});
</script>
- Go into the admin backend and configure the cookie_cutter/ Cookie Groups and add a cookie group and fill out the required Cookies information.
- Configure the cookie_cutter/Cookies and add Cookies. Particular to Django the required cookies are there
session id
and thecsrf token
.
Once this configurations are made your cookie-consent banner is set. You may notice that no banner appears after you have completed this configuration that is because the banner doesn't show up if you are not using an optional 3rd party tracking for example google analytics. to add 3rd party tracking create a Cookie Groups and call it analytics.
Ounce you have a cookie Group Create a cookie explaining that third party tracking
When the 3rd party cookies are properly configured add this to your code in the footer for SEO page speed reasons .
{#---------GOOGLE ANALYTICS---------#}
{% if request|cookie_group_declined:"[NAME_OF_COOKIE_GROUP]" %}
{% else %}
[INSERT TAG SCRIPT HERE]
{% endif %}
That's it! You should now have a working cookie consent banner in your Django project.
Top comments (2)
Thank you very much, this was very helpful!!! 🙌🏼
The popup still shows even after accepting when page is refreshed