A implementação de um componente de cookies para consentimento ajustado no Google Analytics 4 (GA4) é fundamental para quem deseja ter controle total sobre a coleta de dados de usuários sem depender de plataformas terceirizadas, como AdOpt, plugins do WordPress ou outras soluções similares.

Criei este artigo tutorial de como criar um componente do zero HTML, CSS, JS e incluir dataLayer para classificar as informações obtidas de consentimento dos usuários sincronizados para o GA4. Você aprenderá como configurar um componente de cookies de maneira correta, garantindo conformidade com a Lei Geral de Proteção de Dados (LGPD), melhores práticas de SEO e otimização de performance.

Importância do Consent Mode para SEO e LGPD

O Consent Mode é a maneira de equilibrar a coleta de dados e a privacidade do usuário. Ele permite que você ajuste o comportamento das tags do Google com base no status de consentimento dos usuários para cookies de publicidade e análise de dados comportamentais, além obviamente de atender as premissas da Lei Geral de Proteção de Dados, ou seja, é crucial para os sites estarem passíveis de serem bem classificados nos mecanismos de pesquisas, já que o Google também usa essa prática como um fator de autoridade/credibilidade de um domínio.

• Conformidade com a LGPD: A LGPD exige que os sites obtenham consentimento explícito dos usuários antes de coletar dados pessoais. Ao implementar um componente de consentimento de cookies, você pode garantir que está em conformidade com essas exigências.
• Impacto para SEO: O Consent Mode ajuda a coletar dados de comportamento dos usuários de forma agregada e anônima quando o consentimento não é dado, permitindo que você continue sua navegação, criar novas páginas, otimizar as que já tem, mostrar ou não elementos, enfim, ´sua imaginação que mandará. Outro ponto chave é que: configurar o consent mode irá dar crédito ao seu site, tornando mais autoridade.

Ganhos de performance e personalização

Além da conformidade e otimização para SEO, a criação de um componente de cookies personalizado pode trazer ganhos de performance. Embora soluções de terceiros geralmente sejam leves, construir seu próprio componente elimina dependências adicionais de bibliotecas e scripts, potencialmente acelerando o carregamento da página.

Personalização infinita (e o além)

Outro benefício importante é a personalização infinita: você tem total controle sobre o estilo, funcionalidade e comportamento do componente de cookies, podendo ajustá-lo para atender às necessidades específicas do seu site e público.

As plataformas de mercado e plugins oferecem algo mais “engessado” e você certamente não conseguirá deixar a cara do seu design system.

Exemplo de implementação de um componente de cookies

Abaixo, você encontrará um exemplo de como implementar um componente de cookies personalizado utilizando HTML, JavaScript e dataLayer para ajustar o consentimento no GA4.

<div class="cookies-container lazy__image">
    <div class="cookies-content">
        <div class="flex__cookies">
            <p>Esse site trabalha com cookies 🍪 para <strong>melhorar as informações e a navegação dos nossos usuários</strong>, mas não armazena nenhum tipo de informação pessoal. </p>
            <div class="cookies-pref">
                <label title="Marque para saber mais sobre o perfil dos nossos usuários potenciais clientes." class="control control-checkbox">
                    <input name="analytics" type="checkbox" checked="checked" data-function="analytics"/>Permitir Cookies
                    <div class="control_indicator"></div>
                </label>
                <label title="Marque se quiser receber recomendações, promoções e dicas sobre a saúde auditiva." class="control control-checkbox">
                    <input name="marketing" type="checkbox" data-function="marketing"/>Marketing e Newsletter
                    <div class="control_indicator"></div>
                </label>
            </div>
        </div>
        <button class="cookies-save">Salvar e Continuar</button>
    </div>
</div>

<div class="cookies-container lazy__image">
    <div class="cookies-content">
        <div class="flex__cookies">
            <p>Esse site trabalha com cookies 🍪 para <strong>melhorar as informações e a navegação dos nossos usuários</strong>, mas não armazena nenhum tipo de informação pessoal. </p>
            <div class="cookies-pref">
                <label title="Marque para saber mais sobre o perfil dos nossos usuários potenciais clientes." class="control control-checkbox">
                    <input name="analytics" type="checkbox" checked="checked" data-function="analytics"/>Permitir Cookies
                    <div class="control_indicator"></div>
                </label>
                <label title="Marque se quiser receber recomendações, promoções e dicas sobre a saúde auditiva." class="control control-checkbox">
                    <input name="marketing" type="checkbox" data-function="marketing"/>Marketing e Newsletter
                    <div class="control_indicator"></div>
                </label>
            </div>
        </div>
        <button class="cookies-save">Salvar e Continuar</button>
    </div>
