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>
Comments
0 comments