Web & AMP: Basic implementation

Web & AMP: Basic implementation

Web basic implementation 

To configure the CMP in its web version, you need to edit the file in which you will implement it (for example, index.html) in a code editor.

The CMP is loaded by declaring a variable and loading a file. In the code below, you need to replace the URL {{URL}} with the URL that we will provide you, containing the CMP configuration; it will be hosted on the Sibbo server. Include the variable and the JavaScript file load on all pages that load the CMP within the <head> tag of the page, as follows:

  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>
The charset="utf-8" attribute is important because, without it, the text may appear with incorrect characters.

The load must be included as early as possible in the code. This is because the API (sibbo-cmp-router.js) must be loaded before any other script starts making requests.

If you are not using the Sibbo refloating link in the configuration, it is mandatory to add a link or button with the text "Cookies" or "Cookie Settings" to the page hosting the CMP. This should trigger the method SibboCMP.open(), thus refloating the CMP.

Example:

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

For integrating the CMP with programmatic advertising, refer to the section "CMP Methods" and the section "CMP Events".

Web implementation (superfast version)


You must edit the file that will contain the CMP (for example: index.html) in a code editor.

Loading the CMP is done by reading two javaScript files and a configuration JSON file:
  1. sibbo-cmp-loader.js This file is hosted on the Sibbo server, it checks if the CMP core should be loaded
  2. sibbo-cmp-core.js This file is hosted on the Sibbo server, it is the core of the CMP
  3. JSON configuration file This file is hosted on the Sibbo server, it has the configuration of the CMP
You have to include calls to these files on all pages that load the CMP within the <head> tag of the page, as follows.

You have to replace the URL {{URL}} in the code below, with the URL that we will provide and that has the JSON CMP configuration file, it will be hosted on the Sibbo server, note that it is enclosed in quotes.
  1. <html>
  2.        <head>
  3.             ...
  4.             <script defer src="https://tv.sibbo.net/v2/sibbo-cmp-loader.js" charset="utf-8"></script>                        
  5.             
  6.             <script>
  7.                     function onContentLoaded() {

  9.                         SibboCMPLoader.init("https://tv.sibbo.net/v2/sibbo-cmp-core2.js", "{{URL}}");
  10.                         
  11.                     }

  13.                     if (document.readyState === "loading") {

  15.                         document.addEventListener("DOMContentLoaded", onContentLoaded);

  17.                     } else {

  19.                         onContentLoaded();

  21.                     }
  22.             </script>
  23.                                                                  
  24.             ...
  25.       </head>
  26. </html>

The charset="utf-8" attribute is important, since without it the text can appear with wrong characters, the defer attribute is also important so that sibbo-cmp-loader.js is executed once the page has been loaded (the DOM).

If you are not using the Sibbo refloat link in the configuration, it is mandatory to add to the page that hosts the CMP, a link or button with the text Cookies or Cookie Configuration, which triggers the method SibboCMPLoader.openCmpConfig(true), this will refloat the CMP.

Example:

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

For the integration of the CMP with programmatic advertising, see the section Superfast Web methods and the section Superfast WEB events

AMP basic implementation

If the version you want to implement is for AMP, you must follow the instructions below:

Add to the <head> tag:
  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>

Add to the <body> tag, replacing the {{DOMAIN}} and {{URL}} variables with the information sent to you:
  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>
it is mandatory to add to the page that hosts the CMP, a link or button with the text Cookies or Cookie configuration.

Example
  1. <button on="tap:sibboCMPLayer.prompt()" class="">Cookie configuration</button>                                                               
For the integration of the CMP with programmatic advertising, see the section Normal Web / AMP methods and the section Normal Web / AMP events

Notice in the code the property "overlay": true. this property covers the rest of the page with a semi-transparent layer and blocks the general scrolling of the page, focusing attention on the CMP. Once the CMP is closed, the semi-transparent layer disappears and the scroll is unlocked. If you don't want this behavior set the property to false: "overlay": false.