Instrucciones amp-access
amp-access
El componente amp-access agrega soporte para los paywalls y suscripciones a AMP, permitiendo al editor controlar qué contenido es accesible por el lector y con qué restricciones.
Para los puntos finales del servidor amp-access, consulte el proyecto amp-publisher-sample.
Agregar
Importe el componente amp-access justo después de la apertura <head>
amp-access requiere del componente amp-analytics
Opcionalmente, utilice el componente amp-mustache para mostrar texto con los valores reemplazados de la respuesta de autorización
Agregue la configuración authorization, pingback y los puntos finales de login. Proporcionamos dos puntos finales de inicio de sesión, uno para iniciar sesión y otro para cerrar sesión. También es posible crear una respuesta de fallback que se utilizará si la autorización falla con el atributo authorizationFallbackResponse.
Esta sección es visible para todos los usuarios. En este caso no se necesita ninguna marca especial.
Utilice el atributo amp-access para controlar la visibilidad de cada componente. La expresión debe evaluar a un valor booleano. Si se evalúa como TRUE, se mostrará la sección.
Esta sección sólo se muestra si el valor del atributo de access en la respuesta para las solicitudes de autorización se evalúa como FALSE
Es posible combinar dos valores en la expresión de evaluación. Revise los documentos para obtener más información sobre la Gramática de Expresión
Combine el amplificador amp-access y amp-mustache para mostrar la información devuelta de la solicitud de autorización. En este caso mostraremos el nombre de usuario devuelto en la respuesta de autenticación.
Use on="tap:amp-access.login-sign-in" para abrir el diálogo de inicio de sesión cuando se hace clic en el elemento.
amp-access-hide predeterminará el componente que se va a ocultar y habilitará más adelante si la expresión de amp-access amperio se evalúa como TRUE
El enlace de cierre de sesión sólo se mostrará para los suscriptores registrados. Utilizamos un truco aquí: el logout es una acción de inicio de sesión que redirige directamente a la URL original. Esto tiene la ventaja de que la página se actualiza sin ser recargada.
Compruebe la muestra oficial de amp-access para obtener demostraciones de conteo de primer clic y de visualización.
Para los puntos finales del servidor amp-access, consulte el proyecto amp-publisher-sample.
Agregar
Importe el componente amp-access justo después de la apertura <head>
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
amp-access requiere del componente amp-analytics
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Opcionalmente, utilice el componente amp-mustache para mostrar texto con los valores reemplazados de la respuesta de autorización
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
Agregue la configuración authorization, pingback y los puntos finales de login. Proporcionamos dos puntos finales de inicio de sesión, uno para iniciar sesión y otro para cerrar sesión. También es posible crear una respuesta de fallback que se utilizará si la autorización falla con el atributo authorizationFallbackResponse.
<script id="amp-access" type="application/json">
{
"authorization": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
"pingback": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
"login": {
"sign-in": "https://ampbyexample.com/components/amp-access/login?rid=READER_ID&url=CANONICAL_URL",
"sign-out": "https://ampbyexample.com/components/amp-access/logout"
},
"authorizationFallbackResponse": {
"error": true,
"access": false,
"subscriber": false
}
}
</script>
Esta sección es visible para todos los usuarios. En este caso no se necesita ninguna marca especial.
Ejemplo<section> <h3>The Article</h3> <p> This is a preview of the article. </p> </section>The Article
This is a preview of the article.
Utilice el atributo amp-access para controlar la visibilidad de cada componente. La expresión debe evaluar a un valor booleano. Si se evalúa como TRUE, se mostrará la sección.
Ejemplo<section amp-access="access"> <p>This section is visible to users if the authorization response contains: <code>"access": true</code>. This is usually the main content of the article.</p> </section>This section is visible to users if the authorization response contains:
"access": true. This is usually the main content of the article.
Esta sección sólo se muestra si el valor del atributo de access en la respuesta para las solicitudes de autorización se evalúa como FALSE
Ejemplo<section amp-access="NOT access"> <p>This section is only visible to users if the authorization response does not contain <code>access</code> or contains <code>"access": false</code>.</p> </section>This section is only visible to users if the authorization response does not contain
accessor contains"access": false.
Es posible combinar dos valores en la expresión de evaluación. Revise los documentos para obtener más información sobre la Gramática de Expresión
Ejemplo<div amp-access="access AND NOT subscriber"> <p>This section is only visible to users with <code>"access": true</code> and <code>"subscriber": false</code> </p> </div>This section is only visible to users with
"access": trueand"subscriber": false
Combine el amplificador amp-access y amp-mustache para mostrar la información devuelta de la solicitud de autorización. En este caso mostraremos el nombre de usuario devuelto en la respuesta de autenticación.
Ejemplo<section amp-access="subscriber"> <template amp-access-template type="amp-mustache"> Hello {{name}}! </template> </section>Hello {{name}}!
Use on="tap:amp-access.login-sign-in" para abrir el diálogo de inicio de sesión cuando se hace clic en el elemento.
amp-access-hide predeterminará el componente que se va a ocultar y habilitará más adelante si la expresión de amp-access amperio se evalúa como TRUE
Ejemplo <section class="p1" amp-access="NOT subscriber" amp-access-hide role="button" tabindex="0"> <a class="ampstart-btn caps" on="tap:amp-access.login-sign-in">Login</a> </section>
El enlace de cierre de sesión sólo se mostrará para los suscriptores registrados. Utilizamos un truco aquí: el logout es una acción de inicio de sesión que redirige directamente a la URL original. Esto tiene la ventaja de que la página se actualiza sin ser recargada.
Ejemplo <section class="p1" amp-access="subscriber" amp-access-hide role="button" tabindex="0"> <a class="ampstart-btn caps" on="tap:amp-access.login-sign-out">Logout</a> </section>
Compruebe la muestra oficial de amp-access para obtener demostraciones de conteo de primer clic y de visualización.
Comentarios
Disqus comments:
Facebook comments: