BLUF
When the script is managed by FS Cookie Consent, it does not run at all.
When the script is not managed by FS Cookie Consent, the cookie dismissing the notification bar is removed on browser reload/refresh.
Update 1
Tried wrapping the script in the Consent API as worked in this post, but that did not solve my issue. console.log('Consent instance:', instance);
worked but the script did not run.
- The close button uses a WF Interaction to hide the notification bar.
- The script is placed in a
code embed
element placed after the.notification_component
element (div
).
Also, could not locate any documentation for the Consent API.
Setup
FS Cookie Consent is correctly set up for full GPDR compliance, and all scripts are managed.
Issue 1
My design includes a notification bar with a close button. I would like to “snooze” the notification bar for five days when a visitor dismisses by clicking the close button, using the script below.
This script does not log anything in the browser console, when managed by Finsweet Cookie Consent. When I remove the fs-consent-categories="essential" fs-consent-scripttype="text/javascript" type="fs-consent"
the script logs statements.
Why is this occuring? How do I remaing GPDR compliant and still dismiss the notification for 5 days?
Issue 2
Running the script with fs-
attributes removed, when I dismiss and refresh this is logged:
Cookie found: notificationDismissed=true
Notification bar hidden due to existing cookie.
Running unit tests...
Cookie set: testCookie=true; expires in 1 day(s)
Cookie found: testCookie=true
Cookie not found: nonExistentCookie
All tests completed.
and the notification bar remains hidden. However, examining Dev tools → application → cookies, the notificationDismissed
cookie is gone and a second refresh returns the bar.
Is Finsweet Cookie Consent removing the notificationDismissed
cookie after it is found, or otherwise interefering with the script? Subsequent refreshes display the notification bar.
The script
<!-- This script is managed by Finsweet Cookie Consent -->
<script fs-consent-categories="essential" fs-consent-scripttype="text/javascript" type="fs-consent">
// Function to check if cookies are enabled
function areCookiesEnabled() {
// Temporarily set a test cookie
document.cookie = "testCookie=1; domain=.jessicapaschke.com; Secure; SameSite=Lax";
const cookiesEnabled = document.cookie.indexOf("testCookie=") !== -1;
// Delete test cookie
if (cookiesEnabled) {
document.cookie = "testCookie=1; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.jessicapaschke.com; Secure; SameSite=Lax";
}
return cookiesEnabled;
}
// Function to set a cookie with an expiration date and proper attributes
function setCookie(name, value, days) {
if (!areCookiesEnabled()) {
console.warn("Cookies are disabled in this browser.");
return;
}
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "; expires=" + date.toUTCString();
// Always use Secure and SameSite=Lax when on HTTPS
const domain = "; domain=.jessicapaschke.com";
const path = "; path=/";
const secure = "; Secure";
const sameSite = "; SameSite=Lax";
document.cookie = `${name}=${value}${expires}${path}${domain}${secure}${sameSite}`;
console.log(`Cookie set: ${name}=${value}; expires in ${days} day(s)`);
}
// Function to retrieve a cookie by name
function getCookie(name) {
if (!areCookiesEnabled()) {
console.warn("Cookies are disabled in this browser.");
return null;
}
const value = "; " + document.cookie;
const parts = value.split("; " + name + "=");
if (parts.length === 2) {
const cookieValue = parts.pop().split(";").shift();
console.log(`Cookie found: ${name}=${cookieValue}`);
return cookieValue === 'true'; // Convert string to boolean
}
console.log(`Cookie not found: ${name}`);
return null;
}
// Execute this code when the window finishes loading
window.onload = function() {
if (!areCookiesEnabled()) {
console.warn("Cookies are disabled. Notification bar behavior will not be stored.");
return;
}
const notificationBar = document.getElementById('notification_component');
const closeButton = document.getElementById('notification-close-button');
if (notificationBar) {
if (getCookie('notificationDismissed')) {
notificationBar.style.display = 'none';
console.log('Notification bar hidden due to existing cookie.');
} else {
console.log('Notification bar visible. No dismissal cookie found.');
}
}
if (closeButton && notificationBar) {
closeButton.addEventListener('click', function() {
notificationBar.style.display = 'none';
setCookie('notificationDismissed', true, 5);
console.log('Notification bar dismissed and snoozed for 5 days.');
});
}
};
</script>