Google Amp amp-ad
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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
- 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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output: