Skip to content

Commit c386792

Browse files
CopilotBenjaminMichaelis
Copilot
and
BenjaminMichaelis
committed
Implement comprehensive cookie consent management for Microsoft Clarity and Google Analytics
Co-authored-by: BenjaminMichaelis <22186029+BenjaminMichaelis@users.noreply.github.com>
1 parent 749ef7c commit c386792

4 files changed

Lines changed: 690 additions & 3 deletions

File tree

‎EssentialCSharp.Web/COOKIE_CONSENT.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# Cookie Consent Implementation
2+
3+
This document describes the cookie consent implementation for Essential C# website to comply with Microsoft Clarity's new consent requirements for EEA, UK, and Switzerland users.
4+
5+
## Overview
6+
7+
Starting October 31, 2025, Microsoft Clarity requires explicit consent signals for users from the European Economic Area (EEA), United Kingdom (UK), and Switzerland. This implementation provides a comprehensive solution using Google Consent Mode v2 that works with both Microsoft Clarity and Google Analytics.
8+
9+
## Implementation Details
10+
11+
### Files Modified/Added
12+
13+
1. **`/wwwroot/js/consent-manager.js`** - New consent management system
14+
2. **`Views/Shared/_Layout.cshtml`** - Updated to integrate consent manager with analytics
15+
3. **`Views/Home/Privacy.cshtml`** - Enhanced privacy policy page
16+
17+
### Features
18+
19+
- **Automatic Region Detection**: Detects users from EEA/UK/Switzerland using timezone
20+
- **Google Consent Mode v2**: Unified consent framework for both analytics platforms
21+
- **Granular Consent**: Separate consent for Analytics and Advertising cookies
22+
- **Persistent Storage**: Saves consent preferences for 365 days
23+
- **Responsive Design**: Works on desktop and mobile devices
24+
- **Accessibility**: Proper ARIA labels and keyboard navigation
25+
26+
### Consent Categories
27+
28+
1. **Essential Cookies** - Always granted (required for functionality)
29+
2. **Analytics Cookies** - Optional (Google Analytics, Microsoft Clarity)
30+
3. **Advertising Cookies** - Optional (advertising and remarketing)
31+
32+
### User Experience
33+
34+
For users in EEA/UK/Switzerland:
35+
1. Cookie banner appears on first visit
36+
2. Users can Accept All, Reject All, or Customize preferences
37+
3. Customization shows detailed information about each cookie category
38+
4. Preferences are saved and respected across visits
39+
5. Users can change preferences anytime via footer link
40+
41+
For users outside these regions:
42+
- No banner shown by default
43+
- Analytics work normally
44+
- Consent preferences still accessible via footer link
45+
46+
## Technical Integration
47+
48+
### Google Consent Mode v2
49+
50+
The implementation uses Google's Consent Mode v2 with these consent types:
51+
- `analytics_storage`
52+
- `ad_storage`
53+
- `ad_user_data`
54+
- `ad_personalization`
55+
- `functionality_storage` (always granted)
56+
- `security_storage` (always granted)
57+
58+
### Microsoft Clarity Integration
59+
60+
Clarity consent is managed via the Clarity Consent API:
61+
```javascript
62+
clarity('consent', analyticsConsent);
63+
```
64+
65+
### Google Analytics Integration
66+
67+
Google Analytics respects consent mode automatically:
68+
```javascript
69+
gtag('consent', 'update', consentState);
70+
gtag('config', 'G-761B4BMK2R'); // Only when consent granted
71+
```
72+
73+
## Testing
74+
75+
### Test Parameters
76+
77+
Add `?testConsent=true` to any URL to force consent banner display for testing.
78+
79+
### Verification Steps
80+
81+
1. Visit site from EEA timezone or with test parameter
82+
2. Verify banner appears
83+
3. Test Accept All - analytics should activate
84+
4. Test Reject All - analytics should remain disabled
85+
5. Test Custom preferences - verify granular control
86+
6. Check consent persistence across page loads
87+
88+
## Compliance
89+
90+
This implementation ensures compliance with:
91+
- **GDPR** - Explicit consent before processing personal data
92+
- **ePrivacy Directive** - Cookie consent requirements
93+
- **Microsoft Clarity** - New consent enforcement requirements
94+
95+
## Browser Support
96+
97+
- Modern browsers with ES6 support
98+
- Graceful degradation for older browsers
99+
- Works without JavaScript (essential functionality only)
100+
101+
## Maintenance
102+
103+
### Adding New Analytics Services
104+
105+
1. Add consent check in initialization code
106+
2. Update consent manager to include new service
107+
3. Test consent flow with new service
108+
109+
### Updating Consent Categories
110+
111+
Modify the `consentState` object in `ConsentManager` constructor and update the banner UI accordingly.
112+
113+
## Support
114+
115+
For technical issues or questions about this implementation, please refer to:
116+
- Microsoft Clarity documentation: https://learn.microsoft.com/en-us/clarity/
117+
- Google Consent Mode documentation: https://developers.google.com/tag-platform/gtagjs/consent

