Como criar um aviso de uso de cookies para meu site

28/04/2021 às 16:51 Bruno Couty

Caro leitor, vamos falar sobre um assunto bastante atual... Afinal, é bem verdade que a Lei Geral de Proteção de Dados Pessoais Brasileira, a LGPD, lei 13.709/2018, já está a algum tempo entre nós, no entanto, tão verdadeiro quanto isso, é o fato de que muitas empresas ainda não começaram sequer a dar os primeiros passos no que se refere a adequação à lei.

Evidente que adequar todos os departamentos e processos da empresa está longe de ser uma tarefa fácil, mas precisamos começar o quanto antes, certo? Dentre as várias etapas, neste post gostaríamos de destacar algumas alterações simples que devem ser realizadas no website público de sua empresa.

Presumo que em seu web site há, ao menos, uma página que permite que o usuário que navega em seu domínio envie-lhe dados pessoais, correto? (E aqui cabe um bom lembrete: Dado Pessoal é todo e qualquer dado relacionado a pessoa natural identificada ou identificável 😉)

Presumo, também, que, para fins estratégicos e de análise de conteúdo, seu web site rastreie seus usuários, utilizando ferramentas como Google Analytics ou outra de similar funcionalidade. E não há nada de errado com isso, afinal, é natural que desejemos identificar quem são nossos visitantes, aqueles que demosntram interesses em conteúdos / produtos dispostos em determinadas páginas. É através deste rastreio que lançamos produtos, escrevemos artigos, desenvolvemos ferramentas e elaboramos planos de negócio.

Ainda é possível também que você faça uso de cookies para manipular informações e sessões que são de grande importância para dispôr as informações em seu site ou controlar recursos que você disponibiliza a seus usuários... Existem muitas outras possibilidades mas, neste ponto, acredito que você já compreendeu...

Dito isso é de grande importância que, para cumprir uma pequena parte do que determina a LGPD, você disponha de, ao menos, dois elementos em seu web site: Política de Privacidade e aviso de utilização de cookies.

Neste post, abordaremos, tecnicamente, como implementar, de maneira satisfatória, o aviso em seu web site. Para a elaboração do documento de Política de Privacidade, Termos de Uso e outros documentos, sugerimos o acompanhamento de profissionais da área jurídica e certiicados em segurança. A equipe da Private Code possui profissionais extremamente qualificados, com Certificações reconhecidas internacionalmente em Proteção de Dados, Segurança de Dados e ISO/IEC 27001, obtidas junto a orgãos e institutos de extrema qualidade. Teremos grande prazer em lhe auxiliar no desenvolvimento e adequação de processos e departamentos à LGPD e GDPR.

Bem, de posse do texto informativo fornecido e aprovado pelo departamento jurídico ou profissionais de segurança que acompanham sua adequação, vamos a um simples código fonte que apresentará esta informação ao usuário que navega em seu site.

A proposta é que, ao acessar seu site pela primeira vez, desde que os cookies do navegador não tenham sido limpos, o usuário seja sinalizado com uma mensagem, um aviso, de que seu site utiliza cookies e/ou rastreadores e/ou outros controles, etc... Ao concordar, o navegador armazenará o aceite do usuário e o mesmo não verá novamente a mensagem (a menos que limpe completamente os dados armazenados em seu navegador).

Utilizaremos três blocos de código: HTML, CSS e JS. Edite o CSS e HTML do modo que preferir. Para este post, utilizei o mesmo layout disponível em nosso web site na data da postagem deste conteúdo.

/** HTML **/
<div class="box-cookies hide container">
    <div class="row">
        <div class="col">
            <p class="msg-cookies">
                O texto contendo as informações pertinentes ao usuário...
            </p>
        </div>
        <div class="col-auto">
            <button class="btn-cookies button-primary">Eu aceito</button>
        </div>
    </div>
</div>
/** CSS **/
.box-cookies.hide {
    display: none !important;
}

.box-cookies {
    position: fixed;
    background: rgba(14, 23, 39, .8);
    width: 100%;
    max-width: 980px;
    z-index: 998;
    bottom: 0;
    right: 0;
    border-radius: 8px 0px 0px 0px;
    border: dashed 3px rgba(255, 255, 255, 0.6);
    border-bottom: none;
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box-cookies a {
    color: #fff;
    font-weight: bold;
}

.box-cookies a:hover {
    text-decoration: underline;
}

.msg-cookies,
.box-cookies .btn-cookies {
    text-align: left;
    padding: 5px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 5px;
}

.box-cookies .btn-cookies {
    cursor: pointer;
    height: auto;
    margin: 11px 10px 10px;
    padding: 3px 8px;
    border: none;
    border-radius: 5px;
}

.msg-cookies {
    padding: 8px;
}

@media screen and (max-width: 600px) {
    .box-cookies {
        flex-direction: column;
        border-left: none;
    }
} 
(() => {
    if (!localStorage.pureJavaScriptCookies) {
        document.querySelector(".box-cookies").classList.remove('hide');
    }

    const acceptCookies = () => {
        document.querySelector(".box-cookies").classList.add('hide');
        localStorage.setItem("pureJavaScriptCookies", "accept");
    };

    const btnCookies = document.querySelector(".btn-cookies");

    btnCookies.addEventListener('click', acceptCookies);
})();

Precisa de ajuda para adequar sua empresa à LGPD? Entre em contato conosco!