Tu banner de cookies puede estar tapando el botón de contacto

La mayoría de la gente que llega a una web desde un anuncio no abre Chrome ni Safari: entra por el navegador que Instagram o Facebook llevan dentro. Y ese navegador se queda con parte de la pantalla: su barra superior y su barra inferior se comen unos 180 píxeles.

Un iPhone que sobre el papel tiene 844 píxeles de alto se queda en unos 660 reales.

Por qué importa

Un banner de cookies ocupa fácilmente entre 200 y 250 píxeles. Si tu botón de contacto cae en esa franja, no se puede pulsar hasta que el visitante decida sobre las cookies. Alguien que acaba de hacer clic en tu anuncio se encuentra con un trámite antes de poder escribirte.

La forma de comprobarlo no es mirar la pantalla, es preguntárselo al navegador:

const boton = document.querySelector('.mi-boton');
const r = boton.getBoundingClientRect();
// ¿Qué elemento hay REALMENTE en el centro del botón?
document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2);

Si eso devuelve un trozo del banner en lugar de tu botón, el botón no existe para el usuario.

Tres errores que encontramos a menudo

• Medir por anchura en vez de por altura. El problema no es que la pantalla sea estrecha, es que es baja. Un @media (max-height: 720px) apunta justo al navegador de Instagram sin tocar los móviles altos.
• Contenedores fijos que se estiran de lado a lado. Una burbuja flotante anclada con left: 12px; right: 12px ocupa todo el ancho aunque el icono se vea a la derecha, y se traga los clics de toda la franja. Se arregla con pointer-events: none en el contenedor y auto en sus hijos.
• Títulos que no encogen. Un clamp(3rem, 8.4vw, 6.2rem) parece adaptable, pero por debajo de cierto ancho siempre gana el mínimo: el titular ocupa lo mismo en un móvil grande que en uno pequeño.

Lo que no se debe hacer

Esconder el botón de rechazar, hacerlo más difícil de pulsar que el de aceptar o forzar la aceptación para seguir navegando. Además de estar sancionado en España, no hace falta: la solución es que quepan las dos cosas, no eliminar una.

En nuestro caso bastó con apretar el espacio muerto de la cabecera y dejar el acceso directo a WhatsApp por encima del banner. El texto legal se quedó intacto, y rechazar sigue estando a un solo toque.

Cómo comprobarlo en tu web

1. Abre tu web en el móvil desde el anuncio, no escribiendo la dirección.
2. Mira si ves el botón principal sin desplazarte.
3. Intenta pulsarlo con el banner abierto.

Si no puedes, cada euro que gastes en llevar gente ahí está pagando una pantalla sin salida.