Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!doctype html>
<html> 
  <head>
    <script type="text/javascript">
        var _iub = _iub || [];
        _iub.csConfiguration = {
            "lang": "en",
            "siteId": 896537, //use your siteId
            "cookiePolicyId": 8207462, //use your cookiePolicyId
            "consentOnContinuedBrowsing": false, //avoid consent to be given by scrolling and continued browsing activity (disabled for demo purposes)
            "enableTcf": true, //enable IAB TCF (enableCMP has been replaced by enableTcf)
            "perPurposeConsent": true, //enable per-category consent
            /*
            "tcfPurposes": { //limit the legal basis and choose which TCF purposes to prompt (optional)
                "1": false,
                "2": false,
                "4": "li_only",
                "7": "consent_only"
            },
            */
            "banner": {
                "position": "float-top-center",
                "acceptButtonDisplay": true, //explicit accept button, as requested by IAB
                "customizeButtonDisplay": true //explicit customize button, as requested by IAB
            }
        };
    </script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script> <!-- IAB TCF -->
    <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/safe-tcf-v2.js"></script> <!-- add this line if you don't use prior blocking for vendor scripts -->
    <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
  </head>

  <body>
    <header class="tcf2">
      <div class="wrapper">
        <h1>iubenda Cookie Solution</h1>
        <p>IAB Transparency and Consent Framework v2.0</p>
      </div>
    </header>
    
    <section class="wrapper">
      
      <div class="note">
        <ul>
          <li>Remember to use your own credentials from <a href="https://www.iubenda.com/en/dashboard" target="_blank">your iubenda account</a></li>
          <li>Be sure to <mark>open your browser in a private/incognito window</mark> to test the saving of consent (if you've accepted by mistake, <a href="#" id="reset-btn">reset consent</a> and refresh the page to return to the starting point)</li>
        </ul>
      </div>
      
      <p>Major advertising networks now require publishers to gain consent before showing personalized ads. You can meet this requirement with the IAB Transparency and Consent Framework and our <a href="https://www.iubenda.com/en/cookie-solution" target="_blank">Cookie Solution</a>.</p> 
      
      <div class="tip">
        <p>💡 To see this feature in action, click on <strong>advertising preferences panel</strong> or <strong>Learn more and customize &rarr; Targeting & Advertising &rarr; Customize advertising tracking</strong>.</p>
      </div>
      
      <p>To set it up:</p>
      
      <h4>1. Enable the IAB Transparency and Consent Framework</h4>
      
      <p>On the configurator:</p>
      
      <img src="https://help.iubenda.com/wp-content/uploads/2020/04/cs-tcf2-option-en.png" style="width: 480px;" />
      
      <p>More options available in the Advanced View.</p>
      
      <h4>2. Provide explicit Accept and Customize buttons</h4>
      
      <p>On the configurator:</p>
      
      <img src="https://help.iubenda.com/wp-content/uploads/2020/04/cs-tcf2-accept-customize-en.png" style="width: 480px;" />
      
      <p>More options available in the Advanced View.</p>
      
      <h4>3. Collect consent to ad personalisation</h4>
      <p>In order for vendors to read the consent properly, the <code>__cmp</code> function that the CMP (iubenda) makes available must be present. This function is only available after consent has been collected. There are two methods:</p>
      <ul>
        <li>directly blocking the vendor scripts (using one of the <a href="https://www.iubenda.com/en/help/3081" target="_blank">prior blocking methods</a> supported by our Cookie Solution), then executing them only after consent has been collected; or</li>
        <li>not directly blocking the vendor scripts, but rather, ensuring that the <code>__cmp</code> function is loaded before the vendor scripts are loaded. In order to do it, enable the "Synchronous activator" option on the configurator. It will add an extra script (<code>safe-tcf-v2.js</code>) to your code.</li>
      </ul>
      
      <p>More details <a href="https://www.iubenda.com/en/help/7440#consent-to-ad-personalisation" target="_blank">here</a>.</p>
      
      <h4>4. Provide a link/button that allows your users to reopen the consent modal and edit their preferences</h4>
      
      <p>To implement, just add the <code>iubenda-advertising-preferences-link</code> class to a custom link or button:</p>
      
      <a href="#" class="iubenda-advertising-preferences-link btn">Update your advertising tracking preferences</a>
      
      <p>Once clicked, the link above will trigger the opening of the advertising tracking settings modal.</p>
      
      <div class="tip">
        <p>⚠️ To meet IAB's requirements, please note that <strong>if you don't implement this class, we'll automatically display a small widget that hovers on your pages</strong>.</p>
      </div>
      
      <hr />
      
      <h3>Enhanced publisher options</h3>
      <p>Given that TCF v2.0 has 10 purposes:</p>
      
      <ol>
        <li>Store and/or access information on a device</li>
        <li>Select basic ads</li>
        <li>Create a personalised ads profile</li>
        <li>Select personalised ads</li>
        <li>Create a personalised content profile</li>
        <li>Select personalised content</li>
        <li>Measure ad performance</li>
        <li>Measure content performance</li>
        <li>Apply market research to generate audience insights</li>
        <li>Develop and improve products</li>
      </ol>
      
      <p>With this version you can:</p>
      
      <ul>
        <li><strong>limit the legal basis</strong> to consent only or to legitimate interest only, as well as both; and</li>
        <li><strong>choose which TCF purposes to prompt</strong>.</li>
      </ul>
      
      <p>Let's see how to do this. Thanks to <code>tcfPurposes</code>, in the following example we'll:</p> 
      <ul>
        <li>disable the purpose number 1 ("Store and/or access information on a device", set to <code>consent_not_needed</code>, possible only if our legislation does not require consent for it)</li> 
        <li>disable the purpose number 2 ("Select basic ads"),</li>
        <li>limit the legal basis to legitimate interest only for purpose number 4 ("Select personalised ads"), and</li> 
        <li>limit the legal basis to consent only for purpose number 7 ("Measure ad performance")</li>
      </ul>
      
      <pre><code>
      _iub.csConfiguration = {
        "lang": "en",
        "siteId": 896537, //use your siteId
        "cookiePolicyId": 8207462, //use your cookiePolicyId
        "enableTcf": true,
        "tcfVersion": 2,
        ...
        "tcfPurposes": {
            "1": "consent_not_needed",
            "2": false,
            "4": "li_only",
            "7": "consent_only"
        },
        "tcfPublisherCC": "DE",
        "isTCFConsentGlobal": false,
        "banner": {
          ...
        }
      }
      </code></pre>
      
      <p>These settings can also be managed through the configurator (advanced view).</p>

      <p>In addition <strong>you can choose which vendors to prompt</strong>. This option must be enabled within the Cookie Solution configurator - and not just manually written into the code - for it to be effective.</p>
      
      <hr />
      
      <h3>Result</h3>
      <p>The "Learn more and customize" button and the "advertising preferences panel" link will allow the user to set <a href="#" class="iubenda-advertising-preferences-link">advertising tracking preferences</a>.</p>
      
      <hr />
      
      <h3>Learn more</h3>
      <div class="tip">
        <p>Read <a href="https://www.iubenda.com/en/help/23271" target="_blank">our transition guide</a> to understand all the new features and benefits that come with the Transparency & Consent Framework v2.0</p>
      </div>
      
      <p>Other helpful resources:</p>
      <ul class="guides">
        <li><a href="https://www.iubenda.com/en/help/7440" target="_blank">The complete guide to IAB TCF and iubenda's Consent Management Platform</a></li>
        <li><a href="https://www.iubenda.com/en/help/1177" target="_blank">Cookie Solution - Getting Started</a></li> 
        <li><a href="https://www.iubenda.com/en/help/3831" target="_blank">How to Customize the Look and Behavior of the Cookie Banner (Beginner's Guide)</a></li>
        <li><a href="https://www.iubenda.com/en/help/1205" target="_blank">How to Configure Your Cookie Solution (Advanced Guide)</a></li>
        <li><a href="https://www.iubenda.com/en/help/3081" target="_blank">Introduction to the Prior Blocking of Cookies</a></li>
      </ul>
      
    </section>
  </body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console