Skip to content

Commit bc87326

Browse files
shirgoldbirdshirgoldbird
authored
Merge pull request #235 from DeepLcom/enable-telemetry
Enable telemetry if cookies are accepted
2 parents 15037f5 + e259a0b commit bc87326

4 files changed

Lines changed: 150 additions & 27 deletions

File tree

‎analytics.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ class AnalyticsTracker {
1818
static EVENT_ID_NETWORK_REQUEST = 5000;
1919
static EVENT_ID_SEARCH_INPUT = 5001; // TODO change this after DAP update
2020

21+
static CONSENT_KEY = 'deepl_cookie_consent';
22+
static CONSENT_ACCEPTED = 'accepted';
23+
2124
static isProdStage = window.location.hostname === "developers.deepl.com";
2225
static statisticsUrl = this.isProdStage ?
2326
"https://s.deepl.com/web/statistics"
@@ -149,7 +152,7 @@ class AnalyticsTracker {
149152
// console.log('Fetched data: ', data);
150153
return data;
151154
} catch (error) {
152-
console.error('Fetch error: ', error);
155+
console.error('[Analytics] Fetch error: ', error);
153156
}
154157
}
155158

@@ -377,10 +380,25 @@ class AnalyticsTracker {
377380
}
378381
};
379382

383+
// ========================
384+
// Consent Checker
385+
// ========================
386+
static hasConsent() {
387+
// Check localStorage for consent
388+
return localStorage.getItem(this.CONSENT_KEY) === this.CONSENT_ACCEPTED;
389+
}
390+
380391
// ========================
381392
// Initialization
382393
// ========================
383394
static init() {
395+
// Only initialize analytics if user has consented
396+
if (!this.hasConsent()) {
397+
console.log('[Analytics] User has not consented to tracking. Analytics disabled.');
398+
return;
399+
}
400+
401+
console.log('[Analytics] User consent verified. Initializing analytics...');
384402
this.PageNavigationTracker.setupNavigationTrackers();
385403
this.NetworkRequestTracker.setupNetworkRequestTracking();
386404
// this.SearchInputTracker.setupSearchInputTracking(); // Disable this for now

‎cookie-banner.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/* DeepL Cookie Consent Banner */
2+
#cookie-banner {
3+
position: fixed;
4+
bottom: 0;
5+
left: 0;
6+
width: 100%;
7+
background: #0f2b46;
8+
color: #fff;
9+
padding: 20px;
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
gap: 20px;
14+
z-index: 10000;
15+
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
16+
font-family: Roboto, sans-serif;
17+
}
18+
19+
#cookie-banner-content {
20+
flex: 1;
21+
}
22+
23+
#cookie-banner-text {
24+
margin: 0;
25+
font-size: 14px;
26+
line-height: 1.5;
27+
}
28+
29+
#cookie-banner-text a {
30+
color: #4FC3F7;
31+
text-decoration: underline;
32+
}
33+
34+
#cookie-banner-buttons {
35+
display: flex;
36+
gap: 12px;
37+
flex-shrink: 0;
38+
}
39+
40+
#cookie-reject,
41+
#cookie-accept {
42+
padding: 10px 20px;
43+
border-radius: 4px;
44+
cursor: pointer;
45+
font-size: 14px;
46+
font-weight: 500;
47+
transition: all 0.2s;
48+
font-family: Roboto, sans-serif;
49+
}
50+
51+
#cookie-reject {
52+
background: transparent;
53+
color: #fff;
54+
border: 1px solid #fff;
55+
}
56+
57+
#cookie-reject:hover {
58+
background: rgba(255, 255, 255, 0.1);
59+
}
60+
61+
#cookie-accept {
62+
background: #fff;
63+
color: #0f2b46;
64+
border: none;
65+
}
66+
67+
#cookie-accept:hover {
68+
background: #e6e6e6;
69+
}
70+
71+
/* Responsive design for mobile */
72+
@media (max-width: 768px) {
73+
#cookie-banner {
74+
flex-direction: column;
75+
align-items: stretch;
76+
gap: 16px;
77+
padding: 16px;
78+
}
79+
80+
#cookie-banner-buttons {
81+
width: 100%;
82+
justify-content: stretch;
83+
}
84+
85+
#cookie-reject,
86+
#cookie-accept {
87+
flex: 1;
88+
}
89+
}

