Documentación de WPConsent

Documentación, Materiales de Referencia y Tutoriales para WPConsent

Scripts personalizados e iframes

¿Necesitas bloquear un script o iframe de terceros que WPConsent no reconoce automáticamente? Con los scripts personalizados, puedes añadir reglas de bloqueo para cualquier código de seguimiento o contenido incrustado, de modo que solo se cargue después de que los visitantes consientan la categoría de cookies correcta. Los scripts y iframes personalizados te dan control total sobre los recursos de terceros que quedan fuera de la lista de bloqueo integrada.

Característica Pro: Esta característica requiere WPConsent Pro.

Tabla de contenidos

Requisitos previos

Antes de empezar, asegúrate de tener:

  • WPConsent Pro instalado y activado
  • Bloqueo de scripts activado en la pestaña WPConsent >> Ajustes >> Ajustes
  • Al menos 1 servicio creado bajo la categoría de cookies de Estadística o Marketing (puedes añadir servicios desde la pestaña Cookies o usar la biblioteca de servicios)

Cuándo usar scripts personalizados

Querrás una regla de script personalizado cuando:

  • Tu sitio carga un píxel de seguimiento o script de análisis que WPConsent no bloquea automáticamente.
  • Incrustas widgets de terceros (chat, mapas, feeds sociales) usando iframes que establecen cookies.
  • Utilizas un servicio de marketing o análisis específico no incluido en la lista de bloqueo integrada.
  • Añades código de seguimiento personalizado a través de un plugin de fragmentos de código o el área de código personalizado de tu tema.

Si no estás seguro de si un script ya está bloqueado, ejecuta primero el escáner del sitio web. El escáner detecta scripts y iframes activos en tu sitio e informa cuáles WPConsent ya gestiona.

  1. Ve a WPConsent >> Ajustes en tu administrador de WordPress.
  2. Selecciona la pestaña Avanzado.
  3. Desplázate hacia abajo hasta la sección Iframes/Scripts Personalizados.

Esta sección muestra un acordeón con 2 categorías: Scripts de Estadística y Scripts de Marketing. Para ver las entradas existentes, haz clic en la flecha junto al nombre de una categoría para expandirla.

Lista de scripts personalizados organizada por categoría con columnas de servicio, tipo y script

Cada entrada de script muestra las siguientes columnas:

ColumnaDescripción
Si eliges Sin servicio, la cookie se asignará directamente a la categoría de cookies. Esto es apropiado para cookies que tu propio sitio web establece en lugar de un servicio de terceros.El servicio al que pertenece este script
TipoScript o iFrame
ScriptLa cadena identificadora utilizada para hacer coincidir el script o iframe
Elementos BloqueadosPalabras clave adicionales (para scripts) o selectores CSS (para iframes)
AccionesBotones de editar y eliminar

Añadir un nuevo script o iframe personalizado

  1. Haga clic en el botón Añadir iFrame/Script Personalizado debajo de los acordeones de categorías. Esto abre la ventana modal Añadir Nuevo Script o iFrame.
El modal Añadir nuevo script o iFrame con todos los campos del formulario
  1. Seleccione una Categoría. Elija Estadísticas o Marketing según el propósito del script. La categoría determina qué interruptor de consentimiento controla el script en el panel de preferencias del visitante.
Selección de categoría y servicio en el modal de script personalizado
  1. Seleccione un Servicio. El menú desplegable de servicios se actualiza según la categoría seleccionada y muestra todos los servicios que ha creado en esa categoría. Si el menú desplegable está vacío, vaya a la pestaña Cookies y cree un servicio primero.
  2. Elija un Tipo. Seleccione Script para el código de seguimiento JavaScript o iFrame para contenido incrustado. Los campos del formulario a continuación cambian según su selección.

Rellenar los campos de tipo de script

Cuando selecciona Script, aparecen 2 campos:

  • Etiqueta de Script: Introduzca una cadena única que identifique el script que desea bloquear. Normalmente es parte de la URL del script. Por ejemplo, para bloquear el Píxel de Facebook, introduciría connect.facebook.net/en_US/fbevents.js. WPConsent compara esta cadena con las etiquetas script en el HTML de la página.
  • Palabras Clave de Script: Introduzca nombres de funciones de JavaScript que dependan del script principal, separados por comas. Por ejemplo, fbq, fbq.push. WPConsent bloquea scripts en línea que hacen referencia a estos nombres de funciones. Esto evita errores de scripts bloqueados y garantiza que no se envíen datos antes del consentimiento.

Rellenar los campos de tipo de iFrame

Cuando selecciona iFrame, aparecen 2 campos:

  • Etiqueta de iFrame: Introduzca una cadena única que identifique la fuente del iFrame que desea bloquear. Por ejemplo, youtube.com/embed. WPConsent compara esta cadena con el atributo src de los elementos iframe.
  • Elementos Bloqueados: Introduzca selectores CSS para elementos HTML que desee ocultar y reemplazar con un marcador de posición hasta que se otorgue el consentimiento, separados por comas. Por ejemplo, #my-chat-widget, .social-embed. Esto es útil cuando un widget de terceros renderiza elementos HTML visibles junto con su iFrame.
  1. Haga clic en Guardar. El nuevo script aparece inmediatamente en el acordeón de la categoría correspondiente.

Editar un script existente

  1. Primero, expanda el acordeón de la categoría que contiene el script.
  2. Haga clic en el icono de editar (lápiz) en la columna Acciones.
  3. La ventana modal se abre con los valores actuales pre-rellenados. Realice sus cambios.
  4. Haga clic en Guardar.

La entrada del script se actualiza en la lista sin recargar la página.

Eliminar un script

  1. Primero, expanda el acordeón de la categoría que contiene el script.
  2. Haga clic en el icono de eliminar (papelera) en la columna Acciones.
  3. Confirme la eliminación en el cuadro de diálogo del navegador.

El script se elimina de la lista inmediatamente.

Cómo se bloquean los scripts personalizados

Los scripts personalizados se integran directamente con el mismo motor de bloqueo que maneja los servicios integrados. Cuando guarda un script personalizado, WPConsent lo añade a la lista interna de scripts bloqueados. En la siguiente carga de página:

Para tipos de Script: WPConsent busca en el HTML de la página etiquetas script que contengan la cadena introducida en Etiqueta de script. A las secuencias de comandos coincidentes se les cambia el atributo type a text/plain y su src se mueve a data-wpconsent-src, lo que evita que el navegador las ejecute. Si proporcionó Palabras clave de script, también se bloquean las secuencias de comandos en línea que contengan esos nombres de función.

Para tipos de iFrame: WPConsent busca elementos iframe cuyo atributo src contenga la cadena introducida en Etiqueta de iFrame. Se elimina el src y se almacena en data-wpconsent-src. Si proporcionó Elementos bloqueados, esos selectores CSS ocultan elementos adicionales y muestran un marcador de consentimiento.

Cuando el visitante acepta la categoría de cookies relevante (Estadísticas o Marketing), WPConsent restaura los scripts y iframes bloqueados para que se carguen y ejecuten normalmente.

Ejemplos prácticos

Bloqueo de un píxel de análisis personalizado

Si su equipo de marketing añadió un servicio de análisis específico que carga un script desde tracker.example.com/pixel.js:

  1. Abra el modal Añadir nuevo script o iFrame.
  2. Establezca Categoría en Estadísticas.
  3. Seleccione el servicio relevante (o cree uno primero en la pestaña Cookies).
  4. Establezca Tipo en Script.
  5. Introduzca tracker.example.com/pixel.js en Etiqueta de script.
  6. Si el script define una función global como trackEvent, introduzca trackEvent en Palabras clave de script.
  7. Haga clic en Guardar.

Bloqueo de un iframe de widget de chat de terceros

Si un widget de chat se carga en un iframe desde chat.example.com/widget:

  1. Abra el modal Añadir nuevo script o iFrame.
  2. Establezca Categoría en Marketing.
  3. Seleccione el servicio relevante.
  4. Establezca Tipo en iFrame.
  5. Introduzca chat.example.com/widget en Etiqueta de iFrame.
  6. Introduzca #chat-widget-container en Elementos bloqueados para ocultar el contenedor circundante y mostrar un marcador.
  7. Haga clic en Guardar.

