Flujo de consentimiento básico del usuario

Los usuarios de hoy quieren un control adicional sobre su experiencia en línea. Además, los editores se enfrentan a una variedad de demandas diferentes sobre cómo informan y eligen a sus usuarios, desde políticas de proveedores hasta requisitos legales en evolución. El proyecto de fuente abierta AMP está trabajando para brindar a los editores y proveedores de tecnología herramientas para implementar sus controles de usuario preferidos y para respaldar sus variados requisitos de cumplimiento individual en sus páginas de AMP.

Esta página muestra cómo se puede generar un flujo de consentimiento de bloqueo básico, que simplemente mostraría un mensaje emergente de bloqueo simple con un botón de aceptar y rechazar. Al rechazar algún contenido en la página se bloqueará.

Importe el componente de consentimiento en el encabezado.

<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>

Importante

El consentimiento se guarda en el almacenamiento local: después de aceptarlo / rechazarlo, solo volverá a aparecer el diálogo emergente después de eliminar el contenido del almacenamiento local para este host, por ejemplo, a través de Herramientas de desarrollo de Chrome.

Uso Básico

El componente de consentimiento de amplificador permite especificar el consentimiento del usuario requerido para esta página. Los puntos finales CORS se pueden especificar a través del atributo checkConsentHref. El componente de consentimiento de amplificador verificará a través de una solicitud POST si es necesario mostrar la IU de consentimiento. La respuesta debería verse así:

{
  "promptIfUnknown": boolean (true/false)
}

Es posible volver a activar el cuadro de diálogo de consentimiento utilizando la acción myConsent.prompt (). Un caso de uso para esto es brindarles a los usuarios la opción de cambiar su configuración después de que se haya descartado el diálogo de consentimiento. Para que esto funcione, la UI posterior al consentimiento debe especificarse en el amp-consent JSON config: "promptUI": "consentDialog".

X
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.
 



<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>

Utilice el atributo bloque de datos data-block-on-consent en el consentimiento para bloquear componentes de AMP hasta que se otorgue el consentimiento. Los componentes individuales de AMP pueden anular el comportamiento de bloqueo e implementar ellos mismos la lógica de bloqueo.

Aquí hay una imagen que está bloqueada hasta que se dé el consentimiento:

Ejemplo






<amp-img data-block-on-consent
  src="/img/landscape_lake_300x201.jpg"
  width="300"
  height="201">
</amp-img>

Este anuncio también se bloqueará hasta que se otorgue el consentimiento:

Ejemplo





<amp-ad data-block-on-consent
  data-slot="/30497360/a4a/a4a_native"
  height="250"
  type="doubleclick"
  width="300">
</amp-ad>

Tags: User Consent

Share: