目錄

AMP 專用 metadata
- 必要的 <amp-story> 屬性
- 建議的 <amp-story> 屬性
  - 橫式海報圖片網址
  - 正方形海報圖片網址
Metadata

讓您的 Web Stories 更容易被搜尋到

重要事項：本文件不適用於您目前選取的格式網站！

確保您的 Web Stories 透過包含必要的 metadata 和標記觸及到目標受眾。

AMP 專用 metadata

缺少或不正確 AMP 專用 metadata 的 Web Stories 可能不會出現在搜尋引擎或第三方平台上。

必要的 <amp-story> 屬性

Web Stories 必須包含以下 <amp-story> 屬性。

<body>
    <amp-story standalone
    title="Web Story Title"
    publisher="Web Story Publisher"
    publisher-logo-src="https://example.com/logo/1x1.png"
    poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">
    ...
    </amp-story-standalone>
</body>

`標題`

Web Story 的標題。

`發布者`

Web Story 發布者的名稱。

`發布者 logo 圖片網址`

Web Story 發布者 logo 圖片的網址。Logo 圖片應大於或等於 96x96 像素並保持 1:1 的長寬比。此 logo 會顯示在目前 (2020 年 10 月) 支援 Web Stories 的平台上海報圖片的右上角。

`直式海報圖片網址`

用於 Web Story 海報的圖片網址。作為 Web Story 的封面，應能代表故事內容。請勿在海報中嵌入或直接加入 Web Story 標題。應至少為 640x853 像素並保持 3:4 的長寬比。

建議的 <amp-story> 屬性

`橫式海報圖片網址`

用於橫式 Web Story 海報的圖片網址。作為 Web Story 的封面，應能代表故事內容。請勿在海報中嵌入或直接加入 Web Story 標題。應至少為 853x640 像素並保持 4:3 的長寬比。

`正方形海報圖片網址`

用於 Web Story 海報的圖片網址。作為 Web Story 的封面，應能代表故事內容。請勿在海報中嵌入或直接加入 Web Story 標題。應至少為 640x640 像素並保持 1:1 的長寬比。

Metadata

顯示 Web Stories 的平台仰賴 metadata 來正確索引和顯示它們。請包含以下建議資訊，為使用者提供絕佳的 Web Story 體驗。

為了獲得最佳使用者體驗，請在您的 Web Stories 中包含以下建議的 HTML 標記。

標準連結

所有 Web Stories 都必須包含指向 Web Story 本身的標準網址。

<link rel="canonical" href="https://www.example.com/url/to/Web/Story.html">

favicon

包含一個 favicon 以在瀏覽器分頁中顯示為圖示。

文件標題

Give your Web Story document a title by including a </a></code> tag.</p> <h2 id="image-alt-text">Image alt-text</h2> <p>Maximize accessibility and indexability by including <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Accessibility_concerns">meaningful alt-text for images</a>.</p> <h2 id="video-subtitles-and-captions">Video subtitles and captions</h2> <p>Maximize accessibility and indexability by including <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">video subtitles and/or captions</a>.</p> <h2 id="page-attachments">Page attachments</h2> <p>Use <a href="https://amp.dev.org.tw/documentation/components/amp-story-page-attachment/">page attachments</a> to present additional information in “classic article form” alongside your Web Story. This can be useful to provide extra detail, deep dives, or onward journeys for the content presented in your Story.</p> <h2 id="schema.org-metadata">Schema.org metadata</h2> <p>Including <a href="https://schema.org/">schema.org</a> structured data vocabulary defines important information about your Web Story that allows third-party platforms, such as search engines, to display and index them.</p> <p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"></use></svg> </div> <div class="ap-m-tip-content"> Validate your schema.org data using Google's <a href="https://search.google.com/test/amp">AMP Test</a>. </div> </div></p> <h2 id="ogp-facebook-metadata">OGP Facebook metadata</h2> <p>Including <a href="https://ogp.me/">Open Graph protocol</a> enables Web Stories sharing on Facebook.</p> <h2 id="twitter-card-data">Twitter card data</h2> <p>Including <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">Twitter card data</a> allows you to attach photos, videos and media experiences to a Tweet sharing your Web Story.</p> <p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bookmark"></use></svg> </div> <div class="ap-m-tip-content"> Read more about <a href="https://blog.amp.dev/2020/02/12/seo-for-amp-stories/">SEO for Web Stories in the AMP Blog</a>. </div> </div></p> </section> <section class="ap--content"> <hr> <ul class="ap-o-mini-card-list"> <li class="ap-o-mini-card-list-item"> <div class="ap-m-mini-card"> <amp-img alt="Author avatar" src="https://github.com/CrystalOnScript.png?size=38" width="38" height="38" class="large" style="max-width: 38px" layout="responsive"> </amp-img> <span> <strong>Written by <a href="https://github.com/CrystalOnScript" rel="nofollow" target="_blank"> @CrystalOnScript </a> </strong> </span> </a> </li> </ul> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar" layout="nodisplay" side="left"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"></use></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=stories"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"></use></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=ads"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"></use></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=email"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"></use></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>Start</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/start/create/"> <span>Create your first AMP</span> <span class="nav-link-lastword">Page<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/create/basic_markup/"> Starter code </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/create/include_image/"> Include an image </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/create/presentation_layout/"> Adding style </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/create/prepare_for_discovery/"> Plug and play components </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/create/actions_events/"> Actions and events </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/create/preview_and_validate/"> Preview and validate </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/create/publish/"> Keep going </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/start/converting/"> <span>Convert HTML to</span> <span class="nav-link-lastword">AMP<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/converting/setting-up/"> Setting up </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/converting/building-page/"> Building a regular HTML page </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/converting/resolving-errors/"> Resolving validation errors </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/converting/discoverable/"> Making your page discoverable </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/converting/congratulations/"> Congratulations! </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/start/add_advanced/"> <span>Add advanced AMP</span> <span class="nav-link-lastword">features<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/add_advanced/setting_up/"> Setting up </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/add_advanced/review_code/"> Reviewing the starter code </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/add_advanced/adding_components/"> Adding extended AMP components </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/add_advanced/adding_carousels/"> Adding carousels </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/add_advanced/tracking_data/"> Tracking engagement with analytics </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/add_advanced/navigating/"> Navigating your site </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/add_advanced/fonts/"> Adding fonts </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/start/add_advanced/congratulations/"> Congratulations! </a> </li> </ul> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Learn</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-actions-and-events/"> Actions and events </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/common_attributes/"> Common element attributes </a> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP HTML Specification</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/"> AMP Boilerplate Code </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/spec/amp-html-responsive-attributes/"> AMP HTML Responsive Attributes </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/spec/amp-video-interface/"> Video in AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/spec/amphtml/"> AMP HTML Specification </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/spec/release-schedule/"> AMP Release Schedule </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/experimental/"> Enable experimental features </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-html-layout/"> <span>AMP's Layout System</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-html-layout/"> AMPHTML Layout System </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated/"> Demonstrating AMP layouts </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Validation Workflow</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/"> Validate AMP pages </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/"> AMP validation errors </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP Caches & CORS</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cache-debugging/"> Debug AMP Cache issues </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/"> CORS in AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/"> How AMP pages are cached </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cache-urls/"> AMP Cache URL Format and Request Handling </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/learn/combine-amp-pwa/"> How AMP and PWA relate to each other </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Develop</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/"> <span>Style & Layout</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/"> Supported CSS </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/"> Layout & media queries </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/"> Placeholders & fallbacks </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/art_direction/"> Responsive images with srcset, sizes & heights </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design/"> Create responsive AMP pages </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts/"> Add custom fonts </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/media_iframes_3p/"> <span>Include media, iframes & third-party content</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/media_iframes_3p/"> Include images & video </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/media_iframes_3p/third_party_components/"> Include third-party content </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/media_iframes_3p/iframes/"> Include iframes </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity_guide/"> <span>Interactivity</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity_guide/foundations/"> Interactivity foundations </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity_guide/ready_made/"> Ready-made interactivity with AMP components </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/"> Building personalized interactive experiences </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity_guide/client_rendering/"> Client-side rendering in AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Animate & Transition</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/animations/triggering_css_animations/"> Triggering CSS animations & transitions </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/animations/introduction_to_animations/"> Introduction to complex animations </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/custom-javascript/"> Use custom JavaScript in AMP pages </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/monetization/"> <span>Monetize your AMP pages</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/monetization/"> Monetizing your AMP page with ads </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/monetization/ads_vendors/"> Ads vendors </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/monetization/content_encryption/"> Protect your subscription content with client-side encryption </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity/"> <span>Create interactive AMP</span> <span class="nav-link-lastword">pages<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity/prereqs-setup/"> Setting up </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity/get-familiar/"> Getting familiar with the starter code </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity/advanced-interactivity/"> Improving the interactivity </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity/remote-data/"> Working with remote data </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/interactivity/wrapping-up/"> Wrapping up </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/login_requiring/"> <span>Create a login-requiring AMP</span> <span class="nav-link-lastword">page<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/login_requiring/login/"> Login </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/login_requiring/add_comment/"> Add a comment </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/login_requiring/logout/"> Logout </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/login_requiring/summary/"> Summary </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/custom-javascript-tutorial/"> Create a UI widget with custom JavaScript <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/live_blog/"> Create a live blog <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/develop/seatmap/"> Create a seatmap <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Integrate</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/integrate/web-story-player-guide/"> Creating Web Story experiences using the Web Story Player on non-AMP sites </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/integrate/amp-in-pwa/"> Use AMP as a data source for your PWA </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/integrate/amp-to-pwa/"> Preload your PWA from your AMP pages </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/integrate/integrate-with-apps/"> Integrate AMP with your app </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/integrate/embed-stories/"> Integrate stories in AMP pages </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/integrate/embed-stories-nonamp/"> Integrate Web Stories in non-AMP pages </a> </li> </ul> </li> <li class="nav-item active level-1"> <span class="nav-link"> <span>Optimize & Measure</span> </span> <input class="nav-trigger" type="checkbox" checked/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/amp-managing-user-state/"> Manage non-authenticated user state with AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/publishing_checklist/"> AMP publishing checklist </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/"> <span>Using an AMP Optimizer</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/explainer/"> How an AMP Optimizer works </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/node-amp-optimizer/"> Node.js AMP Optimizer Guide </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/"> <span>Track engagement with analytics</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/"> Analytics Vendors </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics_basics/"> Analytics: the basics </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/deep_dive_analytics/"> Deep dive into AMP analytics </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/use_cases/"> Use cases </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/signed-exchange/"> Serve AMP using signed exchanges </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/discovery/"> Make your pages discoverable </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/engagement/"> Improve user engagement </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp/"> Optimize your hosted AMP pages </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/secure-pages/"> Secure from third party attacks </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/amp_to_pwa/"> Turn your AMP site into a PWA <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/amp-as-pwa/"> Easy offline access and improved performance </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/optimize-and-measure/tracking-engagement/"> How to configure basic analytics for your AMP pages <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/"> <span>Contribute</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/"> How to contribute </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/integrate-your-analytics-tools/"> Integrate your analytics tool with AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/contribute-documentation/"> <span>Contribute documentation</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/contribute-documentation/documentation-types/"> Documentation types </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/contribute-documentation/terminology/"> AMP terminology </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/"> Formatting guides & tutorials </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/vendor-contributions/"> <span>Third party contributions</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/vendor-contributions/release-schedule/"> Release Schedule </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/documentation/guides-and-tutorials/contribute/translations/"> Contribute translations </a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="ap-o-footer"> <div class="ap-o-footer-line-top"> <div class="ap-o-footer-hint">Of course, this site is made with AMP!</div> <div class="ap-o-footer-follow"> <h5 class="ap-o-footer-follow-title">Follow us</h5> <ul class="ap-o-footer-follow-menu"> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use></svg> </a></li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"></use></svg></a> </li> </ul> </div> </div> <div class="ap-o-footer-nav"> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">Overview</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/about/websites/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>AMP Framework</a></li> <li class="ap-o-footer-nav-item"><a href="/about/use-cases/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Use Cases</a></li> <li class="ap-o-footer-nav-item"><a href="/success-stories/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Success stories</a></li> <li class="ap-o-footer-nav-item"><a href="/about/how-amp-works/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Functionality</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">Docs</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/documentation/guides-and-tutorials/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Get Started</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/guides-and-tutorials/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Guides and Tutorials</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/components/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Components</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/examples/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Examples</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/templates/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Design Templates</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/tools/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Tools</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">Community</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/support/faq/platform-and-vendor-partners/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Platform and Vendor Partners</a></li> <li class="ap-o-footer-nav-item"><a href="/documentation/guides-and-tutorials/contribute/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Contribute</a></li> <li class="ap-o-footer-nav-item"><a href="/community/roadmap/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Roadmap</a></li> </ul> <h5 class="ap-o-footer-nav-title">OpenJS Foundation</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>The OpenJS Foundation</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>OpenJS Foundation Bylaws</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Trademark Policy</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Trademark List</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">Events</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>AMP Conf 2020</a></li> <li class="ap-o-footer-nav-item"><a href="/events/amp-cs-2019/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="ap-o-footer-nav-title">AMP Brand Materials</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use></svg></div>Styleguide</a></li> <li class="ap-o-footer-nav-item"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use></svg></div>Logos</a></li> </ul> </div> </div> <div class="ap-o-footer-line-bottom"> <div class="ap-o-footer-openjsf"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive"></amp-img> </div> <ul class="ap-o-footer-legal-nav-menu"> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://privacy-policy.openjsf.org" rel="noopener">Privacy Policy</a></li> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="ap-o-footer-copyright"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent> <script type="application/json"> {"extraUrlParams": {"cd2": "${ampdocHost}"}, "requests": {"CWV_EVENT": "${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv", "base": "https://google-analytics.com/collect/"}, "triggers": {"banner": {"on": "click", "selector": "#top-banner", "vars": {"event_action": "click", "event_category": "guides-and-tutorials", "event_label": "banner", "event_name": "banner"}}, "breadcrumbLink": {"on": "click", "selector": ".ap-m-breadcrumbs-crumb", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "breadcrumbs", "event_name": "breadcrumbs"}}, "cls": {"extraUrlParams": {"cls": "${cumulativeLayoutShift}"}, "on": "visible", "request": "CWV_EVENT"}, "defaultPageview": {"on": "visible", "request": "pageview", "vars": {"title": "{{title}}"}}, "fid": {"extraUrlParams": {"fid": "${firstInputDelay}"}, "on": "visible", "request": "CWV_EVENT"}, "formatToggle": {"on": "click", "selector": ".ap-m-format-toggle-link", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "format-toggle", "event_name": "format-toggle"}}, "lcp": {"extraUrlParams": {"lcp": "${largestContentfulPaint}"}, "on": "visible", "request": "CWV_EVENT"}, "navigation": {"on": "click", "selector": ".ap--header a, .ap-o-burger-menu-link", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "navigation", "event_name": "navigation"}}, "scrolledEnd": {"on": "scroll", "scrollSpec": {"verticalBoundaries": [90]}, "vars": {"event_action": "end", "event_category": "guides-and-tutorials", "event_label": "scroll", "event_name": "scroll"}}, "scrolledHalf": {"on": "scroll", "scrollSpec": {"verticalBoundaries": [50]}, "vars": {"event_action": "half", "event_category": "guides-and-tutorials", "event_label": "scroll", "event_name": "scroll"}}, "searchButton": {"on": "click", "selector": "#searchTriggerOpen", "vars": {"event_action": "open", "event_category": "search", "event_label": "search", "event_name": "search"}}, "sidebarLink": {"on": "click", "selector": ".ap-o-sidebar a", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "sidebar", "event_name": "sidebar"}}, "sidebarToggle": {"on": "click", "selector": "label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]", "vars": {"event_action": "toggle", "event_category": "guides-and-tutorials", "event_label": "sidebar", "event_name": "sidebar"}}, "tocLink": {"on": "click", "selector": ".ap-o-toc a", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "toc", "event_name": "toc"}}, "tocToggle": {"on": "click", "selector": ".ap-o-toc label", "vars": {"event_action": "toggle", "event_category": "guides-and-tutorials", "event_label": "toc", "event_name": "toc"}}}, "vars": {"config": {"G-TYM9BH1XCX": {"groups": "default"}}, "gtag_id": "G-TYM9BH1XCX"}} </script> </amp-analytics><amp-geo layout="nodisplay"> <script type="application/json"> { "ISOCountryGroups": { "eu": ["preset-eea"], "doubleOptIn": ["de", "at", "no", "gr", "lu"] } } </script> </amp-geo> <amp-consent id="consent" class="ap-o-consent" layout="nodisplay"> <script type="application/json"> { "consentInstanceId": "consent", "promptUI": "consent-popup", "consentRequired": false, "geoOverride": { "eu": { "consentRequired": true } } } </script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="ap-o-consent-close" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="Dismiss consent"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Accept use of cookies">Got it!</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev.org.tw/serviceworker.html" layout="nodisplay"></amp-install-serviceworker> </body> </html>