Como colocar um aviso de cookies no seu site sem plugin
Aprenda a colocar um popup com aviso de cookies e consentimento no seu site (HTML ou plataforma, ex: WordPress) sem usar plugins, com apenas 4 KB de código.
PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO
Se você tem um site e se preocupa com os dados dos seus usuários, com certeza tem uma política de privacidade bem clara e objetiva, informando como esses dados são tratados. Além disso, na sua política de privacidade também existe um texto falando sobre os cookies, se o seu site usar.
Se tudo isso for novidade para você, pesquise sobre LGPD, que é a lei geral de proteção de dados do Brasil. Além disso, procure um profissional da área para adequar sua empresa e produtos digitais.
▶ Se preferir, acesse "Como colocar um aviso de cookies no seu site sem plugin" no YouTube.
Voltando ao assunto principal deste post, é uma boa prática exibir para o usuário na sua primeira visita, um aviso que o site utiliza cookies e que existe uma política de privacidade.
Para colocar um popup com aviso de cookie e consentimento de política de privacidade, exatamente como o da imagem anterior, você deve inserir no seu site algumas linhas de código JavaScript e CSS, com apenas 4KB.
Se você é programador, não terá dificuldades. Se você não é, peça para a sua equipe técnica fazer, ou se quiser tentar é bem tranquilo, desde que seu site seja feito em alguma plataforma como o WordPress, por exemplo.
Os códigos são bem simples, mas é sempre importante fazer um backup do site antes da mudança.
Antes de continuar, os códigos que serão usados não são meus, então vou dar os créditos para o site cssscript.com, que foi onde encontrei, e segundo ele o autor é SnowPath.
Código CSS (visual), que deve ser colocado no cabeçalho do site, dentro da tag HTML <head>:
<style>.cookieConsentContainer{z-index:999;width:350px;min-height:20px;box-sizing:border-box;padding:30px 30px 30px 30px;background:#232323;overflow:hidden;position:fixed;bottom:30px;right:30px;display:none}.cookieConsentContainer .cookieTitle a{font-family:OpenSans,arial,sans-serif;color:#fff;font-size:22px;line-height:20px;display:block}.cookieConsentContainer .cookieDesc p{margin:0;padding:0;font-family:OpenSans,arial,sans-serif;color:#fff;font-size:13px;line-height:20px;display:block;margin-top:10px}.cookieConsentContainer .cookieDesc a{font-family:OpenSans,arial,sans-serif;color:#fff;text-decoration:underline}.cookieConsentContainer .cookieButton a{display:inline-block;font-family:OpenSans,arial,sans-serif;color:#fff;font-size:14px;font-weight:700;margin-top:14px;background:#000;box-sizing:border-box;padding:15px 24px;text-align:center;transition:background .3s}.cookieConsentContainer .cookieButton a:hover{cursor:pointer;background:#3e9b67}@media (max-width:980px){.cookieConsentContainer{bottom:0!important;left:0!important;width:100%!important}}</style>Código JavaScript (funcional), que deve ser colocado no rodapé do site, antes da tag HTML </body>:
<script>var purecookieTitle="Cookies.",purecookieDesc="By using this website, you automatically accept that we use cookies.",purecookieLink='<a href="https://www.cssscript.com/privacy-policy/" target="_blank">What for?</a>',purecookieButton="Understood";function pureFadeIn(e,o){var i=document.getElementById(e);i.style.opacity=0,i.style.display=o||"block",function e(){var o=parseFloat(i.style.opacity);(o+=.02)>1||(i.style.opacity=o,requestAnimationFrame(e))}()}function pureFadeOut(e){var o=document.getElementById(e);o.style.opacity=1,function e(){(o.style.opacity-=.02)<0?o.style.display="none":requestAnimationFrame(e)}()}function setCookie(e,o,i){var t="";if(i){var n=new Date;n.setTime(n.getTime()+24*i*60*60*1e3),t="; expires="+n.toUTCString()}document.cookie=e+"="+(o||"")+t+"; path=/"}function getCookie(e){for(var o=e+"=",i=document.cookie.split(";"),t=0;t<i.length;t++){for(var n=i[t];" "==n.charAt(0);)n=n.substring(1,n.length);if(0==n.indexOf(o))return n.substring(o.length,n.length)}return null}function eraseCookie(e){document.cookie=e+"=; Max-Age=-99999999;"}function cookieConsent(){getCookie("purecookieDismiss")||(document.body.innerHTML+='<div class="cookieConsentContainer" id="cookieConsentContainer"><div class="cookieTitle"><a>'+purecookieTitle+'</a></div><div class="cookieDesc"><p>'+purecookieDesc+" "+purecookieLink+'</p></div><div class="cookieButton"><a onClick="purecookieDismiss();">'+purecookieButton+"</a></div></div>",pureFadeIn("cookieConsentContainer"))}function purecookieDismiss(){setCookie("purecookieDismiss","1",7),pureFadeOut("cookieConsentContainer")}window.onload=function(){cookieConsent()};</script>No código JavaScript, lembre-se de alterar os textos que vão aparecer no popup e também o link para a política de privacidade. Na parte que
temos setCookie("purecookieDismiss","1",7), o 7 é o número de dias que o cookie expira, ou seja, depois de 7 dias o aviso é exibido novamente para o usuário que voltar ao site.
Mesmo sendo códigos simples, você pode ter problemas de compatibilidade com outros códigos do seu site. Se isso acontecer,
troque a parte do final window.onload=function(){cookieConsent()}; por window.onload=cookieConsent();
Se você usa WordPress ou outra plataforma, você precisa injetar esses códigos. Algumas plataformas permitem isso no painel administrativo. Já outras, você precisa fazer uso de algum plugin. No caso do WordPress, use plugins que permitem essa ação pesquisando por "custom css js". Um deles é o Simple Custom CSS and JS.
Outra possibilidade no WordPress é acessar o Editor de Temas dentro do menu Aparência. Procure pelo arquivo header.php
para colocar o código CSS dentro de <HEAD> e depois o arquivo footer.php para colocar o código JavaScript.
Então é isso, eu espero que você tenha gostado desta publicação. Fique à vontade para compartilhar nas suas redes sociais para ajudar na divulgação e crescimento do site.
Aproveite para se inscrever no meu canal do YouTube e também na News do site pra ficar por dentro das novidades em artigos, tutoriais e cursos online.
Abraço e até a próxima!