Skip to main content

Using Osano CMP with AMP

This page details how to implement and use the AMP version of Osano Consent Management Platform (CMP).

Features​

  • Share user consent between your AMP and full sites. Users only have to consent once.
  • Share your configuration between both sites as well. The same UI will be displayed and any changes will be applied to both.
  • Users may update their consent preferences through the AMP version.
  • Conforms to the amp-consent component specification so it is fully AMP compliant.

Quick Start​

The Osano Consent Management Platform for AMP uses the amp-consent component. To get started, you can follow the steps below. See the bottom of this page for a full example.

All steps are required. See the Options section below for modifying behavior.

  1. Enable Cross Domain Support for your Consent Management configuration on https://my.osano.com.

  2. Publish your configuration. Note your customer ID and configuration ID.

  3. Include the amp-consent component script in your page's <head> tag:

    <head>
        ...
        <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
     </head>

  4. Include the amp-consent component itself in your page's body:

    <body>
      ...
      <amp-consent layout="nodisplay" id="userConsent">
        <script type="application/json">
        {
          "consentInstanceId": "consent-id",
          "consentRequired": true,
          "clientConfig": {
            "customerId": "YOUR CUSTOMER ID",
            "configId": "YOUR CONFIGURATION ID"
          },
          "promptUISrc": "https://cmp.osano.com/amp.html",
          "purposeConsentRequired": [
            "analytics",
            "essential",
            "marketing",
            "opt_out",
            "personalization",
            "storage",
            "update-cache"
          ],
          "postPromptUI": "post-consent-ui"
        }
        </script>
        <div id="post-consent-ui" style="position: relative; height: 56px">
          <button on="tap:userConsent.prompt" title="Open consent preferences panel" aria-label="Open consent preferences panel" style="position: absolute; right: 0; cursor: pointer; opacity: 0.9; height: 40px; width: 40px; background: none; border: none; padding: 0;">
            <svg width="40" height="40" viewBox="0 0 71.85 72.23" xmlns="http://www.w3.org/2000/svg">
              <path d="m67.6 36.73a6.26 6.26 0 0 1 -3.2-2.8 5.86 5.86 0 0 0 -5.2-3.1h-.3a11 11 0 0 1 -11.4-9.5 6 6 0 0 1 -.1-1.4 9.2 9.2 0 0 1 .4-2.9 8.65 8.65 0 0 0 .2-1.6 5.38 5.38 0 0 0 -1.9-4.3 7.3 7.3 0 0 1 -2.5-5.5 3.91 3.91 0 0 0 -3.5-3.9 36.46 36.46 0 0 0 -15 1.5 33.14 33.14 0 0 0 -22.1 22.7 35.62 35.62 0 0 0 -1.5 10.2 34.07 34.07 0 0 0 4.8 17.6.75.75 0 0 0 .07.12c.11.17 1.22 1.39 2.68 3-.36.47 5.18 6.16 5.65 6.52a34.62 34.62 0 0 0 55.6-21.9 4.38 4.38 0 0 0 -2.7-4.74z" stroke-width="3" style="fill: rgb(255, 255, 255); stroke: rgb(41, 36, 106)"></path>
              <path d="m68 41.13a32.37 32.37 0 0 1 -52 20.5l-2-1.56c-2.5-3.28-5.62-7.15-5.81-7.44a32 32 0 0 1 -4.5-16.5 34.3 34.3 0 0 1 1.4-9.6 30.56 30.56 0 0 1 20.61-21.13 33.51 33.51 0 0 1 14.1-1.4 1.83 1.83 0 0 1 1.6 1.8 9.38 9.38 0 0 0 3.3 7.1 3.36 3.36 0 0 1 1.2 2.6 3.37 3.37 0 0 1 -.1 1 12.66 12.66 0 0 0 -.5 3.4 9.65 9.65 0 0 0 .1 1.7 13 13 0 0 0 10.5 11.2 16.05 16.05 0 0 0 3.1.2 3.84 3.84 0 0 1 3.5 2 10 10 0 0 0 4.1 3.83 2 2 0 0 1 1.4 2z" stroke-width="3" style="fill: rgb(255, 255, 255); stroke: rgb(41, 36, 106)"></path>
              <g style="fill: rgb(55, 205, 143)">
                <path d="m26.6 31.43a5.4 5.4 0 1 1 5.4-5.43 5.38 5.38 0 0 1 -5.33 5.43z"></path>
                <path d="m25.2 53.13a5.4 5.4 0 1 1 5.4-5.4 5.44 5.44 0 0 1 -5.4 5.4z"></path>
                <path d="m47.9 52.33a5.4 5.4 0 1 1 5.4-5.4 5.32 5.32 0 0 1 -5.24 5.4z"></path>
              </g>
            </svg>
          </button>
        </div>
      </amp-consent>
    </body>

  5. Replace the customer ID and configuration ID in the JSON above with the values from step 1.

  6. Update your AMP page to appropriately classify contents per the AMP documentation. We recommend using the granular consent attribute (data-block-on-consent-purposes). The value of this attribute must match the classification it belongs to: analytics, marketing, or personalization. (Marking components as essential is optional.)

