Iubenda logo
Genera tus documentos

Documentación

Tabla de contenidos

Cómo integrar la Cookie Solution de iubenda con Google AMP (incluyendo el método WordPress)

Recopilar el consentimiento de las cookies en páginas AMP requiere algo de trabajo. Por suerte, iubenda puede ayudarte. Analicemos los pasos que tendrás que seguir y veamos cómo integrar nuestra Cookie Solution con las páginas móviles aceleradas de Google, incluyendo el bloqueo de cookies antes del consentimiento del usuario y algunos consejos útiles para WordPress (nuestro plugin WP es compatible con AMP).

Empezaremos con WordPress, ya que es la opción más popular para páginas AMP. Si utilizas una solución diferente, salta a esta sección.

Actualización de marzo de 2021

Hemos revisado completamente nuestra integración de AMP, mejorando aún más nuestro soporte para este tipo de páginas. Además de las funciones ya existentes, como el soporte del TCF y la ausencia de consentimiento si el usuario navega fuera de AMP (con un navegador que admita cookies de terceros), también hemos incluido:

  • Soporte perfeccionado para Safari. Después de añadir la función de actualización del consentimiento, nuestra compatibilidad con el navegador de Apple ha mejorado significativamente.
  • El widget de preferencias de seguimiento. Este widget (que ahora también es totalmente compatible con AMP) permite a los usuarios volver a abrir y editar sus preferencias de seguimiento después de cerrar el banner de cookies.

Si ya estás utilizando AMP y nuestra Cookie Solution, descarga la última versión de nuestro plugin de WordPress o actualiza tu integración manual para que coincida con nuestras últimas instrucciones.

iubenda y Google AMP: cómo recopilar el consentimiento de cookies en WordPress

Nuestro plugin de WordPress es totalmente compatible con Google AMP (funciona con los plugins de AMP y AMP para WP) y te permite recopilar fácilmente el consentimiento de cookies según el RGPD y bloquear las cookies antes de que el usuario otorgue su consentimiento, tal y como establece la Ley de Cookies.

Paso 1: Descarga el plugin de nuestra Cookie y Consent Solution

Si no lo has hecho todavía, descarga e instala nuestro plugin de WordPress. Para obtener más información, echa un vistazo a nuestra guía completa de instalación.

Paso 2: Activa la compatibilidad con Google AMP

AMP requiere unos parámetros de configuración específicos y una página alojada en tu dominio, desde donde se carga la configuración.

Una vez que hayas añadido el código de la Cookie Solution y activado el soporte de Google AMP, nuestro plugin generará automáticamente el archivo de configuración amp.html (recuerda establecer los permisos de la carpeta de “plantillas” en 664 para evitar errores).

Plugin de la Cookie Solution de iubenda para WordPress: compatibilidad con Google AMP

Paso 3: Bloquea los componentes

Como se indica en amp.dev/documentation, una vez habilitada la compatibilidad con Google AMP, tendrás que añadir data-block-on-consent en todos los elementos que deben bloquearse en función del consentimiento.

Un par de notas:

Cookie y Consent Solution Todo-en-Uno (compatible con AMP)

Descarga el plugin de WordPress

Consulta la guía de instalación


iubenda y Google AMP: cómo recopilar el consentimiento de cookies en sitios web que no funcionan con WordPress

Si no utilizas WordPress, sigue estos pasos para integrar nuestra Cookie Solution con Google AMP.

Paso 1: Crea un archivo HTML

En primer lugar, copia este código HTML y alójalo en tu sitio HTTPS en un archivo HTML (asegúrate de editar los ajustes de la Cookie Solution para reflejar tu propia configuración):

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="robots" content="noindex">
    <title>AMP Cookie Consent</title>
</head>

<body class="iubenda-cookie-solution">
    <span class="iubenda-cs-preferences-link"></span>
    <script type="text/javascript">
        var _iub = _iub || [];

        // Your own Cookie Solution configuration
        _iub.csConfiguration = {
            lang: 'en',
            siteId: 896537, // Your own site ID
            cookiePolicyId: 8207462, // Your own cookie policy ID
            enableTcf: true,
            askConsentIfCMPNotFound: true,
            googleAdditionalConsentMode: true,
            googleAdsPreferenceManagement: true,
            floatingPreferencesButtonDisplay: false,
            banner: {
                acceptButtonDisplay: true, // Recommended
                customizeButtonDisplay: true, // Recommended
                rejectButtonDisplay: true // Advisable
            },
        };
    </script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
</body>

</html>
Cookie Solution, AMP y TCF

Si has habilitado el Marco de Transparencia y Consentimiento, ten en cuenta que en el caso de las páginas AMP, no tienes que añadir el script stub-v2.js.

En producción, puedes alojar este archivo en:

  • el mismo dominio,
  • en un subdominio o
  • en un dominio diferente (en este caso, tendrás que activar remoteConsent)
Entorno de prueba

Dado que AMP no permite cargar iframes desde el mismo dominio, al cargar este archivo en el mismo dominio que la página AMP está sirviendo no se mostrará el banner de cookies. Este problema tan solo está presente durante la prueba, porque en una situación real de AMP la página se cargará desde google.com, por lo que nunca se producirá el problema del mismo dominio.

En cualquier caso, para evitar este problema en casos que no sean de producción, aloja el archivo HTML en un dominio o subdominio diferente (por ejemplo, el dominio principal es www.yourdomain.com, pero alojas el archivo en amp.yourdomain.com). Un truco fácil es utilizar la redirección www/non-www para hacer esto sin añadir subdominios adicionales.

Ten en cuenta que el iframe de AMP se debe publicar a través de HTTPS.

Paso 2: Edita tus páginas AMP

Ahora, añade una copia de este <amp-consent> a tus páginas AMP:

<amp-consent id="iubenda" layout="nodisplay" type="iubenda">
    <script type="application/json">
        {
            "promptUISrc": "<uri-to-your-cs-page>",
            "postPromptUI": "post-consent-ui"
        }
    </script>
</amp-consent>

A continuación, añade el código para el botón de actualizar preferencias, visible solo cuando ya se han expresado las preferencias (para cambiar la posición, utiliza la clase iubenda-tp-btn--bottom-left, iubenda-tp-btn--top-left o iubenda-tp-btn--top-right en lugar de iubenda-tp-btn--bottom-right):

<div id="post-consent-ui">
    <button class="iubenda-tp-btn iubenda-tp-btn--bottom-right" on="tap:iubenda.prompt()"></button>
</div>

Por último, añade el <style amp-custom> a tu documento head:

<style amp-custom>
    .iubenda-tp-btn {
        position: fixed;
        z-index: 2147483647;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%231CC691' fill-rule='evenodd' d='M16 7a4 4 0 0 1 2.627 7.016L19.5 25h-7l.873-10.984A4 4 0 0 1 16 7z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 32px 32px;
        background-position: top .5px left 1px;
        width: 34px;
        height: 34px;
        border: none;
        cursor: pointer;
        margin: 16px;
        padding: 0;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
        background-color: #fff;
        display: inline-block;
        height: 34px;
        min-width: 34px;
        border-radius: 4px;
        bottom: 0;
        right: 0;
    }

    .iubenda-tp-btn--top-left {
        top: 0;
        left: 0;
    }

    .iubenda-tp-btn--top-right {
        top: 0;
        right: 0;
    }

    .iubenda-tp-btn--bottom-left {
        bottom: 0;
        left: 0;
    }

    .iubenda-tp-btn--bottom-right {
        bottom: 0;
        right: 0;
    }
</style>

Para terminar, aquí tienes un ejemplo de una página AMP:

<!doctype html>
<html ⚡>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="This is the AMP Boilerplate.">
    <meta name="amp-consent-blocking" content="amp-analytics,amp-ad">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            animation: -amp-start 8s steps(1, end) 0s 1 normal both
        }

        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
    </style>
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
    <style amp-custom>
        .iubenda-tp-btn {
            position: fixed;
            z-index: 2147483647;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%231CC691' fill-rule='evenodd' d='M16 7a4 4 0 0 1 2.627 7.016L19.5 25h-7l.873-10.984A4 4 0 0 1 16 7z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 32px 32px;
            background-position: top .5px left 1px;
            width: 34px;
            height: 34px;
            border: none;
            cursor: pointer;
            margin: 16px;
            padding: 0;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
            background-color: #fff;
            display: inline-block;
            height: 34px;
            min-width: 34px;
            border-radius: 4px;
            bottom: 0;
            right: 0;
        }

        .iubenda-tp-btn--top-left {
            top: 0;
            left: 0;
        }

        .iubenda-tp-btn--top-right {
            top: 0;
            right: 0;
        }

        .iubenda-tp-btn--bottom-left {
            bottom: 0;
            left: 0;
        }

        .iubenda-tp-btn--bottom-right {
            bottom: 0;
            right: 0;
        }
    </style>
    <link rel="canonical" href=".">
    <title>My AMP Page</title>
</head>

<body>
    <amp-consent id="iubenda" layout="nodisplay" type="iubenda">
        <script type="application/json">
            {
                "promptUISrc": "<uri-to-your-cs-page>",
                "postPromptUI": "post-consent-ui"
            }
        </script>
    </amp-consent>
    <!-- This is the update preferences button, visible only when preferences are already expressed -->
    <div id="post-consent-ui">
        <button class="iubenda-tp-btn iubenda-tp-btn--bottom-right" on="tap:iubenda.prompt()"></button>
    </div>
</body>

</html>

Nota:

  • Añade <script async="" custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-latest.js"></script> tan solo si quieres limitar la recopilación del consentimiento a la UE
  • Si estos recursos ya están disponibles en la página, aparecerá un error inofensivo
Cadena de consentimiento y terceros proveedores

Para recuperar la cadena de consentimiento en AMP, los terceros proveedores pueden utilizar context.initialConsentValue

Paso 3: Bloquea los componentes

Como se indica en amp.dev/documentation, tienes que añadir data-block-on-consent a todos los elementos que tengan que estar bloqueados en función del consentimiento.

Advertencia

El consentimiento por categoría no es compatible con AMP. Por lo tanto, no puedes especificar perPurposeConsent: true en tu configuración cuando utilices AMP.

Más información