‎EssentialCSharp.Web/Views/Home/Privacy.cshtml‎

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,93 @@
33
}
44
<h1>@ViewData["Title"]</h1>
55

6-
<p>Use this page to detail your site's privacy policy.</p>
6+
<div class="container">
7+
<div class="row">
8+
<div class="col-lg-8">
9+
<h2>Privacy Policy</h2>
10+
<p>At Essential C#, we are committed to protecting your privacy and ensuring you have a positive experience on our website.</p>
11+
12+
<h3>Information We Collect</h3>
13+
<p>We collect information to provide better services to our users. The types of information we collect include:</p>
14+
<ul>
15+
<li><strong>Usage Information:</strong> How you interact with our website, including pages visited, time spent, and navigation patterns</li>
16+
<li><strong>Technical Information:</strong> Browser type, operating system, IP address, and device information</li>
17+
<li><strong>Account Information:</strong> When you create an account, we collect your email address and any profile information you provide</li>
18+
</ul>
19+
20+
<h3>How We Use Your Information</h3>
21+
<p>We use the information we collect to:</p>
22+
<ul>
23+
<li>Provide and improve our services</li>
24+
<li>Analyze website usage to enhance user experience</li>
25+
<li>Communicate with you about updates and features</li>
26+
<li>Ensure website security and prevent fraud</li>
27+
</ul>
28+
29+
<h3>Cookies and Tracking Technologies</h3>
30+
<p>We use cookies and similar technologies to enhance your browsing experience. Our website uses:</p>
31+
<ul>
32+
<li><strong>Essential Cookies:</strong> Required for basic website functionality</li>
33+
<li><strong>Analytics Cookies:</strong> Help us understand how you use our site (Google Analytics, Microsoft Clarity)</li>
34+
<li><strong>Advertising Cookies:</strong> Used to deliver relevant advertisements</li>
35+
</ul>
36+
37+
<p>You can manage your cookie preferences at any time by clicking the "Cookie Preferences" link in our footer.</p>
38+
39+
<div class="mt-3 mb-3">
40+
<button class="btn btn-primary" onclick="openConsentPreferences()">
41+
<i class="fa fa-cog me-2"></i>Manage Cookie Preferences
42+
</button>
43+
</div>
44+
45+
<h3>Your Rights</h3>
46+
<p>Depending on your location, you may have certain rights regarding your personal information:</p>
47+
<ul>
48+
<li>Access to your personal information</li>
49+
<li>Correction of inaccurate information</li>
50+
<li>Deletion of your personal information</li>
51+
<li>Restriction of processing</li>
52+
<li>Data portability</li>
53+
<li>Objection to processing</li>
54+
</ul>
55+
56+
<h3>Third-Party Services</h3>
57+
<p>Our website uses the following third-party services that may collect information:</p>
58+
<ul>
59+
<li><strong>Google Analytics:</strong> Web analytics service provided by Google Inc.</li>
60+
<li><strong>Microsoft Clarity:</strong> User behavior analytics service provided by Microsoft Corporation</li>
61+
</ul>
62+
63+
<h3>Data Retention</h3>
64+
<p>We retain your information only as long as necessary to provide our services and fulfill the purposes outlined in this privacy policy.</p>
65+
66+
<h3>International Transfers</h3>
67+
<p>Your information may be transferred to and processed in countries other than your own. We ensure appropriate safeguards are in place for such transfers.</p>
68+
69+
<h3>Contact Us</h3>
70+
<p>If you have questions about this privacy policy or your personal information, please contact us through our GitHub repository or at the contact information provided on <a href="https://intellitect.com/about/privacy-policy/" target="_blank">IntelliTect's Privacy Policy</a>.</p>
71+
72+
<h3>Changes to This Policy</h3>
73+
<p>We may update this privacy policy from time to time. We will notify you of any material changes by posting the new policy on this page.</p>
74+
75+
<p><small><em>Last updated: @DateTime.Now.ToString("MMMM dd, yyyy")</em></small></p>
76+
</div>
77+
<div class="col-lg-4">
78+
<div class="card">
79+
<div class="card-header">
80+
<h5>Quick Actions</h5>
81+
</div>
82+
<div class="card-body">
83+
<div class="d-grid gap-2">
84+
<button class="btn btn-outline-primary" onclick="openConsentPreferences()">
85+
<i class="fa fa-cog me-2"></i>Cookie Preferences
86+
</button>
87+
<a href="https://intellitect.com/about/privacy-policy/" target="_blank" class="btn btn-outline-secondary">
88+
<i class="fa fa-external-link me-2"></i>IntelliTect Privacy Policy
89+
</a>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
</div>

