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 persetujuan pemblokiran yang lebih maju dapat dihasilkan. Ini akan menunjukkan tombol terima dan tolak, yang ketika diklik akan mengungkapkan lebih banyak informasi, seperti daftar pihak ketiga yang digunakan pada penerimaan pengguna, atau pemberitahuan penggunaan data umum tentang penolakan pengguna.
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 di penyimpanan lokal: setelah menerima / menolaknya, hanya dialog pop-up yang akan muncul kembali setelah menghapus konten penyimpanan lokal untuk host ini, misalnya, melalui Alat pengembangan Chrome.
Penggunaan Dasar
Komponen persetujuan penguat amp-persetujuan memungkinkan Anda untuk menentukan persetujuan pengguna yang diperlukan untuk halaman ini. Titik akhir CORS dapat ditentukan melalui atribut checkConsentHref. Titik akhir ini akan ditanyakan oleh permintaan POST untuk menentukan apakah perlu untuk menampilkan UI persetujuan yang ditentukan. Jawabannya harus seperti ini:
{
'promptIfUnknown': boolean (true/false)
}
Tanggapan akan menunjukkan apakah persetujuan harus ditunjukkan atau tidak. Jika perlu ditampilkan, elemen dengan ID yang ditunjukkan dalam promptUI akan ditampilkan.
<amp-consent id="myConsent"
layout="nodisplay">
<script type="application/json">
{
"consents": {
"consent1": {
"checkConsentHref": "/samples_templates/consent/getConsent",
"promptUI": "consentDialog"
}
},
"postPromptUI": "post-consent-ui"
}
</script>
<div class="lightbox"
id="consentDialog">
<div class="lightbox-content">
<div class="dismiss-button"
role="button"
tabindex="0"
on="tap:myConsent.dismiss">X</div>
<div class="message">
<div class="h2 m1">Headline</div>
<p class="m1">This is an important message requiring you to make a choice.</p>
</div>
<div id="choice">
<button class="ampstart-btn ampstart-btn-secondary caps mx1"
on="tap:choice1.show,choice2.hide">Choice 1</button>
<button class="ampstart-btn ampstart-btn-secondary caps"
on="tap:choice2.show,choice1.hide">Choice 2</button>
</div>
<div id="choice1"
hidden
class="message">
<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:myConsent.accept"
class="ampstart-btn ampstart-btn-secondary caps m1">Confirm</button>
</div>
<div id="choice2"
hidden
class="message">
<p class="m1">This is some more information about this choice.</p>
<button on="tap:myConsent.reject"
class="ampstart-btn ampstart-btn-secondary caps m1">Confirm</button>
</div>
</div>
</div>
<div id="post-consent-ui">
<button on="tap:myConsent.prompt()"
class="ampstart-btn caps m1">Settings</button>
</div>
</amp-consent>
Gunakan data-block-on-consent pada 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>
Headline
This is an important message requiring you to make a choice.
This is some more information about this choice. Here's a list of items related to this choice.
This is some more information about this choice.