Consent-Before-Load Architecture
The implementation follows a strict consent-before-load model:
- Google Consent Mode v2 is initialized in the <head> with analytics_storage and ad_storage set to “denied” by default
- Google Tag Manager loads but does not fire any analytics or advertising tags until consent is granted
- Meta (Facebook) Pixel script is not injected into the page at all until “Accept All” is clicked
- On “Accept All,” the script calls gtag(‘consent’, ‘update’, ...) to switch analytics_storage and ad_storage to “granted,” then dynamically loads the Meta Pixel
- On “Necessary Only,” consent remains denied and no tracking scripts are loaded
Consent Storage
The user’s choice is stored in a first-party cookie:
| Cookie name |
beersoft_consent |
| Possible values |
all | necessary |
| Duration |
365 days |
| Attributes |
Secure; SameSite=Lax; Path=/ |
| Behaviour on expiry |
Banner reappears and consent must be re-obtained |
Returning Visitors
When a visitor returns, the head script checks for the beersoft_consent cookie before GTM loads. If the value is “all,” consent is immediately updated to “granted” so analytics and advertising tags fire without delay. If the value is “necessary” or absent, consent remains “denied.” The banner is hidden for returning visitors who have already made a choice.
Manage Cookies (Footer Link)
A “Manage Cookies” or “Cookie Preferences” link should be placed in the site footer. When clicked, it clears the beersoft_consent cookie and reloads the page, causing the banner to reappear. This satisfies Quebec Law 25’s requirement that users can withdraw consent as easily as they gave it.
Footer link HTML:
<a href="#" onclick="document.cookie='beersoft_consent=;
expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/';
location.reload();return false;">Manage Cookies</a>
Webflow Placement
The implementation code is split into two sections for Webflow:
| Head Code |
Site Settings → Custom Code → Head Code. Contains: Google Consent Mode v2 default, returning-visitor check, GTM container script, and twitter:card meta tag. |
| Footer Code |
Site Settings → Custom Code → Footer Code. Contains: GTM noscript fallback, banner HTML/CSS, consent JavaScript, Meta Pixel conditional loader, and mobile responsive styles. |
Before deploying, replace the two placeholder values in the code:
- GTM-XXXXXXX → your Google Tag Manager container ID
- YOUR_PIXEL_ID → your Meta (Facebook) Pixel ID