Pengguna saat ini menginginkan kontrol tambahan atas pengalaman online mereka. Selain itu, penerbit menghadapi berbagai tuntutan berbeda tentang cara mereka menginformasikan dan memilih pengguna mereka, mulai dari kebijakan pemasok hingga persyaratan hukum yang berkembang. Proyek open source AMP bekerja untuk memberi penerbit dan penyedia teknologi alat untuk mengimplementasikan kontrol pengguna yang mereka sukai dan untuk mendukung beragam persyaratan kepatuhan individu mereka pada halaman AMP mereka.
Halaman ini menunjukkan bagaimana aliran izin pemblokiran dasar dapat dihasilkan, yang hanya akan menampilkan pesan pop-up pemblokiran sederhana dengan tombol terima dan tolak. Dengan menolak beberapa konten pada halaman akan diblokir.
Impor komponen persetujuan di header.
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
Penting
Persetujuan disimpan dalam penyimpanan lokal: setelah menerima / menolaknya, hanya dialog sembulan yang akan muncul kembali setelah menghapus konten penyimpanan lokal untuk host ini, misalnya, melalui Alat Pengembangan Chrome.
Penggunaan Dasar
Komponen persetujuan penguat memungkinkan Anda menentukan persetujuan pengguna yang diperlukan untuk halaman ini. Titik akhir CORS dapat ditentukan melalui atribut checkConsentHref. Komponen persetujuan penguat akan memverifikasi melalui permintaan POST jika perlu untuk menunjukkan UI persetujuan. Jawabannya harus seperti ini:
{
"promptIfUnknown": boolean (true/false)
}
Dimungkinkan untuk mengaktifkan kembali dialog persetujuan menggunakan action myConsent.prompt (). Kasus penggunaan untuk ini adalah memberi pengguna opsi untuk mengubah pengaturan mereka setelah dialog persetujuan telah dibuang. Agar ini berfungsi, UI setelah persetujuan harus ditentukan dalam amp-consent JSON config: "promptUI": "consentDialog".
<amp-consent id="myUserConsent"
layout="nodisplay">
<script type="application/json">
{
"consents": {
"consent1": {
"checkConsentHref": "/samples_templates/consent/getConsent",
"promptUI": "consentDialog"
}
},
"postPromptUI": "post-consent-ui"
}
</script>
<div class="popupOverlay"
id="consentDialog">
<div class="consentPopup">
<div class="dismiss-button"
role="button"
tabindex="0"
on="tap:myUserConsent.dismiss">X</div>
<div class="h2 m1">Headline</div>
<p class="m1">This is an important message requiring you to make a choice.</p>
<p class="m1">This is some more information about this choice. Here's a list of items related to this choice.</p>
<amp-list width="auto"
height="132"
layout="fixed-height"
src="/json/consent-items.json"
class="m1">
<template type="amp-mustache">
<li>{{.}}</li>
</template>
</amp-list>
<button on="tap:myUserConsent.accept"
class="ampstart-btn ampstart-btn-secondary caps mx1">Accept</button>
<button on="tap:myUserConsent.reject"
class="ampstart-btn ampstart-btn-secondary caps">Reject</button>
</div>
</div>
<div id="post-consent-ui">
<button on="tap:myUserConsent.prompt()"
class="ampstart-btn caps m1">Settings</button>
</div>
</amp-consent>
Gunakan atribut blok-data-blok-atas-persetujuan dalam persetujuan untuk memblokir komponen AMP sampai persetujuan diberikan. Komponen individual AMP dapat mengesampingkan perilaku pemblokiran dan mengimplementasikan logika pemblokiran itu sendiri.
Ini adalah gambar yang diblokir sampai persetujuan diberikan:
Contohnya<amp-img data-block-on-consent src="/img/landscape_lake_300x201.jpg" width="300" height="201"> </amp-img>
Pengumuman ini juga akan diblokir sampai persetujuan diberikan:
Contohnya<amp-ad data-block-on-consent data-slot="/30497360/a4a/a4a_native" height="250" type="doubleclick" width="300"> </amp-ad>