examples/amp-ad/doubleclick-multisize.amp.html - main - githubmirror/amphtml

examples/amp-ad/doubleclick-multisize.amp.html
163 строки5 KB
Caroline Liu
Apply lang="en" to examples/ (#34759)
10 июн 2021, 17:30
10 июн 2021, 17:302ee75c4
<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>Multi-size Ad Requests with DoubleClick Examples</title>
    <link rel="canonical" href="http://nonblocking.io/" >
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    <style amp-custom>
      .dashedborder {
        border: 2px dashed;
      }
      .artificialfold {
        height: 900px;
        background: #000;
      }
    </style>
  </head>
  <body>

    <h1>Multi-size Ad Requests with DoubleClick Examples</h1>

    <h2>Resize denied (above fold) - Creative should be centered</h2>
    <amp-ad width=480 height=75
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="320x50"
        class=dashedborder
        >
    </amp-ad>

    <h2>Secondary sizes > primary size (above fold) - Should see 'fallback'</h2>
    <amp-ad width=300 height=50
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="320x50"
        class=dashedborder
        >
      <div fallback>fallback</div>
    </amp-ad>

    <h2>Secondary sizes == primary size - Should render</h2>
    <amp-ad width=320 height=50
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="320x50"
        class=dashedborder
        >
      <div fallback>fallback</div>
    </amp-ad>


    <h2>Invalid multi-size attribute (above fold) - Should see 'fallback'</h2>
    <amp-ad width=480 height=75
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="[320,50]"
        class=dashedborder
        >
        <div fallback>fallback</div>
    </amp-ad>


    <!-- create an artificial fold -->
    <div class=artificialfold></div>

    <h2>Resize granted (beneath fold) - Creative should be closely wrapped by parent div</h2>
    <amp-ad width=480 height=75
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="320x50"
        class=dashedborder
        >
    </amp-ad>

    <h2>Invalid multi-size attribute (beneath fold) - Should be empty</h2>
    <amp-ad width=480 height=75
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="[320,50]"
        class=dashedborder
        >
    </amp-ad>

    <h2>One invalid and one valid multi-size attribute - Should render</h2>
    <amp-ad width=480 height=75
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="[320,50],320x50"
        class=dashedborder
        >
    </amp-ad>


    <h2>Multi-size less than 2/3rds primary size & size-validation == false - Should render</h2>
    <amp-ad width=1000 height=500
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="320x50"
        data-multi-size-validation="false"
        class=dashedborder
        >
    </amp-ad>

    <h2>Multi-size less than 2/3rds primary size - Should be empty</h2>
    <amp-ad width=1000 height=500
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="320x50"
        class=dashedborder
        >
    </amp-ad>

    <h2>Multiple secondary sizes (all valid) - Should render</h2>
    <amp-ad width=480 height=75
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="320x50,350x50,350x75,400x75"
        class=dashedborder
        >
    </amp-ad>


    <h2>Responsive - Should render</h2>
    <amp-ad width=100 height=149.999999925
        type="doubleclick"
        data-slot= "/4119129/mobile_ad_banner"
        data-override-width="1030"
        data-override-height="590"
        data-multi-size="320x50"
        data-multi-size-validation="false"
        layout="responsive"
        class=dashedborder
        >
    </amp-ad>

    <h2>Size overrides - Should render with primary dimensions</h2>
    <amp-ad width="500"
            height="100"
            data-override-width="300"
            data-override-height="250"
            type="doubleclick"
            data-slot="/35096353/amptesting/image/static"
            class=dashedborder
            >
    </amp-ad>



    <h2>Secondary sizes > primary size (below fold) - Should be empty</h2>
    <amp-ad width=300 height=50
        type="doubleclick"
        data-slot="/4119129/mobile_ad_banner"
        data-multi-size="320x50"
        class=dashedborder
        >
    </amp-ad>


  </body>
</html>