Flujo de consentimiento de usuario avanzado

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 más avanzado. Mostrará los botones de aceptar y rechazar, que al hacer clic revelarán más información, como una lista de terceros usados sobre la aceptación del usuario, o un aviso de uso de datos generales sobre el rechazo del usuario.

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 amp-consent 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. Este punto final se consultará mediante una solicitud POST para determinar si es necesario mostrar la IU de consentimiento especificada. La respuesta debería verse así:

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

La respuesta indicará si el consentimiento debe mostrarse o no. Si necesita mostrarse, se mostrará el elemento con la ID indicada en promptUI.

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

Utilice el data-block-on-consent atributo bloque de datos 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>

X

Headline

This is an important message requiring you to make a choice.

Tags: User Consent

Share: