Web & AMP: Implementación básica

Web & AMP: Implementación básica

Implementación en web

Para configurar el CMP en su versión web debe editar el archivo en el que va a implementarlo (por ejemplo: index.html) en un editor de código.

La carga del CMP se realiza mediante la declaración de una variable y la carga de un archivo
  1. En el código más abajo hay que sustituir la URL {{URL}} por la URL que le proporcionaremos y que lleva la configuración del CMP, estará alojado en el servidor de Sibbo
Incluimos la variable y la carga del archivo javaScript en todas las páginas que cargan el CMP dentro de la etiqueta <head> de la página, de la siguiente manera:
  1. <html>
  2.        <head>
  3.             ...
  4.           <script charset="utf-8">
  5.        window.sibboCMPParams = {
  6.                    core: "",
  7.            config: "{{URL}}",
  8.                    development: false,
  9.    useLoader: false,
  10.    useDOMContentLoaded: true
  11.         };
  12.            </script>
  13.            <script src="https://cmp.sibbo.net/v2.2/sibbo-cmp-router.js" defer charset="utf-8"></script>                                                                 
  14.             ...
  15.       </head>
  16. </html>

El atributo charset="utf-8" es importante, ya que sin él el texto puede aparecer con caracteres erróneos.

La carga ha de incluirse lo antes posible en el código. Esto es así porque se tiene que cargar la API (sibbo-cmp-router.js) antes de que cualquier otro script empiece a hacer peticiones.

Si no está usando el enlace de reflotado de Sibbo en la configuración, es obligatorio añadir a la página que alberga el CMP, un enlace o botón con el texto Cookies o Configuración de cookies, que dispara el método SibboCMP.open(), esto reflotará el CMP.

Ejemplo:

  1. <a href="#" rel="nofollow" onclick="SibboCMP.open()">Cookies</a>

Para la integración del CMP con la publicidad programática vea el apartado Métodos del CMP y el apartado Eventos del CMP.

Implementación en web (versión superfast)

Para configurar el CMP en su versión web debe editar el archivo en el que va a implementarlo (por ejemplo: index.html) en un editor de código.

La carga del CMP se realiza mediante la declaración de una variable y la carga de un archivo
  1. En el código más abajo hay que sustituir la URL {{URL}} por la URL que le proporcionaremos y que lleva la configuración del CMP, estará alojado en el servidor de Sibbo
Incluimos la variable y la carga del archivo javaScript en todas las páginas que cargan el CMP dentro de la etiqueta <head> de la página, de la siguiente manera:
  1. <html>
  2.        <head>
  3.             ...
  4.           <script charset="utf-8">
  5.        window.sibboCMPParams = {
                       core: "",
  6.            config: "{{URL}}",
  7.                    development: false,
  8.    useLoader: true,
  9.    useDOMContentLoaded: true
  10.         };
  11.            </script>
  12.            <script src="https://cmp.sibbo.net/v2.2/sibbo-cmp-router.js" defer charset="utf-8"></script>                                                                 
  13.             ...
  14.       </head>
  15. </html>

El atributo charset="utf-8" es importante, ya que sin él el texto puede aparecer con caracteres erróneos.

La propiedad useLoader: true es la responsable de ejecutar la versión superfast.

La carga ha de incluirse lo antes posible en el código. Esto es así porque se tiene que cargar la API (sibbo-cmp-router.js) antes de que cualquier otro script empiece a hacer peticiones.

Si no está usando el enlace de reflotado de Sibbo en la configuración, es obligatorio añadir a la página que alberga el CMP, un enlace o botón con el texto Cookies o Configuración de cookies, que dispara el método SibboCMPLoader.openCmpConfig(true), esto reflotará el CMP.

Ejemplo:

  1. <a href="#" rel="nofollow" onclick="SibboCMPLoader.openCmpConfig(true)">Cookies</a>

Para la integración del CMP con la publicidad programática vea el apartado Métodos en Web Superfast y el apartado Eventos en Web Superfast.

Implementación en AMP

Si la versión que desea implementar es para AMP, deberá seguir las siguientes indicaciones:

Añadimos a la etiqueta <head>:
  1. <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>

  3.     <style amp-custom>
  4.         #sibboCMPIframe {
  5.             z-index: 1000;
  6.             position: relative;
  7.             width: 100vw;
  8.             height: 80vh;
  9.         }
  10.     </style>

Añadimos a la etiqueta <body>, sustituyendo la variables {{DOMAIN}} y {{URL}} por la información enviada al cliente:

  1. <amp-consent id="sibboCMPLayer" layout="nodisplay">
  2.         <script type="application/json">
  3.             {
  4.                 "consents":
  5.                 {
  6.                     "{{DOMAIN}}":
  7.                     {
  8.                         "checkConsentHref": "https://api.sibbo.net/amp/load/",
  9.                         "onUpdateHref": "https://api.sibbo.net/amp/consent/",
  10.                         "promptUI": "sibboCMPIframe"
  11.                     }
  12.                 },
  13.                 "postPromptUI": "sibboCMPPost",
  14.                 "uiConfig": {
  15.                     "overlay": true
  16.                 }
  17.             }
  18.         </script>
  19.         <amp-iframe id="sibboCMPIframe" class="lightbox-content" height="100" width="100"
  20.         layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
  21.         src="{{URL}}">
  22.             <div placeholder>Cargando...</div>
  23.         </amp-iframe>
  24.         <div id="sibboCMPPost"></div>
  25. </amp-consent>
Es obligatorio añadir a la página que alberga el CMP, un enlace o botón con el texto Cookies o Configuración de cookies.

Ejemplo:
  1. <button on="tap:sibboCMPLayer.prompt()" class="">Mis preferencias</button>                                                               
Para la integración del CMP con la publicidad programática vea el apartado Métodos en Web normal / AMP y el apartado Eventos en Web normal / AMP.

Observe en el código la propiedad "overlay": true. esta propiedad cubre el resto de la página con una capa semi transparente y bloquea el scroll general de la página, centrando la atención en el CMP. Una vez se cierra el CMP, la capa semi transparente desaparece y el scroll se desbloquea. Si no desea este comportamiento ponga la propiedad como false: "overlay": false.