Skip to main content

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

Popular posts from this blog

Pgpool PgBouncer Postgresql streaming replication, load balancing and administration

The term scalability refers to the ability of a software system to grow as the business that uses it grows. PostgreSQL provides some features to help you build scalable solutions, but strictly speaking, PostgreSQL itself is not scalable. It can effectively use the following resources from one computer. Now, we will show you some configurations that may be useful for your use case. However, this can be problematic when distributing the database solution to multiple computers, because the standard PostgreSQL server can only run on a single computer. In this article, we will study different extension schemes and their implementation in PostgreSQL. Replication can be used in many expansion scenarios. Its main purpose is to create and maintain a backup database when the system fails. This is especially true for physical replication. However, replication can also be used to improve the performance of PostgreSQL-based solutions. Sometimes third-party tools can be used to implement complex exp

Tekstverwerking python Text processing python SpaCy, TensorFlow, NLTK, Allen-NLP, Stanford-NLP

 Dit post maakt gebruik van spaCy, een populaire Python-bibliotheek die de taalgegevens en algoritmen bevat die je nodig hebt om teksten in natuurlijke taal te verwerken. Zoals u in dit post zult leren, is spaCy gemakkelijk te gebruiken omdat het containerobjecten biedt die elementen van natuurlijke taalteksten vertegenwoordigen, zoals zinnen en woorden. Deze objecten hebben op hun beurt attributen die taalkenmerken vertegenwoordigen, zoals delen van spraak. Op het moment van schrijven bood spaCy voorgetrainde modellen aan voor Engels, Duits, Grieks, Spaans, Frans, Italiaans, Litouws, Noors BokmÃ¥l, Nederlands, Portugees en meerdere talen gecombineerd. Bovendien biedt spaCy ingebouwde visualizers die u programmatisch kunt aanroepen om een grafische weergave van de syntactische structuur van een zin of benoemde entiteiten in een document te genereren.   De spaCy-bibliotheek ondersteunt ook native geavanceerde NLP-functies die andere populaire NLP-bibliotheken voor Python niet hebben. Spa

Elasticsearch install and configuration on Ubuntu

If you plan to use elastic integrated with Django then it would be better to use an old version of Elastic or replace Haystack with Django-Elasticsearch-DSL (Not tested) See old version install at bottom of this post.  New version Elasticsearch ( attention no haystack at this time )  The Elasticsearch components are not available in Ubuntu’s default package repositories. They can, however, be installed with APT after adding Elastic’s package source list. curl -fsSL https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add - E: gnupg, gnupg2 and gnupg1 do not seem to be installed, but one of them is required for this operation apt-get install gnupg curl -fsSL https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo apt-key add - Warning: apt-key is deprecated. Manage keyring files in trusted.gpg.d instead (see apt-key(8)). OK echo "deb https://artifacts.elastic.co/packages/7.x/apt stable main" | sudo tee -a /etc/apt/sources.list.d/elastic-7.x.list apt update apt