Implementation Details​

Osano CMP for AMP works a bit differently from the full version of Osano CMP. While the full version is loaded on each page and records and enforces user consent, the AMP version is a delegate of the amp-consent component. The amp-consent component loads Osano CMP for AMP in an iframe and it then prompts the user for consent, or if they have already provided it (using either your full site or your AMP site), sends their consent back to the component. The component then handles enforcement of the user's consent preferences.

It's important to note that you must tag your components with the necessary attributes (data-block-on-consent and the like) in order for the amp-consent component to work properly. See the component's documentation for details.

Options​

Specifying User Data​

If you have Cross-Device Consent enabled, use this property to set a unique identifier for the current user. See the API documentation for details on limitations and implications.

<script type="application/json">
{
  ...
  "clientConfig": {
    "customerId": ...,
    "configId": ...,
    "userData": "unique user data"
  },
  ...
}
</script>

Specifying a Banner Height​

By default, the banner is set to 80vh, or 80% of vertical height. You may override this value by passing a height property in the clientConfig section of the amp-consent configuration JSON. This example provides some documentation on acceptable values:

Here, the [height] is a string that represents the viewport height that the iframe should take. A viewport height between 30 and 60, inclusive, will tell amp-consent to style the iframe in a bottom sheet. A viewport height greater than 60 and less than or equal to 80 will tell amp-consent to style the iframe as a centered modal.

Additionally, the following constraints appear to be true but could change at any time with updates to the amp-consent component:

  • The height must always be expressed in units of vh.
  • The minimum height is 10vh. Anything less will result in this height.
  • The maximum height is 80vh. Anything greater will result in this height.
  • However, heights greater than 80vh will be aligned to the bottom of the viewport (similar to behavior for 30 to 60 above) instead of a modal style.
  • Any invalid height value will result in the component's default height of 30vh.

Osano recommends the full banner height of 80vh to accommodate all regions, languages and devices; however, the banner will display properly at smaller heights. We strongly recommend a value of no less than 30vh.

<script type="application/json">
{
  ...
  "clientConfig": {
    "customerId": ...,
    "configId": ...,
    "height": "60vh"
  },
  ...
}
</script>

Forcing a Language​

By default, Osano CMP will select the language for the user based on browser preferences or geography. However, you may override this behavior by adding a language=XX parameter to the query string of the promptUISrc property of the amp-consent configuration JSON. XX must be a two-letter language code that Osano CMP supports otherwise it will default to English.

<script type="application/json">
{
  ...
  "promptUISrc": "https://cmp.osano.com/amp.html?language=es",
  ...
}
</script>

Forcing a Region for the Dialog​

By default, Osano CMP will select the region for a user so that the correct regulations are applied to the dialog. However, you may override this behavior by adding a variant=CODE parameter to the query string of the promptUISrc property of the amp-consent configuration JSON. CODE must be one of the following: one, two, three, four, five, or six. These correspond to the supported Consent Dialog Regions.

Caution: Do not use this in a way that will make you non-compliant with privacy regulations!

<script type="application/json">
{
  ...
  "promptUISrc": "https://cmp.osano.com/amp.html?variant=one",
  ...
}
</script>

Changing the Post-Prompt UI​

The sample configuration on this page will draw an Osano cookie image and place it on the bottom-right of the page after a user consents. The user may then click or tap on this image to open Osano CMP's preferences drawer to change their consent. You may change this to whatever you like: a button, a link, another image, etc. Simply change the markup with the ID post-consent-ui. See the component's documentation for details.

Classification Categories​

The amp-consent configuration JSON on this page includes Osano CMP's set of classification categories for you:

"purposeConsentRequired": [
  "analytics",
  "essential",
  "marketing",
  "opt_out",
  "personalization",
  "storage",
  "update-cache"
]

We strongly recommend that you do not change these as it may take you out of compliance with regulations. These are the signals that Osano CMP will send to the amp-consent component using the granular consent method. Granular consent allows categories of usage, for example consenting to the use of one’s data for personalization but not for marketing purposes. 

Osano also supports a global consent method as fallback if any component or vendor cannot support granular consent. Global consent means that one signal in any category is used to either accept or reject use of one’s data across all categories. Osano CMP will send a global reject signal when the user has denied consent for any category (marketing, analytics, personalization). This allows the user's consent to be respected and for components to function based on the non-granular consent value. For example, this will allow amp-ad components to serve non-personalized advertising on a 'reject' when granular consent is not supported for an ad vendor, rather than blocking ads completely.

The update-cache item is not used by Osano CMP but causes the amp-consent component to request updated consent from Osano CMP on each page load. This makes it possible for users to change their consent preferences on your full site and have those preferences reflected on your AMP site.

Example​

