Skip to content

feat: add cookie consent banner#49

Merged
chestercheng merged 6 commits intosciwork:developfrom
jack482653:feature/add-cookie-consent-banner
Jan 31, 2026
Merged

feat: add cookie consent banner#49
chestercheng merged 6 commits intosciwork:developfrom
jack482653:feature/add-cookie-consent-banner

Conversation

@jack482653
Copy link
Copy Markdown
Collaborator

@jack482653 jack482653 commented Dec 14, 2025

This PR implements cookie consent banner with third-party cookies tracking.

Changes

  • Cookie Consent Banner (components/CookieBanner.tsx)

    • Accept/Reject buttons for user consent
    • Only shows when __sciwork_show_cookie_banner=true cookie exists
    • Keeps choice for 365 days
  • Analytics Blocker (public/ga-destroyer.js)

    • Blocks GA/GTM scripts until user consents
    • Uses MutationObserver to intercept scripts in real-time
  • Cookie Utilities (utils/cookies.ts)

    • needShowCookieBanner() - checks if banner should display
    • setCookieConsent() - stores user choice
    • hasCookieConsent() - checks if user already decided
  • UI Updates

    • Added "secondary" variant to Button component
    • Integrated banner into app layout

Critical Setup Required Before Published to main Branch

  • ga-destroyer.js MUST be injected via Netlify post-processing BEFORE GA scripts
  • Why this matters: The script sets __sciwork_show_cookie_banner=true and monitors DOM changes. If it loads after GA, tracking will start before we can block it.

How It Works

  1. ga-destroyer.js loads → sets __sciwork_show_cookie_banner=true
  2. Banner checks: needShowCookieBanner() && !hasCookieConsent()
  3. If true → show banner; if false → hide
  4. User clicks Accept/Reject → sets __sciwork_is_cookie_consented
  5. Blocker stops intercepting scripts after user visiting website again (if accepted)

Test Plan

  • Banner appears on first visit
  • Accept enables GA, Reject blocks GA
  • Choice persists across pages
  • Netlify post-processing injects script correctly
  • Responsive design works on mobile/tablet

Specially thanks for the hard work of @b95702041 at #11

b95702041 and others added 4 commits December 14, 2025 21:59
- Add CookieBanner component with website styling
- Add cookieUtils for consent management and analytics
- Add AnalyticsInitializer for default gtag consent state
- Update layout.tsx to integrate CookieBanner
- Add 'secondary' variant to Button component for gray styling
- Replace hard-coded button elements in CookieBanner with Button component
- Move cookieUtils from components/ to utils/ folder
- Change AnalyticsInitializer from Client to Server Component
- Use next/script with beforeInteractive strategy
- Ensures consent is denied before any GA requests are sent
- Remove duplicate cookieUtils.ts from components folder
- Update CookieBanner component to manage user consent for cookies.
- Introduce constants for cookie keys in configurations.
- Create ga-destroyer.js to block Google Analytics until consent is given.
- Enhance cookie utility functions for managing consent state.
@netlify
Copy link
Copy Markdown

netlify Bot commented Dec 14, 2025

Deploy Preview for swconf2025 ready!

Name Link
🔨 Latest commit 24d0076
🔍 Latest deploy log https://app.netlify.com/projects/swconf2025/deploys/694037a9687ac9000849907b
😎 Deploy Preview https://deploy-preview-49--swconf2025.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@chestercheng chestercheng self-requested a review January 30, 2026 09:29
Signed-off-by: chestercheng <hi@chester.ch>
@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 31, 2026

Deploy Preview for swconf2025 ready!

Name Link
🔨 Latest commit 022b103
🔍 Latest deploy log https://app.netlify.com/projects/swconf2025/deploys/697d7bdc931a700008ded063
😎 Deploy Preview https://deploy-preview-49--swconf2025.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown
Contributor

@chestercheng chestercheng left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@chestercheng chestercheng merged commit 13c13fc into sciwork:develop Jan 31, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants