Cómo añadir un banner de cookies en WordPress sin plugin

Todos los artículos

Para añadir un banner de cookies en WordPress sin plugin, pega el script de tu herramienta de consentimiento en el head de la web desde un tema hijo: una función corta en su functions.php, enganchada a wp_head con prioridad 1. Así se imprime antes de los scripts que WordPress pone en cola y se mantiene tras las actualizaciones del tema. No lo pegues nunca en el header.php del tema padre, porque la siguiente actualización lo borra.

¿Qué significa en realidad «sin plugin»?

Se suele querer decir una de dos cosas. Hay quien quiere evitar un plugin de consentimiento que añade sus propias pantallas de ajustes, sus tablas en la base de datos y su ciclo de actualizaciones. Otros no quieren ningún plugin, ni siquiera una pequeña herramienta para pegar código en la cabecera. Las dos cosas son posibles, y el método de abajo cumple la versión más estricta.

Lo que no te puedes saltar es la propia herramienta de consentimiento. Un banner hecho solo con HTML y CSS muestra un aviso. A menos que también guarde la elección, retenga los scripts hasta que el visitante decida y fije el estado de consentimiento que leen las etiquetas de Google, no recoge nada que tus etiquetas puedan usar. Ese trabajo es lo que hace una plataforma de gestión del consentimiento, y en WordPress la forma más ligera de añadir una es un único script alojado en el head.

Nuestra propia guía de instalación para WordPress usa una herramienta de fragmentos de cabecera, porque es la vía más rápida para la mayoría de las webs. La vía del tema hijo hace lo mismo sin instalar nada más.

¿Dónde debe ir el script en WordPress?

Hay cuatro lugares donde se suele poner. Solo dos aguantan.

• El header.php del tema padre. La vía que dan la mayoría de los tutoriales, desde Apariencia y el editor de archivos del tema. Funciona hasta que el tema se actualiza: entonces se sustituye el archivo y el banner desaparece.
• El functions.php de un tema hijo. Sobrevive a las actualizaciones del tema padre y te deja elegir en qué punto del head se imprime el script. Es la opción que recomendamos.
• Un campo de código de cabecera en los ajustes del tema. Algunos temas lo ofrecen. Sobrevive a las actualizaciones, pero no a un cambio de tema, y no puedes controlar su orden respecto a los demás scripts del head.
• La plantilla de un tema de bloques. Los temas de bloques no tienen header.php, y la cabecera del Site Editor es contenido de la página, no el head del documento. Aquí también, usa el hook del tema hijo.

¿Cómo lo añades con un tema hijo?

Seis pasos. Reserva media hora la primera vez, casi toda para la comprobación final.

1. Copia el script completo de tu herramienta de consentimiento

   Copia el fragmento de instalación del panel de tu herramienta de consentimiento tal cual te lo dan, con el ID de la web y los atributos data que incluya. Reescribirlo a mano es la forma de que se pierdan atributos.

2. Crea y activa un tema hijo

   Un tema hijo es una carpeta pequeña con un style.css que indica tu tema actual como padre, más su propio functions.php. WordPress lo carga encima del padre, y las actualizaciones del tema padre no lo tocan. Actívalo antes de añadir nada.

3. Imprime el script en wp_head con prioridad 1

   En el functions.php del tema hijo, añade una función que imprima con echo la etiqueta script y engánchala con add_action a wp_head con prioridad 1. WordPress imprime los scripts que tiene en cola con prioridad 9, así que la prioridad 1 coloca el script de consentimiento por delante de ellos.

4. Quita el banner antiguo y excluye el script de la optimización

   Desactiva cualquier plugin de consentimiento que usaras antes, para que solo una herramienta fije los valores por defecto de Consent Mode. Si un plugin de caché o de rendimiento combina, aplaza o retrasa el JavaScript, añade el script de consentimiento a su lista de exclusiones.

5. Vacía todas las cachés

   Purga la caché de página, cualquier caché del servidor y el CDN. Una página en caché sigue sirviendo el head que tenía antes de tu cambio, así que parece que el banner no funciona cuando en realidad todavía no ha llegado a la página.

6. Revisa la página publicada antes y después de elegir

   Abre la web en una ventana privada desde una región donde se exija consentimiento. En el código fuente de la página, el script de consentimiento debe aparecer antes de cualquier petición a gtag.js o googletagmanager.com. En el panel de red, filtra por collect: antes de elegir no hay ninguna petición en el modo básico, o hay una que lleva gcs=G100 en el modo avanzado. Acepta todo y la siguiente petición debería llevar gcs=G111. Tienes la lista completa de comprobaciones en cómo probar un banner de cookies antes de publicarlo.

¿Por qué importa el orden de carga?

Las etiquetas de Google leen el estado de consentimiento en el momento en que se ejecutan. La guía de configuración de Consent Mode de Google pide que el estado por defecto se fije antes de cualquier comando que envíe datos de medición. Si la etiqueta de Google se imprime primero, su primera petición puede salir antes de que exista ningún valor por defecto, y en las regiones que exigen consentimiento esa petición se envía como si nadie hubiera preguntado.

En WordPress, la etiqueta de Google suele llegar a través de un plugin, y cuando un plugin pone su script en cola, WordPress lo imprime junto a los demás con prioridad 9. Un script de consentimiento enganchado con la prioridad por defecto, 10, que es la que obtienes si no pones el número, se imprime después. Ese único argumento que falta es un motivo habitual de que un banner bien configurado siga mostrando etiquetas que se disparan antes del consentimiento. Algunos plugins además imprimen su propia etiqueta con prioridad 1; si el código fuente de la página muestra una por delante del script de consentimiento, usa un número más bajo, como 0. Hay dos cosas más que pueden alterar el orden después de fijarlo: un tema que escribe un script directamente en header.php por encima de wp_head(), y un plugin de optimización que retrasa los scripts hasta que el visitante interactúa. La comprobación del código fuente del paso 6 detecta las tres.

Si tus etiquetas de medición se cargan con Google Tag Manager, el orden se fija dentro del contenedor. Añade la herramienta de consentimiento como etiqueta en el activador Consent Initialization, como muestra la vía de Tag Manager de nuestra guía de WordPress, y deja el fragmento del contenedor en el head como hasta ahora.

Cómo lo gestiona Velo

Velo en WordPress es una sola línea de script, sin ningún plugin de consentimiento que instalar ni actualizar. En cuanto se ejecuta, el script fija en denegado los valores por defecto de Consent Mode para las regiones que exigen consentimiento, así que el hook del tema hijo de arriba es el lugar adecuado para colocarlo. Comprueba el orden en la página publicada como en el paso 6, porque otros plugins pueden seguir imprimiéndose antes.