PyBoilerplate

Cookie Banner

A built-in cookie consent banner system that manages user privacy preferences and controls tracking functionality. The banner appears on first visit and allows users to accept or reject cookie tracking.

 

Cookie Banner Display

Customization

The banner can be customized by modifying:

  • cookie_banner.html for appearance and text
  • cookie_banner.js for functionality and duration

 

Key files

templates/
├── partials/
│   └── cookie_banner.html    # Banner HTML structure
├── home.html                 # Default implementation
static/
└── js/
    └── cookie_banner.js      # Core functionality

Google Tag Manager (GTM) Integration

Google Tag Manager (GTM) serves as the bridge between your cookie consent banner and third-party tracking scripts. By managing script loading asynchronously and conditionally based on user consent, GTM provides a robust solution that balances performance, privacy compliance, and marketing needs.

This centralized approach simplifies the management of third-party services while ensuring they are only activated after explicit user consent.

 

Connect the boilerplate to GTM container

In templates/partials/base.html, add the GTM snippet code from your GTM account. You can find this code by:

  • Going to your GTM dashboard
  • Clicking on your GTM ID code
  • You'll find two code snippets to copy: one for <head> and one for <body>
# base.html

<head>
    {# Google Tag Manager #}
    {# Add your GTM code here #}
</head>

<body class="h-full">
    {# Google Tag Manager (noscript) #}
    {# Add your GTM noscript code here #}
</body>

 

Configure Cookie Consent in GTM interface

Set up Google Tag Manager to handle cookie consent by creating necessary variables and triggers that will control when analytics tracking is allowed based on user consent choices:

1. Create cookie consent variables

  • Go to Variables > User-Defined Variables > New
  • Configure the variables: 
    # Variable 1
Name: cookieConsent
Type: 1st Party Cookie
Cookie Name: cookieConsent

# Variable 2
Name: cookieConsentStatus
Type: Data Layer Variable
Data Layer Variable Name: cookieConsentStatus
Data Layer Version: Version 2
  • Click Save

 

The Cookie Name and Data Layer Variable Name must exactly match the variables set in static/js/cookie_banner.js code.

2. Create cookie consent triggers

  • Go to Triggers > New
  • Configure these triggers: 
    # Trigger 1
Name: Cookie Consent Update Accepted
Type: Custom Event
Event name: cookieConsentUpdate
Firing Conditions: cookieConsentStatus equals 'accepted'

# Trigger 2
Name: Cookie Consent Update Rejected
Type: Custom Event
Event name: cookieConsentUpdate
Firing Conditions: cookieConsentStatus equals 'rejected'

# Trigger 3
Name: All Page Views with Updated Consent
Type: Trigger Group
Triggers: Cookie Consent Update Accepted AND All Pages (built-in)
Firing Conditions: all conditions

# Trigger 4
Name: All Page Views with Cookie Consent Accepted
Type: Page View
Firing Conditions: cookieConsent equals 'accepted'
  • Click Save

 

Now you can use these triggers to enable third-party tags when cookies are accepted and disable or clean up tags when cookies are rejected.