Introduction:
We use this component to make a container to display an ad in AMP HTML files.
Official Site: https://amp.dev/
Required Script:
Import the amp-ad component in the header
</ script >
|
Attributes:
- Placeholder – amp-ad supports a child element with a placeholder attribute. when there is a network problem and the ad is not viewable the placeholder is shown
< amp-ad width = "100" height = "100" >
< div placeholder>No geeky ads to show</ div >
</ amp-ad >
|
- Fallback – amp-ad supports a child element with a fallback attribute. when there is no ad available for the slot this element is shown
< amp-ad width = "100" height = "100" >
< div fallback>geeks for geeks has no ad available at the moment</ div >
</ amp-ad >
|
Example:
<!doctype html> < html ⚡>
< head >
< meta charset = "utf-8" >
< title >amp-ad</ title >
< script async src =
</ script >
<!-- Import the `amp-ad` component in the header. -->
< script async custom-element = "amp-ad" </ script >
< link rel = "canonical" href =
< 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 >
|
Output: