Serve personalized/non-personalized ads based on consentSince AMP does not allow custom JavaScript, requests for personalized or non-personalized ads are based on the configuration of the amp-consent component and the data-block-on-consent and data-npa-on-unknown-consent attributes. Assuming that you have configured an amp-consent component and used data-block-on-consent to link it to all the <amp-ad> tags on the page:
If the user responds positively to the amp-consent component (the user accepts the consent prompt), the advertisement will be requested normally. If the user responds negatively to the amp-consent component (the user refuses the consent prompt), a non-personalized advertisement will be requested. If the user's response to amp-consent is unknown (the user rejects the consent prompt) By default, no ad requests are sent at all If data-npa-on-unknown-consent is set to true, non-personalized ads will be requested If you configure the amp-geo component to not apply consent based on the user’s geographic location, the request will be sent normally. If your <amp-ad> tag does not use data-block-on-consent, or the amp-consent component is not configured correctly, the request will be sent normally. The following is a configuration example that prompts all users in the EEA to agree, and the resulting behavior is as described above:
In <head></head>
<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-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-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
<body>
<amp-auto-ads type="adsense" data-ad-client="ca-pub-xxxxxxxxx">
</amp-auto-ads>
<!-- First, set up the amp-geo extension. We define a group: `eea` which includes all European Economic Area countries. You must keep this list up-to-date as membership in the EEA may change over time. -->
<amp-geo layout="nodisplay">
<script type="application/json">
{
"ISOCountryGroups": {
"eea": [ "at", "be", "bg", "cy", "cz", "de", "dk", "ee", "es", "fi", "fr",
"gb", "gr", "hr", "hu", "ie", "is", "it", "li", "lt", "lu", "lv", "mt", "nl",
"no", "pl", "pt", "ro", "se", "si", "sk"]
}
}
</script>
</amp-geo>
<!-- Next, set up the consent for users in the `eea` country group -->
<amp-consent layout="nodisplay" id="consent-element">
<script type="application/json">
{
"consents": {
"my_consent": {
"promptIfUnknownForGeoGroup": "eea",
"promptUI": "consent-popup"
}
}
}
</script>
<div id="consent-popup" class="consent-popup">
<div>
<a href="#" on="tap:consent-element.dismiss" class="close-button" role="button" tabindex="0">✕</a>
<p>
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and <a href="https://be.propenda.com/pages/privacyverklaring/">privacy policy</a>.
</p>
<a class="ampstart-btn ampstart-btn-secondary caps text-decoration-none inline-block" on="tap:consent-element.accept" role="button" tabindex="1">OK</a>
</div>
</div>
</amp-consent>
Css file
@keyframes slideUp {
0% {
transform: translateY(100%);
opacity: 0.5;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
amp-consent {
background: white;
box-shadow: rgba(0, 0, 0, 0.26) 0 0 19px 0;
animation: .5s ease-out 0s 1 slideUp;
}
.consent-popup a {
text-transform: none;
font-size: inherit;
text-decoration: none;
}
.consent-popup a.close-button {
position: absolute;
color: #333;
}
.consent-popup .ampstart-btn {
width: 150px;
text-align: center;
}
.consent-popup p {
line-height: 20px;
font-size: 14px;
}
.consent-popup p a {
color: #b60845;
}
.consent-popup div {
display: flex;
justify-content: center;
align-items: center;
}
.consent-popup button {
padding: 13px 18px;
width: 142px;
flex: none;
align-self: center;
}
/* phones */
@media (max-width: 640px) {
amp-consent a.close-button {
font-size: 22px;
top: 15px;
right: 13px;
}
.consent-popup div {
flex-flow: column wrap;
align-items: center;
margin: 12px 25px 15px 12px;
}
.consent-popup p {
padding: 5px 20px 5px 10px;
margin: 0 0 10px 0;
}
}
/* tablets and desktop */
@media (min-width: 641px) {
.consent-popup a.close-button {
font-size: 25px;
left: 30px;
}
.consent-popup div {
flex-flow: row;
height: 100px;
margin: 0 40px;
}
.consent-popup p {
max-width: 660px;
padding: 0 25px 0 40px;
margin: 0;
}
}
@media (max-width: 320px) {
.consent-popup p {
line-height: 16px;
font-size: 12px;
}
}
Comments
Post a Comment