Verificar su configuración

Después de añadir un script personalizado, verifique que funciona correctamente:

  1. Abra su sitio web en una ventana de navegador privada o de incógnito.
  2. Abra las herramientas de desarrollador del navegador (F12) y cambie a la pestaña Red.
  3. Busque el script o iframe en las solicitudes de red. No debería aparecer hasta que interactúe con el banner.
  4. Acepte la categoría de cookies relevante en el banner de consentimiento.
  5. Vuelva a comprobar la pestaña Red. El script o iframe ahora se carga.

También puede comprobar la pestaña Elementos en las herramientas de desarrollador. Antes del consentimiento, busque etiquetas script con los atributos type="text/plain" y data-wpconsent-src. Estos son scripts bloqueados que esperan el consentimiento.

Solución de problemas

La cadena Etiqueta de script no coincide con lo que hay en el HTML de su página. Abra el código fuente de la página (Ctrl+U) y busque la URL del script. Copie la subcadena exacta y péguela en el campo Etiqueta de script. La coincidencia distingue entre mayúsculas y minúsculas.

Comprueba que la etiqueta iFrame coincida con el atributo src del iframe. Algunos iframes usan URL relativas al protocolo (que empiezan por //) o incluyen parámetros de consulta. Usa solo la porción del dominio y la ruta como identificador. Por ejemplo, usa youtube.com/embed en lugar de la URL completa con parámetros.

Las palabras clave de script no funcionan

Las palabras clave bloquean las etiquetas script en línea que hacen referencia a esos nombres de función. No afectan a los scripts cargados desde URL externas. El campo Etiqueta de script se encarga del bloqueo de scripts externos. Usa Palabras clave de script solo para código en línea que dependa del script externo.

El menú desplegable de servicios está vacío

El menú desplegable de servicios se rellena en función de la categoría seleccionada. Si no existen servicios en la categoría elegida, el menú desplegable estará vacío. Ve a la pestaña Cookies y añade primero un servicio a la categoría de Estadísticas o Marketing.

Preguntas frecuentes

¿Puedo bloquear un script que ya está en la lista integrada?

No es necesario. WPConsent gestiona automáticamente todos los scripts de la lista integrada. Añadir una regla personalizada duplicada no causará errores, pero es innecesario.

¿Cómo sé qué cadena usar para la etiqueta de script?

Abre las herramientas de desarrollador de tu navegador, ve a la pestaña Network y busca la solicitud del script que quieres bloquear. Copia una porción única de su URL. La cadena solo necesita ser lo suficientemente específica para coincidir con ese script sin coincidir accidentalmente con otros recursos.

¿Puedo asignar un script personalizado a la categoría Esencial o Funcional?

No. Los scripts personalizados se limitan a las categorías de Estadísticas y Marketing. Los scripts de la categoría Esencial son necesarios para que tu sitio funcione y no deben bloquearse. Las cookies funcionales se gestionan por separado.

¿Necesito borrar alguna caché después de añadir un script personalizado?

Si usas un plugin de caché, borra la caché de tu página después de añadir o modificar scripts personalizados. El bloqueo de WPConsent ocurre durante la renderización de la página, por lo que las páginas cacheadas no reflejarán los cambios hasta que la caché se actualice.

Conclusión

Los scripts personalizados te permiten extender las capacidades de bloqueo de WPConsent para cubrir cualquier recurso de terceros en tu sitio. Al crear reglas con etiquetas y palabras clave de script específicas, te aseguras de que cada script de seguimiento e iframe respete las opciones de consentimiento de tus visitantes.

Para más información sobre cómo funciona el motor de bloqueo integrado, consulta nuestra guía sobre bloqueo automático de scripts. Si estás trabajando con iframes y quieres personalizar el contenido de marcador de posición, consulta nuestra guía sobre bloqueo de contenido y marcadores de posición.

¿Te ha resultado útil este artículo?

Artículos relacionados