You may try out Osano CMP for AMP by using the following example on AMP Playground. As above, you'll need to replace the clientConfig parameters in the component's JSON. Be sure that you have enabled cross-domain support and published your Consent Management configuration recently so that it is available to Osano CMP.

<!DOCTYPE html>
<html ⚡>
<head>
  <meta charset="utf-8" />
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width" />
  <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>
  <style amp-custom> :root { --space-3: 1.5rem; /* 24px */ } </style>
  <noscript ><style amp-boilerplate> body { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; } </style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
</head>
<body>
  <amp-consent layout="nodisplay" id="userConsent">
    <script type="application/json">
      {
        "consentInstanceId": "consent-id",
        "consentRequired": true,
        "clientConfig": {
          "customerId": "YOUR CUSTOMER ID",
          "configId": "YOUR CONFIGURATION ID"
        },
        "promptUISrc": "https://cmp.osano.com/amp.html",
        "purposeConsentRequired": [
          "analytics",
          "essential",
          "marketing",
          "opt_out",
          "personalization",
          "storage",
          "update-cache"
        ],
        "postPromptUI": "post-consent-ui"
      }
    </script>
    <div id="post-consent-ui" style="position: relative; height: 56px">
      <button on="tap:userConsent.prompt" title="Open consent preferences panel" aria-label="Open consent preferences panel" style="position: absolute; right: 0; cursor: pointer; opacity: 0.9; height: 40px; width: 40px; background: none; border: none; padding: 0;">
        <svg width="40" height="40" viewBox="0 0 71.85 72.23" xmlns="http://www.w3.org/2000/svg">
          <path d="m67.6 36.73a6.26 6.26 0 0 1 -3.2-2.8 5.86 5.86 0 0 0 -5.2-3.1h-.3a11 11 0 0 1 -11.4-9.5 6 6 0 0 1 -.1-1.4 9.2 9.2 0 0 1 .4-2.9 8.65 8.65 0 0 0 .2-1.6 5.38 5.38 0 0 0 -1.9-4.3 7.3 7.3 0 0 1 -2.5-5.5 3.91 3.91 0 0 0 -3.5-3.9 36.46 36.46 0 0 0 -15 1.5 33.14 33.14 0 0 0 -22.1 22.7 35.62 35.62 0 0 0 -1.5 10.2 34.07 34.07 0 0 0 4.8 17.6.75.75 0 0 0 .07.12c.11.17 1.22 1.39 2.68 3-.36.47 5.18 6.16 5.65 6.52a34.62 34.62 0 0 0 55.6-21.9 4.38 4.38 0 0 0 -2.7-4.74z" stroke-width="3" style="fill: rgb(255, 255, 255); stroke: rgb(41, 36, 106)"></path>
          <path d="m68 41.13a32.37 32.37 0 0 1 -52 20.5l-2-1.56c-2.5-3.28-5.62-7.15-5.81-7.44a32 32 0 0 1 -4.5-16.5 34.3 34.3 0 0 1 1.4-9.6 30.56 30.56 0 0 1 20.61-21.13 33.51 33.51 0 0 1 14.1-1.4 1.83 1.83 0 0 1 1.6 1.8 9.38 9.38 0 0 0 3.3 7.1 3.36 3.36 0 0 1 1.2 2.6 3.37 3.37 0 0 1 -.1 1 12.66 12.66 0 0 0 -.5 3.4 9.65 9.65 0 0 0 .1 1.7 13 13 0 0 0 10.5 11.2 16.05 16.05 0 0 0 3.1.2 3.84 3.84 0 0 1 3.5 2 10 10 0 0 0 4.1 3.83 2 2 0 0 1 1.4 2z" stroke-width="3" style="fill: rgb(255, 255, 255); stroke: rgb(41, 36, 106)"></path>
          <g style="fill: rgb(55, 205, 143)">
            <path d="m26.6 31.43a5.4 5.4 0 1 1 5.4-5.43 5.38 5.38 0 0 1 -5.33 5.43z"></path>
            <path d="m25.2 53.13a5.4 5.4 0 1 1 5.4-5.4 5.44 5.44 0 0 1 -5.4 5.4z"></path>
            <path d="m47.9 52.33a5.4 5.4 0 1 1 5.4-5.4 5.32 5.32 0 0 1 -5.24 5.4z"></path>
          </g>
        </svg>
      </button>
    </div>
  </amp-consent>
  <amp-img data-block-on-consent-purposes="essential" src="/static/samples/img/landscape_lake_300x201.jpg" width="300" height="201"></amp-img>
  <amp-iframe data-block-on-consent-purposes="analytics" src="/static/samples/img/story_dog2_portrait.jpg" width="300" height="201">
    <h1 placeholder>Blocked on consent</h1>
  </amp-iframe>
  <amp-ad data-block-on-consent-purposes="marketing" type="a9" data-amzn_assoc_ad_mode="auto" data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5" data-recomtype="async" data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5" width="300" height="250" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302">
  </amp-ad>
</body>
</html>