examples/amp-story/analytics.html - main - githubmirror/amphtml

examples/amp-story/analytics.html
155 строк6 KB
Ya-Chen Hsieh
♻️ Convert cta layer to page outlink (#37995)
14 апр 2022, 23:48
14 апр 2022, 23:4832d29a0
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <title>My Story</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="analytics.html">
    <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>
      body {
        font-family: 'Roboto', sans-serif;
      }
      amp-story-page {
        background: white;
      }
      h1 {
        font-size: 2.875em;
        font-weight: normal;
        line-height: 1.174;
        text-transform: uppercase;
      }
    </style>
  </head>

  <body>
    <amp-story
      title="Analytics amp-story example"
      publisher="The AMP Team"
      publisher-logo-src="https://example.com/logo/1x1.png"
      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
      poster-square-src="https://example.com/my-story/poster/1x1.jpg"
      poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
      standalone>

      <amp-analytics id="analytics1">
        <script type="application/json">
          {
            "requests": {
              "endpoint": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png",
              "base": "${endpoint}?${type|default:foo}&path=${canonicalPath}",
              "pageView": "${base}?&index=${storyPageIndex}&count=${storyPageCount}&id=${storyPageId}&muted=${storyIsMuted}&progress=${storyProgress}",
              "click": "${base}?&index=${storyPageIndex}&id=${storyPageId}"
            },
            "triggers": {
              "trackAnchorClicks": {
                "on": "click",
                "selector": "amp-story-cta-layer a",
                "request": "click",
                "vars": {
                  "eventId": "clickOnAnyAnchor"
                }
              },
              "trackPageAttachmentOpen": {
                "on": "story-open",
                "tagName": "amp-story-page-attachment",
                "request": "base"
              },
              "trackPageAttachmentClose": {
                "on": "story-close",
                "tagName": "amp-story-page-attachment",
                "request": "base"
              },
              "trackFocusedState": {
                "on": "story-focus",
                "tagName": "a",
                "request": "click"
              },
              "trackClickThru": {
                "on": "story-click-through",
                "tagName": "a",
                "request": "click"
              },
              "trackPageview": {
                "on": "story-page-visible",
                "request": "pageView",
                "storySpec": {
                  "repeat": false
                }
              },
              "trackAudioEnable": {
                "on": "story-audio-muted",
                "request": "pageView"
              },
              "trackAudioDisable": {
                "on": "story-audio-unmuted",
                "request": "pageView"
              },
              "trackShare": {
                "on": "story-open",
                "tagName": "amp-story-share-menu",
                "request": "base"
              }
            },
            "linkers": {
              "enabled": true,
              "destinationDomains": ["google.com"],
              "proxyOnly": false,
              "linker": {
                "ids": {
                  "cid": "CLIENT_ID(cid)"
                }
              }
            }
          }
        </script>
      </amp-analytics>

      <amp-story-page id="p1">
        <amp-story-grid-layer template="vertical">
          <h1>Page One</h1>
        </amp-story-grid-layer>
        <amp-story-page-attachment layout="nodisplay">
          <div>
            <h1>Some really cool video</h1>
              <p style="color: black">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
          </div>
        </amp-story-page-attachment>
      </amp-story-page>

      <amp-story-page id="p2">
        <amp-story-grid-layer template="vertical">
          <h1>Page Two</h1>
        </amp-story-grid-layer>
      </amp-story-page>

      <amp-story-page id="p3">
        <amp-story-grid-layer template="vertical">
          <h1>Page Three</h1>
          <a href="https://google.com">tooltip link</a>
        </amp-story-grid-layer>
        <amp-story-page-outlink layout="nodisplay" href="https://google.com"></amp-story-page-outlink>
      </amp-story-page>

      <amp-story-page id="p4">
        <amp-story-grid-layer template="vertical">
          <h1>Page Five</h1>
          <amp-video
            id="vid1"
            src="../av/ForBiggerJoyrides-short.mp4"
            width="720"
            height="405"
            layout="responsive"
            autoplay>
          </amp-video>
        </amp-story-grid-layer>
      </amp-story-page>
    </amp-story>
  </body>
</html>