Documentación

Tabla de contenidos

Cómo utilizar la Privacy Controls and Cookie Solution en un sitio WordPress multilingüe

Para gestionar sitios multilingües con WordPress, puedes utilizar plugins como WPML o Polylang. Te permiten crear versiones de tu sitio web en varios idiomas. Te explicamos cómo:

  1. Primero debes generar el código iubenda que enviará el banner al sitio siguiendo las instrucciones de esta guía.

  2. Cada idioma tiene su propio segmento de código específico que debe insertarse en el HTML del sitio web, como se describe detalladamente en esta guía. Puedes activar tu política de cookies en la página de edición de la política, en la parte inferior derecha: [Tu sitio web] > Política de privacidad y cookies > Editar

    Activar política de cookies

    El código correcto se genera cuando haces clic en “Activar política de cookies”:

    Activar política de cookies

  3. Ahora, solo tienes que ir a la página Incrustar haciendo clic en el enlace “Gestionar e incrustar” situado encima del nombre de tu sitio web. Así accederás de nuevo a la página de flujo/visión del sitio de tu dashboard. Haz clic en el botón <>Incrustar en la Privacy Controls and Cookie Solution para ir a la sección de incrustación. Una vez allí, encontrarás el código de incrustación de tu banner.

    Si has generado tus políticas en más de un idioma, habrá pestañas de idioma visibles para cada idioma que hayas activado para la política. Cada pestaña contiene el código específico del idioma concreto de dicha política:

    Pestañas de idioma de la Cookie Solution

    Haz clic en la pestaña del idioma que desees y copia el código del banner de cookies/banner de consentimiento correspondiente.

  4. El código, similar al del ejemplo siguiente, debe insertarse en la etiqueta <head> como primer elemento:

<script src="https://embeds.iubenda.com/widgets/[site-code].js"></script>
<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Como ya se ha dicho, cada idioma tiene su propio código, cuya principal diferencia es el número de identificación al que apunta.

Cómo integrar el script del banner de cookies/banner de consentimiento de iubenda con el plugin de WordPress

Puedes utilizar nuestro plugin para WordPress que detecta automáticamente el plugin multilingüe que utilizas (WPML y Polylang) y ofrece formularios para copiar y pegar los scripts de iubenda anteriores:

Integración personalizada

Si no puedes utilizar uno de los plugins multilingües compatibles con el nuestro (es decir, WPML y Polylang), tendrás que hacer algunos cambios en el banner para que se pueda aplicar el cambio de idioma. Los cambios que verás a continuación están pensados para integrar el script en el idioma correcto en el código fuente de tu página, basándose en el atributo “lang” de la etiqueta de la página en cuestión, que suele indicar el idioma de la página.

Te mostramos los pasos que debes seguir, empezando por un script de prueba. En tu caso, omite copiar el script de la Privacy Controls and Cookie Solution que aparece a continuación, ya que puedes encontrarlo en tu área privada de iubenda (accede al área personal → abre tu sitio → haz clic en “INCRUSTAR” en la “Privacy Controls and Cookie Solution”). Después de copiar, realiza las siguientes modificaciones:

Script de prueba

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":2930987,"whitelabel":false,"cookiePolicyId":38875072,"lang":"en-GB", "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","rejectButtonDisplay":true }};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/2930987.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Modificaciones

La primera modificación que debes realizar es insertar, justo al principio de nuestro script, valores que sugieran el cambio de idioma. Los valores en cuestión son:

<script type="text/javascript">
var lang_id = document.getElementsByTagName('html')[0].getAttribute('lang').split("-")[0];
        site_id = 000001; // site_id del código de integración de iubenda
    switch (lang_id) {
        case 'es':
            var policy_id = 000002; // policy_id del código de integración de iubenda (EN)
            break;
        case 'it':
            var policy_id = 000003; // policy_id del código de integración de iubenda (IT)
            break;
        // case 'otro idioma' ...
    }

Después de añadir la parte del script anterior, nuestro script de banner tendrá el siguiente aspecto:

