Resurface privacy manager (AMP)

The postPromptUI parameter allows your organization to implement a link/button on your AMP property that end-user's can click to resurface the privacy manger. Using this link/button, end-users can directly manage their consent preferences on an ongoing basis without having to re-encounter your organization's first layer message for the AMP property.

`postPromptUI` parameter

The postPromptUI parameter in your <amp-consent> component defines the page element (UI) that should be displayed to users (e.g. button or link styling).

<amp-consent id='consent' layout='nodisplay'>
   <script type="application/json">
      {
         "consentRequired": "remote",
         "consentInstanceId": "SourcePoint",
         "checkConsentHref": "https://sp-cdn.example.com/wrapper/tcfv2/v1/amp-v2",
         "promptUISrc": "https://sp-cdn.example.com/amp/index.html?authId=CLIENT_ID",
         "postPromptUI": "consent-ui",
         "uiConfig": {"overlay":true},
         "clientConfig": {
            "accountId": 222,
            "mmsDomain": "https://sp-cdn.example.com",
            "propertyHref": "https://amp.property.tcfv2",
            "propertyId": 1234,
            "privacyManagerId": 987654,
            "isTCFV2": true,
            "pmTab": "purposes",
            "stageCampaign": false,
            "targetingParams": {   "color": "red"   }
         }
      }
   </script>
</amp-consent>

The privacy manager can be displayed by adding the following on attribute to a link or button on your property:

on="tap:consent.prompt(consent=SourcePoint)"

<a on="tap:consent.prompt(consent=SourcePoint)" target="_self" href="#" id="consent-ui">Privacy Settings</a>

<div id="consent-ui">
   <button on="tap:consent.prompt(consent=SourcePoint)">Privacy Settings</button>
</div>

`postPromptUI` example

The following is a code example using a property from a demo account and the default domain from Sourcepoint. In this example, the postPromptUI parameter has been set to "consent-ui", and the privacy manager will be opened through a button:

<!doctype html>
   <html amp lang="en">
   <head>
      <meta charset="utf-8">
      <title>Simple AMP implementation</title>
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <!-- required for the amp-consent component -->
      <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
      <!-- required to sync auth_id with publishers domain and Google.com domain -->
      <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
   </head>
   <body>
      <h1>Simple AMP code example - Sourcepoint</h1>
      <amp-analytics>
         <script type=application/json>
            {
               "linkers":{"authId":{"ids":{"_a":"CLIENT_ID(AMP-CONSENT)"},"enabled":true,"proxyOnly":false}},"cookies":{"enabled":true,"authId":{"value":"LINKER_PARAM(authId, _a)"}}
            }
         </script>
      </amp-analytics>
      <amp-consent id="consent" layout="nodisplay">
         <script type="application/json">
            {
               "consentInstanceId": "Sourcepoint",
               "consentRequired": "remote",
               "checkConsentHref": "https://sp-cdn.sp-demo.com/wrapper/tcfv2/v1/amp-v2?authId=CLIENT_ID",
               "promptUISrc": "https://sp-cdn.sp-demo.com/amp/index.html?authId=CLIENT_ID",
               "mmsDomain": "https://sp-cdn.sp-demo.com",
               "postPromptUI": "consent-ui",
               "cookies": {
                  "enabled": true,
                  "AMP-CONSENT": {    "value": "LINKER_PARAM(authId, _a)" }
               },
               "clientConfig": {
                  "accountId": 1732,
                  "propertyHref": "https://amp.newscriptdemo.com",
                  "propertyId": 19118,
                  "privacyManagerId": 547514,
                  "isTCFV2": true,
                  "pmTab": "purposes",
                  "stageCampaign": false,
                  "targetingParams": {    "color": "red"  }
               }
            }
         </script>
      </amp-consent>
      <div id="consent-ui">
         <button on="tap:consent.prompt(consent=SourcePoint)">Privacy Settings</button>
      </div>
   </body>
</html>

Display privacy manager link/button based on end-user location

For organizations who have implemented both GDPR and U.S. Privacy (Legacy) on their AMP property, you will only want your end-user to interact with the correct privacy manager based upon the region to which the end-user belongs (e.g. an end-user who is currently in the Berlin and has opted into all choices for GDPR TCF should only be able to manage their opt in status for GDPR TCF on an ongoing basis while in the EU).

In order to hide/display the appropriate privacy manager link based on the location of the end-user:

Create buttons on your AMP property for each ISOCountryGroups within the geoOverride parameter in the <amp-consent> component.
Apply CSS styling to hide/show the buttons based on the postPromptUI for each ISOCountryGroups within the geoOverride parameter in the <amp-consent> component.

<div id="eea-consent-ui">
   <button style="background: transparent" on="tap:consent.prompt(consent=SourcePoint)"Privacy Settings (GDPR)</button>
</div>
<div id="ccpa-consent-ui">
   <button style="background: transparent" on="tap:consent.prompt(consent=SourcePoint)"Do not sell my personal information (CCPA)</button>
</div>

<style type="text/css">
    body.amp-geo-group-eea #ccpa-consent-ui ,
    body:not(.amp-geo-group-eea) #eea-consent-ui {
        display: none;
    }
  </style>

Resurface privacy manager (AMP)

postPromptUI parameter

postPromptUI example

Display privacy manager link/button based on end-user location

Articles in this section

Comments

`postPromptUI` parameter

`postPromptUI` example