‎cookie-banner.js‎

Lines changed: 39 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,53 @@
1-
function getCookie(name) {
2-
const value = `; ${document.cookie}`;
3-
const parts = value.split(`; ${name}=`);
4-
if (parts.length === 2) return parts.pop().split(';').shift();
5-
}
1+
// Constants
2+
const CONSENT_KEY = 'deepl_cookie_consent';
3+
const CONSENT_ACCEPTED = 'accepted';
4+
const CONSENT_REJECTED = 'rejected';
65

76
const showCookieBanner = () => {
8-
// TODO check if this needs to use the same cookie field as deepl.com
9-
if (getCookie('cookie_consent') === 'true') return;
7+
// Check localStorage for consent
8+
const consent = localStorage.getItem(CONSENT_KEY);
9+
10+
// Only hide banner if user has explicitly accepted or rejected
11+
if (consent === CONSENT_ACCEPTED || consent === CONSENT_REJECTED) return;
1012

1113
const banner = document.createElement('div');
1214
banner.id = 'cookie-banner';
13-
banner.style.position = 'fixed';
14-
banner.style.bottom = '0';
15-
banner.style.left = '0';
16-
banner.style.width = '100%';
17-
banner.style.background = '#222';
18-
banner.style.color = '#fff';
19-
banner.style.padding = '16px';
20-
banner.style.display = 'flex';
21-
banner.style.justifyContent = 'space-between';
22-
banner.style.alignItems = 'center';
23-
banner.style.zIndex = '10000';
15+
2416
banner.innerHTML = `
25-
<span>DeepL uses cookies to deliver its service. Please find more information in our <a href="https://www.deepl.com/privacy" style="color:#4FC3F7;text-decoration:underline;">privacy policy</a>.</span>
26-
<button id="cookie-accept" style="background:transparent;color:#fff;padding:8px 16px;border:1px solid #fff;border-radius:4px;cursor:pointer;">Close</button>
17+
<div id="cookie-banner-content">
18+
<p id="cookie-banner-text">
19+
We use cookies and similar technologies to improve your experience and analyze site usage.
20+
By clicking "Accept", you consent to telemetry and analytics.
21+
Learn more in our <a href="https://www.deepl.com/privacy" target="_blank">privacy policy</a>.
22+
</p>
23+
</div>
24+
<div id="cookie-banner-buttons">
25+
<button id="cookie-reject">Reject</button>
26+
<button id="cookie-accept">Accept</button>
27+
</div>
2728
`;
2829

2930
document.body.appendChild(banner);
3031

31-
const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
32+
const acceptBtn = document.getElementById('cookie-accept');
33+
const rejectBtn = document.getElementById('cookie-reject');
3234

33-
document.getElementById('cookie-accept').onclick = function () {
34-
document.cookie = 'cookie_consent=true; path=/; max-age=' + ONE_YEAR_SECONDS;
35+
acceptBtn.onclick = function () {
36+
localStorage.setItem(CONSENT_KEY, CONSENT_ACCEPTED);
37+
banner.remove();
38+
// Reload to enable telemetry
39+
window.location.reload();
40+
};
41+
42+
rejectBtn.onclick = function () {
43+
localStorage.setItem(CONSENT_KEY, CONSENT_REJECTED);
3544
banner.remove();
3645
};
3746
}
38-
showCookieBanner()
47+
48+
// Show banner when DOM is ready
49+
if (document.readyState === 'loading') {
50+
document.addEventListener('DOMContentLoaded', showCookieBanner);
51+
} else {
52+
showCookieBanner();
53+
}

‎docs.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -406,8 +406,9 @@
406406
}
407407
],
408408
"integrations": {
409-
"telemetry": {
410-
"enabled": false
409+
"cookies": {
410+
"key": "deepl_cookie_consent",
411+
"value": "accepted"
411412
}
412413
},
413414
"contextual": {

0 commit comments

Comments
 (0)