</div>

Configuração do GA4 e dataLayer

Para garantir que as preferências de consentimento dos usuários sejam respeitadas e refletidas nas configurações do GA4, precisamos configurar o dataLayer e a inicialização do GA4 com o consentimento padrão negado.

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

// Configuração padrão do consentimento como "negado"
gtag('consent', 'default', {
     'ad_storage': 'denied',
     'analytics_storage': 'denied'
});

gtag('config', 'TAG_ID');

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

// Configuração padrão do consentimento como "negado"
gtag('consent', 'default', {
     'ad_storage': 'denied',
     'analytics_storage': 'denied'
});

gtag('config', 'TAG_ID');

JavaScript para gerenciamento de cookies

O script abaixo gerencia a coleta de consentimento dos cookies e atualiza o estado de consentimento no GA4 conforme as preferências do usuário.

function cookies(functions) {
    const container = document.querySelector('.cookies-container');
    const save = document.querySelector('.cookies-save');
    if (!container || !save) return null;

    const localPref = JSON.parse(window.localStorage.getItem('cookies-pref'));
    if (localPref) activateFunctions(localPref);

    function getFormPref() {
        return [...document.querySelectorAll('[data-function]')]
            .filter((el) => el.checked)
            .map((el) => el.getAttribute('data-function'));
    }

    function activateFunctions(pref) {
        pref.forEach((f) => functions[f]());
        container.style.display = 'none';
        window.localStorage.setItem('cookies-pref', JSON.stringify(pref));
        updateConsent(pref); // Atualiza o consentimento no GA
    }

    function handleSave() {
        const pref = getFormPref();
        activateFunctions(pref);
    }

    save.addEventListener('click', handleSave);
}

function marketing() {
    console.log('Marketing Function');
}

function analytics() {
    console.log('Analytics Function');
}

// Função para atualizar o consentimento no GA
function updateConsent(pref) {
    const consentObject = {
        'ad_storage': 'denied',
        'analytics_storage': 'denied'
    };

    if (pref.includes('analytics')) {
        consentObject['analytics_storage'] = 'granted';
    }

    if (pref.includes('marketing')) {
        consentObject['ad_storage'] = 'granted';
    }

    gtag('consent', 'update', consentObject);
}

cookies({
    marketing,
    analytics,
});

function cookies(functions) {
    const container = document.querySelector('.cookies-container');
    const save = document.querySelector('.cookies-save');
    if (!container || !save) return null;

    const localPref = JSON.parse(window.localStorage.getItem('cookies-pref'));
    if (localPref) activateFunctions(localPref);

    function getFormPref() {
        return [...document.querySelectorAll('[data-function]')]
            .filter((el) => el.checked)
            .map((el) => el.getAttribute('data-function'));
    }

    function activateFunctions(pref) {
        pref.forEach((f) => functions[f]());
        container.style.display = 'none';
        window.localStorage.setItem('cookies-pref', JSON.stringify(pref));
        updateConsent(pref); // Atualiza o consentimento no GA
    }

    function handleSave() {
        const pref = getFormPref();
        activateFunctions(pref);
    }

    save.addEventListener('click', handleSave);
}

function marketing() {
    console.log('Marketing Function');
}

function analytics() {
    console.log('Analytics Function');
}

// Função para atualizar o consentimento no GA
function updateConsent(pref) {
    const consentObject = {
        'ad_storage': 'denied',
        'analytics_storage': 'denied'
    };

    if (pref.includes('analytics')) {
        consentObject['analytics_storage'] = 'granted';
    }

    if (pref.includes('marketing')) {
        consentObject['ad_storage'] = 'granted';
    }

    gtag('consent', 'update', consentObject);
}

cookies({
    marketing,
    analytics,
});

Aí está! finalizado..

Ah.. uma dica extra de como saber se está certinho ou não:

1. Acesse seu DEV tools (crtl + shift + i no Windows)
2. Acesse o console
3. Digite dataLayer, clique e “enter”
4. Ele deverá aparecer como abaixo, inclusive antes da resposta do usuário e depois, em forma de linha do tempo

Implementar um componente de cookies para consentimento ajustado no GA4 permite que você tenha controle total sobre como o consentimento é gerenciado em seu site, atendendo às exigências da LGPD e melhorando-o para SEO e a performance do site. Com as orientações e exemplos fornecidos, você pode criar uma solução altamente personalizada e eficiente, sem a necessidade de dependências de terceiros.

Se precisar de mentes brilhantes do marketing digital e web analytics, venha bater um papo conosco. Somos ratos quando o assunto é Web Analytics.

O post Componente de cookies com consentimento para o GA4 apareceu primeiro em Pink and Brain.