Własny moduł akceptacji ciasteczek na stronie WWW

Zgodność z przepisami dotyczącymi prywatności, takimi jak RODO (Ogólne rozporządzenie o ochronie danych), wymaga od właścicieli stron internetowych informowania użytkowników o stosowaniu ciasteczek i uzyskiwania ich zgody na korzystanie z nich. Oto, jak można dodać własny kod pytający o akceptację ciasteczek na swojej stronie internetowej.

Krok 1: Tworzenie HTML

Najpierw musisz dodać elementy HTML, które będą wyświetlane użytkownikowi, pytając go o zgodę na ciasteczka. Możesz to zrobić za pomocą poniższego kodu HTML:

      <div id="cookie-notice">
        Ta strona używa ciasteczek. Czy akceptujesz ich użycie?
        <button class="accept" onclick="acceptCookies()">Akceptuję</button>
        <button class="decline" onclick="declineCookies()">Nie akceptuję</button>
    </div>

Krok 2: Stylizacja za pomocą CSS

Następnie możesz dodać stylizację do swojego kodu HTML, aby wyglądał bardziej atrakcyjnie:

#cookie-notice {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #222;
            color: white;
            padding: 15px;
            text-align: center;
        }
        button {
            margin: 5px;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
        .accept { background: green; color: white; }
        .decline { background: red; color: white; }

Krok 3: Dodanie kodu JavaScript

Teraz musisz dodać kod JavaScript, który będzie obsługiwał akceptację ciasteczek i ukrywanie komunikatu po zaakceptowaniu. Co ciekawe sama zgoda także zapisywana jest w ciasteczku na okres 30 dni, a jeśli użytkownik nie zaakceptuje jest przekierowywany do google.

// Funkcja do ustawiania ciasteczek
function setCookie(name, value, days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + "; path=/";
    console.log("Ciasteczko ustawione: ", name, value); // Debugowanie
}

// Funkcja do pobierania ciasteczka
function getCookie(name) {
    let cookies = document.cookie.split('; ');
    for (let i = 0; i < cookies.length; i++) {
        let [key, value] = cookies[i].split('=');
        if (key === name) return value;
    }
    return "";
}

// Funkcja do zaakceptowania ciasteczek
function acceptCookies() {
    setCookie("cookiesAccepted", "true", 365);
    document.getElementById("cookie-notice").style.display = "none";
    console.log("Cookies accepted. Hiding notice."); // Debugowanie
}

// Funkcja do odrzucenia ciasteczek
function declineCookies() {
    setCookie("cookiesAccepted", "false", 365);
    document.getElementById("cookie-notice").style.display = "none";
    console.log("Cookies declined. Hiding notice."); // Debugowanie
      window.location.href = "https://www.google.com"; // Przekierowanie na Google

}

// Sprawdzanie ciasteczka przy ładowaniu strony
window.onload = function() {
    console.log("Sprawdzam ciasteczka..."); // Debugowanie
    if (getCookie("cookiesAccepted") !== "true") {
        console.log("Ciasteczka nie zostały zaakceptowane. Pokazuję komunikat."); // Debugowanie
        document.getElementById("cookie-notice").style.display = "block";
    } else {
        console.log("Ciasteczka już zaakceptowane. Ukrywam komunikat."); // Debugowanie
        document.getElementById("cookie-notice").style.display = "none";
    }
};
function deleteCookie() {
    setCookie("cookiesAccepted", "", -1); // Ustawiamy datę wygaśnięcia w przeszłości, co usuwa ciasteczko
    console.log("Ciasteczko usunięte: ", name); // Debugowanie
}

Podsumowanie

Dodanie kodu pytającego o akceptację ciasteczek na stronie internetowej to ważny krok w zapewnieniu zgodności z przepisami dotyczącymi prywatności. Powyższy przykład pokazuje, jak można łatwo zaimplementować takie rozwiązanie za pomocą HTML, CSS i JavaScript. Upewnij się, że regularnie sprawdzasz przepisy i aktualizujesz swoje rozwiązanie, aby było zgodne z obowiązującym prawem.

Mam nadzieję, że ten artykuł okazał się pomocny. Jeśli masz jakiekolwiek pytania, śmiało pytaj!