Skip to main content

Consentmanager

Before integrating Contentpass, please complete the following general steps first

General Tasks​

Here, all general tasks are listed. Contentpass does not directly obtain or store any user consent, or any other personal data for that matter. We have integrations with several Consent Management Providers though. Everything CMP-specific is described in the according sub-pages.

Steps:

  1. Make sure no third party resources are loaded without consent
  2. Sign up for a Contentpass account
  3. Configure CNAME Record for Contentpass Session Management
  4. Mention Contentpass in Privacy Policy
  5. Integrate Contentpass with your CMP
  6. Further improvements

Consentmanager suggests two methods for blocking third party resources until after consent in their documentation.

You must use the "Manual Blocking" method. This will involve more work than using the "Automatic Blocking" option, but it is the only way to ensure that Contentpass works properly.

Consentmanager provides thorough instructions on how to handle updating your website code to block resources via async script tags, iframes and more. Please follow their instructions carefully. Furthermore, Consentmanager also provides documentation on dynamically blocking embeds via opt-in consent.

We have included an example of how to block third party resources loaded via scripts on your page, using the methods and examples provided by your CMP.

External Resource example:

<!-- Before Modification -->
<script
  async
  type="text/javascript"
  src="https://third-party-resource.net/en_US/script.js"
></script>

<!-- After Modification -->
<script
  async
  type="text/plain"
  data-cmp-src="https://third-party-resource.net/en_US/script.js"
  class="cmplazyload"
  data-cmp-vendor="123"
></script>

Inline Resource example:

<!-- Before Modification -->
<script type="text/javascript">
  // some code that loads a third party
</script>

<!-- After Modification -->
<script type="text/plain" class="cmplazyload" data-cmp-vendor="123">
  // some code that loads a third party
</script>

Iframe/Embed Blocking​

  1. Change the src="…" attribute of the iframe to data-cmp-src="…"
  2. Add a new src="about:blank" attribute to the iframe
  3. If a class="…" exists, add cmplazyload to the value. If class does not exist, add the attribute including the value class="cmplazyload"
  4. Add a new attribute data-cmp-vendor="x" and/or data-cmp-purpose="x" in order to fire the code only if consent for this vendor and purpose is given. More information on where to find the IDs here.
<!-- Before Modificaiton -->
<iframe
  width="300"
  height="250"
  noresize="noresize"
  scrolling="no"
  frameborder="0"
  marginheight="0"
  marginwidth="0"
  src="https://www.youtube.com/embed/xvFZjo5PgG0"
  allowTransparency="true"
>
</iframe>

<!-- After Modification -->
<iframe
  width="300"
  height="250"
  noresize="noresize"
  scrolling="no"
  frameborder="0"
  marginheight="0"
  marginwidth="0"
  class="cmplazyload"
  src="about:blank"
  data-cmp-vendor="123"
  data-cmp-src="https://www.youtube-nocookie.com/embed/xvFZjo5PgG0"
  allowTransparency="true"
>
</iframe>

Dynamic Content Blocking:

Dynamic Content Blocking enables visitors to access specific content on your page while generally rejecting consent.

You can find more about it here.

Blocking Resources For Contentpass Users​

Consentmanager also provides a custom-feature for blocking resources solely for Contentpass users, by adding the following attribute to inline scripts: data-cmp-block="contentpass". Please note that this is not to be used in replace of the manual blocking method but as an additional feature. The primary usage would be to avoid loading a resource for Contentpass users, regardless of the state of consent.

<!-- Example code on how to block scripts for contentpass users -->
<script
  class="cmplazyload"
  data-cmp-block="contentpass"
  data-cmp-src="https://www.adserver.de/banner/script.js"
></script>
info

Visit our docs on Third Party Resources for more information on how to block third parties and the technical details on why this is important.

1. Sign up for Contentpass​

Go to publisher.contentpass.net and create your publisher account. The wizard will guide you through the steps of creating a publisher profile as well as the first property. The property's status page will present the required steps for a successful Contentpass integration. This document contains further details that should help you with the process.

2. Configure CNAME Record for Contentpass Session Management​

Since 3rd-party cookies don't work reliably anymore in most browsers, Contentpass subscribers must be identified using a 1st-party session.

To simplify handling of these 1st-party sessions, Contentpass provides an endpoint that must be configured behind a CNAME subdomain of the publisher's first-party domain.

In the following example we assume that the publisher's website is: https://www.example.com and the propertyId is 1234abcd. You can find your propertyId in the settings of your property. Can't find it? Get in touch with us to obtain your propertyId.

A CNAME must be set up as follows:

cp.example.com. 300 IN CNAME 1234abcd.12.with.contentpass.net.

Once the CNAME has been set up, Contentpass will automatically provision the required SSL certificates.

3. Mention Contentpass in Privacy Policy​

While we do not process any data of non-subscribers, we receive the IP addresses of your visitors for technical reasons. Please inform your visitors about this data processing and link to our privacy policy by including the following snippet on your privacy policy page:

Contentpass


