amp-consent example Serving personalized/non-personalized ads based on consent



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