FitConsent

By DIGITLOAD

Español

Documentación

En esta página

Encuentre todo lo que necesita para empezar con FitConsent, desde la instalación hasta el uso avanzado.

Introducción

Bienvenido a la documentación de FitConsent.

¿Qué es una Plataforma de Gestión de Consentimiento (CMP)?

Una CMP es una herramienta que ayuda a los sitios web a recopilar y gestionar legalmente el consentimiento de los usuarios para el procesamiento de datos, un requisito según las leyes de privacidad como el RGPD en Europa y la CCPA en California. Es la tecnología que impulsa los ‘banners de cookies’ que se ven en muchos sitios web.

FitConsent va más allá de un simple banner. Le proporciona las herramientas no solo para cumplir con la ley, sino también para optimizar la experiencia del usuario, generar confianza y mejorar las tasas de consentimiento. Nuestro servicio incluye soporte completo y automático para el modo de consentimiento V2 de Google y el modo de consentimiento UET de Microsoft, lo que garantiza que sus etiquetas de análisis y marketing ajusten su comportamiento según el consentimiento del usuario, algo crucial para el marketing basado en datos en un mundo donde la privacidad es lo primero.

Instalación y configuración

La integración de FitConsent está diseñada para ser rápida y sencilla. Solo necesita agregar un único fragmento de script en la sección de su sitio web. Este script se encarga de todo, desde mostrar el banner hasta gestionar los valores predeterminados del modo de consentimiento de Google y Microsoft.

Prerrequisito importante: Modo de consentimiento

Nuestro script configura automáticamente los valores predeterminados necesarios para el modo de consentimiento v2 de Google y el modo de consentimiento UET de Microsoft. Esto es crucial para que servicios como Google Analytics y Microsoft Advertising operen de manera compatible con el consentimiento del usuario. Asegúrese de colocar este script lo más alto posible en la etiqueta de su sitio web, antes que cualquier otro script que pueda usar cookies.

Inserción directa

Para la instalación directa, copie el fragmento de código a continuación y péguelo en la sección <head> del HTML de su sitio web. Es crucial colocarlo lo más alto posible, antes que cualquier otro script que pueda establecer cookies (como Google Analytics o Microsoft UET).

<!-- FitConsent Banner Script -->
<script>
  // Define dataLayer and the gtag helper.
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Initialize Microsoft UET queue
  window.uetq = window.uetq || [];

  // Set default consent states for Google and Microsoft.
  // This MUST run before any other scripts using cookies.
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied'
  });
  
  window.uetq.push('consent', 'default', {
    'ad_storage': 'denied'
  });
</script>

<!-- Load your other scripts (e.g., Google Analytics, Microsoft UET) here -->
<!-- ... -->

<!-- Load FitConsent Banner to update consent based on user interaction -->
<script async defer src="https://app.fitconsent.com/api/banner?websiteId=YOUR_WEBSITE_ID"></script>
<!-- End FitConsent Banner Script -->

Google Tag Manager (Recomendado)

Usar nuestra plantilla de la comunidad de Google Tag Manager (GTM) es la forma recomendada de instalar FitConsent. Gestiona correctamente el modo de consentimiento v2 de Google y asegura que las etiquetas se activen según el consentimiento del usuario.

Paso 1: Habilitar la vista general del consentimiento (configuración única)
  • 1. En su espacio de trabajo de GTM, haga clic en la pestaña «Admin».
  • 2. Debajo de la columna «Contenedor», haga clic en «Configuración del contenedor».
  • 3. En la sección «Configuración adicional», marque la casilla «Habilitar la vista general del consentimiento».
  • 4. Haga clic en «Guardar» en la esquina superior derecha.
Paso 2: Agregar la plantilla de FitConsent
  • 1. Vaya a la sección «Plantillas» en la barra lateral izquierda.
  • 2. En el cuadro «Plantillas de etiquetas», haga clic en «Buscar en la galería».
  • 3. Busque «FitConsent» y haga clic en «Agregar al espacio de trabajo».
  • 4. Confirme los permisos para agregar la plantilla.
Paso 3: Crear una etiqueta de «Google Consent Default»
  • 1. Vaya a «Etiquetas» y haga clic en «Nueva».
  • 2. Nombre la etiqueta como «FitConsent – Consentimiento predeterminado».
  • 3. Haga clic en «Configuración de la etiqueta» y elija «FitConsent» de la lista.
  • 4. En el menú desplegable «Tipo de etiqueta», seleccione «Google Consent Default». Esto establecerá los valores predeterminados para Google y Microsoft.
  • 5. En el campo «FitConsent Website ID», pegue su ID de sitio web único desde su panel de control.
  • 6. Para el activador, seleccione la opción incorporada «Inicialización de consentimiento – Todas las páginas». Esto es crucial.
  • 7. Guarde la etiqueta.
Paso 4: Crear la etiqueta «FitConsent Banner Loader»
  • 1. Cree otra etiqueta «Nueva». Nómbrela como «FitConsent – Cargador de banner».
  • 2. Haga clic en «Configuración de la etiqueta» y elija «FitConsent» nuevamente.
  • 3. El «Tipo de etiqueta» debería ser por defecto «FitConsent Banner Loader».
  • 4. En el campo «FitConsent Website ID», pegue su ID de sitio web único desde su panel de control.
  • 5. Para el activador, también seleccione «Inicialización de consentimiento – Todas las páginas».
  • 6. Guarde la etiqueta.

Paso 5: Configurar su etiqueta de Google

El paso final es asegurarse de que su etiqueta principal de Google (la que envía datos a Google Analytics) se active correctamente según el consentimiento del usuario.

A) Si ya tiene una etiqueta de Google (por ejemplo, «G-XXXXXXXXXX») en su contenedor:
  • 1. Haga clic en su etiqueta de Google para editarla.
  • 2. Vaya a «Configuración avanzada» > «Configuración de consentimiento».
  • 3. Asegúrese de que esté seleccionado «No se requiere consentimiento adicional». La plantilla de FitConsent maneja las señales de consentimiento por usted.
  • 4. Guarde los cambios de su etiqueta.
B) Si NO tiene una etiqueta de Google todavía:
  • 1. Haga clic en «Etiquetas» > «Nueva».
  • 2. Nombre la etiqueta como «Google Tag – GA4» o similar.
  • 3. Para «Configuración de la etiqueta», elija «Etiqueta de Google».
  • 4. Ingrese su ID de medición de GA4 en el campo «ID de etiqueta» (por ejemplo, «G-XXXXXXXXXX»).
  • 5. Para «Activación», seleccione «Inicialización – Todas las páginas».
  • 6. Vaya a «Configuración avanzada» > «Configuración de consentimiento» y asegúrese de que esté seleccionado «No se requiere consentimiento adicional».
  • 7. Guarde la etiqueta.
Paso 6: Gestionar otros scripts (por ejemplo, Microsoft Clarity, Facebook Pixel)

La integración de FitConsent con el modo de consentimiento de Google le permite gestionar cualquier script de terceros a través de GTM. Así es como configuraría una etiqueta como Microsoft Clarity:

  • 1. Agregar la etiqueta: Agregue su etiqueta de terceros a GTM (ya sea a través de una plantilla de la comunidad o como una etiqueta HTML personalizada).
  • 2. Configurar la configuración de consentimiento: Edite la etiqueta, vaya a «Configuración avanzada» > «Configuración de consentimiento».
  • 3. Agregar una verificación de consentimiento: Seleccione «Requerir consentimiento adicional para que la etiqueta se active». Aparecerá una tabla.
  • 4. Elegir el tipo de consentimiento: Haga clic en «Agregar consentimiento requerido» y seleccione el tipo de consentimiento apropiado. Para una herramienta de análisis como Clarity, elegiría analytics_storage. Para un script de marketing como un Facebook Pixel o una etiqueta de Microsoft UET, podría agregar tanto ad_storage como analytics_storage.
  • 5. Establecer el activador: Establezca el activador de la etiqueta para que se active en su evento de vista de página estándar (por ejemplo, «Inicialización – Todas las páginas» o un evento de «Vista de página» personalizado).

Ahora, GTM verificará automáticamente el estado de consentimiento proporcionado por FitConsent. La etiqueta de Microsoft Clarity solo se activará después de que el usuario haya aceptado la categoría «Análisis» en su banner de consentimiento, y una etiqueta UET solo se activará si se acepta «Marketing».

Finalmente, haga clic en «Enviar» y «Publicar» su contenedor GTM para que los cambios se apliquen.

Complemento FitConsent CMP para WordPress

Integra FitConsent con WordPress y la API de consentimiento de WP para una compatibilidad perfecta con Google Site Kit.

Descargar desde WordPress.org

FitConsent es una Plataforma de Gestión de Consentimiento (CMP) potente pero sencilla, diseñada para ayudarte a cumplir con las normativas de privacidad como el GDPR y la CCPA. Este plugin hace que sea increíblemente fácil añadir el banner de FitConsent a tu sitio de WordPress. Y lo que es más importante, proporciona compatibilidad automática y lista para usar con la API de consentimiento de WP, que es el estándar utilizado por Google Site Kit.

Al usar este plugin, puedes habilitar la función de modo de consentimiento de Google Site Kit y estar seguro de que se respetan las elecciones de consentimiento de tus usuarios, lo que permite un análisis y un seguimiento de anuncios conformes y efectivos.

Características Principales

  • Configuración Sencilla: Simplemente introduce tu ID de sitio web de FitConsent y el plugin se encarga del resto.
  • Listo para Google Site Kit: Funciona sin problemas con el modo de consentimiento de Google Site Kit al integrarse con la API de consentimiento de WP.
  • Ligero: El plugin es eficiente y no añade ningún tipo de sobrecarga a tu sitio web.
  • Comunicación Estandarizada: Asegura que las señales de consentimiento se transmiten correctamente entre tu banner de consentimiento y otros plugins.

Guía de Instalación

Método 1: Instalación a través del Panel de WordPress
  1. Inicia sesión en tu panel de WordPress.
  2. Navega a Plugins > Añadir nuevo.
  3. En la barra de búsqueda, escribe «FitConsent CMP» y presiona Enter.
  4. Encuentra el plugin «FitConsent CMP» en los resultados de búsqueda y haz clic en Instalar ahora.
  5. Después de la instalación, haz clic en Activar.
Método 2: Instalación Manual a través de FTP
  1. Descarga el plugin FitConsent CMP desde la fuente oficial.
  2. Descomprime el archivo descargado para extraer la carpeta fitconsent-cmp.
  3. Conéctate al servidor de tu sitio web usando un cliente FTP (por ejemplo, FileZilla).
  4. Navega hasta el directorio /wp-content/plugins/.
  5. Sube toda la carpeta fitconsent-cmp a este directorio.
  6. Vuelve a tu panel de WordPress, navega a Plugins > Plugins instalados y haz clic en Activar para «FitConsent CMP».

Configuración Posterior a la Instalación

  1. En tu panel de WordPress, ve a Ajustes > FitConsent.
  2. Busca tu ID de sitio web de FitConsent en tu Panel de FitConsent.
  3. Introduce este ID en el campo provisto y haz clic en Guardar cambios.

Integración con Google Site Kit (si corresponde)

  1. Si estás usando el plugin Google Site Kit, ve a sus ajustes.
  2. Asegúrate de que la opción Modo de consentimiento esté habilitada.

Otras plataformas (CMS)

Puede usar FitConsent con cualquier sitio web o sistema de gestión de contenido (CMS) como WordPress o Shopify que le permita agregar código HTML o JavaScript personalizado. Le recomendamos encarecidamente que use su integración con Google Tag Manager si está disponible y siga las instrucciones de GTM mencionadas anteriormente. De lo contrario, puede usar el método de «Inserción directa».

Configuración de su banner

Adapte la apariencia, el contenido y el comportamiento del banner desde su panel de control.

Ajustes generales

Marco: Elija la principal regulación de privacidad que necesita cumplir (por ejemplo, RGPD, CCPA, IAB TCF 2.2). Esta elección ajusta el comportamiento predeterminado del banner y las opciones disponibles para alinearse con los requisitos de ese marco.

Geotargeting (Premium): Elija mostrar el banner solo a los visitantes de regiones específicas, como la UE.

Diseño: Seleccione entre un banner flotante (en varias posiciones de la pantalla) o un diálogo centrado que se superponga a su contenido.

Apariencia

Personalice los colores, las fuentes y la elevación (sombras) para que coincidan perfectamente con la imagen y la sensación de su marca.

Logotipo e imagen de fondo: También puede agregar el logotipo de su empresa o incluso una imagen de fondo al banner para una experiencia de marca completa.

Contenido e idiomas

Edite todo el texto del banner y del modal de preferencias. FitConsent admite múltiples idiomas, lo que le permite ofrecer una experiencia nativa para todos sus usuarios. Se admite Markdown básico en los campos de texto principales.

Optimización impulsada por IA

Utilice nuestro optimizador impulsado por IA para obtener sugerencias sobre colores, texto y diseños que han demostrado aumentar las tasas de consentimiento según el contenido de su sitio web y su público objetivo.

FitConsent puede mostrar una lista detallada y de actualización automática de las cookies y otros elementos de almacenamiento que utiliza su sitio. Esto a menudo se incluye en una página de Política de privacidad para proporcionar total transparencia a sus usuarios.

Incrustar la declaración

Para mostrar la declaración de cookies, debe agregar un simple elemento <div> a su página donde desea que aparezca la tabla, y luego incluir nuestro script de declaración. Puede encontrar el fragmento de código exacto para su sitio web en la pestaña ‘Declaración de cookies’ de la página de configuración de su sitio web.

Sitios web HTML estándar

Para sitios web HTML estándar o sitios web creados con CMS como WordPress (sin un frontend React sin cabeza), puede agregar el siguiente fragmento directamente al HTML de su página.

El script encontrará automáticamente el <div> con el ID fitconsent-declaration e inyectará la tabla de cookies en él.

