Hiển thị thanh thông báo Cookie Bar cho website

Kiến thức về WordPress 07/06/2024 In trang này

Mới đây tôi có làm 1 website cho 1 bên liên quan tới pháp luật và có làm thanh cookie bar nên tiện thể share code cho những ai cần. Code này hiển thị 1 thông báo về việc website thu thập dữ liệu hoặc có quảng cáo …

Theo Nghị định 13/2023/NĐ-CP bảo vệ dữ liệu cá nhân mới nhất các website cần thông báo cho người dùng biết các dữ liệu sẽ được theo dõi hoặc thu thập và thanh cookie bar kia chắc chắn mọi website cần có, thời điểm hiện tại các website lớn sẽ đi đầu việc hiện thông báo GDPR Cookie Consent Bar giống như bên liên minh Châu Âu EU yêu cầu, sau đó gần như toàn bộ website tại Việt Nam cần hiển thị thông báo trên nếu sử dụng bất cứ trình theo dõi người dùng.

Bạn có thể xem demo trực tiếp tại đây, hoặc xem qua demo ở ảnh phía dưới.

Ưu điểm của code này là chỉ hiển thị thông báo 1 lần, khi click đồng ý thì sẽ ẩn thông báo đi, tránh làm phiền cho khách hàng xem các page khác.

Để thêm Cooki bar cố định cho website bạn có thể cho code HTML JS phía dưới vào footer và CSS bạn có vào phần tuỳ biến > CSS là xong, cách thêm css bạn có thể xem qua bài viết này

HTML

<section class="cookie-bar">
    <div class="cookie-notice container">
        <p class="cookie-para">Trang web của chúng tôi sử dụng cookie để cải thiện và cá nhân hóa trải nghiệm của bạn, đồng thời hiển thị quảng cáo (nếu có). Trang web của chúng tôi cũng có thể bao gồm cookie của các bên thứ ba như Google Adsense, Google Analytics, YouTube. Bằng cách sử dụng trang web này, bạn đồng ý với việc sử dụng cookie. Chúng tôi đã cập nhật Chính sách quyền riêng tư, vui lòng nhấp vào nút bên cạnh để kiểm tra Chính sách quyền riêng tư của chúng tôi.</p>
        <a href="javascript:;" class="cookie-btn">Ok</a>
        <a href="#" class="cookie-btn secondary">Chính sách bảo mật</a>
    </div>
</section>

<script>
jQuery(document).ready(function($) {
    // Function to read a cookie
    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    // Function to create a cookie
    function createCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    // Show or hide the cookie bar based on the cookie
    if (readCookie("cookie_accepted") == "1") {
        $(".cookie-bar").hide();
    } else {
        $(".cookie-bar").show();
        $('body').addClass('cookie-space');
    }

    // Handle the cookie bar button click
    $('.cookie-btn').click(function() {
        $('body').removeClass('cookie-space');
        $('.cookie-bar').fadeOut();
        createCookie("cookie_accepted", 1, 365);
    });

    // Additional functions (optional)
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

    jQuery(document).ready(function($) {
        var advMedium = getParameterByName('advm');
        if (advMedium != null) {
            $('input[name=advm]').val(advMedium);
            createCookie('advm', advMedium, 1);
        } else {
            advMedium = readCookie('advm');
            $('input[name=advm]').val(advMedium);
        }
        var nodeCount = document.getElementsByName('ft').length;
        for (var count = 0; count < nodeCount; count++) {
            document.getElementsByName('ft')[count].value = window.location.href;
        }
    });
});
</script>

CSS

Cách hiện lịch sử chỉnh sửa bài viết trong WordPress

WordPress là gì? CMS là gì? Mã nguồn mở là gì?

Sửa lỗi cURL error 60: SSL certificate problem trong WordPress

.cookie-bar{ position: fixed; bottom: 0px; padding:10px 15px; width: 100%; display: none; z-index: 15; background-color:black; font-family: "Poppins", sans-serif; }
.cookie-para { color: white; font-size: 12px; font-weight: normal; display: inline-block;margin-bottom: 8px;display: block;
}

.cookie-space { padding-bottom: 45px; }
.cookie-btn{ font-size:14px; color: #ffffff; background: red; padding: 2px 15px; border-radius: 4px; 
  display: inline-block; }
.cookie-btn.secondary {color:#ffffff; background: #008000;}  
  
@media (max-width: 767px) {
  .cookie-bar{ padding:10px 15px 40px 15px; }
}

Ngoài code trên, nếu bạn sử dụng mã nguồn WordPress thì có thể sử dụng 1 số plugin nếu cần, từ khoá để tìm đó là Cookie Bar plugin

Hy vọng thông tin trên sẽ hữu ích cho nhiều người.