--- title: "Añadir Cookies sin plugins - Carlos Sánchez" author: "Carlos Sánchez" url: https://carlossanchezdonate.com/articulo/pop-up-cookies/ image: https://carlossanchezdonate.com/wp-content/uploads/tb-cookie.jpg --- # Añadir pop-up de Cookies sin Plugins Como añadir el pop up de Cookies sin necesidad de plugin ![Añadir pop-up de Cookies sin Plugins](https://carlossanchezdonate.com/wp-content/uploads/cover-cookie.jpg) **Autor:** : [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/) **Temática: ** : [Tecnologías](https://carlossanchezdonate.com/seo-avanzado/tecnologias/) **Fecha de publicación:** : 2023-12-20 **Última revisión:** : 2026-03-02 **Índice** mostrar 1 Código para añadir política de Cookies 1.1 POP-UP 1.1.1 JavaScript 1.2 Hacer que las Cookies hagan algo 1.3 Añadir CSS 2 Cómo aplicarlo a WordPress 3 Cómo quedaría en mi plugin propio 4 Información adicional 5 Como Afectará la nueva política de Cookies de Chrome 5.1 Chips 5.1.1 Implementar CHIPS con PHP 5.1.2 Diferencia entre Particionado y No Particionado 5.1.3 Uso de un Modelo de Partición Opcional 5.2 API de Storage Access 5.3 Conjuntos de sitios webs relacionados 5.4 API de Federated Credential Management 6 Cuestiones legales 6.1 Conclusiones Debido a la legislación vigente en la mayoría de países, para usar herramientas que permiten el análisis de la interacción de los usuarios en la página web (como se pongan muy restrictivos, acabaremos usando [logs](https://carlossanchezdonate.com/articulo/logs-seo/) para sacar las estadísticas). Se pide como requisito en toda web, un pop-up donde el usuario acepta recibir Cookies. Las Cookies no solo funcionan por conceptos de analítica, sino por cuestión de identificar al usuario y hacer que tenga una mejor experiencia dentro de la web, mucho más personalizada. No obstante en este post me centraré en como hace que funcione con código la aceptación de Cookies. Muchos plugins te meten JS y [CSS](https://carlossanchezdonate.com/articulo/css-posicionamiento-web/) innecesario y velan por su propio interés de que compres la versión premium, así que vamos a ver como quitarnos esa dependencia. ## Código para añadir política de Cookies Primero explico el código básico para poder adaptarlo en cualquier entorno web. ### POP-UP En un módulo que se repita dentro de nuestra web, preferiblemente el "footer" para no bloquear el contenido principal, vamos a crear el popup, a este Pop-up le vamos a añadir un extra. Este extra va a ser que solo exista este código en nuestra web, si las Cookies no están aceptadas. ¿Para qué vamos a querer el Pop-up con un display none, si ya están aceptadas? Eso lo conseguiremos con el **!isset($_cookie[]** ` "; Usamos cookies para asegurar que te damos la mejor experiencia en nuestra web. Aquí tienes nuestra [política de privacidad.](/politica-privacidad/) Rechazar Aceptar window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{USER_ID}'); ` Realmente aquí se deberían añadir todas las herramientas de medición, como también pueden ser Metrika, Hotjar o [Clarity](https://carlossanchezdonate.com/curiosidades/microsoft-clarity/). A los que además se les puede combinar con un [delay](https://carlossanchezdonate.com/articulo/delay-en-javascript/#aplicacion-del-delay) en caso de que no quieras que afecte excesivamente al [rendimiento de la web](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/) y no te importe que no se registre bien el rebote con estas herramientas de mapas de calor y comportamiento del usuario. Si recibo muchas peticiones, explicaré como hacer este proceso óptimo cuando se usa Google Tag Manager. ### Añadir CSS Bueno, aunque con esto bastaría, para facilitar el trabajo, añado un CSS simple para que tenga un aspecto visual. `#cookieConsentContainer { position: fixed; bottom: 0; z-index: 10; min-height: 112px; display: flex; align-items: center; background-color: rgba(253, 253, 253, 0.9); color: black; font-size: 14px; padding: 0 32px; width: 100%; margin: auto; justify-content: center; flex-direction: column; } #acceptCookies { background-color: var(--secondary); font-weight: bold; color: var(--lightgrey); } #rejectCookies { color:rgb(44, 45, 45); } #acceptCookies, #rejectCookies { font-size: 14px; margin: 7px; padding: 5px 20px; cursor: pointer; border-radius: 50px; border: none; }` ## Cómo aplicarlo a WordPress Aunque me resisto a explicar las cosas para WordPress, es verdad que sigue siendo el CMS más usado, y por consiguiente me veo en la obligación de hacer la adaptación para los fanáticos de la W. Se puede hacer por medio del functions.php o por medio de [crearte un propio plugin](https://developer.wordpress.org/plugins/plugin-basics/header-requirements/). ¿No lo estás entendiendo? Si quieres aprender a aplicar todo esto y mucho más, accede a mi formación: [¡Aprende SEO de verdad!](/master-seo-tecnico/) Así que realmente sería la misma aplicación pero añadiendo Hooks. Entonces sería encapsular tanto el código del POP-UP como el de que las cookies hagan algo en un Hook. ¿Cómo funciona? Con esta función añadimos todo ese código en el footer. `function add_cookie_notice_footer() { // El código del pop-up } add_action('wp_footer', 'add_cookie_notice_footer');` Y con esta otra, podemos añadir el código de analítica en el header. `function add_cookie_track_header() { // El código de analítica } add_action('wp_head', 'add_cookie_track_header');` ## Cómo quedaría en mi plugin propio Pues pongo un ejemplo de forma avanzada. Este código no es para copiar y pegar, solo puede tener sentido si lees y entiendes lo anterior. `