Auf unserer Website bieten wir Ihnen einen Service zum werbe- und tracking-freien Zugang mit Contentpass an. Dies ist ein Angebot der Content Pass GmbH, Wolfswerder 58, 14532 Kleinmachnow, Deutschland. Beim Abschluss des Service wird Contentpass Ihr Vertragspartner.


Um Ihnen diesen Service auf unserer Website anzuzeigen und damit anbieten zu können, verarbeitet Contentpass, in unserem Auftrag, mit dem Besuch unserer Website Ihre IP-Adresse. Für die Registrierung sowie die Vertragsabwicklung des Contentpass und die damit einhergehende Datenverarbeitung ist Contentpass Verantwortlicher im Sinne der DSGVO. Wir sind ausschließlich Verantwortlicher für die Verarbeitung Ihrer IP-Adresse. 


Grundlage für die Datenverarbeitung der IP-Adresse, im Rahmen unserer Auftragsverarbeitung mit Contentpass, ist unser berechtigtes Interesse Ihnen die Möglichkeit zu bieten, unsere Website werbe- und tracking-frei aufrufen zu können und Ihr Interesse an der Nutzung unserer Website praktisch ohne Werbung und Tracking [Art. 6 Abs. 1 lit. f) DSGVO]. Zudem erfüllen wir hiermit die rechtliche Verpflichtung, eine rechtskonforme Einwilligung in einwilligungsbedürftige Datenverarbeitungen einzuholen [Art. 6 Abs. 1 lit. c) DSGVO].



Bitte klicken Sie auf die folgenden Links, um mehr zum Datenschutz bei Contentpass zu erfahren, sich in Ihr Contentpass-Konto einzuloggen, oder sich für Contentpass zu registrieren.

Note:​

Link target for login:

javascript: cp('login');

Link target for signup:

javascript: cp('signup');
tip

Since these are not quite ordinary links, it may happen that your CMS does not support them. In that case, you can simply link to https://www.contentpass.net/login and https://www.contentpass.net/signup instead.

4. Consentmanager Contentpass integration​

Consentmanager offers good documentation for integrating with Contentpass. This guide covers all the steps to get started: Working with Contentpass integration.

In the consentmanager documentation they mention 2 important values, Contentpass ID and URL. The propertyId mentioned in this guide is what consentmanager refers to as a Contentpass ID, and the baseUrl is the URL.

Description of baseUrlThe baseUrl must be a full URL that contains the CNAME Contentpass has assigned to your property, along with the full protocol, for example: https://cp.example.com

You can view the CNAME of your property via the publisher's dashboard, under the settings tab when viewing your property.


You should select the "Accept" button as the only option in the Welcome page section of Consentmanager's design settings. You should make sure that all the buttons that are not shown have the same font-sizes and colors as the "Accept" button, otherwise Consentmanager will mark the design as not compliant with TCF and prevent you from monetizing your page.

Please make sure to first and foremost enable TCF for Consentmanager - an explanation on how to can be found here.

For users that have a paid Contentpass subscription you need to block all third party requests from your website. We recommend using Consentmanager's Manual Blocking and host libraries and fonts locally.

Regarding dynamic content for example youtube embeds, Contentpass users must give their consent before any embeds are loaded. To easily implement this we recommend using Dynamic Content Blocking.

To preview the Contentpass design follow these steps:

  1. Set targeting of the Contentpass enabled design to a country where usually no visitors are expected to come from

  2. Activate the Contentpass design by entering the propertyId and baseUrl

  3. Turn off A/B testing

  4. Use the

    cmpdesign Site-URL parameter

    , ?cmpdesign=DESIGN_ID&cmpdebug to preview the Contentpass design.
    You can find the DESIGN_ID in the URL when editing a Consentmanager Design (

    https://www.consentmanager.de/client/designs_edit_new.php?w=DESIGN_ID

    )

Once everything looks good, remove the targeting limitations from the Contentpass design and make sure that the Contentpass design is always being shown by turning off Consentmanager's "Automatic Optimization" (A/B Testing).

danger

Please make sure that each Consentmanager design is used on only one property as otherwise the Contentpass login and your property reporting will be broken.

Use window.cmp_noscreen on selected pages to prevent the layer from being shown there. Make sure the value is set before the Consentmanager stub. The usage looks like this:

<link rel="stylesheet" href="https://cdn.consentmanager.net/delivery/cmp.min.css" />
<script>window.cmp_noscreen = true;</script>
<script>/* Consentmanager stub goes here... */</script>

See Consentmanager's client-side-configuration-options for further details.

Allow the user to open the CMP settings​

To open the CMP settings layer, Consentmanager provides a simple SDK function: __cmp('showScreenAdvanced')

You can easily trigger this function by adding a link to your footer with an onclick handler like this:

<a href="#" onclick="__cmp('showScreenAdvanced');return false;">Open Consent Settings</a>
Please read Consentmanager's documentation for more in-depth instructions.

5. Further Improvements​

5.1 Performance Optimizations (optional)​

Providing a reliable and high-performant service is one of our highest concerns. One such way is by ensuring our now.js bundle is as small as possible (~30 KB) and also having our components loaded asynchronously, so chunks are fetched only as needed.

