Introducción:
Usamos este componente para hacer un contenedor para mostrar un anuncio en archivos AMP HTML.
Sitio oficial: https://amp.dev/
Guión requerido:
Importar el componente amp-ad en el encabezado
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"> </script>
Atributos:
- Marcador de posición: amp-ad admite un elemento secundario con un atributo de marcador de posición. cuando hay un problema de red y el anuncio no se puede ver, se muestra el marcador de posición
<amp-ad width="100" height="100"> <div placeholder>No geeky ads to show</div> </amp-ad>
- Respaldo : amp-ad admite un elemento secundario con un atributo de respaldo. cuando no hay ningún anuncio disponible para el espacio, se muestra este elemento
<amp-ad width="100" height="100"> <div fallback>geeks for geeks has no ad available at the moment</div> </amp-ad>
Ejemplo:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>amp-ad</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import the `amp-ad` component in the header. -->
<script async custom-element="amp-ad"
src="https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>
<link rel="canonical"
href=
"https://amp.dev/documentation/examples/components/amp-ad/index.html">
<meta name="viewport"
content="width=device-width,
minimum-scale=1,
initial-scale=1">
<style amp-boilerplate>
body
{
-webkit-animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
animation:
-amp-start 8s steps(1, end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body
{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
</head>
<body>
<h3>geeksforgeeks amp | ad<h3>
<!--
`amp-ad` requires `width` and
`height` values. Select an ad network
via the type argument.
-->
<amp-ad width="300"
height="250"
type="a9"
data-amzn_assoc_ad_mode="auto"
data-divid=
"amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
data-recomtype="async"
data-adinstanceid=
"fe746097-f142-4f8d-8dfb-45ec747632e5">
</amp-ad>
<!-- Placeholder-->
<!--
Optionally `amp-ad` supports a child
element with the `placeholder` attribute.
If supported by the ad network,
this element is shown until the ad is available
for viewing.
-->
<amp-ad width="300"
height="200"
type="doubleclick"
data-slot="/4119129/doesnt-exist">
<div placeholder>
<b> gfg Placeholder here!!!</b>
</div>
</amp-ad>
<!--Fallback-->
<!--
`amp-ad` supports a child element
with the `fallback` attribute.
If supported by the ad network, this
element is shown if no ad is available
for this slot.
-->
<amp-ad width="300"
height="200"
type="doubleclick"
data-slot="/4119129/doesnt-exist">
<div fallback>
<p>No ad</p>
</div>
</amp-ad>
</body>
</html>
Producción: 
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA