¿Cómo añadir un soporte para bloques de anuncios en Amp HTML?
amp-sticky-ad
Amp-sticky-ad añade soporte para bloques de anuncios que siempre ocupan un lugar fijo en la ventana gráfica de los archivos HTML de AMP.
El anuncio pegajoso aparecerá en la parte inferior de la página.
1 Código
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
2 Inserte el siguiente script justo después de la apertura del <head>
<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
3 Uso básico
Utilice un anuncio de amplificación como hijo directo de amp-sticky-ad.
La altura del anuncio Amp-sticky-ad se determinará en función de la altura del niño del Amp-sticky-ad. La altura máxima del Amp-sticky-ad es 100px, si la altura excede 100px entonces la altura sería 100px y el contenido del desbordamiento será ocultado.
Código
<amp-sticky-ad layout="nodisplay">
<amp-ad width="320"
height="50"
type="doubleclick"
data-slot="/35096353/amptesting/formats/sticky">
</amp-ad>
</amp-sticky-ad>
Posicionamiento
Amp-sticky-ad se mostrará después de desplazar una altura de la ventana desde la parte superior siempre que haya al menos una ventana más de contenido disponible.
El texto que sigue es para asegurarse de que hay otro viewport del primero en la parte superior.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
A continuación la estructura completa del código
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
<link rel="canonical" href="http://amphtmlejemplos.blogspot.com/2016/12/como-anadir-un-soporte-para-bloques-de-anuncios-en-amp-html.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>
<style amp-custom>
.amp-sticky-ad-close-button {
min-width: 0;
}
</style>
</head>
<body>
<amp-sticky-ad layout="nodisplay">
<amp-ad width="320"
height="50"
type="doubleclick"
data-slot="/35096353/amptesting/formats/sticky">
</amp-ad>
</amp-sticky-ad>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor,
ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
</p>
</body>
</html>
Comentarios
Disqus comments:
Facebook comments: