Cómo utilizar el nuevo código multilingüe con autodetección de idioma

Presentamos un nuevo código con autodetección de idioma para simplificar la integración en tu sitio web. Con esta función mejorada, disponible dentro de nuestra Privacy Controls and Cookie Solution , se detecta automáticamente el idioma del usuario, de modo que se reduce la necesidad de añadir códigos independientes para cada idioma. Te presentamos una guía completa para ayudarte a entender y aplicar esta nueva funcionalidad.

Integración del nuevo código

Esta es la estructura básica del nuevo código con autodetección de idioma:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "en": {
    "cookiePolicyId": 12345 // Cookie policy ID for English
  },
  "it": {
    "cookiePolicyId": 23456 // Cookie policy ID for Italian
  },
};
_iub.csConfiguration = {
  "siteId": 09876, // Your site ID
"cookiePolicyId": 12345, // Cookie policy ID of the main language for fallback
"storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Cómo funciona

• Configuración específica del idioma: El objeto csLangConfiguration establece los identificadores de la política de cookies para cada idioma.
• Mecanismo de vuelta: La etiqueta cookiePolicyId en csConfiguration sirve como alternativa en caso de que no se detecte ninguna lengua.
• Almacenamiento: Utilizar useSiteId en el objeto storage implica que el consentimiento del usuario es válido en los diferentes idiomas de tu sitio web.

Utilizar el código sin configuración remota

Cuando la configuración remota está desactivada, el código depende totalmente de los parámetros proporcionados en el objeto _iub.csConfiguration. La estructura es similar a la de la versión con configuración remota, pero especifica explícitamente todas las configuraciones, incluidos los ajustes del banner, las opciones de idioma, el almacenamiento y los consentimientos dentro del código.

Ajustes y personalización

El nuevo código te permite personalizar el banner de consentimiento para cada idioma utilizando el objeto csLangConfiguration. Esto significa que puedes personalizar el aspecto y el comportamiento del banner en función del idioma del usuario. Presentamos a continuación algunas personalizaciones habituales.

Ejemplo 1: Cambiar el aspecto del banner según el idioma

Supón que quieres que el banner de consentimiento tenga un color diferente para cada idioma, a fin de dar a tu sitio un aspecto personalizado y específico en cada caso. En este ejemplo, el banner se vuelve rojo para los usuarios que ven el sitio en italiano:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "en": {
    "cookiePolicyId": 12345
  },
  "it": {
    "cookiePolicyId": 23456,
    "banner": {
      "backgroundColor": "#FF0000"
    }
  },
};
_iub.csConfiguration = {
  "siteId": 09876,
  "cookiePolicyId": 12345,
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Ejemplo 2: Botones de consentimiento específicos según el idioma

En algunos países, como en Dinamarca, se exige que las opciones de consentimiento específicas sean visibles para los usuarios. Puedes configurar estas opciones para que solo aparezcan cuando el idioma del usuario coincida con un requisito concreto:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "da": {
    "cookiePolicyId": 7896,
    "banner": {
      "showPurposesToggles": true
    }
  },
};
_iub.csConfiguration = {
  "siteId": 09876,
  "cookiePolicyId": 12345,
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Nota:

Por defecto, el nuevo código utiliza el almacenamiento a nivel de sitio (useSiteId: true), lo que significa que el consentimiento del usuario se reconocerá en los distintos idiomas de tu sitio web. Lo anterior es especialmente útil para los sitios web con presencia mundial, ya que evita que los usuarios tengan que dar su consentimiento cada vez que cambian de idioma.

Sin embargo, también puedes ajustar este comportamiento dentro del Configurador, en los ajustes avanzados:

Cómo recrear el código por idioma (método antiguo)

Si prefieres utilizar el método anterior de usar códigos independientes para cada idioma (como en la configuración antigua), puedes seguir haciéndolo. Esta manera de proceder puede ser útil si quieres tener un control total sobre la configuración de cada idioma o si la estructura de tu sitio web precisa de códigos independientes. Te presentamos cómo puedes crear códigos independientes para cada idioma:

1. Crea un código distinto para cada idioma activo utilizando solo el objeto _iub.csConfiguration.
2. Añade el idioma en el parámetro "lang" para cada código.
3. Incluye el cookiePolicyId específico de cada idioma en cada objeto _iub.csConfiguration.
4. Conserva el script que enlaza con el archivo iubenda_cs.js para cada código.

Códigos de ejemplo para diferentes idiomas

Te mostramos cómo estructurar los códigos tanto para el inglés (en) como para el italiano (it):

Inglés:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
  "cookiePolicyId": 12345, // Fallback cookie policy ID
"siteId": 09876, // Site ID
"lang": "en",
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Italiano

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"cookiePolicyId": 23456, // Fallback cookie policy ID
"siteId": 09876, // Site ID
"lang": "it",
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Uso de la plantilla de Google Tag Manager

En Google Tag Manager (GTM), hemos añadido una nueva sección para configurar los ajustes específicos del idioma. Esta función opcional te permite gestionar diferentes configuraciones directamente a través de GTM. Para más detalles, consulta la guía sobre cómo configurar la plantilla de GTM de iubenda para sitios multilingües