|
106 | 106 | type="checkbox" |
107 | 107 | id="functional-cookies" |
108 | 108 | class="checkbox checkbox-sm" |
| 109 | + checked |
| 110 | + disabled |
109 | 111 | /> |
110 | 112 | <div> |
111 | 113 | <label |
112 | 114 | for="functional-cookies" |
113 | | - class="font-medium text-sm cursor-pointer" |
114 | | - >Functional Cookies</label |
| 115 | + class="font-medium text-sm cursor-pointer opacity-60" |
| 116 | + >Functional Cookies (Required)</label |
115 | 117 | > |
116 | 118 | <p class="text-xs text-base-content/60 mt-1"> |
117 | 119 | Essential for website functionality and your preferences |
|
170 | 172 | } |
171 | 173 |
|
172 | 174 | initialize() { |
| 175 | + // console.log("Initializing cookie consent"); |
173 | 176 | // Check if user has already made a choice |
174 | 177 | const consent = this.getCookieConsent(); |
| 178 | + // console.log("Existing consent:", consent); |
175 | 179 |
|
176 | 180 | if (!consent) { |
177 | 181 | // Show banner for first-time users - no default consent applied |
| 182 | + // console.log("No existing consent, showing banner"); |
178 | 183 | this.showBanner(); |
179 | 184 | } else { |
180 | 185 | // Apply existing preferences |
| 186 | + // console.log("Applying existing consent"); |
181 | 187 | this.applyConsent(consent); |
182 | 188 | } |
183 | 189 |
|
|
194 | 200 | } |
195 | 201 |
|
196 | 202 | hideBanner() { |
| 203 | + // console.log("Hiding banner"); |
197 | 204 | this.consentBanner.classList.add("translate-y-full"); |
198 | 205 | setTimeout(() => { |
199 | 206 | this.consentBanner.style.display = "none"; |
|
205 | 212 | const acceptBtn = document.getElementById("accept-cookies"); |
206 | 213 | if (acceptBtn) { |
207 | 214 | acceptBtn.addEventListener("click", () => { |
| 215 | + // console.log("Accept All clicked"); |
208 | 216 | const consent = { |
209 | 217 | analytics: true, |
210 | 218 | advertising: true, // Always true for AdSense (mandatory) |
211 | | - functional: true, |
| 219 | + functional: true, // Always true for functionality (mandatory) |
212 | 220 | personalization: true, |
213 | 221 | timestamp: Date.now(), |
214 | 222 | }; |
| 223 | + // console.log("Saving consent:", consent); |
215 | 224 | this.saveConsent(consent); |
216 | 225 | this.applyConsent(consent); |
217 | 226 | this.hideBanner(); |
218 | 227 | }); |
219 | 228 | } |
220 | 229 |
|
221 | | - // Reject non-essential cookies (advertising remains enabled) |
| 230 | + // Reject non-essential cookies (advertising and functional remain enabled) |
222 | 231 | const rejectBtn = document.getElementById("reject-cookies"); |
223 | 232 | if (rejectBtn) { |
224 | 233 | rejectBtn.addEventListener("click", () => { |
225 | 234 | const consent = { |
226 | 235 | analytics: false, |
227 | 236 | advertising: true, // Always true for AdSense (mandatory) |
228 | | - functional: false, |
| 237 | + functional: true, // Always true for functionality (mandatory) |
229 | 238 | personalization: false, |
230 | 239 | timestamp: Date.now(), |
231 | 240 | }; |
|
243 | 252 | const isHidden = this.optionsPanel.classList.contains("hidden"); |
244 | 253 | const textSpan = customizeBtn.querySelector("span"); |
245 | 254 | if (isHidden) { |
| 255 | + // Pre-check all customizable checkboxes when opening |
| 256 | + const analyticsCheckbox = document.getElementById( |
| 257 | + "analytics-cookies" |
| 258 | + ) as HTMLInputElement; |
| 259 | + const personalizationCheckbox = document.getElementById( |
| 260 | + "personalization-cookies" |
| 261 | + ) as HTMLInputElement; |
| 262 | + if (analyticsCheckbox) analyticsCheckbox.checked = true; |
| 263 | + if (personalizationCheckbox) personalizationCheckbox.checked = true; |
| 264 | + |
246 | 265 | this.optionsPanel.classList.remove("hidden"); |
247 | 266 | if (textSpan) { |
248 | 267 | textSpan.innerHTML = |
|
294 | 313 | const consent = { |
295 | 314 | analytics: analyticsCheckbox?.checked ?? false, |
296 | 315 | advertising: true, // Always true for AdSense (mandatory) |
297 | | - functional: functionalCheckbox?.checked ?? false, |
| 316 | + functional: true, // Always true for functionality (mandatory) |
298 | 317 | personalization: personalizationCheckbox?.checked ?? false, |
299 | 318 | timestamp: Date.now(), |
300 | 319 | }; |
| 320 | + // console.log("Saving customized consent:", consent); |
301 | 321 | this.saveConsent(consent); |
302 | 322 | this.applyConsent(consent); |
303 | 323 | this.hideBanner(); |
|
315 | 335 | } |
316 | 336 |
|
317 | 337 | applyConsent(consent: any) { |
318 | | - // Handle advertising consent (always enabled for AdSense) |
319 | | - this.enableAdSense(); |
| 338 | + // console.log("Applying consent:", consent); |
| 339 | + // console.log("Current gtag availability:", typeof gtag); |
| 340 | + |
| 341 | + // Wait for gtag to be available with longer timeout |
| 342 | + let retryCount = 0; |
| 343 | + const maxRetries = 20; // Try for up to 10 seconds |
| 344 | + |
| 345 | + const applyWithDelay = () => { |
| 346 | + retryCount++; |
| 347 | + // console.log( |
| 348 | + // `Retry attempt ${retryCount}/${maxRetries}, gtag available:`, |
| 349 | + // typeof gtag !== "undefined" |
| 350 | + // ); |
| 351 | + |
| 352 | + if (typeof gtag !== "undefined") { |
| 353 | + // console.log("gtag is available, applying consent updates"); |
| 354 | + |
| 355 | + // Update all consent states at once |
| 356 | + gtag("consent", "update", { |
| 357 | + ad_storage: "granted", // Always granted for AdSense |
| 358 | + ad_user_data: "granted", // Always granted for AdSense |
| 359 | + ad_personalization: "granted", // Always granted for AdSense |
| 360 | + analytics_storage: consent.analytics ? "granted" : "denied", |
| 361 | + functionality_storage: "granted", // Always granted for functionality |
| 362 | + security_storage: "granted", // Always granted for functionality |
| 363 | + personalization_storage: consent.personalization |
| 364 | + ? "granted" |
| 365 | + : "denied", |
| 366 | + }); |
| 367 | + |
| 368 | + // Force a pageview event to ensure tracking starts |
| 369 | + if (consent.analytics) { |
| 370 | + // console.log("Sending pageview event to ensure tracking"); |
| 371 | + gtag("event", "page_view", { |
| 372 | + page_title: document.title, |
| 373 | + page_location: window.location.href, |
| 374 | + }); |
| 375 | + } |
320 | 376 |
|
321 | | - // Handle analytics consent |
322 | | - if (consent.analytics) { |
323 | | - this.enableAnalytics(); |
324 | | - } else { |
325 | | - this.disableAnalytics(); |
326 | | - } |
| 377 | + // Update Google Consent Mode defaults for future page loads |
| 378 | + this.updateConsentDefaults(consent); |
327 | 379 |
|
328 | | - // Handle functional consent |
329 | | - if (consent.functional) { |
330 | | - this.enableFunctional(); |
331 | | - } else { |
332 | | - this.disableFunctional(); |
333 | | - } |
| 380 | + // console.log("Consent applied successfully"); |
| 381 | + } else if (retryCount < maxRetries) { |
| 382 | + // console.log("gtag not available, retrying..."); |
| 383 | + // Retry after a longer delay |
| 384 | + setTimeout(applyWithDelay, 500); |
| 385 | + } else { |
| 386 | + // console.error("gtag failed to load after maximum retries"); |
| 387 | + } |
| 388 | + }; |
334 | 389 |
|
335 | | - // Handle personalization consent |
336 | | - if (consent.personalization) { |
337 | | - this.enablePersonalization(); |
338 | | - } else { |
339 | | - this.disablePersonalization(); |
340 | | - } |
| 390 | + applyWithDelay(); |
341 | 391 | } |
342 | 392 |
|
343 | 393 | enableAdSense() { |
|
365 | 415 | enableAnalytics() { |
366 | 416 | // Enable analytics tracking |
367 | 417 | if (typeof gtag !== "undefined") { |
| 418 | + // console.log("Enabling analytics"); |
368 | 419 | gtag("consent", "update", { |
369 | 420 | analytics_storage: "granted", |
370 | 421 | }); |
| 422 | + } else { |
| 423 | + console.warn("gtag not available for analytics enable"); |
371 | 424 | } |
372 | 425 | } |
373 | 426 |
|
374 | 427 | disableAnalytics() { |
375 | 428 | // Disable analytics tracking |
376 | 429 | if (typeof gtag !== "undefined") { |
| 430 | + // console.log("Disabling analytics"); |
377 | 431 | gtag("consent", "update", { |
378 | 432 | analytics_storage: "denied", |
379 | 433 | }); |
| 434 | + } else { |
| 435 | + console.warn("gtag not available for analytics disable"); |
380 | 436 | } |
381 | 437 | } |
382 | 438 |
|
|
403 | 459 | enablePersonalization() { |
404 | 460 | // Enable personalization cookies |
405 | 461 | if (typeof gtag !== "undefined") { |
| 462 | + // console.log("Enabling personalization"); |
406 | 463 | gtag("consent", "update", { |
407 | 464 | personalization_storage: "granted", |
408 | 465 | }); |
| 466 | + } else { |
| 467 | + console.warn("gtag not available for personalization enable"); |
409 | 468 | } |
410 | 469 | } |
411 | 470 |
|
412 | 471 | disablePersonalization() { |
413 | 472 | // Disable personalization cookies |
414 | 473 | if (typeof gtag !== "undefined") { |
| 474 | + // console.log("Disabling personalization"); |
415 | 475 | gtag("consent", "update", { |
416 | 476 | personalization_storage: "denied", |
417 | 477 | }); |
| 478 | + } else { |
| 479 | + console.warn("gtag not available for personalization disable"); |
| 480 | + } |
| 481 | + } |
| 482 | + |
| 483 | + updateConsentDefaults(consent: any) { |
| 484 | + // Update default consent for future page loads |
| 485 | + if (typeof gtag !== "undefined") { |
| 486 | + gtag("consent", "default", { |
| 487 | + ad_storage: "granted", // Always granted for AdSense |
| 488 | + ad_user_data: "granted", // Always granted for AdSense |
| 489 | + ad_personalization: "granted", // Always granted for AdSense |
| 490 | + analytics_storage: consent.analytics ? "granted" : "denied", |
| 491 | + functionality_storage: "granted", // Always granted for functionality |
| 492 | + security_storage: "granted", // Always granted for functionality |
| 493 | + personalization_storage: consent.personalization |
| 494 | + ? "granted" |
| 495 | + : "denied", |
| 496 | + }); |
418 | 497 | } |
419 | 498 | } |
420 | 499 | } |
|
0 commit comments