‎EssentialCSharp.Web/Views/Shared/_Layout.cshtml‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,24 +78,43 @@
7878
<environment exclude="Development">
7979
<script type="importmap" asp-importmap="@prodMap"></script>
8080
</environment>
81+
<!-- Cookie Consent Manager - Load before analytics -->
82+
<script src="~/js/consent-manager.js" asp-append-version="true"></script>
83+
84+
<!-- Microsoft Clarity - Will be activated based on consent -->
8185
<script type="text/javascript">
8286
(function (c, l, a, r, i, t, y) {
8387
c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
8488
t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
8589
y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
8690
})(window, document, "clarity", "script", "g4keetzd2o");
8791
</script>
92+
8893
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
8994
<!-- Markdown and sanitization libraries -->
9095
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9196
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
92-
<!-- Google tag (gtag.js) -->
97+
98+
<!-- Google tag (gtag.js) - Will be activated based on consent -->
9399
<script async src="https://www.googletagmanager.com/gtag/js?id=G-761B4BMK2R"></script>
94100
<script>
95101
window.dataLayer = window.dataLayer || [];
96102
function gtag() { dataLayer.push(arguments); }
103+
104+
// Initialize gtag but don't configure until consent is given
97105
gtag('js', new Date());
98-
gtag('config', 'G-761B4BMK2R');
106+
107+
// Configuration will be handled by consent manager
108+
// Only configure if consent is already granted or region doesn't require consent
109+
document.addEventListener('DOMContentLoaded', function() {
110+
// Small delay to ensure consent manager is initialized
111+
setTimeout(function() {
112+
if (window.consentManager &&
113+
(window.consentManager.hasAnalyticsConsent() || !window.consentManager.requiresConsent)) {
114+
gtag('config', 'G-761B4BMK2R');
115+
}
116+
}, 100);
117+
});
99118
</script>
100119
<style>
101120
[v-cloak] {
@@ -506,6 +525,9 @@
506525
<div class="col-12 col-md-auto align-self-end p-2">
507526
<a target="_blank" rel="noreferrer noopener" href="https://intellitect.com/about/privacy-policy/">Privacy</a>
508527
</div>
528+
<div class="col-12 col-md-auto align-self-end p-2">
529+
<a href="javascript:void(0)" onclick="openConsentPreferences()">Cookie Preferences</a>
530+
</div>
509531
<div class="col-12 col-md-auto align-self-end p-2"><a asp-route="TermsOfService">Terms Of Service</a></div>
510532
</div>
511533
</footer>

0 commit comments

Comments
 (0)