Django-Cookie-Consent
Tags: gdpr, cookies, tutorial, django
Published: 2023-02-21 08:58:21

To implement `django-cookie-consent` in your Django project, you can follow these steps:

1.  Install `django-cookie-consent` using pip by running the following command in your terminal:
    

  ```bash
  pip install django-cookie-consent
  ```
    
2.  Add `'cookie_consent'` to the `INSTALLED_APPS` list in your project's `settings.py` file:
    
```python
INSTALLED_APPS = [  
	# ...     
	'cookie_consent',
]
```

    
3.  Include the `cookie_consent` URLconf in your project's `urls.py` file:
    
    
```python
from django.urls import path, include 

urlpatterns = [     
	# ...     
	path('cookie_consent/', include('cookie_consent.urls')),
	 ]
```
    
4.  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 past `templates/cookie_consent` folder to your templates folder and `static/cookie_consent` folder to your static folder. Then collect static.

  ```bash
  python mangage.py collectstatic
  ```
    
5.  Include the  the following css styling into the  `head`  of your `base.html` template. This styling can be customized as needed to fit your projects style:

```html

<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>
```
    
6.  Include the  the following java script code to the  `footer`  of your `base.html` template. This script can also be customized as needed to fit your projects style:

```Javascript
<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>
```    

7. Go into the admin backend and configure the cookie_cutter/ Cookie Groups and add a cookie group and fill out the required Cookies information.

![Example image](https://rawcdn.githack.com/pymeister/images/69cd605fea8b0d81b147972a969cf617d8b81a1a/Screenshot%203.png)

8. Configure the cookie_cutter/Cookies and add Cookies. Particular to Django the required cookies are there `session id` and the `csrf token`.

![Example Image](https://rawcdn.githack.com/pymeister/images/69cd605fea8b0d81b147972a969cf617d8b81a1a/Screenshot%205.png)

![Example Image](https://rawcdn.githack.com/pymeister/images/69cd605fea8b0d81b147972a969cf617d8b81a1a/Screenshot%206.png)

9. 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.

10. Ounce you have a cookie Group Create a cookie explaining that third party tracking 


11. When the 3rd party cookies are properly configured add this to your code in the footer for SEO page speed reasons .   
```Javascript
{#---------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.