Installing Osano on AMP pages

How to implement and use the AMP version of the Osano Consent Manager.

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 Manager 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 Manager configuration on https://my.osano.com.

  2. Publish your configuration. Your osano.js will contain your Customer ID and your Configuration ID:

    https://cmp.osano.com/CustomerID/ConfigurationID/osano.js

  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

The Osano Consent Manager for AMP (AMP-CM) works a bit differently from the full Osano Consent Manager (CM). While the full CM is loaded on each page and records and enforces user consent, the AMP-CM is a delegate of the amp-consent component. The amp-consent component loads the AMP-CM in an iframe and the AMP-CM 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 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, the Osano application 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 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, the Osano application 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 the CM 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 CM’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 the Osano CM will send to the amp-consent component.

The update-cache item is not used by the Osano CM but causes the amp-consent component to request updated consent from the Osano CM 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 the Osano CM 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 CM configuration recently so that it is available to the CM.

<!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>