Complying with Cookie laws is not something fancy, it’s a necessity. Whether you run a blog, an online store, or an informational site that collects user data, you will likely need to inform your visitors about the use of Cookies.
When we created our site, we tested dozens of plugins and customization, but almost all of them did not meet our requirements – no registration on third-party sites, light weight, no transfer of data about our visitors and collection of statistics.
We have come up with a solution that is not new, but not many people know about it – you can implement Cookie notification without resorting to cumbersome plugins, but by implementing a few lines of code without any special programming knowledge. In this article, we’ll look at how to embed notification code directly into your site’s HTML. This approach will not only simplify your site, but will also improve loading speed, which will ultimately favor your SEO efforts and user experience.
Why You Need Cookie Notifications
First of all, you need to understand the importance of Cookie notifications. Cookies are small data files that track users’ actions on your website, which can be useful for personalizing user experience and analyzing website performance. However, privacy laws such as GDPR in Europe and CCPA in California require you to inform users of their use and obtain consent. Failure to comply with these requirements can result in hefty fines.
Not only is this compliance with the law, but notification can increase trust in your site. Users are increasingly concerned about privacy, and providing transparency builds trust. When users see that you prioritize their privacy, they are more likely to engage with your content and Ads, increasing your potential for monetization.
Also, if you want to monetize your site with GoogleAdsense or Ezoic Ads, proper notification will not only help you get permission to display Ads, but will also help you maintain a good relationship with ad networks. You can’t control from which country a user comes to your site, can you? It is therefore better to place such a notice together with the mandatory Privacy Policy page with Cookie Policy rules (or a separate page).
Benefits of Avoiding Plugins
While plugins may seem like a simple solution, they can bloat your site by slowing down load times. A slow site can frustrate users and negatively impact your SEO ranking. By embedding code directly into your HTML pages, you can achieve a smaller site that will load faster.
Here are a few benefits of opting out of plugins:
- Increased loading speed: Reducing the number of plugins minimizes HTTP requests, which allows the site to load faster
- Increased control: Directly embedding code gives you full control over its appearance and functionality
- Reduced risk of conflicts: Fewer plugins reduces the likelihood of compatibility issues that can crash your site
- Simplified maintenance: Optimizing your site simplifies maintenance and troubleshooting
- Adherence to design: You can customize the notification window yourself according to your brand colors and style
Let’s take a look at how this can be achieved.
How to Embed Notification Code
Let’s get to the fun part! Here’s an easy way to implement notification without using a plugin:
1. Choose your code: You can write a basic HTML and JavaScript snippet or find open source solutions online. Here’s a simple example:
<div id="cookie-notification" style="display: none; position: fixed; bottom: 20px; left: 20px; background: #333; color: #fff; padding: 10px; border-radius: 5px;">
We use cookies to improve your experience. By continuing, you agree to our cookie policy.
<button id="accept-cookies" style="margin-left: 10px;">Accept</button>
</div>
<script>
window.onload = function() {
var cookieConsent = localStorage.getItem('cookie-consent');
if (!cookieConsent) {
document.getElementById('cookie-notification').style.display = 'block';
}
document.getElementById('accept-cookies').onclick = function() {
localStorage.setItem('cookie-consent', 'accepted');
document.getElementById('cookie-notification').style.display = 'none';
}
}
</script>
2. Add the code to your site: Place this snippet (code) right before the closing </body> tag in your HTML. This placement ensures that the notification loads after the main content, optimizing the user experience. If you’re using WordPress, the code is usually inserted in the footer of the site, the file can be found in: Main Menu – Appearance – Theme File Editor – footer.php, after inserting the code don’t forget to save the changes by clicking “Update File” at the bottom of the page. Just in case, copy the original footer code into a text document on your desktop, if something breaks you can just put it back in place.
If you don’t want to modify the code directly and are afraid of doing something wrong, you can use the simple Insert Headers and Footers plugin by pasting the code into the Scripts in Body or Footer block.
3. Customize the notification: Feel free to change the text, colors and button styles to match the design and tone of your site. Consistency in design enhances user experience.
4. Test your implementation: After inserting your code, test it in different browsers and devices to make sure it works properly.
That’s it! That’s how easy you can create any notification or tooltip on your website.
Conclusion: A Productive Website Improves the User Experience
Implementing a plugin-free Cookie notice is a smart move for bloggers looking to optimize their sites while ensuring compliance with privacy laws. This approach can play an important role in your monetization strategy, especially if you rely on ad revenue, by optimizing and increasing load speeds and therefore user experience. And, as a bonus, Google loves fast sites and ranks them higher in search.
By prioritizing transparency and performance, you ensure your blog’s long-term success. So go ahead, take control of your site!