<div id="fitconsent-declaration"></div>
<script async defer src="https://fitconsent.com/api/declaration.js"></script>
Sitios web React y Next JS

Para evitar «errores de hidratación» en frameworks basados en React como Next.js, es crucial que el script de declaración no modifique la página antes de que React haya terminado su renderizado inicial en el cliente.

La forma recomendada de lograr esto es crear un componente del lado del cliente dedicado que cargue el script utilizando un hook useEffect.

  1. Crear un componente de cliente

Cree un nuevo archivo de componente, por ejemplo StorageDeclarationEmbed.tsx. Asegúrese de incluir la directiva "use client"; en la parte superior.

'use client';

import { useEffect } from 'react';

type StorageDeclarationEmbedProps = {
  websiteId: string;
};

export function StorageDeclarationEmbed({ websiteId }: StorageDeclarationEmbedProps) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = https://app.fitconsent.com/api/declaration.js?websiteId=${websiteId};
    script.async = true;
    script.defer = true;

    const container = document.getElementById('fitconsent-declaration');
    if (container) {
      container.appendChild(script);
    }

    return () => {
      // Clean up the script when the component unmounts
      if (container && container.contains(script)) {
        container.removeChild(script);
      }
    };
  }, [websiteId]);

  return <div id="fitconsent-declaration"></div>;
}

2. Usar el componente en su página

Ahora, puede importar y usar este componente en cualquier página, como su página de política de privacidad.

import { StorageDeclarationEmbed } from '@/components/StorageDeclarationEmbed'; // Adjust the import path

export default function PrivacyPolicyPage() {
  return (
    <div>
      <h1>Política de privacidad</h1>
      {/* ... other content ... */}

      <h3>Declaración de almacenamiento</h3>
      <p>
        Para una transparencia total, a continuación se muestra una lista de las cookies específicas y
        otros elementos de almacenamiento que nuestro servicio puede colocar en su navegador.
      </p>
      <StorageDeclarationEmbed websiteId="YOUR_WEBSITE_ID" />

      {/* ... other content ... */}
    </div>
  );
}

Este enfoque asegura que el script se cargue y ejecute de forma segura en el lado del cliente, evitando cualquier conflicto con el ciclo de vida de renderizado de React.

Uso avanzado

Aproveche los datos de consentimiento y comprenda el comportamiento del banner.

Uso de datos de consentimiento en su sitio web

Después de que un usuario interactúa con el banner, FitConsent almacena sus elecciones y datos de geolocalización en una cookie llamada fitconsent_given. Puede leer esta cookie en el lado del cliente o del servidor para adaptar la experiencia del usuario.

Estructura de la cookie

La cookie contiene un objeto JSON con dos claves principales: choices y geo.

choices: Un objeto donde las claves son las categorías de consentimiento (por ejemplo, marketing, analytics) y los valores son true o false.

geo: Un objeto que contiene la información geográfica del usuario (por ejemplo, código de país, estado) en el momento del consentimiento.

{
  "choices": {
    "marketing": true,
    "analytics": true
  },
  "geo": {
    "country": "US",
    "state": "CA"
  }
}

Ejemplo: Mostrar un componente basado en el consentimiento

Así es como podría mostrar un banner promocional especial solo a los usuarios en California que hayan dado su consentimiento para las cookies de marketing.

import { useState, useEffect } from 'react';

function PromotedFeatures() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const cookie = document.cookie
      .split('; ')
      .find(row => row.startsWith('fitconsent_given='));

    if (cookie) {
      try {
        const consent = JSON.parse(decodeURIComponent(cookie.split('=')[1]));
        // Example: Check if the user is in California and consented to marketing
        if (consent?.geo?.state === 'California' && consent?.choices?.marketing) {
          setShow(true);
        }
      } catch (e) {
        console.error('Error parsing FitConsent cookie', e);
      }
    }
  }, []);

  if (!show) {
    return null;
  }

  return (
    // Your component for users who consented to marketing
    <div>Special Promotion for California!</div>
  );
}
Detección automática de idioma

El banner de FitConsent detecta automáticamente el idioma preferido del usuario y muestra la traducción apropiada si ha proporcionado una. Este proceso sigue un orden de precedencia específico:

  • 1. Primero verifica el atributo lang en la etiqueta html de su sitio web (por ejemplo, <html lang=»es»>). Este es el método más confiable.
  • 2. Si el atributo lang no está presente, usará la configuración de idioma del navegador del usuario (navigator.language).
  • 3. Si ninguno de los anteriores coincide con los idiomas que ha configurado, se revertirá al inglés (en) o al primer idioma de su lista seleccionada.
Mejores prácticas

Para obtener los mejores resultados en sitios multilingües, asegúrese de que la etiqueta <html> de su página refleje correctamente el idioma actual que se muestra al usuario.