<script type="text/javascript">
var lang_id = document.getElementsByTagName('html')[0].getAttribute('lang').split("-")[0];
        site_id = 000001; // site_id del código de integración de iubenda
    switch (lang_id) {
        case 'es':
            var policy_id = 000002; // policy_id del código de integración de iubenda (EN)
            break;
        case 'it':
            var policy_id = 000003; // policy_id del código de integración de iubenda (IT)
            break;
        // case 'otro idioma' ...
    }
    
    var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":2930987,"whitelabel":false,"cookiePolicyId":38875072,"lang":"en-GB", "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","rejectButtonDisplay":true }};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/2930987.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Los números que ves para “site_id” y “var policy_id” deben modificarse. Debes insertar:

  • El número relacionado con “site_id”, que siempre es único para cada sitio, con independencia de cuántos idiomas estén activados
  • Los números relacionados con las políticas activadas en cada idioma (parámetro cookiePolicyId en el código del banner). Para cada idioma, hay un “var policy_id” correspondiente

Puedes encontrar esta información en tu área privada de iubenda. Por ejemplo, supongamos que tienes dos scripts que manejan dos idiomas diferentes: Italiano e inglés.

Italiano

Inglés:

Una vez identificados los valores, puedes proceder a modificarlos como se indica a continuación:

<script type="text/javascript">
var lang_id = document.getElementsByTagName('html')[0].getAttribute('lang').split("-")[0];
        site_id = 2930987; // site_id del código de integración de iubenda
    switch (lang_id) {
        case 'es':
            var policy_id = 38875072; // policy_id del código de integración de iubenda (EN)
            break;
        case 'it':
            var policy_id = 51698593; // policy_id del código de integración de iubenda (IT)
            break;
        // case 'otro idioma' ...
    }
    
    var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":2930987,"whitelabel":false,"cookiePolicyId":38875072,"lang":"en-GB", "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","rejectButtonDisplay":true }};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/2930987.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Si se activa un nuevo idioma, basta con insertar la siguiente parte de script en lugar de "// case 'otro idioma' ...", añadir el nombre del idioma activado en nuestro portal y utilizar el número de póliza correspondiente.

case 'de':
            var policy_id = 11111084; // policy_id del código de integración de iubenda (DE)
            break;

La última modificación es muy importante: hay que cambiar otros tres parámetros presentes en nuestro script principal (no en las modificaciones que acabamos de hacer, sino en el script extraído nuestra área personal de iubenda):

* “siteId”
* “cookiePolicyId”
* “lang”

En lugar de los valores por defecto, tienes que insertar estas referencias:

* “siteId”: site_id
* “cookiePolicyId”: policy_id
* “lang”: lang_id

En el script, tendrá el siguiente aspecto:

<script type="text/javascript">
var lang_id = document.getElementsByTagName('html')[0].getAttribute('lang').split("-")[0];
        site_id = 2930987; // site_id del código de integración de iubenda


    switch (lang_id) {
        case 'es':
            var policy_id = 38875072; // policy_id del código de integración de iubenda (EN)
            break;
        case 'it':
            var policy_id = 51698593; // policy_id del código de integración de iubenda (IT)
            break;
        // case 'otro idioma' ...
    }
    
    var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":site_id,"whitelabel":false,"cookiePolicyId":policy_id,"lang":lang_id, "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","rejectButtonDisplay":true }};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/2930987.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Tras completar esta modificación final, el script puede insertarse en la etiqueta <head> de tu sitio, lo más arriba posible o incluso como primer valor, o dentro de nuestro plugin.

Consulta a continuación otro ejemplo de script de prueba con la biblioteca jQuery. Además, hemos creado un videotutorial sobre la configuración de un banner multilingüe, al que puedes acceder aquí.

<!-- reemplaza 000001 con el site_id de tu código de inserción específico de iubenda -->
<!-- reemplaza 000002 con el policy_id de tu código de inserción de iubenda EN -->
<!-- reemplaza 000003 con el policy_id de tu código de inserción de iubenda IT -->

<script type="text/javascript">
    var lang_id = jQuery('html').attr('lang').split('-')[0],
        site_id = 000001; // site_id del código de inserción de iubenda
    switch (lang_id) {
        case 'es':
            var policy_id = 000002; // policy_id del código de inserción de iubenda EN
            break;
        case 'it':
            var policy_id = 000003; // policy_id del código de inserción de iubenda IT
            break;
        // caso 'otro código de idioma' ...
    }
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": lang_id,
        "siteId": site_id,
        "cookiePolicyId": policy_id,
        "banner": {
            "posición": "arriba"
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Ver también

¿Aún tienes preguntas?

Participa en uno de nuestros webinars gratuitos Envíanos un correo electrónico Chat en vivo