examples/analytics-error-reporting.amp.html - main - githubmirror/amphtml

examples/analytics-error-reporting.amp.html
103 строки4 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>Errors for User Error Report</title>
    <link rel="canonical" href="amps.html" >
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    <style amp-custom>
        body {
            font-family: 'Georgia', Serif;
        }
        h1 {
            padding: 10px;
        }
        p {
            padding: 15px;
        }
    </style>
</head>
<body>
<h1>These create 1P error</h1>
<h2>amp-img fake 1p error</h2>
<amp-img
        src="img/sea@1x.jpg"
        srcset="img/sea@1x.jpg 1x, img/sea@2x.jpg 2x"
        alt="Fusce pretium tempor justo, vitae consequat dolor maximus eget."
        placeholder
        width="360" height="216" layout="responsive"
        role='img'>
</amp-img>

<h2>amp-anim fake 1p error</h2>
<amp-anim
        src=""
        width="400" height="225" layout="responsive"
        role='img'>
    <amp-img placeholder
             src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h225-no-k"
             width="400" height="225" layout="responsive"></amp-img>
</amp-anim>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
    luctus nunc ut elit cursus, et imperdiet diam vehicula.
    Duis et nisi sed urna blandit bibendum et sit amet erat.
</p>

<h2>amp-pixel fake 1p error</h2>
<amp-pixel src="https://foo.com/tracker/foo"
           layout="nodisplay"
           referrerpolicy="referrer-fail"></amp-pixel>

<h2 id="amp-iframe">IFrame fake 1p error</h2>
<amp-iframe width=10 height=10
            layout="responsive"
            src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>

<h2>amp-list fake 1p error</h2>
<amp-list layout="responsive" src= [src]="src" width="600" height="600">
    <template type="amp-mustache">
    </template>
</amp-list>

<h2>amp-youtube fake 1p error</h2>
<amp-youtube width="480" height="270"
             data-param-autoplay
             data-videoid="dQw4w9WgXcQ">
</amp-youtube>

<h1>These create 3P error</h1>
<h2>fake 3p error</h2>
<amp-ad width=300 height=250
    type="_ping_"
    data-url='not-exist'
    data-valid='false'
    data-error='true'>
</amp-ad>

<amp-analytics>
    <script type="application/json">
        {
            "requests": {
                "error": "https://localhost:8000/ping?en=${errorName}&em=${errorMessage}"
            },
            "triggers": {
                "userError": {
                    "on": "user-error",
                    "request": "error"
                }
            }
        }
    </script>
</amp-analytics>

</body>
</html>