Contenido

Adición de componentes AMP ampliados

El sistema de componentes de AMP le permite crear rápidamente características eficientes y de respuesta en sus artículos con un mínimo esfuerzo. La biblioteca HTML de AMP tiene tres clasificaciones para los componentes de AMP:

built-in: Estos son los componentes que se incluyen en la biblioteca base de AMP JavaScript (especificada en la etiqueta <head>), como amp-img y amp-pixel. Estos componentes se pueden utilizar inmediatamente en un documento de AMP.
extended: Son extensiones de la biblioteca base que deben incluirse explícitamente en el documento como elementos personalizados. Los elementos personalizados requieren secuencias de comandos específicas que se agregan a la sección <head> (por ejemplo, <script async custom-element="amp-video...).
experimental: Estos son los componentes que se liberan, pero aún no están listos para un uso amplio. Los desarrolladores pueden optar por utilizar estas características antes de que se liberen completamente. Obtenga más información en Características experimentales.

Nuestra muestra ya utiliza un componente incorporado, amp-img, y exploramos cómo ese componente se relaciona con el sistema de diseño de AMP en el tutorial "Convierta su HTML a AMP". Ahora, vamos a agregar algunos componentes de AMP extended que se utilizan comúnmente a nuestro artículo de noticias.

Monetización con anuncios

Los anuncios en AMP se construyen utilizando el componente amp-ad. El componente amp-ad le permite configurar anuncios de varias maneras, como el ancho, la altura y el diseño. Sin embargo, muchas plataformas de anuncios requieren configuración adicional, como el ID de cuenta de la red publicitaria, el anuncio que debe publicarse o las opciones para segmentar la publicidad. Estas opciones se especifican fácilmente en el componente amp-ad mediante el uso de atributos HTML.

Dele un vistazo a este ejemplo de un anuncio de DoubleClick:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static"
>
</amp-ad>

Como puede ver, esta es una configuración muy simple. Tome nota del atributo type, que informa al componente amp-ad de la plataforma de anuncios que queremos utilizar. En este caso, queremos utilizar la plataforma de DoubleClick, así que especificamos doubleclick como el valor.

El atributo data-slot es más único. En amp-ad, cualquier atributo que comience con data- es un atributo específico del proveedor. Esto significa que no todos los vendedores necesitarán necesariamente este atributo particular, ni reaccionarán necesariamente si se proporciona. Por ejemplo, compare el ejemplo de DoubleClick de arriba con el siguiente anuncio de prueba de la plataforma A9:

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302"
>
</amp-ad>

Trate de añadir los dos ejemplos anteriores en su artículo justo después de la etiqueta <header>.

Recuerde que no todos los componentes están incluidos en el archivo JavaScript de la biblioteca principal de AMP. Necesitamos incluir una solicitud JavaScript adicional para el componente del anuncio.

Agregue la siguiente secuencia de comandos a la etiqueta <head>:

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

Actualice la página y debería ver 2 anuncios de prueba:

Test ads

Es posible que tenga algunos errores en la consola de desarrollador, como Mixed Content o XMLHttpRequest cannot load. El error anterior probablemente esté relacionado con el anuncio de A9 porque no todo el contenido que carga es seguro. Este es un requisito importante para todos los anuncios que se presentan en AMP.

Los dos amp-ads que se muestran a continuación son un ejemplo de la flexibilidad que amp-ad ofrece para soportar las características de la plataforma publicitaria. En este caso hemos configurado (utilizando el panel de control de DoubleClick) dos anuncios de prueba de DoubleClick para que solo se muestren en ciertos países. El primero se mostrará solo en el Reino Unido y el segundo se mostrará solo en los Estados Unidos. Intente agregar estas dos configuraciones de anuncios geográficos en el documento AMP, debajo de los anuncios que agregó anteriormente:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk"
>
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us"
>
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

Actualice la página y dele un vistazo. La siguiente captura de pantalla se tomó desde Canadá, así que tampoco se cargaron los anuncios:

Test ads

NOTA: Tal vez observe que dentro de estas etiquetas de amp-ad se encuentran etiquetas div adicionales con un atributo denominado fallback en ellas. ¿Puede adivinar qué representa el atributo fallback? Informa al sistema de carga de AMP para mostrar solo el contenido de ese elemento cuando el elemento padre no se carga correctamente. Esto significa que el elemento padre recae en el elemento hijo. Obtenga más información sobre Placeholders & fallbacks.

LEER MÁS: Para ver las últimas redes publicitarias compatibles, lea la documentación de referencia del componente amp-ad.

NOTE: No se permite que el JavaScript proporcionado por la red publicitaria se ejecute dentro del documento AMP. En cambio, el tiempo de ejecución de AMP carga un iframe de origen diferente (a través de un sandbox iframe) como el documento AMP y ejecuta el JS de la red de anuncios dentro de ese sandbox iframe.

Nuestro documento de AMP ahora incluye texto, una imagen y un anuncio incrustado en la página, los cuales son todos los ingredientes clave para contar una historia y monetizar su contenido. Sin embargo, los sitios web modernos a menudo incluyen más funciones que simples imágenes y texto.

Llevaremos nuestro documento de AMP al siguiente nivel y agregaremos funciones web más avanzadas que comúnmente se encuentran en los artículos de noticias, como:

Videos de YouTube
Tweets
Citas en artículos

Cómo insertar un video de YouTube

Trataremos de insertar un video de YouTube en el documento. Agregue el siguiente código inmediatamente después del

en su documento AMP (sobre el amp-ad que acaba de añadir):

<amp-youtube
  data-videoid="npum8JsITQE"
  layout="responsive"
  width="480"
  height="270"
>
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

Actualice la página. Debería ver este texto en vez de un video: “The video could not be loaded.”

Incluso si su navegador puede mostrar videos de YouTube sin problemas, seguirá recibiendo este error. ¿Por qué? El video no falló durante la carga, sino que el error se produjo en el componente en sí.

NOTA: Si aún tiene su consola de desarrollo abierta y #development=1 en su URL, verá un error del validador AMP en este punto para recordarle que agregue el JavaScript amp-youtube y un enlace a la documentación que le dirá la etiqueta script que debe añadir.

Agregue la siguiente secuencia de comandos a la etiqueta :

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

Actualice la página y debería ver el anuncio de YouTube:

Embedded Youtube video

Al igual que con los otros elementos de la página, especificamos el width y la height del video para que el sistema de distribución AMP pueda calcular la relación de aspecto. Además, establecemos el layout en responsive, de modo que el video llene el ancho de su elemento padre.

Para obtener más información sobre cómo insertar videos de YouTube, lea la documentación del componente amp-youtube. Para obtener más componentes de video y de medios, consulte la lista de de componentes de medios AMP.

CONSEJO: Use el atributo fallback para informar a los usuarios si el componente falla al cargar o si no es compatible con su navegador web.

Mostrar un Tweet

La incrustación de tweets preformateados de Twitter es una característica común en los artículos de noticias. El componente amp-twitter puede proporcionar esta función con facilidad.

Comience agregando la siguiente solicitud de JavaScript a la etiqueta de su documento:

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

Ahora, en su artículo, agregue este código para incrustar el Tweet:

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985"
>
</amp-twitter>

El atributo data-tweetid es otro ejemplo de un atributo personalizado requerido por una plataforma particular. En este caso, Twitter correlaciona el valor del atributo data-tweetid con un Tweet determinado.

Actualice su navegador y dele un vistazo a la página. Debería ver que el Tweet aparece:

Embedded Tweet

Para obtener más información sobre la incrustación de Tweets de Twitter, lea la documentación del componente amp-twitter.

CONSEJO: AMP proporciona aún más componentes para incrustar el contenido de las redes sociales. Vea los últimos componentes sociales de AMP.

Resaltar una cita de artículo

Una característica común en los artículos de noticias es resaltar fragmentos de texto particularmente atractivos del artículo. Por ejemplo, una cita de una fuente particular o un hecho importante puede repetirse en una fuente más grande para atraer la atención del lector.

Sin embargo, no todos los fragmentos de texto tienen necesariamente la misma longitud de caracteres, lo cual puede dificultar el equilibrio entre un tamaño de fuente mayor y la cantidad de espacio que el texto consume en la página.

AMP proporciona otro componente específicamente diseñado para este tipo de situación, se llama el componente amp-fit-text. El componente amp-fit-text le permite definir un elemento de ancho y altura fijos y un tamaño de fuente máximo. El componente escala inteligentemente el tamaño de la fuente para ajustar el texto dentro del ancho y la altura disponibles.

Hagamos un intento. Primero, agregue a la etiqueta la biblioteca del componente :

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

Agregue lo siguiente a su página:

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

¡Actualice la página y vea el resultado!

Ahora, experimente más. ¿Qué pasa si la cita es mucho más corta?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Hello!
</amp-fit-text>

O, ¿qué pasa si la cita es más larga?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  And the Raven, never flitting, still is sitting, still is sitting. On the
  pallid bust of Pallas just above my chamber door; And his eyes have all the
  seeming of a demon’s that is dreaming, And the lamp-light o’er him streaming
  throws his shadow on the floor; And my soul from out that shadow that lies
  floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

Como último experimento con amp-fit-text, intente crear un fragmento de texto corto, como "Hello", con una altura mucho mayor (por ejemplo, un valor de 400), y mantenga el valor de atributo max-font-size en 42. ¿Cómo sería la página resultante? ¿El texto está centrado verticalmente? ¿O la altura de la etiqueta de ajuste amp-fit-text se encoge para ajustarse al tamaño de fuente máximo? Con lo que ya conoce sobre el sistema de distribución de AMP, ¡trate de responder a la pregunta antes de jugar con el código!

Puede obtener más información sobre amp-fit-text en la Demostración de ejemplos en vivo de AMP.

Capítulo anterior Siguiente capítulo