This is page 3 of 20. Use http://codebase.md/cloudflare/docs/imgs/playground-ai-screenshot.png?page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/assets/img/logo-blue.svg:
--------------------------------------------------------------------------------
```
<svg width="175" height="60" viewBox="0 0 175 60" xmlns="http://www.w3.org/2000/svg"><title>AMP-Brand-Blue</title><g fill="#0379C4" fill-rule="evenodd"><path d="M92.938 34.265h7.07l-2.38-7.015c-.153-.445-.334-.97-.54-1.574-.21-.603-.414-1.256-.615-1.96-.188.715-.384 1.378-.585 1.988-.202.61-.392 1.136-.57 1.58l-2.38 6.98zm16.632 9.794h-4.656c-.522 0-.95-.122-1.29-.362-.336-.24-.57-.548-.7-.923l-1.528-4.465h-9.844l-1.53 4.465c-.116.328-.348.625-.69.888-.344.264-.765.396-1.263.396h-4.692L93.4 18.44h6.147L109.57 44.06zM130.562 33.736c.22.48.43.975.63 1.48.202-.518.415-1.02.64-1.505.225-.487.456-.96.693-1.416l6.645-12.954c.12-.224.24-.397.365-.52.124-.123.264-.214.417-.273.154-.06.33-.088.524-.088h5.27v25.6h-5.295V29.324c0-.714.035-1.49.106-2.32l-6.858 13.168c-.213.41-.5.72-.862.932-.362.21-.773.316-1.235.316h-.816c-.462 0-.873-.104-1.235-.315-.363-.21-.65-.52-.864-.932l-6.893-13.187c.047.41.083.818.106 1.222.023.405.035.778.035 1.117V44.06h-5.295v-25.6h5.269c.194 0 .37.028.523.087.154.06.293.15.417.274.125.123.246.296.365.52l6.663 13.006c.237.446.464.91.684 1.39M160.99 31.013h3.127c1.563 0 2.688-.37 3.376-1.108.687-.738 1.03-1.77 1.03-3.094 0-.585-.088-1.12-.266-1.6-.178-.48-.448-.893-.808-1.24-.363-.344-.82-.612-1.37-.8-.55-.187-1.206-.28-1.963-.28h-3.127v8.123zm0 4.483v8.562h-6.006V18.442h9.133c1.824 0 3.39.214 4.7.64 1.308.43 2.387 1.018 3.233 1.77.847.75 1.473 1.634 1.875 2.653.403 1.02.604 2.122.604 3.306 0 1.278-.208 2.45-.622 3.518-.416 1.065-1.05 1.98-1.902 2.742-.853.762-1.934 1.357-3.243 1.784-1.308.43-2.857.642-4.646.642h-3.127zM40.674 27.253L27.968 48.196h-2.302l2.276-13.647-7.048.01h-.1c-.633 0-1.148-.51-1.148-1.137 0-.27.254-.727.254-.727l12.664-20.92 2.34.01-2.332 13.668 7.084-.008.112-.002c.635 0 1.15.51 1.15 1.14 0 .254-.1.478-.245.668zM30.288 0C13.56 0 0 13.432 0 30 0 46.57 13.56 60 30.288 60c16.73 0 30.29-13.431 30.29-30 0-16.568-13.56-30-30.29-30z"/></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/publisher_icon_simple.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 101.89 99.69"><defs><style>.cls-1,.cls-2{fill:#fff;fill-opacity:0.7;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5{stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3,.cls-4,.cls-5{fill:none;}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{fill:#0dd4ff;opacity:0.7;}</style><linearGradient id="linear-gradient" x1="-5.17" y1="84.96" x2="66.47" y2="13.33" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="13.37" y1="94.53" x2="85.01" y2="22.89" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="41.54" y1="67.41" x2="59.85" y2="49.1" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="31.78" y1="73.19" x2="45.37" y2="59.59" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="54.45" y1="57.75" x2="68.78" y2="43.43" xlink:href="#linear-gradient"/></defs><title>publisher_icon_simple</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="60.8 56.48 0.5 89.29 0.5 41.8 60.8 9 60.8 56.48"/><polygon class="cls-2" points="79.34 66.05 19.04 98.85 19.04 51.37 79.34 18.57 79.34 66.05"/><line class="cls-3" x1="53.6" y1="43.24" x2="47.79" y2="73.27"/><polyline class="cls-4" points="41.01 55.35 30.36 70.36 42.95 70.84"/><polyline class="cls-5" points="58.44 45.66 70.06 46.15 58.44 61.64"/><circle class="cls-6" cx="86.9" cy="21.49" r="1.15"/><circle class="cls-6" cx="91.89" cy="11.15" r="1.15"/><circle class="cls-6" cx="97.23" cy="15.67" r="1.15"/><circle class="cls-6" cx="100.74" cy="9.82" r="1.15"/><circle class="cls-6" cx="100.23" cy="1.15" r="1.15"/></g></g></svg>
```
--------------------------------------------------------------------------------
/views/about-who.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/breadcrumb-nav.html" %}
{% endset %}
{% block main %}
{{ navmarkup|safe }}
<div class="container xl about-who-block">
<div class="hero-images">
<amp-img class="triangle"
noloading
width=1424
height=2095
layout=responsive
src="/static/img/about/who-use-amp/{{doc.hero.triangle_img}}">
</amp-img>
<amp-img class="lines"
noloading
width=579
height=481
layout=responsive
src="/static/img/about/who-use-amp/{{doc.hero.line_img}}">
</amp-img>
<amp-img class="phones"
noloading
width=3104
height=1926
layout=responsive
srcset="{{doc.hero.hero_img_base + '.png 3104w'}},
{{doc.hero.hero_img_base + '@1_5x.png 2049w'}},
{{doc.hero.hero_img_base + '@1x.png 1552w'}}"
src="{{doc.hero.hero_img_base + '.png'}}">
</amp-img>
</div>
<section class="hero">
<h1 class="title">{{_(doc.hero.title)}}</h1>
<p class="subtitle">{{_(doc.hero.subtitle)}}</p>
</section>
<section class="user-categories card-container">
{% for card in doc.cards %}
<a class="card" id="{{card.name|slug}}" href="{{g.doc('/content/learn/who/' ~ card.name|slug ~ '.yaml', locale=doc.locale).url.path}}">
<amp-img
noloading
height=150
layout=fixed-height
src="/static/img/about/who-use-amp/{{card.icon}}">
</amp-img>
<h4 class="user-name">{{card.name}}</h4>
<div class="underlined cta user-link">{{_(card.cta)}}</div>
</a>
{% endfor %}
</section>
</div>
{% with cta = doc.cta %}
{% include "/views/partials/footer-cta.html" %}
{% endwith %}
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/views/grid_page.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/breadcrumb-nav.html" %}
{% endset %}
{% block main %}
{{ navmarkup|safe }}
<div class="container lg">
<div class="content">
<article class="post">
<h1 class="post-title">{{_(doc.title)}}</h1>
<div class="post-content">
{{doc.html|render|safe}}
{% if doc.collectionPath %}
{% set collection = doc.collectionPath %}
{% elif doc.collection.title == doc.title %}
{% set collection = doc.collection.pod_path %}
{% else %}
{% set collection = (doc.collection.pod_path + '/' + doc.base) %}
{% endif %}
{% if doc.sections %}
{% for section in doc.sections %}
<h2 class="card-section-heading">{{_(section.title)}}</h2>
<div class="card-container grid">
{% set sectionIndex = loop.index0 %}
{% for item in g.collection(collection).docs(recursive=false, locale=doc.locale) %}
{% if item.group == sectionIndex %}
{% with doc = item %}
{% include "/views/partials/grid-card.html" %}
{% endwith %}
{% endif %}
{% endfor %}
</div>
{% endfor %}
{% else %}
<div class="card-container grid">
{% for item in g.collection(collection).docs(recursive=false, locale=doc.locale) %}
{% with doc = item %}
{% include "/views/partials/grid-card.html" %}
{% endwith %}
{% endfor %}
</div>
{% endif %}
</div>
</article>
</div>
</div>
{% if doc.cta %}
{% with cta = doc.cta %}
{% include "/views/partials/footer-cta.html" %}
{% endwith %}
{% endif %}
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/ads_icon.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 61.19 89.34"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#fff;stroke-width:0.87px;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;}.cls-2,.cls-3{fill-opacity:0.7;stroke-linecap:round;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:#fff;stroke:url(#linear-gradient-2);}.cls-4{fill-opacity:0.8;fill:url(#linear-gradient-3);}.cls-5{fill:#0dd7ff;opacity:0.7;}</style><linearGradient id="linear-gradient" x1="-5.87" y1="72.19" x2="42.72" y2="23.59" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#7ad5fc"/></linearGradient><linearGradient id="linear-gradient-2" x1="13.46" y1="82.86" x2="63.4" y2="32.92" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="37.02" y1="63.72" x2="52.82" y2="47.92" xlink:href="#linear-gradient"/></defs><title>ads_icon</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M36.23,32.51"/><path class="cls-1" d="M18.55,51.77"/><path class="cls-2" d="M36.42,58.57.43,78.49V37.21l36-19.92ZM4,43.74,29.86,29.45M11.76,47.89,4.36,52.1m0,4.24,7.4-4.21"/><path class="cls-3" d="M56.42,68.57l-36,19.92V47.21l36-19.92ZM24,53.74,49.86,39.45M31.76,57.89l-7.4,4.21m0,4.24,7.4-4.21"/><polygon class="cls-4" points="50.57 59.88 39.27 65.96 39.27 51.76 50.57 45.68 50.57 59.88"/><circle class="cls-5" cx="60.04" cy="1.15" r="1.15" transform="translate(0.02 3.08) rotate(-2.94)"/><circle class="cls-5" cx="55.58" cy="11.73" r="1.15" transform="translate(-0.53 2.86) rotate(-2.94)"/><circle class="cls-5" cx="50.03" cy="7.5" r="1.15" transform="translate(-0.32 2.57) rotate(-2.94)"/><circle class="cls-5" cx="46.82" cy="13.51" r="1.15" transform="translate(-0.63 2.42) rotate(-2.94)"/><circle class="cls-5" cx="47.77" cy="22.14" r="1.15" transform="translate(-1.07 2.48) rotate(-2.94)"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/_sprite.scss:
--------------------------------------------------------------------------------
```scss
@import 'sprite_generated';
$sprite: map-get($icons, sprite) !default;
$baseFontSize: 16px !default;
// Gets an attribute from the sass map
@function sprite-attr($icon, $attr) {
$newIcon: map-get($icons, $icon);
@if $newIcon == null {
@warn "Can't find an icon with the name #{$icon}";
}
@return map-get($newIcon, $attr);
}
@function icon-attr($icon) {
$attr: (
width: sprite-attr($icon, width),
height: sprite-attr($icon, height),
x: sprite-attr($icon, backgroundX),
y: sprite-attr($icon, backgroundY)
);
@return $attr;
}
// Sets background image and size
%sprite {
display: inline-block;
background-image: url(map-get($sprite, svgPath));
background-size: map-get($sprite, width) map-get($sprite, height);
}
// For use with the gulp sprite plugin
@mixin sprite($icon, $type: all) {
@if $type == all {
// Shares the backgrounds
@extend %sprite;
}
$iconMap: icon-attr($icon);
// Outputs dimensions
@if $type == all or $type == size {
width: map-get($iconMap, width);
height: map-get($iconMap, height);
}
// Outputs background position
@if $type == all or $type == bg {
background-position: map-get($iconMap, x) map-get($iconMap, y);
}
}
// Sets background image and size
%masked-sprite {
display: inline-block;
mask-image: url(map-get($sprite, svgPath));
mask-size: map-get($sprite, width) map-get($sprite, height);
background-color: #000;
}
// For use with the gulp sprite plugin
@mixin masked-sprite($icon, $type: all) {
@if $type == all {
// Shares the backgrounds
@extend %masked-sprite;
}
$iconMap: icon-attr($icon);
// Outputs dimensions
@if $type == all or $type == size {
width: map-get($iconMap, width);
height: map-get($iconMap, height);
}
// Outputs background position
@if $type == all or $type == bg {
mask-position: map-get($iconMap, x) map-get($iconMap, y);
}
}
```
--------------------------------------------------------------------------------
/scripts/component_categories.json:
--------------------------------------------------------------------------------
```json
{
"amp-ad": "ads-analytics",
"amp-analytics": "ads-analytics",
"amp-call-tracking": "ads-analytics",
"amp-experiment": "ads-analytics",
"amp-pixel": "ads-analytics",
"amp-auto-ads": "ads-analytics",
"amp-sticky-ad": "ads-analytics",
"amp-access-laterpay": "dynamic-content",
"amp-access": "dynamic-content",
"amp-bind": "dynamic-content",
"amp-form": "dynamic-content",
"amp-install-serviceworker": "dynamic-content",
"amp-list": "dynamic-content",
"amp-live-list": "dynamic-content",
"amp-mustache": "dynamic-content",
"amp-selector": "dynamic-content",
"amp-user-notification": "dynamic-content",
"amp-accordion": "layout",
"amp-app-banner": "layout",
"amp-carousel": "layout",
"amp-fx-flying-carpet": "layout",
"amp-fx-parallax": "layout",
"amp-iframe": "layout",
"amp-lightbox": "layout",
"amp-sidebar": "layout",
"amp-anim": "media",
"amp-apester-media": "media",
"amp-audio": "media",
"amp-brid-player": "media",
"amp-brightcove": "media",
"amp-dailymotion": "media",
"amp-google-vrview-image": "media",
"amp-hulu": "media",
"amp-image-lightbox": "media",
"amp-img": "media",
"amp-izlesene": "media",
"amp-jwplayer": "media",
"amp-kaltura-player": "media",
"amp-o2-player": "media",
"amp-ooyala-player": "media",
"amp-playbuzz": "media",
"amp-reach-player": "media",
"amp-soundcloud": "media",
"amp-springboard-player": "media",
"amp-video": "media",
"amp-vimeo": "media",
"amp-youtube": "media",
"amp-animation": "presentation",
"amp-dynamic-css-classes": "presentation",
"amp-fit-text": "presentation",
"amp-font": "presentation",
"amp-viz-vega": "presentation",
"amp-facebook": "social",
"amp-gfycat": "social",
"amp-instagram": "social",
"amp-pinterest": "social",
"amp-reddit": "social",
"amp-share-tracking": "social",
"amp-social-share": "social",
"amp-twitter": "social",
"amp-vine": "social"
}
```
--------------------------------------------------------------------------------
/content/includes/menu.yaml:
--------------------------------------------------------------------------------
```yaml
menu:
- href: /content/learn/overview.html
copy@: About
collection: learn
children:
- href: /content/learn/overview.html
copy@: "What is AMP?"
- href: /content/learn/about-how.yaml
copy@: "How AMP Works"
- href: /content/learn/amp-design-principles.yaml
copy@: "Design Principles"
- href: /content/learn/who-uses-amp.yaml
copy@: "Who is AMP for?"
collection: learn/who
- href: /content/learn/case-studies.html
copy@: "Case Studies"
collection: learn/case-studies
- href: /content/docs/get_started/general/create.md
copy@: Docs
collection: docs
children:
- href: /content/docs/get_started/general/create.md
copy@: "Getting started"
- href: /content/docs/get_started/general/create.md
copy@: "Tutorials"
collection: docs/get_started
- href: /content/docs/guides/author_develop/responsive_amp.md
copy@: "Guides"
collection: docs/guides
- href: /content/docs/reference/components.md
copy@: "Reference"
collection: docs/reference
- href: https://ampbyexample.com/
copy@: "Examples"
- href: /content/docs/contribute/contribute.md
copy@: "Contribute"
collection: docs/contribute
- href: /content/latest/latest.html
copy@: The Latest
collection: latest
children:
- href: /content/latest/latest.html
copy@: "What's New"
- href: /content/latest/list-blog.html
copy@: "News"
- href: /content/latest/list-event.html
copy@: "Events"
- href: /content/latest/roadmap.html
copy@: "Roadmap"
- href: /content/support/support.md
copy@: Support
collection: support
children:
- href: /content/support/faqs.md
copy@: "FAQs"
collection: support/faqs
- href: /content/support/developer.md
copy@: "Developer Support"
collection: support/developer
- href: /assets/img/brand-guidelines.pdf
static: true
copy@: "Brand Guidelines"
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/iframes.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Include Iframes
$order: 2
components:
- iframe
toc: true
---
[TOC]
Learn how to display include media content in your pages, and how to use iframes
to display advanced content outside of AMP's limitations.
## The basics
Display an iframe in your page using the
[`amp-iframe`](/docs/reference/components/amp-iframe.html) element.
Iframes are especially useful in AMP to display content not supported in the
main page context, such as content requiring user-authored JavaScript.
`amp-iframe` requirements:
* Must be at least **600px** or **75%** of the first viewport away from the top.
* Can only request resources via HTTPS, and they must not be in the same origin
as the container, unless they do not specify allow-same-origin.
{% call callout('Tip', type='note') %}
Learn more at the [full specification for <code>amp-iframe</code>](/docs/reference/components/amp-iframe.html).
{% endcall %}
## Include the script
To include an `amp-iframe` in your page,
first include the following script to the `<head>`, which loads the additional
code for the extended component:
[sourcecode:html]
<script async custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
[/sourcecode]
## Write the markup
An example `amp-iframe` from the
[released.amp example](https://github.com/ampproject/amphtml/blob/master/examples/released.amp.html):
[sourcecode:html]
<amp-iframe width=300 height=300
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
layout="responsive"
frameborder="0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>
[/sourcecode]
## Examples
More advanced examples can be found in our [advanced demo page](https://ampbyexample.com/components/amp-iframe/), which is embedded
as `<amp-iframe>` below:
<amp-iframe width=300 height=300
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="https://ampbyexample.com/components/amp-iframe/embed">
</amp-iframe>
```
--------------------------------------------------------------------------------
/pwa/pwa.html:
--------------------------------------------------------------------------------
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PWA</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto">
<!-- pwa.html should run at `/pwa` -->
<script>
if (window.location.pathname.indexOf('/examples') == 0) {
window.location.assign('/pwa');
}
</script>
<script src="https://cdn.ampproject.org/shadow-v0.js"></script>
<style>
body {
margin: 0;
font-family: Roboto, Arial;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
background: rgba(0, 0, 0, 0.9);
color: #eee;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
font-size: 18px;
}
.container {
min-height: 100vh;
background: #eee;
overflow: hidden;
}
.stream {
margin: 64px 8px;
}
.card {
background: #fff;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
padding: 8px;
margin: 8px 0;
}
.card a {
text-decoration: none;
}
.card h4 {
margin: 8px 0;
font-size: 16px;
color: rgba(0,0,0,0.95);
}
.card .detail {
margin: 8px 0;
font-size: 14px;
color: rgba(0,0,0,0.87);
}
.amp-slot {
padding: 16px;
font-size: larger;
background: cyan;
}
</style>
</head>
<body>
<header>
PWA Chronicles
</header>
<div class="container">
<div id="doc-container" class="doc-container">
Document will appear here
</div>
<template id="amp-slot-template">
<div class="amp-slot" slot="slot1" onclick="alert('This is not allowed and I don\'t care!');">
This content comes from parent shell! Including forbidden elements, styles, etc.
<img src="/examples/img/[email protected]" style="width: 40px; height: 40px;">
</div>
</template>
</div>
<!-- Must be in the very end. -->
<script src="/pwa.js"></script>
</body>
</html>
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_future.svg:
--------------------------------------------------------------------------------
```
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1{fill:#fff;}.cls-1,.cls-5{opacity:0.7;}.cls-2,.cls-4{fill:none;stroke-linecap:round;stroke-miterlimit:10;}.cls-2{stroke:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{stroke:url(#linear-gradient-3);}.cls-5{fill:#0dd7ff;}</style><linearGradient id="linear-gradient" x1="61.36" y1="79.2" x2="88.83" y2="85.17" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="63.79" y1="68.02" x2="91.26" y2="74" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="63.6" y1="18.37" x2="71.82" y2="19.65" gradientTransform="translate(11.58 58.93) rotate(3.43)" xlink:href="#linear-gradient"/></defs><title>design_icon_future</title><path class="cls-1" d="M89,76.54c-.5-7.69-4.07-13.77-9.48-15C72.21,60,64.3,67.89,61.86,79.27s1.51,21.91,8.82,23.52S85.89,96.48,88.34,85.1"/><path class="cls-2" d="M88.91,75.46c-.75-7.17-4.23-12.74-9.39-13.88C72.21,60,64.3,67.89,61.86,79.27s1.51,21.91,8.82,23.52S85.89,96.48,88.34,85.1"/><polygon class="cls-3" points="92.43 71.61 91.61 71.04 88.79 75.09 84.96 71.99 84.33 72.77 89 76.54 92.43 71.61"/><polyline class="cls-4" points="75.52 76.26 74.95 86.03 81.58 82.87"/><ellipse class="cls-5" cx="98.02" cy="78.06" rx="1.43" ry="1.44" transform="translate(9.02 166.27) rotate(-83.27)"/><ellipse class="cls-5" cx="105.69" cy="66.09" rx="1.43" ry="1.44" transform="translate(27.67 163.31) rotate(-83.27)"/><ellipse class="cls-5" cx="106.63" cy="73.41" rx="1.43" ry="1.44" transform="translate(21.23 170.71) rotate(-83.27)"/><ellipse class="cls-5" cx="53.86" cy="92.31" rx="1.43" ry="1.44" transform="translate(-52.11 106.23) rotate(-67.22)"/><ellipse class="cls-5" cx="43.18" cy="101.7" rx="1.43" ry="1.44" transform="translate(-67.3 102.14) rotate(-67.22)"/><ellipse class="cls-5" cx="39.22" cy="93.98" rx="1.43" ry="1.44" transform="translate(-62.61 93.76) rotate(-67.22)"/></svg>
```
--------------------------------------------------------------------------------
/assets/sass/pages/_design-principles.scss:
--------------------------------------------------------------------------------
```scss
.design-principles {
.wrap {
&::after {
content: '';
position: absolute;
z-index: -1;
}
&::after {
background: url(/static/img/about/design-principles/bg2.svg) bottom left/contain no-repeat;
bottom: 0;
height: 69vw;
left: 0;
width: 50vw;
}
}
.title {
margin: 100px auto;
max-width: 500px;
text-align: center;
h1, p {
color: white;
}
}
.principles {
background: white;
display: flex;
margin: 0 auto 100px;
max-width: 90%;
padding: 60px 100px 60px 30px;
position: relative;
&::before, &::after {
content: '';
position: absolute;
}
&::before {
background: url(/static/img/about/design-principles/lines1.svg) center/contain no-repeat;
height: 232px;
right: -360px;
top: -130px;
width: 477px;
}
&::after {
background: url(/static/img/about/design-principles/lines2.svg) center/contain no-repeat;
bottom: -30px;
height: 200px;
left: -280px;
width: 259px;
}
}
.principles-col {
flex: 1 1 auto;
width: 0;
}
.principle {
display: inline-flex;
padding: 40px 0;
&:last-child {
.text::after {
display: none;
}
}
.image {
left: 20px;
height: 150px;
min-height: 150px;
min-width: 150px;
position: relative;
top: -30px;
width: 150px;
}
.text {
position: relative;
&::after {
background: $gradient-med;
bottom: -35px;
content: '';
height: 3px;
position: absolute;
transform: rotate(180deg);
width: 100%;
}
}
}
@include max-screen($tablet-breakpoint) {
.wrap::after {
height: 270vw;
width: 150vw;
}
.principles {
display: block;
padding: 20px;
}
.principles-col {
width: auto;
&:first-child .principle:last-child .text::after {
display: block;
}
}
.principle {
display: block;
.image {
left: 0;
margin: -40px auto;
}
.text {
margin: 0 auto;
max-width: 500px;
}
}
}
}
```
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
```javascript
var autoprefixer = require('gulp-autoprefixer');
var exec = require('child_process').exec;
var plumber = require('gulp-plumber');
var gulp = require('gulp');
var sass = require('gulp-sass');
var svgSprite = require('gulp-svg-sprite');
var Path = {
CSS_SOURCES: './assets/sass/**/*.scss',
CSS_OUT_DIR: './assets/css/'
};
gulp.task('import-docs', function (cb) {
exec('cd ./scripts && ./import_docs.js', function (err, stdout, stderr) {
if (err instanceof Error) {
cb(err);
}
//console.log(stdout);
cb();
});
});
gulp.task('optimize-images', function (cb) {
return gulp.src('./assets/img/symbols/*.svg')
.pipe(svgSprite({
mode: {
css: {
sprite: "../sprite.svg",
bust: false,
render: {
scss: {
template: "./assets/img/symbols/template.scss",
dest: "../../sass/_sprite_generated.scss"
}
}
}
}
}))
.pipe(gulp.dest('./assets/img/'));
});
gulp.task('update-blog-links', function (cb) {
exec('cd ./scripts && ./update_blog_links.js', function (err, stdout, stderr) {
if (err instanceof Error) {
cb(err);
}
//console.log(stdout);
cb();
});
});
gulp.task('update-tweets', function (cb) {
exec('cd ./scripts && ./update_tweets.js', function (err, stdout, stderr) {
if (err instanceof Error) {
cb(err);
}
//console.log(stdout);
cb();
});
});
gulp.task('update-platforms-page', ['import-docs'], function (cb) {
return exec('cd ./scripts && ./update_platforms_page.js', function (err, stdout, stderr) {
if (err instanceof Error) {
cb(err);
}
//console.log(stdout);
cb();
});
});
gulp.task('sass', function() {
return gulp.src(Path.CSS_SOURCES)
.pipe(plumber())
.pipe(sass({
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest(Path.CSS_OUT_DIR));
});
gulp.task('watch', function() {
gulp.watch([Path.CSS_SOURCES], ['sass']);
});
gulp.task('build', ['update-blog-links', 'update-tweets', 'import-docs', 'update-platforms-page', 'optimize-images', 'sass']);
gulp.task('default', ['update-platforms-page', 'sass', 'watch']);
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/placeholders.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Placeholders & fallbacks
$order: 3
toc: true
---
[TOC]
In the spirit of perceived performance and progressive enhancement, it's best practise in AMP to provide placeholders and fallbacks wherever possible.
Some elements will even reward you for doing it by relaxing restrictions – for example, if you provide a placeholder for [`<amp-iframe>`](/docs/reference/components/amp-iframe.html#iframe-with-placeholder), it can be used near the top of the page (which won't work without).
## Placeholders
The element marked with the `placeholder` attribute acts
as a placeholder for the parent AMP element.
If specified, a `placeholder` element must be a direct child of the AMP element.
An element marked as a `placeholder` will always `fill` the parent AMP element.
[sourcecode:html]
<amp-anim src="animated.gif" width=466 height=355 layout="responsive">
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>
[/sourcecode]
By default, the placeholder is immediately shown for the AMP element,
even if the AMP element's resources have not been downloaded or initialized.
Once ready, the AMP element typically hides its placeholder and shows the content.
{% call callout('Note', type='note') %}
The placeholder doesn’t have to be an AMP element;
any HTML element can act as the placeholder.
{% endcall %}
## Fallbacks
Use the `fallback` attribute to indicate the fallback behavior
for any element the browser doesn’t support.
For example, use the `fallback` attribute to communicate to the user
that the browser doesn’t support a particular feature:
[sourcecode:html]
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg">
<div fallback>
<p>Your browser doesn’t support HTML5 video.</p>
</div>
</amp-video>
[/sourcecode]
The `fallback` attribute can be set on any HTML element, not just AMP elements.
If specified, the `fallback` element must be a direct child of the AMP element.
## Hiding loading indicators
Many AMP elements are whitelisted to show a "loading indicator",
which is a basic animation that shows that the element has not yet fully loaded.
Elements can opt out of this behavior by adding the `noloading` attribute.
```
--------------------------------------------------------------------------------
/assets/sass/_config.scss:
--------------------------------------------------------------------------------
```scss
// old colors - clean up later
$color-darkgrey: #797c82;
$color-midblue: #0379c4;
// new colors
$color-ampblue: #1c79c0;
$color-buildblue: #1573ca;
$color-brightblue: #0389ff;
$color-brightbluefaded: rgba(3, 137, 255, .05);
$color-lightblue: #0dd3ff;
$color-lightbluefaded: rgba(13, 211, 255, .05);
$color-lightestblue: rgba(13, 210, 250, .1);
$color-white: #fff;
$color-black: #000;
$color-black-95: #333;
$color-grey-md: #959595;
$color-grey-ltmd: #b3b3b3;
$color-grey-lt: #ededed;
$color-bluegrey: #acbac1;
$color-lightgrey: #f9f9f9;
// gradients
$gradient-angle: 36deg;
$gradient-bold: linear-gradient(to right, $color-ampblue, $color-brightblue, $color-lightblue);
$gradient-med: linear-gradient(to right, $color-brightblue, $color-lightblue);
$gradient-med-faded: linear-gradient(to right, $color-brightbluefaded, $color-lightbluefaded);
$gradient-light: linear-gradient(to right, $color-lightblue, $color-lightblue, $color-white);
$gradient-anglebold: linear-gradient($gradient-angle, $color-lightblue, $color-brightblue, $color-ampblue);
$gradient-anglemed: linear-gradient($gradient-angle, $color-lightblue, $color-brightblue);
$gradient-anglebuild: linear-gradient($gradient-angle, $color-buildblue, $color-brightblue);
$gradient-anglelight: linear-gradient($gradient-angle, $color-lightblue 40%, $color-brightblue);
// $gradient-anglelight: linear-gradient($gradient-angle, $color-ampblue, $color-brightblue, $color-lightblue);
$header-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.10);
//$font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
$font-family: 'Roboto', sans-serif;
$font-family-mono: 'Roboto Mono', Menlo, Monaco, Consolas, "Courier New", monospace;
$font-size-xs: 14px;
$container-size: 3000px;
$container-size-mobile: 320px;
$grid-margin: 22px;
$grid-gutters: 20px;
$mobile-breakpoint: 956px;
$mobile-medium-breakpoint: 460px;
$mobile-baby-breakpoint: 320px;
$tablet-breakpoint: 1024px;
$tablet-portrait-breakpoint: 768px;
$toc-breakpoint: 1100px;
$header-padding: 40px;
$header-mobile-padding: 30px;
$header-height: 140px;
$share-button-size: 63px;
$share-button-distance: 10px;
$share-button-size-full: $share-button-size + $share-button-distance;
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Configure Analytics
$order: 0
---
## Decide before you start
All analytics solutions are built upon knowing what data you need,
and how you intend to analyze that data. Decide before you start:
* Will you use third-party analytics tools to analyze user engagement,
or your own in-house solution?
* What user behaviors will you measure to understand user engagement?
### Send data to vendor or self?
If you have your own in-house solution for measuring user engagement,
the only thing you will need to integrate AMP analytics with that solution is a URL.
This is where you will send the data.
You can also send data to various URLs.
For example, you can send page view data to one URL,
and social engagement data to another URL.
AMP analytics is specifically designed to measure once and report to many.
If you are already working with one or more analytics vendors,
check the
[amp-analytics specification](/docs/reference/extended/amp-analytics.html)
to see if they’ve integrated their solution with AMP.
If they have, simply link to their docs from the specification
and start following the instructions.
If the analytics vendor hasn’t integrated with AMP,
reach out to the vendor to ask for their support.
We also encourage you to [create an issue in the AMP project](https://github.com/ampproject/amphtml/issues/new)
requesting that the vendor be added.
See also
[Integrating your analytics tools in AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
### What data do you need?
What data about your users will you capture in order to measure engagement?
You must identify this data before you can configure it.
Key data points to consider:
* Will you track only page views, or additional user engagement patterns
(see also [amp-pixel or amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
* What kinds of data will you capture about your users, your content,
the device or browser (see also [Variable substitution](/docs/guides/analytics/analytics_basics.html#variable-substitution))?
* How will you identify your users (see also [User identification](/docs/guides/analytics/analytics_basics.html#user-identification))?
```
--------------------------------------------------------------------------------
/assets/sass/_footer.scss:
--------------------------------------------------------------------------------
```scss
footer {
background-color: $color-white;
padding: 30px 0;
position: relative;
a {
line-height: 0;
}
.footer-image {
margin: 0 10px;
&.twitter {
@include sprite(twitter);
}
&.wordpress {
@include sprite(wordpress);
}
}
.footer-icons {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
.footer-privacy {
color: #ccc;
font-size: 12px;
font-weight: 300;
left: 20px;
position: absolute;
text-transform: none;
}
}
.footer-cta {
background: $gradient-bold;
display: block;
padding: 20px 30px;
position: relative;
z-index: 1;
.cta-line {
position: absolute;
&.left {
height: 140px;
left: 0;
top: -50px;
width: 156px;
}
&.right {
bottom: -30px;
height: 107.5px;
right: -50px;
width: 175px;
}
&.right-half {
bottom: 0;
height: 77.5px;
right: -50px;
width: 175px;
overflow: hidden;
}
}
.inner {
position: relative;
margin: 0 auto;
max-width: 1200px;
width: 80%;
h2 {
text-transform: none;
}
h2, .link-text {
color: $color-white;
display: inline-block;
}
.link-text {
color: white;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
&::after {
background: url(/static/img/arrow.svg) center/cover no-repeat;
content: '';
display: inline-block;
height: 12px;
margin-left: 10px;
width: 12px;
}
}
}
}
.rtl .footer-cta {
.inner .link-text {
left: 0;
right: auto;
&::after {
margin: 0 10px 0 0;
transform: rotate(180deg);
}
}
}
@include max-screen(1000px) {
.footer-cta .inner {
width: 90%;
}
}
@include max-screen($mobile-breakpoint) {
.footer-cta {
overflow: hidden;
.cta-line.right,
.cta-line.right-half {
bottom: 10px;
right: -100px;
height: 107.5px;
}
.inner {
text-align: center;
width: 100%;
h1, .link-text {
display: block;
}
.link-text {
margin-top: 20px;
position: static;
}
}
}
}
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Monetisasi Penerbit
faq:
- title@: Bagaimana cara kerja iklan di Accelerated Mobile Pages?
answer@: |
Tujuan Proyek Accelerated Mobile Pages adalah memastikan monetisasi iklan yang efektif di web seluler ketika merangkul pendekatan yang berfokus pada pengguna. Dengan konteks tersebut, tujuannya adalah untuk memberikan dukungan bagi rentang format, jaringan, dan teknologi iklan yang komprehensif di Accelerated Mobile Pages. Oleh karena itu, mereka yang terlibat dalam proyek ini juga akan terlibat dalam penyusunan Praktik Iklan Berkelanjutan untuk memastikan bahwa iklan di file AMP cepat, aman, menarik, dan efektif bagi pengguna.
- title@: Apakah penerbit dapat menjual inventaris iklan mereka sendiri?
answer@: |
Ya, sama seperti situs web mereka yang sudah ada, penerbit mengontrol inventaris iklan dan cara mereka menjualnya.
- title@: Bagaimana langganan dan paywall berfungsi dengan Accelerated Mobile Pages?
answer@: |
Mendukung langganan dan paywall adalah tujuan inti dari proyek Accelerated Mobile Pages. Saat ini AMP mendukung framework dengan akses fleksibel yang membuat penerbit dapat mengontrol pengalaman tampilan dokumen pelanggan, pengguna yang diukur, dan pengguna anonim.
- title@: Bagaimana penanganan analisis di format AMP ini?
answer@: |
Tujuan desain inti proyek ini adalah untuk memastikan penerbit dapat memperoleh wawasan analisis yang kuat. Sementara dukungan analisis di rilis demo sangat terbatas, spek diharapkan memiliki dukungan untuk koleksi informasi analisis, dan berintegrasi dengan sistem pihak ke-3 tanpa mengorbankan kecepatan atau ukuran file AMP. Beberapa penyedia analisis [berpartisipasi](https://www.ampproject.org/who/#analytics) dalam proyek ini.
- title@: Apakah penerbit menerima kredit untuk lalu lintas dari perspektif pengukuran?
answer@: |
Ya, file AMP sama dengan situs Anda lainnya – ruang ini adalah kanvas penerbit.
- title@: Bagaimana cara menjadi bagian dari proyek ini?
answer@: |
Kami menyambut individu dan perusahaan yang ingin terlibat untuk mengisi [Github](https://github.com/ampproject/amphtml/issues/new), jadi, kami dapat menambahkan Anda ke daftar distribusi dan terus mengabari Anda jika ada informasi baru.
---
```
--------------------------------------------------------------------------------
/content/support/faqs/publisher-monetization.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Publisher Monetization
$order: 2
$parent: /content/support/faqs.md
class: faqs
cta:
title@: Next FAQ
link_text@: Supported Platforms and Browsers
link_url: /content/support/faqs/supported-platforms.md
faq:
- title@: How does advertising work on Accelerated Mobile Pages?
answer@: |
A goal of the Accelerated Mobile Pages Project is to ensure effective ad monetization on the mobile web while embracing a user-centric approach. There is currently support for a comprehensive range of ad formats, ad networks and technologies in Accelerated Mobile Pages. As part of that, those involved with the project are also engaged in crafting Sustainable Ad Practices to ensure that ads in AMP files are fast, safe, compelling and effective for users.
- title@: Are publishers able to sell their own ad inventory?
answer@: |
Yes, as with their existing websites, publishers control their ad inventory and how they sell it.
- title@: How do subscriptions and paywalls work with Accelerated Mobile Pages?
answer@: |
It is a core objective of the Accelerated Mobile Pages project to support subscriptions and paywalls. AMP currently supports a flexible access framework where publishers can control the document viewing experience for subscribers, metered users and anonymous users.
- title@: How are analytics being handled in this AMP format?
answer@: |
Ensuring publishers are able to get robust analytics insight is a core design goal for the project. AMP currently supports the collection of analytics information using features like amp-analytics, which can integrate with 3rd party systems without compromising the AMP file speed or size. Several analytics providers are [participating](https://www.ampproject.org/who/#analytics) in the project.
- title@: Do publishers receive credit for the traffic from a measurement perspective?
answer@: |
Yes, an AMP file is the same as the rest of your site – this space is the publisher’s canvas.
- title@: How do I become a part of this project?
answer@: |
We welcome interested individuals and companies who want to get involved to get in touch via [GitHub](https://github.com/ampproject/amphtml/issues/new), so that we can add you to a distribution list and keep you posted on any new information.
---
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/ads_on_amp/ads_getting_started.md:
--------------------------------------------------------------------------------
```markdown
---
$title : "Getting Started"
$order : 0
---
## Three Easy Steps to Serving Ads on Your AMP Page
Not sure how to get started? In this short guide, you’ll learn how to quickly and easily serve ads on your AMP page.
### 1. Add the `<amp-ads>` component to your AMP page:
[sourcecode:html]
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
[/sourcecode]
By adding the `amp-ads` component, you've added the ads framework to your AMP page.
### 2. Specify the ad server or ad network in the `type` attribute:
[sourcecode:html]
<amp-ad
type="a9">
</amp-ad>
[/sourcecode]
[Here](https://www.ampproject.org/docs/reference/components/amp-ad#supported-ad-networks) is a list of supported ad networks.
### 3. Specify your ad unit’s height and width:
[sourcecode:html]
<amp-ad width="300"
height="250"
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
[/sourcecode]
By defining your ad unit's height and weight, you've specified the ad size on your AMP page.
{% call callout('Note', type='note') %}
The additional data attributes are telling the ad network to pull the right size and pub from their servers. Each ad network has different attributes to send. [Learn more](https://www.ampproject.org/docs/reference/components/amp-ad#supported-ad-networks).
{% endcall %}
### 4. [OPTIONAL] Specify a placeholder:
[sourcecode:html]
<amp-ad width="300"
height="200"
type="doubleclick"
data-slot="/4119129/doesnt-exist">
<amp-img placeholder src="placeholder-image.jpg"></amp-img>
</amp-ad>
[/sourcecode]
AMP supports an optional placeholder attribute. Depending on the ad network, you can choose to show a placeholder until the ad is available for viewing. This provides a better user experience by preventing a blank space from showing:
### 5. [OPTIONAL] Specify a fallback attribute:
[sourcecode:html]
<amp-ad width="300"
height="200"
type="doubleclick"
data-slot="/4119129/doesnt-exist">
<amp-img fallback src="fallback-image.jpg"></amp-img>
</amp-ad>
[/sourcecode]
AMP supports an optional fallback attribute. Depending on the ad network, you can choose to show this fallback element if no ad is available to serve.
### 6. Congratulations! You are now serving ads on your AMP page!
```
--------------------------------------------------------------------------------
/content/docs/reference/experimental.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Experimental features
$order: 5
---
[AMP experimental components](https://github.com/ampproject/amphtml/tree/master/tools/experiments)
are released features not yet ready for wide use, so they are protected by an experimental status.
Developers and users can opt-in to using these features before they are fully released.
But they should be used with caution, as they may contain bugs or have unexpected side effects.
## Opt into the AMP Dev Channel
The AMP Dev Channel is a way to opt a browser into using a newer version of the AMP JS libraries.
The AMP Dev Channel release **may be less stable** and it may contain features not available to all users. Opt into this option if you'd like to help test new versions of AMP, report bugs or build documents that require a new feature that is not yet available to everyone.
Opting into Dev Channel is great to:
- test and play with new features not yet available to all users.
- use in Q&A to ensure that your site is compatible with the next version of AMP.
If you find an issue that appears to only occur in the Dev Channel version of AMP, [file an issue](https://github.com/ampproject/amphtml/issues/new) with a description of the problem. Always include a URL to a page that reproduces the issue.
To opt your browser into the AMP Dev Channel, go to [the AMP experiments page](https://cdn.ampproject.org/experiments.html) and activate the "AMP Dev Channel" experiment. To get notified about important/breaking changes about AMP, subscribe to the [amphtml-announce](https://groups.google.com/forum/#!forum/amphtml-announce) mailing list.
## Enable an experimental component
For content served from [https://cdn.ampproject.org](https://cdn.ampproject.org),
go to the [AMP experiments page](https://cdn.ampproject.org/experiments.html)
and enable (or disable) any experimental component by toggling them on (or off). Opting in will set a cookie on your browser that will enable the experiment on all AMP pages served through the Google AMP Cache.
For content served from any other domain, experiments can be toggled in the devtools console when development mode is enabled using:
[sourcecode:js]
AMP.toggleExperiment('experiment')
[/sourcecode]
Any AMP file that includes experimental features will fail
[AMP validation](/docs/guides/validate.html).
Remove these experimental components for production-ready AMP documents.
```
--------------------------------------------------------------------------------
/views/case-study.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/breadcrumb-nav.html" %}
{% endset %}
{% block main %}
<div class="post-detail-block">
{{ navmarkup|safe }}
<div class="container md">
<div class="content">
<article class="post">
<div class="post-header">
<div class="post-meta">
<span class="post-date">{{doc.date}}</span>
</div>
{% if doc.logo %}
<amp-img layout="responsive"
src="/static/img/{{doc.logo.src}}"
width="{{doc.logo.width}}"
height="{{doc.logo.height}}"
class="post-logo"></amp-img>
{% endif %}
<h1 class="post-title">{{ doc.headline or doc.title }}</h1>
</div>
{% if doc.results %}
<div class="post-results {% if doc.results|length > 3%} post-results--small {% endif %}">
{% for result in doc.results %}
<div class="result">
<p class="result-stat">{{result.stat}}</p>
<p class="result-description">{{result.description}}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="post-sheet">
{% include "/views/partials/share.html" %}
<div class="post-content">
{{doc.html|render|safe}}
{% if doc.download %}
<p class="post-download">
<a class="underlined cta" href="/static/img/{{doc.download}}">{{_('Download PDF Case study')}}</a>
</p>
{% endif %}
</div>
</div>
</article>
{% if doc.prev() %}
<div class="post-footer">
<h2>{{_('Previous Posts')}}</h2>
<div class="card-container grid case">
{% with doc = g.doc(doc.prev().pod_path, locale=doc.locale), isCase = true %}
{% include "/views/partials/grid-card.html" %}
{% endwith %}
{% if doc.prev().prev() %}
{% with doc = g.doc(doc.prev().prev().pod_path, locale=doc.locale), isCase = true %}
{% include "/views/partials/grid-card.html" %}
{% endwith %}
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/assets/sass/pages/_post-detail.scss:
--------------------------------------------------------------------------------
```scss
.post-detail {
@extend .bg-triangle-bottom;
.post-sheet {
position: relative;
background: $color-white;
padding: 40px 11.9% 100px 11.9%;
}
.post-meta {
text-align: center;
.post-type,
.post-date {
@extend %text-label;
display: inline-block;
}
.post-type {
color: $color-ampblue;
&::after {
content: '|';
margin: 0 .8em 0 1.15em;
}
}
.post-date {
color: $color-grey-md;
}
}
.post-title {
margin: 25px 0 65px 0;
text-align: center;
}
.author-meta {
margin-bottom: 45px;
text-align: center;
amp-img {
border-radius: 50%;
margin: 0 0 12px 0;
}
.author-name {
color: $color-ampblue;
}
.author-role {
@extend %text-label;
color: $color-grey-ltmd;
margin-top: 8px;
}
}
.post-content {
p,
li {
@extend %text-small;
letter-spacing: 0;
}
a {
@extend %link-inherit;
color: $color-ampblue;
}
strong {
font-weight: 400;
}
// code {
// color: $color-black;
// }
code,
code a {
// border: 0;
font-size: 11px;
// font-weight: 400;
// padding: 0;
}
p {
em,
em a {
@extend %text-body;
font-style: normal;
}
}
amp-img {
margin: 50px auto;
}
}
&:not(.roadmap) {
.post-content {
ul,
ol {
padding-left: .7em;
}
li {
list-style: none;
position: relative;
&::before {
color: $color-ampblue;
content: '\2022 ';
left: -.8em;
position: absolute;
}
}
}
}
.share-module {
right: -115px;
top: 27px;
}
.post-footer {
padding: 0 11.9%;
position: relative;
z-index: 1;
h2 {
text-align: center;
}
a.post-title,
.post-meta {
text-align: left;
text-align: start;
}
}
&.post-blog img {
height: auto;
}
@include max-screen($mobile-breakpoint) {
.post-sheet {
padding: 50px 6% 40px 6%;
}
.post-meta,
.post-title {
text-align: left;
text-align: start;
}
.post-content {
code,
code a {
font-size: 11px;
}
}
}
@include max-screen(1121px) {
.share-module {
right: -35px;
top: -32px;
}
}
}
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Zyski dla wydawców
faq:
- title@: Jak działają reklamy w standardzie Accelerated Mobile Pages?
answer@: |
Celem projektu Accelerated Mobile Pages jest zapewnienie zyskowności reklam internetowych przy zachowaniu podejścia skoncentrowanego na użytkowniku. W takim kontekście chcemy zapewnić obsługę szerokiej gamy formatów reklamowych, sieci reklamowych i technologii w ramach standardu Accelerated Mobile Pages. Częścią projektu jest również zaangażowanie uczestników w przygotowanie zrównoważonych najlepszych praktyk reklamowych, które zapewnią szybkość, bezpieczeństwo, atrakcyjność i efektywność reklam AMP.
- title@: Czy wydawcy mogą sprzedawać własne zasoby reklamowe?
answer@: |
Tak, ponieważ podobnie jak w przypadku należących do nich witryn to dostawcy kontrolują posiadane zasoby reklamowe oraz sprawy związane z ich sprzedażą.
- title@: Jak w przypadku standardu Accelerated Mobile Pages działają subskrypcje oraz treści płatne?
answer@: |
Obsługa subskrypcji i treści płatnych to główny cel projektu Accelerated Mobile Pages. Technologia AMP obecnie obsługuje elastyczną strukturę, za pomocą której wydawcy mogą kontrolować sposób wyświetlania dokumentów przez subskrybentów, użytkowników zarejestrowanych oraz użytkowników anonimowych.
- title@: Jak wygląda analityka w przypadku formatu AMP?
answer@: |
Podstawowym celem projektowym całego przedsięwzięcia jest zapewnienie wydawcom szczegółowych analiz statystycznych. Choć wersja demonstracyjna obsługuje funkcje analityczne w bardzo ograniczony sposób, oczekujemy, że docelowo technologia będzie dostarczać znacznie więcej danych analitycznych. Możliwa również będzie integracja z systemami innych firm bez strat szybkości lub rozmiaru plików AMP. W projekcie [uczestniczy](https://www.ampproject.org/who/#analytics) kilku dostawców rozwiązań analitycznych.
- title@: Czy wydawcy mogą być pewni, że narzędzia analityczne zarejestrują cały ruch internetowy?
answer@: |
Tak, plik AMP jest taki sam, jak reszta witryny – ta przestrzeń należy do wydawcy.
- title@: Jak mogę się stać częścią projektu?
answer@: |
Osoby oraz firmy zainteresowane wzięciem udziału w projekcie prosimy o wypełnienie wniosku w [GitHubie](https://github.com/ampproject/amphtml/issues/new). Wszyscy chętni zostaną dodani do listy dystrybucyjnej i będą otrzymywać najnowsze informacje o naszej inicjatywie.
---
```
--------------------------------------------------------------------------------
/content/docs/contribute/contribute.md:
--------------------------------------------------------------------------------
```markdown
---
$title: How to Contribute
$order: 0
$path: /contribute/
$localization:
path: /{locale}/{base}/
---
The AMP Project would not be possible without help from all members of the community
whether you are a developer, content creator or provider of services relevant to AMP.
There are many ways for you to contribute.
### Reporting issues with AMP
If you have feedback or are experiencing technical issues with AMP, please file it using the [issue tracker](https://github.com/ampproject/amphtml/issues). If you're having issues with [ampproject.org](https://ampproject.org), please use the [docs issue tracker](https://github.com/ampproject/docs/issues) instead.
### Providing technical contributions to AMP
The AMP Project strongly encourages technical contributions!
We hope you'll become an ongoing participant in our open source community, but we also welcome one-off contributions for the issues you're particularly passionate about.
#### Helping with code
To get started with contributing code to the AMP Project read through [the CONTRIBUTING file](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md), which includes details of the process by which a feature or bug fix goes from concept to submission and how you can participate in technical designs and discussions. If you're new to open source we have some [tips for getting started](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#contributing-code).
#### Helping with documentation
Documentation is important for the entire AMP community, and we would appreciate your help in making our documentation better! We've got all sorts of documentation--examples for users of AMP, docs to help AMP Project contributors, etc.
[ampproject.org](https://ampproject.org) is where most people get familiar with AMP. You can contribute to documentation in the [ampproject docs GitHub project](https://github.com/ampproject/docs). (You can even make [the page you are reading](https://github.com/ampproject/docs/blob/master/content/docs/contribute/contribute.md) better!)
[ampbyexample.com](https://ampbyexample.com) provides examples of how to use AMP. You can improve it at the [amp-by-example GitHub project](https://github.com/ampproject/amp-by-example/).
You can also help make things better for other contributors to the AMP Project by improving our documentation in the [amphtml GitHub project](https://github.com/ampproject/amphtml).
```
--------------------------------------------------------------------------------
/content/support/faqs/publisher-monetization@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Monetização de editores
faq:
- title@: Como funciona a publicidade nas Accelerated Mobile Pages?
answer@: |
Um dos objetivos do projeto das Accelerated Mobile Pages é garantir uma monetização de anúncios eficaz com a Web para dispositivos móveis usando uma abordagem centrada no usuário. Nesse contexto, o objetivo é oferecer suporte a uma ampla variedade de formatos de anúncio, redes de anúncios e tecnologias nas Accelerated Mobile Pages. Como parte disso, aqueles envolvidos com o projeto também estão engajados na elaboração de práticas sustentáveis de anúncios a fim de garantir que os anúncios nos arquivos AMP sejam rápidos, seguros, atrativos e eficazes para os usuários.
- title@: Os editores podem vender o próprio inventário de anúncios?
answer@: |
Sim. Como nos sites atuais, os editores podem controlar o inventário de anúncios e a forma de vendê-lo.
- title@: Como as assinaturas e paywalls funcionam nas Accelerated Mobile Pages?
answer@: |
Oferecer suporte a assinaturas e paywalls é um dos objetivos básicos do projeto das Accelerated Mobile Pages. Atualmente, as AMP são compatíveis com uma estrutura de acesso flexível, na qual os editores podem controlar a experiência de visualização de documentos para assinantes, usuários monitorados e usuários anônimos.
- title@: Como as análises estão sendo tratadas no formato AMP?
answer@: |
Garantir que os editores possam ter insights a partir de análises confiáveis é um objetivo de desenvolvimento fundamental para o projeto. Embora o suporte para análises seja muito limitado na versão demonstrativa, as especificações deverão ter suporte para a coleta de informações de análise, além da integração com sistemas de terceiros sem comprometer a velocidade ou o tamanho do arquivo das AMP. Vários provedores de análise estão [participando](https://www.ampproject.org/who/#analytics) do projeto.
- title@: Os editores recebem crédito pelo tráfego a partir de uma perspectiva de medição?
answer@: |
Sim. Um arquivo das AMP é o mesmo que o resto do site, este espaço é a tela do editor.
- title@: Como posso fazer parte do projeto?
answer@: |
As pessoas e as empresas que queiram participar podem preencher o formulário no [Github](https://github.com/ampproject/amphtml/issues/new). Dessa forma, podemos adicionar os interessados à lista de distribuição e mantê-los informados sobre as novidades.
---
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/advertisers/advertisers_icon_ROI.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 127.86 80.95"><defs><style>.cls-1{fill-opacity:0.9;fill:url(#linear-gradient);}.cls-2,.cls-4,.cls-5,.cls-6,.cls-7{fill:#fff;}.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke-miterlimit:10;}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{fill:none;stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{fill:#0dd7ff;fill-opacity:0.7;}</style><linearGradient id="linear-gradient" y1="35.53" x2="54.72" y2="35.53" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="17.5" y1="44.53" x2="73.22" y2="44.53" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="47.85" y1="56.08" x2="96.87" y2="7.06" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-4" x1="61.39" y1="29.54" x2="66.34" y2="24.59" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-5" x1="38.39" y1="51.54" x2="43.34" y2="46.59" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-6" x1="77.39" y1="39.54" x2="82.34" y2="34.59" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-7" x1="101.39" y1="16.54" x2="106.34" y2="11.59" xlink:href="#linear-gradient-2"/></defs><title>advertisers_icon_ROI</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="0 33 0 71.07 54.72 38.07 54.72 0 0 33"/><polygon class="cls-2" points="18 42 18 80.07 72.72 47.07 72.72 9 18 42"/><polyline class="cls-3" points="40.86 49.07 63.86 27.07 79.86 37.07 103.86 14.07"/><circle class="cls-4" cx="63.86" cy="27.07" r="3"/><circle class="cls-5" cx="40.86" cy="49.07" r="3"/><circle class="cls-6" cx="79.86" cy="37.07" r="3"/><circle class="cls-7" cx="103.86" cy="14.07" r="3"/><circle class="cls-8" cx="112.87" cy="23.56" r="1.15"/><circle class="cls-8" cx="117.86" cy="13.22" r="1.15"/><circle class="cls-8" cx="123.2" cy="17.74" r="1.15"/><circle class="cls-8" cx="126.71" cy="11.89" r="1.15"/><circle class="cls-8" cx="126.2" cy="3.22" r="1.15"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/_share.scss:
--------------------------------------------------------------------------------
```scss
.share-module {
border-bottom: 0;
position: absolute;
z-index: 1;
section,
header {
border: 0;
}
p.text-label {
color: $color-ampblue;
text-align: center;
position: relative;
top: $share-button-size;
}
.control header {
width: $share-button-size + 22px;
height: $share-button-size + 50px;
background-color: transparent;
padding-right: 0;
position: relative;
left: -10px;
top: -10px;
transition: height .5s;
}
.toggle-buttons {
position: absolute;
width: $share-button-size + 2px;
height: $share-button-size + 2px;
top: 10px;
left: 10px;
background: $color-ampblue;
z-index: 1;
border-radius: 50%;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .15);
}
.button-open,
.button-close {
position: absolute;
top: 0;
left: 0;
width: $share-button-size + 2px;
height: $share-button-size + 2px;
}
.button-open {
background: url(/static/img/symbols/share.svg) center/38% no-repeat;
transition: opacity .25s;
}
.button-close {
display: none;
background: url(/static/img/symbols/share-close.svg) center/38% no-repeat;
}
.share-buttons {
position: absolute;
width: $share-button-size;
height: $share-button-size * 5 + $share-button-distance * 4;
top: 1px;
left: 1px;
amp-social-share {
position: absolute;
width: $share-button-size;
height: $share-button-size;
top: 0;
left: 0;
transition: transform .25s ease-in-out;
border-radius: 50%;
background-size: 70%;
}
}
.share-content {
header {
height: 0;
}
position: absolute;
top: 0;
}
.control[expanded] {
header {
height: $share-button-size + 22px;
}
.button-close {
display: block;
}
.button-open {
opacity: 0;
}
& + section amp-social-share {
&:nth-child(1) {
transform: translateY($share-button-size-full * 4);
}
&:nth-child(2) {
transform: translateY($share-button-size-full * 3);
}
&:nth-child(3) {
transform: translateY($share-button-size-full * 2);
}
&:nth-child(4) {
transform: translateY($share-button-size-full);
}
}
}
@include max-screen(1121px) {
p.text-label {
top: $share-button-size - 5px;
}
}
}
.rtl .share-module {
.control header {
left: auto;
right: -10px;
}
}
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Monetizzazione per i publisher
faq:
- title@: Come funziona la pubblicità nelle pagine Accelerated Mobile Pages?
answer@: |
Uno scopo del progetto Accelerated Mobile Pages è garantire un'efficace monetizzazione degli annunci sul Web mobile adottando un approccio incentrato sull'utente. In questo contesto, l'obiettivo è supportare una gamma completa di formati di annunci, reti pubblicitarie e tecnologie nelle pagine Accelerated Mobile Pages. Per realizzare tale obiettivo, chi fa parte del progetto viene coinvolto anche nella realizzazione di prassi pubblicitarie sostenibili per assicurare che gli annunci nei file AMP siano veloci, sicuri, accattivanti ed efficaci per gli utenti.
- title@: I publisher possono vendere il proprio spazio pubblicitario?
answer@: |
Sì, i publisher hanno il controllo del proprio spazio pubblicitario e della modalità di vendita, così come dei propri siti web esistenti.
- title@: Come funzionano gli abbonamenti e i paywall con il formato Accelerated Mobile Pages?
answer@: |
Un obiettivo essenziale del progetto Accelerated Mobile Pages è supportare abbonamenti e paywall. Il progetto AMP supporta attualmente un framework di accesso flessibile in cui i publisher possono gestire l'esperienza di visualizzazione dei documenti per abbonati, utenti a consumo e utenti anonimi.
- title@: Come vengono gestiti i dati analitici in questo formato AMP?
answer@: |
Garantire ai publisher di poter ricevere informazioni analitiche affidabili è un obiettivo fondamentale del progetto. Anche se il supporto dei dati analitici nella versione demo è molto limitato, è previsto che la specifica supporti la raccolta di informazioni analitiche e si integri con i sistemi di terze parti senza compromettere la velocità o le dimensioni dei file AMP. Al progetto [partecipano](https://www.ampproject.org/who/#analytics) diversi fornitori di dati analitici.
- title@: I publisher ricevono credito per il traffico che viene misurato?
answer@: |
Sì, un file AMP è come il resto del sito (la "tela" del publisher).
- title@: Come faccio a entrare a far parte del progetto?
answer@: |
Sono ben accette le persone e le aziende interessate che desiderano essere coinvolte per arricchire [GitHub](https://github.com/ampproject/amphtml/issues/new). In questo modo potremo aggiungerti a una lista di distribuzione e tenerti aggiornato su eventuali nuove informazioni.
---
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_whitelist.svg:
--------------------------------------------------------------------------------
```
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1,.cls-2{fill:#fff;fill-opacity:0.9;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke-linecap:round;stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3,.cls-4,.cls-5,.cls-6{fill:none;}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{fill:#1c79c4;}</style><linearGradient id="linear-gradient" x1="55" y1="81.29" x2="86.22" y2="81.29" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="61.32" y1="66.78" x2="97.45" y2="74.64" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="73.93" y1="56.12" x2="88.74" y2="59.34" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="73.93" y1="62.85" x2="88.74" y2="66.07" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="73.93" y1="69.58" x2="88.74" y2="72.8" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="73.93" y1="76.31" x2="88.74" y2="79.53" xlink:href="#linear-gradient"/></defs><title>design_icon_whitelist</title><polygon class="cls-1" points="85.72 96.19 55.5 113.5 55.5 66.39 85.72 49.08 85.72 96.19"/><polygon class="cls-2" points="94.5 85.61 64.28 102.92 64.28 55.81 94.5 38.5 94.5 85.61"/><line class="cls-3" x1="73.05" y1="62.54" x2="89.63" y2="52.92"/><line class="cls-4" x1="73.05" y1="69.27" x2="89.63" y2="59.65"/><line class="cls-5" x1="73.05" y1="76" x2="89.63" y2="66.38"/><line class="cls-6" x1="73.05" y1="82.73" x2="89.63" y2="73.12"/><path class="cls-7" d="M67.46,64.38A3.17,3.17,0,0,1,68.91,62c.8-.47,1.45-.15,1.45.71a3.17,3.17,0,0,1-1.45,2.43C68.11,65.57,67.46,65.24,67.46,64.38Z"/><path class="cls-7" d="M67.46,71.11a3.17,3.17,0,0,1,1.45-2.43c.8-.47,1.45-.15,1.45.71a3.17,3.17,0,0,1-1.45,2.43C68.11,72.3,67.46,72,67.46,71.11Z"/><path class="cls-7" d="M67.46,77.84a3.17,3.17,0,0,1,1.45-2.43c.8-.47,1.45-.15,1.45.71a3.17,3.17,0,0,1-1.45,2.43C68.11,79,67.46,78.71,67.46,77.84Z"/><path class="cls-7" d="M67.46,84.57a3.17,3.17,0,0,1,1.45-2.43c.8-.47,1.45-.15,1.45.71a3.17,3.17,0,0,1-1.45,2.43C68.11,85.76,67.46,85.44,67.46,84.57Z"/></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_fast.svg:
--------------------------------------------------------------------------------
```
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1,.cls-2,.cls-5,.cls-6{fill:none;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke-miterlimit:10;}.cls-1,.cls-2{stroke-width:4.98px;opacity:0.8;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3,.cls-4,.cls-7{fill:#fff;}.cls-3,.cls-4{fill-opacity:0.7;}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke-width:0.91px;stroke:url(#linear-gradient-5);}.cls-6{stroke-linecap:round;stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}</style><linearGradient id="linear-gradient" x1="-11483.94" y1="1636.65" x2="-11449.41" y2="1636.65" gradientTransform="translate(-10945.82 3709.48) rotate(169.95)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0389ff"/><stop offset="0.5" stop-color="#0dd7ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-11495.54" y1="1647.14" x2="-11437.04" y2="1647.14" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="67" y1="73.4" x2="97.77" y2="73.4" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-4" x1="70.82" y1="74.59" x2="97.77" y2="74.59" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-5" x1="74.54" y1="72.96" x2="93.94" y2="72.96" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-6" x1="82.61" y1="96.73" x2="88.02" y2="96.73" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-7" x1="79.31" y1="73.32" x2="89.29" y2="73.32" xlink:href="#linear-gradient-3"/></defs><title>design_icon_fast</title><line class="cls-1" x1="43.81" y1="104.56" x2="74.24" y2="87.66"/><line class="cls-2" x1="30.5" y1="100.35" x2="83.14" y2="71.35"/><polyline class="cls-3" points="97.5 41.26 93.85 38.97 67.93 52.76 67.5 105.5 71.15 107.99"/><polygon class="cls-4" points="71.45 54.83 97.28 41.51 97.28 94.15 71.32 107.67 71.45 54.83"/><polygon class="cls-5" points="75.44 58.73 93.49 49.25 93.31 87.19 75 96.67 75.44 58.73"/><line class="cls-6" x1="83.11" y1="97.89" x2="87.52" y2="95.58"/><polygon class="cls-7" points="88.42 71.69 85.3 71.69 85.68 65.55 80.18 74.95 83.31 74.95 82.93 81.08 88.42 71.69"/></svg>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Monétisation des éditeurs
faq:
- title@: Comment la publicité fonctionne-t-elle sur les pages Accelerated Mobile Pages ?
answer@: |
Un des objectifs du projet Accelerated Mobile Pages est d'assurer une monétisation efficace des annonces sur le Web pour mobile tout en adoptant une approche centrée sur l'utilisateur. Le but est donc d'accepter une gamme complète de formats d'annonces, de réseaux publicitaires et de technologies dans les pages Accelerated Mobile Pages. À ce titre, les acteurs du projet s'engagent aussi à élaborer des pratiques publicitaires durables afin de proposer des annonces dans les fichiers AMP qui se chargent rapidement, sont sûres, accrocheuses et efficaces pour les mobinautes.
- title@: Les éditeurs peuvent-ils vendre leur propre inventaire publicitaire ?
answer@: |
Oui, comme avec leurs autres sites Web, les éditeurs contrôlent leur inventaire publicitaire et la façon dont ils le vendent.
- title@: Comment les abonnements et les paywalls fonctionnent-ils avec les pages Accelerated Mobile Pages ?
answer@: |
L'acceptation des abonnements et des paywalls constitue un objectif clé du projet Accelerated Mobile Pages. Les pages AMP offrent un accès flexible aux éditeurs qui leur permet de contrôler la façon dont les documents s'affichent pour les abonnés, les utilisateurs contrôlés et les utilisateurs anonymes.
- title@: Comment les statistiques sont-elles traitées au format AMP ?
answer@: |
Offrir aux éditeurs des analyses et des statistiques précises est un autre objectif clé du projet. Bien que le traitement des statistiques dans la version de démonstration soit limité, il est prévu que la version finale permette la collecte d'informations statistiques et s'intègre avec des systèmes tiers sans compromettre la vitesse ni la taille des fichiers AMP. Plusieurs fournisseurs de statistiques [participent](https://www.ampproject.org/who/#analytics) au projet.
- title@: Du point de vue des mesures, les éditeurs reçoivent-ils du crédit pour le trafic ?
answer@: |
Oui, un fichier AMP est identique au reste de votre site. Cet espace constitue la toile de l'éditeur.
- title@: Comment puis-je prendre part au projet ?
answer@: |
Nous invitons les personnes et les entreprises intéressées à remplir un formulaire sur [GitHub](https://github.com/ampproject/amphtml/issues/new), afin que nous puissions les ajouter à une liste de diffusion et leur communiquer toute nouvelle information.
---
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Configurar Analytics
---
## Decida antes de começar
Todas as soluções de análise são baseadas no conhecimento dos dados de que você precisa
e de como pretende analisar esses dados. Decida antes de começar:
* Você vai usar ferramentas de análise de terceiros para analisar o envolvimento do usuário
ou sua própria solução interna?
* Que comportamentos você medirá para entender o envolvimento do usuário?
### Você pretende enviar os dados para o fornecedor ou para você mesmo?
Se você tiver sua própria solução interna para medir o envolvimento do usuário,
a única coisa que você precisa para integrar o Analytics do AMP a essa solução é um URL.
É para ele que você enviará os dados.
Você também podem enviar os dados a vários URLs.
Por exemplo, é possível enviar dados de visualização de páginas a um URL
e dados de envolvimento social a outro.
O Analytics do AMP foi projetado especificamente para medir uma vez e relatar a muitos.
Se você já está trabalhando com um ou mais fornecedores de análise,
verifique a
[especificação do amp-analytics](/docs/reference/extended/amp-analytics.html)
para ver se eles integraram a solução com o AMP.
Em caso positivo, basta vincular aos documentos da especificação
e começar a seguir as instruções.
Se o fornecedor de análise não tiver feito a integração com o AMP,
entre em contato com ele para obter suporte.
Também recomendamos [criar um problema no projeto AMP](https://github.com/ampproject/amphtml/issues/new)
solicitando que o fornecedor seja adicionado.
Consulte também
[Integrar suas ferramentas de análise no AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
### De que dados você precisa?
Que dados sobre seus usuários você pretende capturar para medir o envolvimento?
Você deve identificar esses dados antes de fazer a configuração.
Os principais pontos a serem considerados:
* Você pretende rastrear somente as visualizações de páginas ou outros padrões de envolvimento do usuário
(consulte também [amp-pixel ou amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
* Que tipos de dados você pretende capturar sobre seus usuários, seu conteúdo,
o dispositivo ou navegador (consulte também [Substituição de variáveis](/docs/guides/analytics/analytics_basics.html#variable-substitution))?
* Como você pretende identificar seus usuários (consulte também [Identificação de usuários](/docs/guides/analytics/analytics_basics.html#user-identification))?
```
--------------------------------------------------------------------------------
/views/partials/post-item.html:
--------------------------------------------------------------------------------
```html
{% set isEvent = (post.type|lower == "event") %}
{% set isBlog = (post.type|lower == "blog") %}
{% set isRoadmap = (post.type|lower == "roadmap") %}
{% set latest = g.doc('/content/includes/latest.yaml', locale=doc.locale) %}
<div class="post-item">
{% if meta %}
<div class="post-meta">
{% if not isRoadmap %}
<a class="type" href="{{g.doc('/content/latest/list-' ~ post.type|lower ~ '.html', locale=doc.locale).url.path}}">{{post.type}}</a>
{% else %}
<a class="type" href="{{g.doc('/content/latest/roadmap.html', locale=doc.locale).url.path}}">{{post.type}}</a>
{% endif %}
{% if isBlog %}
<span class="time text-label">{{post.date}}</span>
{% endif %}
{% if isRoadmap %}
<span class="time text-label">{{post.updated}}</span>
{% endif %}
</div>
{% endif %}
{% if isBlog %}
<a href="{{g.doc('/content/latest/blog/' ~ post.id ~ '.md', locale=doc.locale).url.path}}" class="post-title">
{% endif %}
{% if isEvent %}
<a href="{{post.href}}" class="post-title">
{% endif %}
{% if isRoadmap %}
<a href="{{g.doc('/content/latest/roadmap.html', locale=doc.locale).url.path}}" class="post-title">
<h4>{{post.current}}</h4>
{% else %}
<h4>{{post.title|truncate(80, False)}}</h4>
{% endif %}
</a>
{% if not isEvent or not past %}
<p class="post-excerpt small">{{post.excerpt|safe|truncate(170, False)}}</p>
{% endif %}
{% if isEvent %}
<div class="event-meta">
<span class="event-time smaller">
<amp-img
noloading
height=15
width=15
src="{{latest.feed.icon_calendar}}">
</amp-img>
{{post.event_time_text}}
</span>
<span class="location smaller">
<amp-img
noloading
height=15
width=15
src="{{latest.feed.icon_location}}">
</amp-img>
{{post.location}}
</span>
<span class="participant smaller">
<amp-img
noloading
height=15
width=15
src="{{latest.feed.icon_audience}}">
</amp-img>
{{post.participant}}
</span>
</div>
{% endif %}
{% if isEvent and not past %}
<a class="underlined cta" target="_blank" href="https://www.google.com/calendar/render?action=TEMPLATE&text={{post.title}}&dates={{post.event_time}}&details={{post.href}}&location={{post.location}}&sf=true&output=xml">{{_(latest.feed.add_to_calendar)}}</a>
{% endif %}
</div>
```
--------------------------------------------------------------------------------
/content/support/faqs/supported-platforms.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Supported Platforms, Vendors and Partners
$order: 3
$parent: /content/support/faqs.md
class: who
description@: The Accelerated Mobile Pages (AMP) Project is an open source initiative that makes it easy for publishers to create mobile-friendly content once and have it load instantly everywhere. – Accelerated Mobile Pages Project
cta:
title@: Next FAQ
link_text@: AMP Overview
link_url: /content/support/faqs/overview.md
---
{% set who = g.doc('/content/includes/who.yaml', locale=doc.locale) %}
<div class="inline-toc">
<ul>
{% for section in who.tech_companies.sections %}
<li><a href="#{{section.title|slug}}">{{_(section.title)}}</a></li>
{% endfor %}
</ul>
</div>
A growing number of platforms, vendors, and partners support the AMP Project by providing custom components or offering integration with AMP pages within their platforms.
<div class="who-container">
<amp-accordion>
{% for section in who.tech_companies.sections %}
<section id="{{section.title|slug}}" {% if loop.index == 1 %}expanded{% endif %}>
<header class="accordion-header">
<h4 class="accordion-title">{{_(section.title)}}</h4>
{% if section.description %}<p>{{_(section.description)}}</p>{% endif %}
</header>
<div class="accordion-content">
<ol class="item-container">
{% for item in section.section_items | sort %}
<li class="item">
{% if item.link %}
<a href="{{item.link}}">{{item.title}}</a>
{% else %}
{{item.title}}
{% endif %}
</li>
{% endfor %}
</ol>
</div>
</section>
{% endfor %}
</amp-accordion>
</div>
<hr>
# Supported Browsers
<div class="browser-container">
{% for item in who.browsers %}
<div class="browser">
<amp-img width="75"
height="75"
layout="responsive"
src="{{item.img}}"></amp-img>
<p class="browser-title">{{item.title}}</p>
</div>
{% endfor %}
</div>
In general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. We support desktop, phone, tablet and the web view version of these respective browsers.
Beyond that, the core AMP library and built-in elements should aim for very wide browser support and we accept fixes for all browsers with market share greater than 1 percent.
In particular, we try to maintain "it might not be perfect but isn't broken"-support for the Android 4.0 system browser and Chrome 28+ on phones.
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Monetarisierung für Publisher
faq:
- title@: Wie funktioniert die Werbung in Accelerated Mobile Pages?
answer@: |
Ein Ziel des Projekts Accelerated Mobile Pages ist die Sicherung einer effektiven Anzeigenmonetarisierung im mobilen Web bei einem nutzerorientierten Ansatz. Vor diesem Hintergrund wollen wir viele verschiedene Anzeigenformate, Werbenetzwerke und Technologien in Accelerated Mobile Pages unterstützen. Deshalb erarbeiten die Projektteilnehmer parallel hierzu auch Elemente einer nachhaltigen Anzeigenpraxis, mit denen gewährleistet werden soll, dass Anzeigen in AMP-Dateien schnell, sicher, relevant und effektiv für den Nutzer sind.
- title@: Können Webpublisher und Verlage ihr eigenes Anzeigeninventar verkaufen?
answer@: |
Ja. Genau wie bei ihren bestehenden Websites haben Webpublisher und Verlage die volle Kontrolle über ihr Anzeigeninventar und dessen Verkauf.
- title@: Wie funktionieren Abos und Paywalls mit Accelerated Mobile Pages?
answer@: |
Eines der Hauptziele des Projekts "Accelerated Mobile Pages" ist die Unterstützung von Abos und Paywalls. AMP unterstützt derzeit ein flexibles Zugriffs-Framework, durch das Webpublisher und Verlage die Nutzererfahrung beim Betrachten der Dokumente durch Abonnenten, Pay-per-Use-Nutzer und anonyme Nutzer steuern können.
- title@: Wie werden Analysedaten im AMP-Format gehandhabt?
answer@: |
Eines der Hauptziele bei der Entwicklung von AMP ist es, sicherzustellen, dass Webpublisher und Verlage Zugriff auf belastbare Analysedaten erhalten. Auch wenn die Analysemöglichkeiten in der Demoversion sehr eingeschränkt sind, gehen wir davon aus, dass die Erfassung von Analysedaten in die Spezifikation aufgenommen und eine Integration mit Drittanbietersystemen möglich sein wird, ohne dass sich dies auf die Ladezeiten oder Größe von AMP-Dateien auswirkt. Am Projekt beteiligen sich [mehrere Analyseanbieter](https://www.ampproject.org/who/#analytics).
- title@: Werden Webpublishern und Verlagen die Zugriffe aus Messperspektive angerechnet?
answer@: |
Ja, eine AMP-Datei unterscheidet sich in dieser Hinsicht nicht vom Rest Ihrer Website – auch dieser Bereich gehört dem Webpublisher oder Verlag.
- title@: Wie kann ich mich am Projekt beteiligen?
answer@: |
Interessierte Einzelpersonen und Unternehmen können sich [auf GitHub anmelden](https://github.com/ampproject/amphtml/issues/new). Sie werden dann in einen Verteiler aufgenommen und über Neuigkeiten laufend informiert.
---
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/adtech_icon_customize.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 97.81 125.61"><defs><style>.cls-1,.cls-3{fill:none;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5{stroke-miterlimit:10;}.cls-1{stroke-width:5.98px;opacity:0.8;stroke:url(#linear-gradient);}.cls-2,.cls-7{fill-opacity:0.8;}.cls-2,.cls-3{stroke:#fff;}.cls-2,.cls-3,.cls-4,.cls-5{stroke-width:0.87px;}.cls-2{fill:url(#linear-gradient-2);}.cls-4,.cls-5{fill:#fff;fill-opacity:0.7;}.cls-4{stroke:url(#linear-gradient-3);}.cls-5{stroke-linecap:round;stroke:url(#linear-gradient-4);}.cls-6{fill:#0dd7ff;opacity:0.7;}.cls-7{fill:url(#linear-gradient-5);}</style><linearGradient id="linear-gradient" x1="-7884.64" y1="331.08" x2="-7828.38" y2="331.08" gradientTransform="translate(7749.25 -1661.2) rotate(-10.05)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0389ff"/><stop offset="0.5" stop-color="#0dd7ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-2" x1="21.94" y1="70.58" x2="70.54" y2="21.99" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="-3" y1="121.11" x2="59.27" y2="58.84" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-4" x1="-6.46" y1="64.47" x2="43.31" y2="14.7" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-5" x1="17.02" y1="45.41" x2="32.82" y2="29.62" xlink:href="#linear-gradient-2"/></defs><title>adtech_icon_customize</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="96.4" y1="22.83" x2="45.98" y2="49.95"/><polygon class="cls-2" points="64.23 56.96 28.25 76.89 28.25 35.61 64.23 15.68 64.23 56.96"/><line class="cls-3" x1="46.55" y1="25.79" x2="46.55" y2="66.2"/><line class="cls-3" x1="46.55" y1="43.47" x2="64.23" y2="34.2"/><path class="cls-4" d="M54.35,96.36,1.93,124.87V83.6L54.35,55.08ZM32,76.53l-5.05,26.1M21,87.05l-9.26,13,10.94.42m13.47-8,10.1-13.47-10.1-.42"/><path class="cls-5" d="M36.42,50.26.43,70.19V28.91L36.42,9ZM4,35.44,29.86,21.15M11.76,39.58,4.36,43.8m0,4.24,7.4-4.21"/><circle class="cls-6" cx="43.61" cy="18.68" r="1"/><circle class="cls-6" cx="47.95" cy="9.7" r="1"/><circle class="cls-6" cx="52.58" cy="13.62" r="1"/><circle class="cls-6" cx="55.64" cy="8.54" r="1"/><circle class="cls-6" cx="55.19" cy="1" r="1"/><polygon class="cls-7" points="30.57 41.57 19.27 47.66 19.27 33.46 30.57 27.37 30.57 41.57"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Konfigurowanie analityki
---
## Zdecyduj, zanim zaczniesz
Wszystkie rozwiązania analityczne są budowane na wiedzy o tym, jakich danych potrzebujesz
oraz jak zamierzasz analizować te dane. Zdecyduj, zanim zaczniesz:
* Zamierzasz używać narzędzi analitycznych innych firm,
czy masz własne, firmowe rozwiązanie?
* Jakie zachowania użytkowników chcesz mierzyć, aby poznać zaangażowanie użytkowników?
### Wysyłać dane do dostawcy czy do siebie?
Jeśli masz własne, firmowe rozwiązanie do mierzenia czynności użytkowników,
jedynie adres URL jest potrzebny w celu integracji analityki AMP z tym rozwiązaniem.
To tam będziesz wysyłać dane.
Możesz także wysyłać dane na różne adresy URL.
Na przykład możesz wysyłać dane o wyświetleniach strony na jeden adres URL,
a dane o interakcjach społecznościowych na inny adres URL.
Analityka AMP została specjalnie zaprojektowania pod kątem jednorazowego pomiaru i zgłaszania do wielu odbiorców.
Jeśli już pracujesz z jednym lub kilkoma dostawcami analityki,
zapoznaj się ze
[specyfikacją],(/docs/reference/extended/amp-analytics.html)
aby przekonać się, czy zintegrowali oni swoje rozwiązania z AMP.
Jeśli tak, wystarczy utworzyć link do ich dokumentów ze specyfikacji
i rozpocząć wykonywanie instrukcji.
Jeśli dostawca analityki nie zintegrował swojego rozwiązania z AMP,
skontaktuj się z dostawcą, aby poprosić o pomoc.
Zachęcamy także do [utworzenia zgłoszenia w projekcie AMP](https://github.com/ampproject/amphtml/issues/new)
z żądaniem dodania dostawcy.
Zobacz też
[Integrating your analytics tools in AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md) — Integracja narzędzi do analityki w kodzie AMP HTML.
### Jakich danych potrzebujesz?
Jakie dane o swoich użytkownikach zamierzasz przechwytywać w celu mierzenia czynności?
Musisz zidentyfikować te dane, aby móc je skonfigurować.
Kluczowe punkty danych, które trzeba wziąć pod uwagę:
* Zamierzasz monitorować tylko wyświetlenia stron, czy wzorce czynności użytkowników
(patrz także opis znaczników [amp-pixel lub amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
* Jakie zamierzasz przechwytywać rodzaje danych o użytkownikach, treściach,
o urządzeniu lub przeglądarce (patrz także [Podstawianie zmiennych](/docs/guides/analytics/analytics_basics.html#variable-substitution))?
* Jak zamierzasz identyfikować swoich użytkowników (patrz także [Identyfikacja użytkownika](/docs/guides/analytics/analytics_basics.html#user-identification))?
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Configurar Analytics
---
## Decide antes de comenzar
Todas las soluciones de análisis se crean en función de los datos que necesitas
y de cómo quieres analizar esos datos. Decide antes de comenzar:
* Para analizar la captación de usuarios, ¿usarás herramientas de análisis de terceros
o una solución propia?
* ¿Qué comportamientos de los usuarios medirás para comprender la captación de estos?
### ¿Enviarás datos al proveedor o te los enviarás a ti mismo?
Si tienes una solución propia para medir la captación de usuarios,
lo único que necesitarás para integrar el análisis de AMP a esa solución es una URL.
Allí enviarás los datos.
También puedes enviar datos a varias direcciones URL.
Por ejemplo, puedes enviar datos de visualización de la página a una URL
y datos de captación de redes sociales a otra.
El análisis de AMP se diseñó específicamente para realizar mediciones una vez y enviar varios informes.
Si ya trabajas con uno o más proveedores de herramientas de análisis,
consulta la
[especificación de amp-analytics](/docs/reference/extended/amp-analytics.html)
para averiguar si integraron su solución con AMP.
Si lo hicieron, simplemente establece un vínculo con sus documentos desde la especificación
y comienza a seguir las instrucciones.
Si el proveedor de herramientas de análisis no estableció una integración con AMP,
comunícate con él para solicitarle soporte.
También te recomendamos [reportar un asunto en el proyecto de AMP](https://github.com/ampproject/amphtml/issues/new)
para solicitar la adición del proveedor.
Consulta también
[Integración de tus herramientas de análisis en AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
### ¿Qué datos necesitas?
¿Qué datos acerca de los usuarios recopilarás para medir la captación?
Debes identificar esos datos para poder configurarlos.
Puntos de datos claves que debes considerar:
* ¿Realizarás un seguimiento solo de las vistas de la página o de otros patrones de captación de usuarios?
(Consulta también la sección [¿amp-pixel o amp-analytics?](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics)).
* ¿Qué tipos de datos puedes capturar acerca de tus usuarios, tu contenido,
el dispositivo o el navegador (consulta también la sección sobre [sustitución de variables](/docs/guides/analytics/analytics_basics.html#variable-substitution))?
* ¿Cómo identificarás a tus usuarios (consulta también [Identificación de usuarios](/docs/guides/analytics/analytics_basics.html#user-identification))?
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Mengonfigurasi Analytics
---
## Putuskan sebelum Anda memulai
Semua solusi analisis dibangun berdasarkan pengetahuan mengenai data yang Anda butuhkan,
dan bagaimana Anda ingin menganalisis data tersebut. Putuskan sebelum Anda memulai:
* Akankah Anda memakai alat analisis pihak ketiga untuk menganalisis keterlibatan pengguna,
atau solusi internal Anda sendiri?
* Perilaku pengguna apakah yang akan Anda ukur untuk memahami keterlibatan pengguna?
### Mengirim data ke vendor atau ke sendiri?
Jika Anda memiliki solusi internal sendiri untuk mengukur keterlibatan pengguna,
satu-satunya hal yang Anda akan butuhkan untuk mengintegrasikan analisis AMP dengan solusi tersebut adalah URL.
Di sinilah Anda akan mengirimkan data.
Anda juga bisa mengirim data ke berbagai URL.
Misalnya, Anda bisa mengirim data tampilan halaman ke satu URL,
dan data keterlibatan sosial ke URL yang lain.
Analisis AMP didesain khusus untuk mengukur sekali dan melaporkan ke banyak.
Jika Anda sudah bekerja dengan satu atau beberapa vendor analisis,
periksa
[spesifikasi amp-analytics](/docs/reference/extended/amp-analytics.html)
untuk mengetahui apakah mereka telah mengintegrasikan solusi mereka dengan AMP.
Jika mereka telah mengintegrasikannya, cukup tautkan ke dokumen mereka dari spesifikasi
dan mulailah mengikuti petunjuknya.
Jika vendor analisis belum mengintegrasikan dengan AMP,
hubungi vendor untuk meminta dukungan mereka.
Kami juga mendorong Anda untuk [melaporkan adanya masalah dalam proyek AMP](https://github.com/ampproject/amphtml/issues/new)
yang meminta ditambahkannya vendor tersebut.
Lihat juga
[Mengintegrasikan alat analisis Anda di AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
### Data apakah yang Anda butuhkan?
Data tentang pengguna apakah yang akan Anda tangkap untuk mengukur keterlibatan?
Anda harus mengidentifikasi data ini sebelum Anda bisa mengonfigurasikannya.
Butir-butir data utama yang harus dipertimbangkan:
* Akankah Anda hanya melacak tampilan halaman saja, atau pola keterlibatan pengguna tambahan
(lihat juga [amp-pixel atau amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
* Jenis data apakah yang akan Anda tangkap dari pengguna, materi,
perangkat atau browser (lihat juga [Penggantian variabel](/docs/guides/analytics/analytics_basics.html#variable-substitution)?
* Bagaimana Anda akan mengidentifikasi pengguna Anda (lihat juga [Identifikasi pengguna](/docs/guides/analytics/analytics_basics.html#user-identification))?
```
--------------------------------------------------------------------------------
/views/partials/lines.html:
--------------------------------------------------------------------------------
```html
<div class="animated-lines-big">
<amp-img
noloading
height=224
src="/static/img/motions/amp-lines-motions.png">
</amp-img>
<div class="line-pos pos-306-75-delay--1050"><div class="line line-a"></div></div>
<div class="line-pos pos-155-101-delay--5100"><div class="line line-b"></div></div>
<div class="line-pos pos-282-62-delay--5090"><div class="line line-c"></div></div>
<div class="line-pos pos-255-559-delay--4150"><div class="line line-d"></div></div>
<div class="line-pos pos-318-0-delay--4120"><div class="line line-a"></div></div>
<div class="line-pos pos-297-268-delay--4050"><div class="line line-e"></div></div>
<div class="line-pos pos-353-107-delay--3160"><div class="line line-f"></div></div>
<div class="line-pos pos-74-0-delay--3150"><div class="line line-a"></div></div>
<div class="line-pos pos-257-312-delay--3120"><div class="line line-d"></div></div>
<div class="line-pos pos-207-435-delay--3090"><div class="line line-g"></div></div>
<div class="line-pos pos-294-244-delay--2150"><div class="line line-e"></div></div>
<div class="line-pos pos-251-401-delay--2120"><div class="line line-g"></div></div>
<div class="line-pos pos-52-69-delay--2100"><div class="line line-c"></div></div>
<div class="line-pos pos-203-164-delay--1940"><div class="line line-g"></div></div>
<div class="line-pos pos-0-184-delay--1130"><div class="line line-b"></div></div>
<div class="line-pos pos-76-553-delay--1110"><div class="line line-d"></div></div>
<div class="line-pos pos-306-75-delay--1010"><div class="line line-a"></div></div>
<div class="line-pos pos-280-322-delay--950"><div class="line line-b"></div></div>
</div>
<!-- <div class="animated-lines-small">
<div class="line-pos pos-54-106-delay-0"><div class="line line-h"></div></div>
<div class="line-pos pos-0-20-delay-20"><div class="line line-j"></div></div>
<div class="line-pos pos-20-0-delay-60"><div class="line line-i"></div></div>
<div class="line-pos pos-40-46-delay-190"><div class="line line-j"></div></div>
</div>
<div class="animated-lines-small">
<div class="line-pos pos-57-32-delay-0"><div class="line line-j"></div></div>
<div class="line-pos pos-38-0-delay-10"><div class="line line-i"></div></div>
<div class="line-pos pos-0-38-delay-70"><div class="line line-i"></div></div>
<div class="line-pos pos-17-98-delay-110"><div class="line line-j"></div></div>
<div class="line-pos pos-57-151-delay-130"><div class="line line-h"></div></div>
</div>
-->
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/who_icon_adtech.svg:
--------------------------------------------------------------------------------
```
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1{opacity:0.9;fill:url(#linear-gradient);}.cls-2,.cls-4,.cls-5,.cls-6,.cls-7{fill:#fff;}.cls-2{fill-opacity:0.7;stroke-linecap:round;stroke-linejoin:round;stroke:url(#linear-gradient-2);}.cls-3{fill:none;stroke:url(#linear-gradient-3);}.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke-miterlimit:10;}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{fill:#0dd7ff;opacity:0.7;}</style><linearGradient id="linear-gradient" x1="27.54" y1="80.76" x2="72.06" y2="80.76" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="44.06" y1="84.02" x2="88.75" y2="84.02" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="69.48" y1="101.01" x2="118.06" y2="52.43" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-4" x1="73.97" y1="80.33" x2="79.96" y2="74.34" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-5" x1="57.78" y1="95.27" x2="63.77" y2="89.29" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-6" x1="93.89" y1="92.78" x2="99.88" y2="86.79" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-7" x1="123.77" y1="64.14" x2="129.76" y2="58.15" xlink:href="#linear-gradient-2"/></defs><title>who_icon_adtech</title><polygon class="cls-1" points="27.54 65.29 71.01 43.01 72.06 95.89 28.38 118.51 27.54 65.29"/><polygon class="cls-2" points="44.78 69.32 88.25 47.04 88.25 98.39 44.56 121 44.78 69.32"/><polyline class="cls-3" points="60.78 92.28 76.96 77.34 96.88 89.79 126.77 61.15"/><circle class="cls-4" cx="76.96" cy="77.34" r="3.74"/><circle class="cls-5" cx="60.78" cy="92.28" r="3.74"/><circle class="cls-6" cx="96.88" cy="89.79" r="3.74"/><circle class="cls-7" cx="126.76" cy="61.15" r="3.74"/><ellipse class="cls-8" cx="101.89" cy="58.55" rx="1.78" ry="1.77"/><ellipse class="cls-8" cx="109.59" cy="42.69" rx="1.78" ry="1.77"/><ellipse class="cls-8" cx="117.83" cy="49.61" rx="1.78" ry="1.77"/><ellipse class="cls-8" cx="123.25" cy="40.64" rx="1.78" ry="1.77"/><ellipse class="cls-8" cx="122.46" cy="27.34" rx="1.78" ry="1.77"/></svg>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Obtención de ingresos del editor
faq:
- title@: ¿Cómo funciona la publicidad en Accelerated Mobile Pages?
answer@: |
Uno de los objetivos del proyecto Accelerated Mobile Pages es garantizar una eficaz obtención de ingresos de los anuncios en la Web móvil al mismo tiempo que se adopta un enfoque centrado en el usuario. En este contexto, el objetivo es proporcionar compatibilidad con una amplia gama de formatos de anuncios, redes publicitarias y tecnologías en Accelerated Mobile Pages. Para ello, los que participan en el proyecto también se dedican a elaborar prácticas publicitarias sostenibles para garantizar que los anuncios en los archivos de AMP sean rápidos, seguros, atractivos y útiles para los usuarios.
- title@: ¿Los editores pueden vender su propio inventario publicitario?
answer@: |
Sí. Igual que con sus sitios web, los editores controlan su inventario publicitario y la forma de venderlo.
- title@: ¿Cómo funcionan las suscripciones y los muros de pago con Accelerated Mobile Pages?
answer@: |
Un objetivo clave del proyecto Accelerated Mobile Pages es la compatibilidad con las suscripciones y los muros de pago. Actualmente, AMP admite un marco de acceso flexible en el que los editores pueden controlar la experiencia de visualización de documentos por parte de los suscriptores, los usuarios registrados y los usuarios anónimos.
- title@: ¿Cómo se gestionan los análisis en el formato AMP?
answer@: |
Un objetivo de diseño fundamental del proyecto es garantizar que los editores puedan obtener datos de análisis útiles. Aunque la compatibilidad con análisis en la versión de demostración es muy limitada, esperamos que la especificación sea compatible con diferente información de análisis y que se integre con sistemas de terceros sin comprometer la velocidad ni el tamaño del archivo de AMP. Hay varios proveedores de análisis que ya [participan](https://www.ampproject.org/who/#analytics) en el proyecto.
- title@: ¿Los editores reciben crédito por el tráfico desde el punto de vista de la medición?
answer@: |
Sí. Los archivos de AMP son iguales que los del resto de tu sitio web; este espacio es el lienzo del editor.
- title@: ¿Cómo puedo participar en este proyecto?
answer@: |
Nos gusta que las personas y las empresas interesadas quieran participar en este proyecto. Para ello, les pedimos que rellenen el formulario de [GitHub](https://github.com/ampproject/amphtml/issues/new) para que podamos añadirlas a una lista de distribución y mantenerlas informadas de todas las novedades.
---
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/advertisers/advertisers_icon_intro.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64.13 57.63"><defs><style>.cls-1,.cls-2,.cls-5{fill:#fff;}.cls-1,.cls-2,.cls-4{stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-2,.cls-5,.cls-6,.cls-7{fill-opacity:0.7;}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{opacity:0.9;fill:url(#linear-gradient-3);}.cls-4{fill:none;stroke:url(#linear-gradient-4);}.cls-4,.cls-5{stroke-linecap:round;}.cls-5{stroke-linejoin:round;stroke:url(#linear-gradient-5);}.cls-6{fill:#0dd4ff;}.cls-7{fill:url(#linear-gradient-6);}</style><linearGradient id="linear-gradient" x1="0.1" y1="44.98" x2="63.96" y2="44.98" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="0" y1="36.82" x2="64.13" y2="36.82" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="17.33" y1="44.62" x2="42.34" y2="26.45" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-4" x1="46.34" y1="44.05" x2="53.04" y2="44.05" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="23.76" y1="17.55" x2="49.24" y2="17.55" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="32.39" y1="16.1" x2="40.83" y2="18.38" xlink:href="#linear-gradient"/></defs><title>advertisers_icon_intro</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polyline class="cls-1" points="0.6 32.36 0.87 37.21 41.17 57.07 63.45 45.02 63.23 40.7"/><polygon class="cls-2" points="1.14 32.41 41.92 52.13 63.04 40.51 23.3 21.51 1.14 32.41"/><polygon class="cls-3" points="8.65 32.68 36.56 46.34 51.01 38.38 23.81 25.22 8.65 32.68"/><line class="cls-4" x1="46.84" y1="45.69" x2="52.54" y2="42.41"/><polygon class="cls-5" points="33.61 30.08 48.74 22.96 48.74 0.5 24.26 12.14 24.26 34.6 29.91 31.74 33.61 30.08"/><circle class="cls-6" cx="54.21" cy="23.38" r="0.72"/><circle class="cls-6" cx="57.34" cy="16.9" r="0.72"/><circle class="cls-6" cx="60.69" cy="19.73" r="0.72"/><circle class="cls-6" cx="62.89" cy="16.06" r="0.72"/><circle class="cls-6" cx="62.57" cy="10.62" r="0.72"/><polygon class="cls-7" points="38.73 10.05 38.29 14 40.9 12.12 39 15.6 41.43 16.14 38.8 17.83 40.12 20.58 37.76 19.83 37.47 23.75 36.27 20.84 34.48 24.43 34.92 20.47 32.31 22.36 34.21 18.87 31.78 18.34 34.42 16.65 33.1 13.89 35.46 14.65 35.75 10.73 36.94 13.64 38.73 10.05"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/pages/_about-who.scss:
--------------------------------------------------------------------------------
```scss
body.about-who {
.hero-images {
position: absolute;
right: 0;
top: 180px;
.lines,
.phones,
.triangle {
position: absolute;
right: 0;
top: 0;
}
.lines {
height: 582px;
right: 120px;
top: 150px;
width: 700px;
}
.phones {
height: 931px;
right: -500px;
width: 1500px;
}
.triangle {
height: 650px;
width: 442px;
}
}
.hero {
position: relative;
padding: 225px 8.95% 300px 8.95%;
.triangle {
height: 650px;
width: 442px;
}
}
.hero {
position: relative;
padding: 225px 8.95% 300px 8.95%;
.title {
position: relative;
max-width: 450px;
margin-bottom: 0;
}
.subtitle {
max-width: 350px;
}
}
.user-categories {
flex-wrap: wrap;
padding: 0 8.95% 75px 8.95%;
.card {
padding: 45px 10px 35px 10px;
text-align: center;
amp-img {
margin-bottom: 20px;
}
&:hover {
.user-link {
opacity: 1;
}
}
}
.user-link {
@extend a;
display: inline;
opacity: 0;
transition: opacity .2s;
}
}
&.rtl {
.hero {
padding: 225px 65% 300px 0%;
}
}
@include min-max-screen($mobile-breakpoint, 1300px) {
&.rtl .hero, .hero {
padding: 70px 0 900px;
text-align: center;
.title, .subtitle {
margin: 10px auto;
}
}
.hero-images {
top: 480px;
}
}
@include max-screen($mobile-breakpoint) {
.about-who-block {
position: relative;
&::before {
background: $gradient-med-faded;
content: '';
display: block;
height: 1400px;
left: 0;
position: absolute;
width: 100%;
top: -1000px;
transform: skewY(36deg);
transform-origin: bottom left;
}
}
.hero-images {
display: none;
}
&.rtl .hero, .hero {
padding: 100px 0 40px 0;
.inline-toc {
display: block;
margin-top: 250px;
}
}
.user-categories {
padding: 0 0 40px 0;
.card {
flex: 0 0 48%; // IE10: calc not allowed in flex
flex: 0 0 calc(50% - 20px);
}
.user-link {
opacity: 1;
}
}
}
@include max-screen($tablet-portrait-breakpoint - 200px) {
.hero {
.inline-toc {
margin-top: 450px;
}
}
}
@include max-screen($mobile-medium-breakpoint) {
.user-categories {
.card {
position: relative;
left: -2%;
flex: 0 0 100%;
}
}
}
}
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Configurazione di Analytics
---
## Decidi prima di iniziare
Tutte le soluzioni di analisi si basano sulla conoscenza del tipo di dati necessari
e sul modo in cui si prevede di analizzare tali dati. Decidi prima di iniziare.
* Pensi di utilizzare strumenti di analisi di terzi per valutare il coinvolgimento degli utenti
oppure pensi di utilizzare una tua soluzione personalizzata?
* Quali comportamenti degli utenti prenderai in esame per capirne il livello di coinvolgimento?
### Pensi di inviare i dati a fornitori o a te stesso?
Se disponi di una soluzione personalizzata per la valutazione del coinvolgimento degli utenti,
l’unica cosa di cui avrai bisogno per integrare l’analisi AMP con tale soluzione è un URL.
È qui che invierai i tuoi dati.
Puoi anche inviare i dati a diversi URL.
Ad esempio, puoi inviare i dati di visualizzazione delle pagine a un URL
e i dati di coinvolgimento sui social a un altro URL.
L’analisi AMP è concepita appositamente per eseguire una sola misurazione e generare più tipi di rapporti.
Se collabori già con uno o più fornitori di soluzioni di analisi,
verifica la
[specifica amp-analytics](/docs/reference/extended/amp-analytics.html)
per vedere se hanno integrato AMP nella propria soluzione.
In tal caso, basta semplicemente creare il link ai relativi documenti dalla specifica
e iniziare a seguire le istruzioni.
Se il fornitore della soluzione di analisi non ha integrato il formato AMP,
contattalo per richiedere assistenza.
Ti invitiamo anche a [segnalare un problema relativo al progetto AMP](https://github.com/ampproject/amphtml/issues/new)
richiedendo l’aggiunta del fornitore.
Vedi anche la sezione
[Integrazione degli strumenti di analisi in HTML AMP](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
### Di quali dati hai bisogno?
Quali dati relativi ai tuoi utenti pensi di acquisire per valutarne il coinvolgimento?
Devi identificare questi dati prima di poterli configurare.
Fattori importanti relativi ai dati da prendere in considerazione:
* Eseguirai solamente il monitoraggio delle visualizzazioni di pagina o anche di altri modelli di coinvolgimento dell’utente
(vedi anche [amp-pixel o amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
* Quali tipi di dati acquisirai relativamente ai tuoi utenti, ai tuoi contenuti,
a dispositivi o browser (vedi anche [Sostituzione delle variabili](/docs/guides/analytics/analytics_basics.html#variable-substitution))?
* Come identificherai i tuoi utenti (vedi anche [Identificazione dell’utente](/docs/guides/analytics/analytics_basics.html#user-identification))?
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Analyse konfigurieren
---
## Entscheidungen am Anfang
Bei allen Analyselösungen muss man sich darüber im Klaren sein, welche Daten benötigt werden und wie sie analysiert werden sollen. Entscheiden Sie gleich zu Beginn über folgende Fragen:
* Möchten Sie die Nutzerinteraktion mit Analysetools von Drittanbietern oder mithilfe einer eigenen Lösung analysieren?
* Welche Verhaltensweisen von Nutzern möchten Sie messen, um die Nutzerinteraktion zu verstehen?
### Daten an Anbieter oder an sich selbst senden?
Wenn Sie über eine eigene Lösung zum Messen der Nutzerinteraktion verfügen, brauchen Sie zur Integration der AMP-Analyse in diese Lösung lediglich eine URL. An diese URL werden die Daten gesendet.
Es ist auch möglich, Daten an verschiedene URLs zu senden. Sie können z. B. Daten zu Seitenaufrufen an die eine URL und Daten zu Interaktionen über soziale Netzwerke an eine andere URL senden.
Die AMP-Analyse wurde dafür entwickelt, Daten einmal zu messen und dann gleichzeitig an viele Adressaten zu senden.
Wenn Sie bereits mit einem oder mehreren Analyseanbietern zusammenarbeiten, sehen Sie in der [amp-analytics-Spezifikation](/docs/reference/extended/amp-analytics.html) nach, ob diese Anbieter ihre Lösung in AMP integriert haben. Ist dies der Fall, erstellen Sie einfach eine Verknüpfung von der Spezifikation zu deren Dokumenten und befolgen Sie die Anleitung.
Wenn der Analyseanbieter keine Integration in AMP vorgenommen hat, bitten Sie ihn um Unterstützung.
Scheuen Sie sich nicht, bei Bedarf [im AMP-Projekt einen Problemfall zu erstellen](https://github.com/ampproject/amphtml/issues/new), um das Hinzufügen des Anbieters zu beantragen.
Weitere Informationen finden Sie unter [Analysetools in AMP-HTML integrieren](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
### Welche Daten benötigen Sie?
Welche Arten von Nutzerdaten werden Sie erfassen, um die Nutzerinteraktion zu messen?
Auch dies müssen Sie entscheiden, um die entsprechenden Konfigurationen vornehmen zu können.
Beachten Sie die folgenden wichtigen Punkte:
* Möchten Sie nur Seitenaufrufe oder auch zusätzliche Nutzerinteraktionsmuster erfassen (siehe auch [amp-pixel oder amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
* Welche Arten von Daten zu Ihren Nutzern, Ihren Inhalten, zum Gerät oder zum Browser möchten Sie erfassen (siehe auch [Variablensubstitution](/docs/guides/analytics/analytics_basics.html#variable-substition))?
* Wie werden Sie Ihre Nutzer identifizieren (siehe auch [Nutzeridentifikation](/docs/guides/analytics/analytics_basics.html#user-identification))?
```
--------------------------------------------------------------------------------
/content/docs/get_started/login_requiring/add_comment.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Add a comment
$order: 1
---
<amp-img src="/static/img/comment.png" alt="Add comment" height="325" width="300"></amp-img>
At this point, the user can add a comment using the `amp-form` library. Notice how the presence of the form is conditional, depending on the state of the `amp-access` component:
[sourcecode:html]
<form amp-access="loggedIn" amp-access-hide method="post" action-xhr="<%host%>/samples_templates/comment_section/submit-comment-xhr" target="_top">
[/sourcecode]
We specify a POST method and a XHR action, as non XHR actions are not allowed with POST methods in AMP.
Because this is a demo, we are not persisting comments, so it’s only possible to add one comment at the time; whenever a comment is added, the AMPByExample server replies with a JSON response containing the entered text with some additions, like a timestamp, an avatar and a name for the user.
Here's an example of JSON response:
[sourcecode:json]
{"Datetime":"09:34:21",
"User":"Charlie",
"Text":"Hello!",
"UserImg":"/img/ic_account_box_black_48dp_1x.png"}
[/sourcecode]
The form component will simply display those values inside the page using the [amp-mustache](https://www.ampproject.org/docs/reference/components/amp-mustache) template:
[sourcecode:html]
<div submit-success>
<template type="amp-mustache">
<div class="comment-user">
<amp-img width="44" class="user-avatar" height="44" alt="user" src="{{UserImg}}"></amp-img>
<div class="card comment">
<p><span class="user">{{User}}</span> <span class="date">{{Datetime}}</span></p>
<p>{{Text}}</p>
</div>
</div>
</template>
</div>
[/sourcecode]
In this example, we are only checking if the value of the comment is not empty; if the value is empty, we return an error that causes the following code to execute
[sourcecode:html]
<div submit-error>
<template type="amp-mustache">
Error! Looks like something went wrong with your comment, please try to submit it again.
</template>
</div>
[/sourcecode]
As an extra touch, we add the `required` attribute to enforce the presence of comment text before submitting the comment:
<amp-img src="/static/img/enforce-comment.png" alt="Enforce comment" height="325" width="300"></amp-img>
[sourcecode:html]
<input type="text" class="data-input" name="text" placeholder="Your comment..." required>
[/sourcecode]
When you add a comment and click the submit button, you should now see something similar to the following screenshot:
<amp-img src="/static/img/logout-button.png" alt="Comment added" height="352" width="300"></amp-img>
<a class="go-button button" href="/docs/get_started/login_requiring/logout.html">Continue to Step 3</a>
```