Speed up connection to our servers​

One way in which you can improve the initial loading time of your page is by adding a preconnect link element to the head of your website. This will tell the browser to initiate a connection to our servers as early as possible so it is ready when our actual SDK is requested.

warning

The following snippet contains a placeholder value that you need to replace with the correct value for your property

  • The href placeholder https://cp.example.com should use the CNAME created for your property. You can find the correct values for the property on the publisher dashboard.

You can find the correct values for your property on the Publisher Dashboard

Please replace the href placeholder and add the following tag to the head of your page, as high up in the HTML as possible.

<link rel="preconnect" href="https://cp.example.com" />

You can also initiate a preconnect via the Link HTTP header

loading the SDK

Additionally, incorporating the fetchPriority attribute in our SDK script tag, setting its value to "high", and placing it high up inside the element of the HTML can significantly enhance the page's response time. This is because the browser can immediately fetch the resources it needs to render the first layer.

Faster Loading​

In some rare situations you may want to load third-parties without basing it on TCF-Consent, but not load them for Contentpass users. There is a way to accomplish this without relying on our backend, thus without additional request. Please consult our Loading third-parties for non-subscribers only section in the third-party docs for details.

5.2 Improving UX for Contentpass users​

We offer a few methods for you to recognize if the current visitor is a Contentpass subscriber, so you can improve the user experience for them. This can be achieved on both the client and server side.

Client-Side Javascript​

To check if a Contentpass subscriber is authenticated on the front-end we recommend using our SDK method: cp('authenticate'), see our web-sdk docs for more details. The callback argument will return an object that contains all the up-to-date information you need to determine a user with a valid Contentpass session.

cp('authenticate', function (error, user) {
  if (error) {
    // Error handling depending on use case
    return;
  }

  if (user.isLoggedIn() && user.hasValidSubscription()) {
    // User has valid subscription
  } else {
    // User has no valid subscription
  }
});

The .cpauthenticated CSS class​

Improving User Experience

To avoid having lots of empty ad-slots for Contentpass users, we provide a way to recognize Contentpass users on the client-side via CSS.

We provide a special css selector cpauthenticated which allows you to easily change the page styling depending on the user's authentication status. When an authenticated user is logged-in the class name cpauthenticated is added to the class list of the body tag.

This provides you with the means to easily customise any child elements without having to check the subscription status yourself.

info

Please ensure that this CSS rule is applied as early as possible on your page to avoid layout shifts of the page content! Adding it to the first CSS file that is loaded on your page is recommended, or as high up as possible in the <head> of your page.

Examples​

Basic example: hiding all containers with a specific class for authenticated users​

This basic css can be added to your stylesheet to hide all containers with the class ad-container as soon as the user is logged in with Contentpass

body.cpauthenticated .ad-container {
  display: none;
}
Advanced example: hiding containers which have anchor tags with a specific href​

This example shows how to hide all containers with the class ads which contain an anchor tag with an href starts with http and that does not contain example.com/. This is useful to e.g. hide all external ads that are not from your own domain while e.g. still showing internal sponsored articles.

<html lang="en">
    <head>
      <style>
        body.cpauthenticated
          .ads:has(a[href^="http"]:not([href*="example.com/"])) {
          display: none;
        }
      </style>
    </head>

    <body class="cpauthenticated">
      <div class="ads">
        <p>adserver.com</p>
        <a href="https://adserver.com/?redirect=123">
          <img src="..." />
        </a>
      </div>

      <div class="ads">
        <p>example.com</p>
        <a href="https://example.com/mysponsoredarticle.html">
          <img src="..." />
        </a>
      </div>
    </body>
  </html>

Conclusion​

The cpauthenticated class provides developers with a convenient way to manage user authentication states and dynamically adjust the display of elements within their web applications. By leveraging the cpauthenticated class, developers can create a more personalized and seamless user experience for their audience.

warning

We do not recommend relying on this as a robust method for recognizing Contentpass users for business logic. CSS classes can be easily manipulated by the user or any other javascript running on the page. Additionally there is no guarantee that the CSS styles are applied before your javascript runs.

For recognizing Contentpass users on the backend we provide a _cpauthhint cookie that we set on the user's browser. If the user is a logged-in Contentpass user the cookie will have a value of 1 and 0 if they are logged out.

The following is a simplified-code example of how one might check for the cookie on a node.js server, in order to serve content without anti-adblocking messages for Contentpass users and only for regular users.

// Middleware to check the "_cpauthhint" cookie
function checkUserType(req, res, next) {
  const cpAuthHintCookie = req.cookies._cpauthhint;

  // Check if the cookie exists and has the value for a logged in CP user
  req.isLoggedInCpUser = cpAuthHintCookie === '1';

  next();
}

// Route that uses the authentication middleware
app.get('/dashboard', checkUserType, function (req, res) {
  // Render different views for ContentPass users and regular users
  if (req.isCpUser) {
    res.render('dashboard', { user: 'ContentPassUser', showAdblockCommunication: false });
  } else {
    res.render('dashboard', { user: 'RegularUser', showAdblockCommunication: true });
  }
});