You have no doubt found a warning message from Google AdSense telling you that you must create a cookie acceptance message on your site for the visitor to accept Google's use of browser cookies.
|
| JavaScript cookies alert |
The use of cookies alert messages has become a prerequisite for saying your website on the Internet in Google AdSense, you must add it to your site and keep pace with the development.
So there are a lot of sites and tools that help you create a free cookie alert message, but all of these sites require adding external JavaScript code to your site's HTML code for the cookie alert message to work completely.
So here's the problem. Adding external JavaScript files inside the site always leads to a significant slowdown in the site's speed and a delay in loading site pages due to the size of the external JavaScript file.
As always, what matters most to us on our site is website speed. The speed of the site is one of the most important factors for its success, so I developed a beautiful and simple cookie alert message that does not affect the speed of loading site pages. It consists of short JavaScript and CSS code and also HTML code of the text.
Also, See:
- Speed Up your website, Fix Google Analytics JavaScript loading File Delay.
- How to fix Google AdSense is Slowing down the Website Speed.
- How to remove widgets.js script from blogger templates.
How to install HTML Cookies Alert Code
This code is easy to install and does not require you to have programming experience. All you have to do is follow the following easy steps until you install the cookie alert code on your site, follow me.
<div id="cookies">
We use cookies to remember your preferred language, Make the ads you see more relevant to your interests, Count visitors to a particular page, Help you sign up for our services, Protect your data, And remember your ad settings.
<button class="cookies-button" onclick="agreeCookie();">Agree</button>
</div>
<script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
// cookies alert start
function setCookie(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=/";
}
function getCookie(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;
}
setTimeout(function() {
var x = getCookie('cstate');
if (!x) {
$("#cookies").fadeIn();
}
},5000);
function agreeCookie() {
setCookie('cstate','ok',30);
$("#cookies").fadeOut();
}
// cookies alert end
</script>
<style type="text/css">
<!--
#cookies {
left: 0;
right: 0;
position: fixed;
bottom: 0;
background-color: rgba(0,0,0,.9);
color: #fff;
padding: 5px;
text-align: center;
z-index: 9999999999;
line-height: 25px;
display: none;
margin: 0 auto;
width: 100%;
}
.cookies-button {
background-color: #ebff00;
border: none;
border-radius: 3px;
padding: 2px 5px;
cursor: pointer;
}
//-->
</style>
Follow the steps below to add a cookie usage alert to your site.
Copy the code and then paste it into your site's template code before the </body> tag.
- The code highlighted in red is the HTML code for the message
- The code highlighted in green is the jQuery library callback code
- The code highlighted in brown is the JavaScript code for showing and hiding the alert message
- The code highlighted in orange is the message style code
** You can modify the appearance of the message by modifying the style code to match your site.
** If your site already has a jQuery library, then there is no need to add the code highlighted in green.
You can include the JavaScript code for the cookie acceptance alert message inside any existing JavaScript file inside your site template, especially if you are not hosting your site on the Blogger platform.
As we all know that Blogger does not give you storage space as is the case with the rest of the blogging platforms only, but if you are using the WordPress platform or any other site on a paid hosting, you will have the right to upload and modify the files for the script that you use on your site.
Here you will have the ability to modify the JavaScript files of your site and add the previous code to it, also you can add the appearance code to any style file hosted on your hosting.
That's it, I've added a delay to trigger the message to after seconds so it doesn't affect the page load time.
Conclusion
As I have already told you that many sites create acceptance messages for the use of cookies on your site, but we always try to find alternative solutions that have less impact on the speed of loading pages of the site because all we care about is teaching you how to create a complete site at 100% speed on google lighthouse gadget.