Como adicionar um banner de cookies no WordPress sem plugin

Todos os artigos

Para adicionar um banner de cookies no WordPress sem plugin, cole o script da sua ferramenta de consentimento no head do site a partir de um tema filho: uma função curta no functions.php dele, ligada ao wp_head com prioridade 1. Isso imprime o script à frente dos que o WordPress enfileira e o preserva nas atualizações do tema. Nunca cole no header.php do tema pai, porque a próxima atualização apaga o código.

O que "sem plugin" quer dizer de verdade?

As pessoas querem dizer uma de duas coisas. Algumas querem evitar um plugin de consentimento que traz as próprias telas de configuração, tabelas no banco de dados e ciclo de atualizações. Outras não querem plugin nenhum, nem mesmo uma ferramentinha para colar código no header. As duas coisas são possíveis, e o método abaixo atende à versão mais rígida.

O que você não pode pular é a ferramenta de consentimento em si. Um banner feito só com HTML e CSS mostra um aviso. A menos que ele também guarde a escolha, segure os scripts até o visitante decidir e defina o estado de consentimento que as tags do Google leem, ele não coleta nada com que as suas tags possam trabalhar. Esse trabalho é o que uma plataforma de gestão de consentimento faz, e no WordPress o jeito mais leve de adicionar uma é um único script hospedado no head.

O nosso próprio guia de instalação do WordPress usa uma ferramenta de trechos de código para o header, porque é o caminho mais rápido para a maioria dos sites. O caminho pelo tema filho faz o mesmo trabalho sem instalar nada a mais.

Onde o script deve ficar no WordPress?

Há quatro lugares onde as pessoas colocam o script. Só dois deles duram.

• O header.php do tema pai. O caminho que a maioria dos tutoriais ensina, por Appearance (Aparência) e o editor de arquivos do tema. Funciona até o tema atualizar; aí o arquivo é substituído e o banner some.
• O functions.php de um tema filho. Sobrevive às atualizações do tema pai e permite escolher em que ponto do head o script é impresso. É o que recomendamos.
• Um campo de código de header nas configurações do tema. Alguns temas oferecem um. Ele sobrevive às atualizações, mas não a uma troca de tema, e você não consegue controlar a ordem dele em relação aos outros scripts do head.
• O template de um tema de blocos. Temas de blocos não têm header.php, e o cabeçalho do editor do site é conteúdo da página, não o head do documento. Use o hook do tema filho aqui também.

Como adicionar o script com um tema filho?

Seis passos. Reserve meia hora na primeira vez, a maior parte dela para a verificação no final.

1. Copie o script completo da sua ferramenta de consentimento

   Pegue o trecho de instalação no painel da sua ferramenta de consentimento exatamente como ele é fornecido, incluindo qualquer ID de site e atributos data. É redigitando que os atributos se perdem.

2. Crie e ative um tema filho

   Um tema filho é uma pasta pequena com um style.css que indica o seu tema atual como pai, mais um functions.php próprio. O WordPress o carrega por cima do tema pai, e as atualizações do tema pai não mexem nele. Ative-o antes de adicionar qualquer coisa.

3. Imprima o script no wp_head com prioridade 1

   No functions.php do tema filho, adicione uma função que imprima a tag de script e ligue-a com add_action ao wp_head na prioridade 1. O WordPress imprime os scripts que enfileirou na prioridade 9, então a prioridade 1 coloca o script de consentimento à frente deles.

4. Remova o banner antigo e exclua o script da otimização

   Desative qualquer plugin de consentimento que você usava antes, para que só uma ferramenta defina os padrões do Consent Mode. Se um plugin de cache ou de performance combina, adia ou atrasa JavaScript, adicione o script de consentimento à lista de exclusões dele.

5. Limpe todos os caches

   Limpe o cache de página, qualquer cache de servidor e a CDN. Uma página em cache continua servindo o head que tinha antes da sua edição, então parece que o banner não funciona quando, na verdade, ele ainda nem chegou à página.

6. Confira a página no ar antes e depois de uma escolha

   Abra o site em uma janela anônima a partir de uma região onde o consentimento é exigido. No código-fonte da página, o script de consentimento deve vir antes de qualquer requisição gtag.js ou googletagmanager.com. No painel de rede, filtre por collect: antes de uma escolha não há nenhuma requisição no modo básico, ou há uma carregando gcs=G100 no modo avançado. Aceite tudo e a próxima requisição deve carregar gcs=G111. A checklist completa está em como testar um banner de cookies antes de publicar.

Por que a ordem de carregamento importa?

As tags do Google leem o estado de consentimento no momento em que rodam. O guia de configuração do Consent Mode do Google pede que o estado padrão seja definido antes de qualquer comando que envie dados de medição. Se a tag do Google for impressa primeiro, a primeira requisição dela pode sair antes de existir qualquer padrão, e em regiões que exigem consentimento essa requisição é enviada como se ninguém tivesse perguntado.

No WordPress, a tag do Google muitas vezes chega por um plugin, e um plugin que enfileira o seu script faz com que ele seja impresso junto com os outros na prioridade 9. Um script de consentimento ligado na prioridade padrão 10, que é o que você ganha quando deixa o número de fora, é impresso depois dela. Esse único argumento faltando é um motivo comum para um banner configurado corretamente ainda mostrar tags disparando antes do consentimento. Alguns plugins também imprimem a própria tag na prioridade 1; se o código-fonte da página mostrar uma delas à frente do script de consentimento, use um número menor, como 0. Mais duas coisas podem mudar a ordem depois que você a definiu: um tema que escreve um script direto no header.php acima de wp_head(), e um plugin de otimização que atrasa scripts até o visitante interagir. A verificação do código-fonte no passo 6 pega as três.

Se as suas tags de medição rodam pelo Google Tag Manager, a ordem é definida dentro do contêiner. Adicione a ferramenta de consentimento como uma tag no gatilho Consent Initialization, como mostra o caminho pelo Tag Manager no nosso guia do WordPress, e mantenha o trecho de código do contêiner no head como antes.

Como o Velo lida com isso

O Velo no WordPress é uma linha de script, sem plugin de consentimento para instalar ou atualizar. O script define os padrões do Consent Mode como negados nas regiões que exigem consentimento assim que roda, então o hook do tema filho acima é o lugar certo para ele. Confira a ordem na página no ar como no passo 6, já que outros plugins ainda podem imprimir à frente dele.