This is page 4 of 24. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.doc('/content/latest/list-past-event.html').url.path%7D%7D?lines=true&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/about/who-use-amp/advertisers/advertisers_icon_ROI.svg:
--------------------------------------------------------------------------------
```
1 | <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
1 | .share-module {
2 | border-bottom: 0;
3 | position: absolute;
4 | z-index: 1;
5 |
6 | section,
7 | header {
8 | border: 0;
9 | }
10 |
11 | p.text-label {
12 | color: $color-ampblue;
13 | text-align: center;
14 | position: relative;
15 | top: $share-button-size;
16 | }
17 |
18 | .control header {
19 | width: $share-button-size + 22px;
20 | height: $share-button-size + 50px;
21 | background-color: transparent;
22 | padding-right: 0;
23 | position: relative;
24 | left: -10px;
25 | top: -10px;
26 | transition: height .5s;
27 | }
28 |
29 | .toggle-buttons {
30 | position: absolute;
31 | width: $share-button-size + 2px;
32 | height: $share-button-size + 2px;
33 | top: 10px;
34 | left: 10px;
35 | background: $color-ampblue;
36 | z-index: 1;
37 | border-radius: 50%;
38 | box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .15);
39 | }
40 |
41 | .button-open,
42 | .button-close {
43 | position: absolute;
44 | top: 0;
45 | left: 0;
46 | width: $share-button-size + 2px;
47 | height: $share-button-size + 2px;
48 | }
49 |
50 | .button-open {
51 | background: url(/static/img/symbols/share.svg) center/38% no-repeat;
52 | transition: opacity .25s;
53 | }
54 |
55 | .button-close {
56 | display: none;
57 | background: url(/static/img/symbols/share-close.svg) center/38% no-repeat;
58 | }
59 |
60 | .share-buttons {
61 | position: absolute;
62 | width: $share-button-size;
63 | height: $share-button-size * 5 + $share-button-distance * 4;
64 | top: 1px;
65 | left: 1px;
66 | amp-social-share {
67 | position: absolute;
68 | width: $share-button-size;
69 | height: $share-button-size;
70 | top: 0;
71 | left: 0;
72 | transition: transform .25s ease-in-out;
73 | border-radius: 50%;
74 | background-size: 70%;
75 | }
76 | }
77 |
78 | .share-content {
79 | header {
80 | height: 0;
81 | }
82 | position: absolute;
83 | top: 0;
84 | }
85 |
86 | .control[expanded] {
87 | header {
88 | height: $share-button-size + 22px;
89 | }
90 |
91 | .button-close {
92 | display: block;
93 | }
94 |
95 | .button-open {
96 | opacity: 0;
97 | }
98 |
99 | & + section amp-social-share {
100 | &:nth-child(1) {
101 | transform: translateY($share-button-size-full * 4);
102 | }
103 | &:nth-child(2) {
104 | transform: translateY($share-button-size-full * 3);
105 | }
106 | &:nth-child(3) {
107 | transform: translateY($share-button-size-full * 2);
108 | }
109 | &:nth-child(4) {
110 | transform: translateY($share-button-size-full);
111 | }
112 | }
113 | }
114 |
115 | @include max-screen(1121px) {
116 | p.text-label {
117 | top: $share-button-size - 5px;
118 | }
119 | }
120 | }
121 |
122 | .rtl .share-module {
123 | .control header {
124 | left: auto;
125 | right: -10px;
126 | }
127 | }
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Monetizzazione per i publisher
3 |
4 | faq:
5 | - title@: Come funziona la pubblicità nelle pagine Accelerated Mobile Pages?
6 | answer@: |
7 | 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.
8 | - title@: I publisher possono vendere il proprio spazio pubblicitario?
9 | answer@: |
10 | Sì, i publisher hanno il controllo del proprio spazio pubblicitario e della modalità di vendita, così come dei propri siti web esistenti.
11 | - title@: Come funzionano gli abbonamenti e i paywall con il formato Accelerated Mobile Pages?
12 | answer@: |
13 | 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.
14 | - title@: Come vengono gestiti i dati analitici in questo formato AMP?
15 | answer@: |
16 | 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.
17 | - title@: I publisher ricevono credito per il traffico che viene misurato?
18 | answer@: |
19 | Sì, un file AMP è come il resto del sito (la "tela" del publisher).
20 | - title@: Come faccio a entrare a far parte del progetto?
21 | answer@: |
22 | 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.
23 | ---
24 |
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_whitelist.svg:
--------------------------------------------------------------------------------
```
1 | <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:
--------------------------------------------------------------------------------
```
1 | <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
1 | ---
2 | $title@: Monétisation des éditeurs
3 |
4 | faq:
5 | - title@: Comment la publicité fonctionne-t-elle sur les pages Accelerated Mobile Pages ?
6 | answer@: |
7 | 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.
8 | - title@: Les éditeurs peuvent-ils vendre leur propre inventaire publicitaire ?
9 | answer@: |
10 | Oui, comme avec leurs autres sites Web, les éditeurs contrôlent leur inventaire publicitaire et la façon dont ils le vendent.
11 | - title@: Comment les abonnements et les paywalls fonctionnent-ils avec les pages Accelerated Mobile Pages ?
12 | answer@: |
13 | 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.
14 | - title@: Comment les statistiques sont-elles traitées au format AMP ?
15 | answer@: |
16 | 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.
17 | - title@: Du point de vue des mesures, les éditeurs reçoivent-ils du crédit pour le trafic ?
18 | answer@: |
19 | Oui, un fichier AMP est identique au reste de votre site. Cet espace constitue la toile de l'éditeur.
20 | - title@: Comment puis-je prendre part au projet ?
21 | answer@: |
22 | 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.
23 | ---
24 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Configurar Analytics
3 | ---
4 |
5 | ## Decida antes de começar
6 |
7 | Todas as soluções de análise são baseadas no conhecimento dos dados de que você precisa
8 | e de como pretende analisar esses dados. Decida antes de começar:
9 |
10 | * Você vai usar ferramentas de análise de terceiros para analisar o envolvimento do usuário
11 | ou sua própria solução interna?
12 | * Que comportamentos você medirá para entender o envolvimento do usuário?
13 |
14 | ### Você pretende enviar os dados para o fornecedor ou para você mesmo?
15 |
16 | Se você tiver sua própria solução interna para medir o envolvimento do usuário,
17 | a única coisa que você precisa para integrar o Analytics do AMP a essa solução é um URL.
18 | É para ele que você enviará os dados.
19 | Você também podem enviar os dados a vários URLs.
20 | Por exemplo, é possível enviar dados de visualização de páginas a um URL
21 | e dados de envolvimento social a outro.
22 |
23 | O Analytics do AMP foi projetado especificamente para medir uma vez e relatar a muitos.
24 | Se você já está trabalhando com um ou mais fornecedores de análise,
25 | verifique a
26 | [especificação do amp-analytics](/docs/reference/extended/amp-analytics.html)
27 | para ver se eles integraram a solução com o AMP.
28 | Em caso positivo, basta vincular aos documentos da especificação
29 | e começar a seguir as instruções.
30 |
31 | Se o fornecedor de análise não tiver feito a integração com o AMP,
32 | entre em contato com ele para obter suporte.
33 | Também recomendamos [criar um problema no projeto AMP](https://github.com/ampproject/amphtml/issues/new)
34 | solicitando que o fornecedor seja adicionado.
35 | Consulte também
36 | [Integrar suas ferramentas de análise no AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
37 |
38 | ### De que dados você precisa?
39 |
40 | Que dados sobre seus usuários você pretende capturar para medir o envolvimento?
41 | Você deve identificar esses dados antes de fazer a configuração.
42 |
43 | Os principais pontos a serem considerados:
44 |
45 | * Você pretende rastrear somente as visualizações de páginas ou outros padrões de envolvimento do usuário
46 | (consulte também [amp-pixel ou amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
47 | * Que tipos de dados você pretende capturar sobre seus usuários, seu conteúdo,
48 | o dispositivo ou navegador (consulte também [Substituição de variáveis](/docs/guides/analytics/analytics_basics.html#variable-substitution))?
49 | * Como você pretende identificar seus usuários (consulte também [Identificação de usuários](/docs/guides/analytics/analytics_basics.html#user-identification))?
50 |
```
--------------------------------------------------------------------------------
/views/partials/post-item.html:
--------------------------------------------------------------------------------
```html
1 | {% set isEvent = (post.type|lower == "event") %}
2 | {% set isBlog = (post.type|lower == "blog") %}
3 | {% set isRoadmap = (post.type|lower == "roadmap") %}
4 | {% set latest = g.doc('/content/includes/latest.yaml', locale=doc.locale) %}
5 |
6 | <div class="post-item">
7 | {% if meta %}
8 | <div class="post-meta">
9 | {% if not isRoadmap %}
10 | <a class="type" href="{{g.doc('/content/latest/list-' ~ post.type|lower ~ '.html', locale=doc.locale).url.path}}">{{post.type}}</a>
11 | {% else %}
12 | <a class="type" href="{{g.doc('/content/latest/roadmap.html', locale=doc.locale).url.path}}">{{post.type}}</a>
13 | {% endif %}
14 | {% if isBlog %}
15 | <span class="time text-label">{{post.date}}</span>
16 | {% endif %}
17 | {% if isRoadmap %}
18 | <span class="time text-label">{{post.updated}}</span>
19 | {% endif %}
20 | </div>
21 | {% endif %}
22 | {% if isBlog %}
23 | <a href="{{g.doc('/content/latest/blog/' ~ post.id ~ '.md', locale=doc.locale).url.path}}" class="post-title">
24 | {% endif %}
25 | {% if isEvent %}
26 | <a href="{{post.href}}" class="post-title">
27 | {% endif %}
28 | {% if isRoadmap %}
29 | <a href="{{g.doc('/content/latest/roadmap.html', locale=doc.locale).url.path}}" class="post-title">
30 | <h4>{{post.current}}</h4>
31 | {% else %}
32 | <h4>{{post.title|truncate(80, False)}}</h4>
33 | {% endif %}
34 | </a>
35 | {% if not isEvent or not past %}
36 | <p class="post-excerpt small">{{post.excerpt|safe|truncate(170, False)}}</p>
37 | {% endif %}
38 | {% if isEvent %}
39 | <div class="event-meta">
40 | <span class="event-time smaller">
41 | <amp-img
42 | noloading
43 | height=15
44 | width=15
45 | src="{{latest.feed.icon_calendar}}">
46 | </amp-img>
47 | {{post.event_time_text}}
48 | </span>
49 | <span class="location smaller">
50 | <amp-img
51 | noloading
52 | height=15
53 | width=15
54 | src="{{latest.feed.icon_location}}">
55 | </amp-img>
56 | {{post.location}}
57 | </span>
58 | <span class="participant smaller">
59 | <amp-img
60 | noloading
61 | height=15
62 | width=15
63 | src="{{latest.feed.icon_audience}}">
64 | </amp-img>
65 | {{post.participant}}
66 | </span>
67 | </div>
68 | {% endif %}
69 | {% if isEvent and not past %}
70 | <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>
71 | {% endif %}
72 | </div>
```
--------------------------------------------------------------------------------
/content/support/faqs/supported-platforms.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Supported Platforms, Vendors and Partners
3 | $order: 3
4 | $parent: /content/support/faqs.md
5 | class: who
6 |
7 | 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
8 |
9 | cta:
10 | title@: Next FAQ
11 | link_text@: AMP Overview
12 | link_url: /content/support/faqs/overview.md
13 |
14 | ---
15 | {% set who = g.doc('/content/includes/who.yaml', locale=doc.locale) %}
16 |
17 | <div class="inline-toc">
18 | <ul>
19 | {% for section in who.tech_companies.sections %}
20 | <li><a href="#{{section.title|slug}}">{{_(section.title)}}</a></li>
21 | {% endfor %}
22 | </ul>
23 | </div>
24 |
25 | 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.
26 |
27 | <div class="who-container">
28 | <amp-accordion>
29 | {% for section in who.tech_companies.sections %}
30 | <section id="{{section.title|slug}}" {% if loop.index == 1 %}expanded{% endif %}>
31 | <header class="accordion-header">
32 | <h4 class="accordion-title">{{_(section.title)}}</h4>
33 | {% if section.description %}<p>{{_(section.description)}}</p>{% endif %}
34 | </header>
35 | <div class="accordion-content">
36 | <ol class="item-container">
37 | {% for item in section.section_items | sort %}
38 | <li class="item">
39 | {% if item.link %}
40 | <a href="{{item.link}}">{{item.title}}</a>
41 | {% else %}
42 | {{item.title}}
43 | {% endif %}
44 | </li>
45 | {% endfor %}
46 | </ol>
47 | </div>
48 | </section>
49 | {% endfor %}
50 | </amp-accordion>
51 | </div>
52 |
53 | <hr>
54 |
55 | # Supported Browsers
56 |
57 | <div class="browser-container">
58 | {% for item in who.browsers %}
59 | <div class="browser">
60 | <amp-img width="75"
61 | height="75"
62 | layout="responsive"
63 | src="{{item.img}}"></amp-img>
64 | <p class="browser-title">{{item.title}}</p>
65 | </div>
66 | {% endfor %}
67 | </div>
68 |
69 | 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.
70 |
71 | 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.
72 |
73 | 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.
74 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Monetarisierung für Publisher
3 |
4 | faq:
5 | - title@: Wie funktioniert die Werbung in Accelerated Mobile Pages?
6 | answer@: |
7 | 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.
8 | - title@: Können Webpublisher und Verlage ihr eigenes Anzeigeninventar verkaufen?
9 | answer@: |
10 | Ja. Genau wie bei ihren bestehenden Websites haben Webpublisher und Verlage die volle Kontrolle über ihr Anzeigeninventar und dessen Verkauf.
11 | - title@: Wie funktionieren Abos und Paywalls mit Accelerated Mobile Pages?
12 | answer@: |
13 | 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.
14 | - title@: Wie werden Analysedaten im AMP-Format gehandhabt?
15 | answer@: |
16 | 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).
17 | - title@: Werden Webpublishern und Verlagen die Zugriffe aus Messperspektive angerechnet?
18 | answer@: |
19 | Ja, eine AMP-Datei unterscheidet sich in dieser Hinsicht nicht vom Rest Ihrer Website – auch dieser Bereich gehört dem Webpublisher oder Verlag.
20 | - title@: Wie kann ich mich am Projekt beteiligen?
21 | answer@: |
22 | 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.
23 | ---
24 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/adtech_icon_customize.svg:
--------------------------------------------------------------------------------
```
1 | <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
1 | ---
2 | $title: Konfigurowanie analityki
3 | ---
4 |
5 | ## Zdecyduj, zanim zaczniesz
6 |
7 | Wszystkie rozwiązania analityczne są budowane na wiedzy o tym, jakich danych potrzebujesz
8 | oraz jak zamierzasz analizować te dane. Zdecyduj, zanim zaczniesz:
9 |
10 | * Zamierzasz używać narzędzi analitycznych innych firm,
11 | czy masz własne, firmowe rozwiązanie?
12 | * Jakie zachowania użytkowników chcesz mierzyć, aby poznać zaangażowanie użytkowników?
13 |
14 | ### Wysyłać dane do dostawcy czy do siebie?
15 |
16 | Jeśli masz własne, firmowe rozwiązanie do mierzenia czynności użytkowników,
17 | jedynie adres URL jest potrzebny w celu integracji analityki AMP z tym rozwiązaniem.
18 | To tam będziesz wysyłać dane.
19 | Możesz także wysyłać dane na różne adresy URL.
20 | Na przykład możesz wysyłać dane o wyświetleniach strony na jeden adres URL,
21 | a dane o interakcjach społecznościowych na inny adres URL.
22 |
23 | Analityka AMP została specjalnie zaprojektowania pod kątem jednorazowego pomiaru i zgłaszania do wielu odbiorców.
24 | Jeśli już pracujesz z jednym lub kilkoma dostawcami analityki,
25 | zapoznaj się ze
26 | [specyfikacją],(/docs/reference/extended/amp-analytics.html)
27 | aby przekonać się, czy zintegrowali oni swoje rozwiązania z AMP.
28 | Jeśli tak, wystarczy utworzyć link do ich dokumentów ze specyfikacji
29 | i rozpocząć wykonywanie instrukcji.
30 |
31 | Jeśli dostawca analityki nie zintegrował swojego rozwiązania z AMP,
32 | skontaktuj się z dostawcą, aby poprosić o pomoc.
33 | Zachęcamy także do [utworzenia zgłoszenia w projekcie AMP](https://github.com/ampproject/amphtml/issues/new)
34 | z żądaniem dodania dostawcy.
35 | Zobacz też
36 | [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.
37 |
38 | ### Jakich danych potrzebujesz?
39 |
40 | Jakie dane o swoich użytkownikach zamierzasz przechwytywać w celu mierzenia czynności?
41 | Musisz zidentyfikować te dane, aby móc je skonfigurować.
42 |
43 | Kluczowe punkty danych, które trzeba wziąć pod uwagę:
44 |
45 | * Zamierzasz monitorować tylko wyświetlenia stron, czy wzorce czynności użytkowników
46 | (patrz także opis znaczników [amp-pixel lub amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
47 | * Jakie zamierzasz przechwytywać rodzaje danych o użytkownikach, treściach,
48 | o urządzeniu lub przeglądarce (patrz także [Podstawianie zmiennych](/docs/guides/analytics/analytics_basics.html#variable-substitution))?
49 | * Jak zamierzasz identyfikować swoich użytkowników (patrz także [Identyfikacja użytkownika](/docs/guides/analytics/analytics_basics.html#user-identification))?
50 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Configurar Analytics
3 | ---
4 |
5 | ## Decide antes de comenzar
6 |
7 | Todas las soluciones de análisis se crean en función de los datos que necesitas
8 | y de cómo quieres analizar esos datos. Decide antes de comenzar:
9 |
10 | * Para analizar la captación de usuarios, ¿usarás herramientas de análisis de terceros
11 | o una solución propia?
12 | * ¿Qué comportamientos de los usuarios medirás para comprender la captación de estos?
13 |
14 | ### ¿Enviarás datos al proveedor o te los enviarás a ti mismo?
15 |
16 | Si tienes una solución propia para medir la captación de usuarios,
17 | lo único que necesitarás para integrar el análisis de AMP a esa solución es una URL.
18 | Allí enviarás los datos.
19 | También puedes enviar datos a varias direcciones URL.
20 | Por ejemplo, puedes enviar datos de visualización de la página a una URL
21 | y datos de captación de redes sociales a otra.
22 |
23 | El análisis de AMP se diseñó específicamente para realizar mediciones una vez y enviar varios informes.
24 | Si ya trabajas con uno o más proveedores de herramientas de análisis,
25 | consulta la
26 | [especificación de amp-analytics](/docs/reference/extended/amp-analytics.html)
27 | para averiguar si integraron su solución con AMP.
28 | Si lo hicieron, simplemente establece un vínculo con sus documentos desde la especificación
29 | y comienza a seguir las instrucciones.
30 |
31 | Si el proveedor de herramientas de análisis no estableció una integración con AMP,
32 | comunícate con él para solicitarle soporte.
33 | También te recomendamos [reportar un asunto en el proyecto de AMP](https://github.com/ampproject/amphtml/issues/new)
34 | para solicitar la adición del proveedor.
35 | Consulta también
36 | [Integración de tus herramientas de análisis en AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
37 |
38 | ### ¿Qué datos necesitas?
39 |
40 | ¿Qué datos acerca de los usuarios recopilarás para medir la captación?
41 | Debes identificar esos datos para poder configurarlos.
42 |
43 | Puntos de datos claves que debes considerar:
44 |
45 | * ¿Realizarás un seguimiento solo de las vistas de la página o de otros patrones de captación de usuarios?
46 | (Consulta también la sección [¿amp-pixel o amp-analytics?](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics)).
47 | * ¿Qué tipos de datos puedes capturar acerca de tus usuarios, tu contenido,
48 | el dispositivo o el navegador (consulta también la sección sobre [sustitución de variables](/docs/guides/analytics/analytics_basics.html#variable-substitution))?
49 | * ¿Cómo identificarás a tus usuarios (consulta también [Identificación de usuarios](/docs/guides/analytics/analytics_basics.html#user-identification))?
50 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Mengonfigurasi Analytics
3 | ---
4 |
5 | ## Putuskan sebelum Anda memulai
6 |
7 | Semua solusi analisis dibangun berdasarkan pengetahuan mengenai data yang Anda butuhkan,
8 | dan bagaimana Anda ingin menganalisis data tersebut. Putuskan sebelum Anda memulai:
9 |
10 | * Akankah Anda memakai alat analisis pihak ketiga untuk menganalisis keterlibatan pengguna,
11 | atau solusi internal Anda sendiri?
12 | * Perilaku pengguna apakah yang akan Anda ukur untuk memahami keterlibatan pengguna?
13 |
14 | ### Mengirim data ke vendor atau ke sendiri?
15 |
16 | Jika Anda memiliki solusi internal sendiri untuk mengukur keterlibatan pengguna,
17 | satu-satunya hal yang Anda akan butuhkan untuk mengintegrasikan analisis AMP dengan solusi tersebut adalah URL.
18 | Di sinilah Anda akan mengirimkan data.
19 | Anda juga bisa mengirim data ke berbagai URL.
20 | Misalnya, Anda bisa mengirim data tampilan halaman ke satu URL,
21 | dan data keterlibatan sosial ke URL yang lain.
22 |
23 | Analisis AMP didesain khusus untuk mengukur sekali dan melaporkan ke banyak.
24 | Jika Anda sudah bekerja dengan satu atau beberapa vendor analisis,
25 | periksa
26 | [spesifikasi amp-analytics](/docs/reference/extended/amp-analytics.html)
27 | untuk mengetahui apakah mereka telah mengintegrasikan solusi mereka dengan AMP.
28 | Jika mereka telah mengintegrasikannya, cukup tautkan ke dokumen mereka dari spesifikasi
29 | dan mulailah mengikuti petunjuknya.
30 |
31 | Jika vendor analisis belum mengintegrasikan dengan AMP,
32 | hubungi vendor untuk meminta dukungan mereka.
33 | Kami juga mendorong Anda untuk [melaporkan adanya masalah dalam proyek AMP](https://github.com/ampproject/amphtml/issues/new)
34 | yang meminta ditambahkannya vendor tersebut.
35 | Lihat juga
36 | [Mengintegrasikan alat analisis Anda di AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
37 |
38 | ### Data apakah yang Anda butuhkan?
39 |
40 | Data tentang pengguna apakah yang akan Anda tangkap untuk mengukur keterlibatan?
41 | Anda harus mengidentifikasi data ini sebelum Anda bisa mengonfigurasikannya.
42 |
43 | Butir-butir data utama yang harus dipertimbangkan:
44 |
45 | * Akankah Anda hanya melacak tampilan halaman saja, atau pola keterlibatan pengguna tambahan
46 | (lihat juga [amp-pixel atau amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
47 | * Jenis data apakah yang akan Anda tangkap dari pengguna, materi,
48 | perangkat atau browser (lihat juga [Penggantian variabel](/docs/guides/analytics/analytics_basics.html#variable-substitution)?
49 | * Bagaimana Anda akan mengidentifikasi pengguna Anda (lihat juga [Identifikasi pengguna](/docs/guides/analytics/analytics_basics.html#user-identification))?
50 |
```
--------------------------------------------------------------------------------
/views/partials/lines.html:
--------------------------------------------------------------------------------
```html
1 | <div class="animated-lines-big">
2 | <amp-img
3 | noloading
4 | height=224
5 | src="/static/img/motions/amp-lines-motions.png">
6 | </amp-img>
7 | <div class="line-pos pos-306-75-delay--1050"><div class="line line-a"></div></div>
8 | <div class="line-pos pos-155-101-delay--5100"><div class="line line-b"></div></div>
9 | <div class="line-pos pos-282-62-delay--5090"><div class="line line-c"></div></div>
10 | <div class="line-pos pos-255-559-delay--4150"><div class="line line-d"></div></div>
11 | <div class="line-pos pos-318-0-delay--4120"><div class="line line-a"></div></div>
12 | <div class="line-pos pos-297-268-delay--4050"><div class="line line-e"></div></div>
13 | <div class="line-pos pos-353-107-delay--3160"><div class="line line-f"></div></div>
14 | <div class="line-pos pos-74-0-delay--3150"><div class="line line-a"></div></div>
15 | <div class="line-pos pos-257-312-delay--3120"><div class="line line-d"></div></div>
16 | <div class="line-pos pos-207-435-delay--3090"><div class="line line-g"></div></div>
17 | <div class="line-pos pos-294-244-delay--2150"><div class="line line-e"></div></div>
18 | <div class="line-pos pos-251-401-delay--2120"><div class="line line-g"></div></div>
19 | <div class="line-pos pos-52-69-delay--2100"><div class="line line-c"></div></div>
20 | <div class="line-pos pos-203-164-delay--1940"><div class="line line-g"></div></div>
21 | <div class="line-pos pos-0-184-delay--1130"><div class="line line-b"></div></div>
22 | <div class="line-pos pos-76-553-delay--1110"><div class="line line-d"></div></div>
23 | <div class="line-pos pos-306-75-delay--1010"><div class="line line-a"></div></div>
24 | <div class="line-pos pos-280-322-delay--950"><div class="line line-b"></div></div>
25 | </div>
26 |
27 | <!-- <div class="animated-lines-small">
28 | <div class="line-pos pos-54-106-delay-0"><div class="line line-h"></div></div>
29 | <div class="line-pos pos-0-20-delay-20"><div class="line line-j"></div></div>
30 | <div class="line-pos pos-20-0-delay-60"><div class="line line-i"></div></div>
31 | <div class="line-pos pos-40-46-delay-190"><div class="line line-j"></div></div>
32 | </div>
33 |
34 | <div class="animated-lines-small">
35 | <div class="line-pos pos-57-32-delay-0"><div class="line line-j"></div></div>
36 | <div class="line-pos pos-38-0-delay-10"><div class="line line-i"></div></div>
37 | <div class="line-pos pos-0-38-delay-70"><div class="line line-i"></div></div>
38 | <div class="line-pos pos-17-98-delay-110"><div class="line line-j"></div></div>
39 | <div class="line-pos pos-57-151-delay-130"><div class="line line-h"></div></div>
40 | </div>
41 | -->
42 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/who_icon_adtech.svg:
--------------------------------------------------------------------------------
```
1 | <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
1 | ---
2 | $title@: Obtención de ingresos del editor
3 |
4 | faq:
5 | - title@: ¿Cómo funciona la publicidad en Accelerated Mobile Pages?
6 | answer@: |
7 | 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.
8 | - title@: ¿Los editores pueden vender su propio inventario publicitario?
9 | answer@: |
10 | Sí. Igual que con sus sitios web, los editores controlan su inventario publicitario y la forma de venderlo.
11 | - title@: ¿Cómo funcionan las suscripciones y los muros de pago con Accelerated Mobile Pages?
12 | answer@: |
13 | 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.
14 | - title@: ¿Cómo se gestionan los análisis en el formato AMP?
15 | answer@: |
16 | 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.
17 | - title@: ¿Los editores reciben crédito por el tráfico desde el punto de vista de la medición?
18 | answer@: |
19 | Sí. Los archivos de AMP son iguales que los del resto de tu sitio web; este espacio es el lienzo del editor.
20 | - title@: ¿Cómo puedo participar en este proyecto?
21 | answer@: |
22 | 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.
23 | ---
24 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/advertisers/advertisers_icon_intro.svg:
--------------------------------------------------------------------------------
```
1 | <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
1 | body.about-who {
2 | .hero-images {
3 | position: absolute;
4 | right: 0;
5 | top: 180px;
6 |
7 | .lines,
8 | .phones,
9 | .triangle {
10 | position: absolute;
11 | right: 0;
12 | top: 0;
13 | }
14 |
15 | .lines {
16 | height: 582px;
17 | right: 120px;
18 | top: 150px;
19 | width: 700px;
20 | }
21 |
22 | .phones {
23 | height: 931px;
24 | right: -500px;
25 | width: 1500px;
26 | }
27 |
28 | .triangle {
29 | height: 650px;
30 | width: 442px;
31 | }
32 | }
33 |
34 |
35 | .hero {
36 | position: relative;
37 | padding: 225px 8.95% 300px 8.95%;
38 |
39 | .triangle {
40 | height: 650px;
41 | width: 442px;
42 | }
43 | }
44 |
45 |
46 | .hero {
47 | position: relative;
48 | padding: 225px 8.95% 300px 8.95%;
49 |
50 | .title {
51 | position: relative;
52 | max-width: 450px;
53 | margin-bottom: 0;
54 | }
55 |
56 | .subtitle {
57 | max-width: 350px;
58 | }
59 | }
60 |
61 | .user-categories {
62 | flex-wrap: wrap;
63 | padding: 0 8.95% 75px 8.95%;
64 |
65 | .card {
66 | padding: 45px 10px 35px 10px;
67 | text-align: center;
68 |
69 | amp-img {
70 | margin-bottom: 20px;
71 | }
72 |
73 | &:hover {
74 | .user-link {
75 | opacity: 1;
76 | }
77 | }
78 | }
79 |
80 | .user-link {
81 | @extend a;
82 | display: inline;
83 | opacity: 0;
84 | transition: opacity .2s;
85 | }
86 | }
87 |
88 | &.rtl {
89 | .hero {
90 | padding: 225px 65% 300px 0%;
91 | }
92 | }
93 |
94 | @include min-max-screen($mobile-breakpoint, 1300px) {
95 | &.rtl .hero, .hero {
96 | padding: 70px 0 900px;
97 | text-align: center;
98 |
99 | .title, .subtitle {
100 | margin: 10px auto;
101 | }
102 | }
103 |
104 | .hero-images {
105 | top: 480px;
106 | }
107 | }
108 |
109 | @include max-screen($mobile-breakpoint) {
110 | .about-who-block {
111 | position: relative;
112 | &::before {
113 | background: $gradient-med-faded;
114 | content: '';
115 | display: block;
116 | height: 1400px;
117 | left: 0;
118 | position: absolute;
119 | width: 100%;
120 | top: -1000px;
121 | transform: skewY(36deg);
122 | transform-origin: bottom left;
123 | }
124 | }
125 |
126 | .hero-images {
127 | display: none;
128 | }
129 |
130 | &.rtl .hero, .hero {
131 | padding: 100px 0 40px 0;
132 |
133 | .inline-toc {
134 | display: block;
135 | margin-top: 250px;
136 | }
137 | }
138 |
139 | .user-categories {
140 | padding: 0 0 40px 0;
141 | .card {
142 | flex: 0 0 48%; // IE10: calc not allowed in flex
143 | flex: 0 0 calc(50% - 20px);
144 | }
145 |
146 | .user-link {
147 | opacity: 1;
148 | }
149 | }
150 | }
151 |
152 | @include max-screen($tablet-portrait-breakpoint - 200px) {
153 | .hero {
154 | .inline-toc {
155 | margin-top: 450px;
156 | }
157 | }
158 | }
159 |
160 | @include max-screen($mobile-medium-breakpoint) {
161 | .user-categories {
162 | .card {
163 | position: relative;
164 | left: -2%;
165 | flex: 0 0 100%;
166 | }
167 | }
168 | }
169 | }
170 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Configurazione di Analytics
3 | ---
4 |
5 | ## Decidi prima di iniziare
6 |
7 | Tutte le soluzioni di analisi si basano sulla conoscenza del tipo di dati necessari
8 | e sul modo in cui si prevede di analizzare tali dati. Decidi prima di iniziare.
9 |
10 | * Pensi di utilizzare strumenti di analisi di terzi per valutare il coinvolgimento degli utenti
11 | oppure pensi di utilizzare una tua soluzione personalizzata?
12 | * Quali comportamenti degli utenti prenderai in esame per capirne il livello di coinvolgimento?
13 |
14 | ### Pensi di inviare i dati a fornitori o a te stesso?
15 |
16 | Se disponi di una soluzione personalizzata per la valutazione del coinvolgimento degli utenti,
17 | l’unica cosa di cui avrai bisogno per integrare l’analisi AMP con tale soluzione è un URL.
18 | È qui che invierai i tuoi dati.
19 | Puoi anche inviare i dati a diversi URL.
20 | Ad esempio, puoi inviare i dati di visualizzazione delle pagine a un URL
21 | e i dati di coinvolgimento sui social a un altro URL.
22 |
23 | L’analisi AMP è concepita appositamente per eseguire una sola misurazione e generare più tipi di rapporti.
24 | Se collabori già con uno o più fornitori di soluzioni di analisi,
25 | verifica la
26 | [specifica amp-analytics](/docs/reference/extended/amp-analytics.html)
27 | per vedere se hanno integrato AMP nella propria soluzione.
28 | In tal caso, basta semplicemente creare il link ai relativi documenti dalla specifica
29 | e iniziare a seguire le istruzioni.
30 |
31 | Se il fornitore della soluzione di analisi non ha integrato il formato AMP,
32 | contattalo per richiedere assistenza.
33 | Ti invitiamo anche a [segnalare un problema relativo al progetto AMP](https://github.com/ampproject/amphtml/issues/new)
34 | richiedendo l’aggiunta del fornitore.
35 | Vedi anche la sezione
36 | [Integrazione degli strumenti di analisi in HTML AMP](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
37 |
38 | ### Di quali dati hai bisogno?
39 |
40 | Quali dati relativi ai tuoi utenti pensi di acquisire per valutarne il coinvolgimento?
41 | Devi identificare questi dati prima di poterli configurare.
42 |
43 | Fattori importanti relativi ai dati da prendere in considerazione:
44 |
45 | * Eseguirai solamente il monitoraggio delle visualizzazioni di pagina o anche di altri modelli di coinvolgimento dell’utente
46 | (vedi anche [amp-pixel o amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
47 | * Quali tipi di dati acquisirai relativamente ai tuoi utenti, ai tuoi contenuti,
48 | a dispositivi o browser (vedi anche [Sostituzione delle variabili](/docs/guides/analytics/analytics_basics.html#variable-substitution))?
49 | * Come identificherai i tuoi utenti (vedi anche [Identificazione dell’utente](/docs/guides/analytics/analytics_basics.html#user-identification))?
50 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Analyse konfigurieren
3 | ---
4 |
5 | ## Entscheidungen am Anfang
6 |
7 | 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:
8 |
9 | * Möchten Sie die Nutzerinteraktion mit Analysetools von Drittanbietern oder mithilfe einer eigenen Lösung analysieren?
10 | * Welche Verhaltensweisen von Nutzern möchten Sie messen, um die Nutzerinteraktion zu verstehen?
11 |
12 | ### Daten an Anbieter oder an sich selbst senden?
13 |
14 | 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.
15 | 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.
16 |
17 | Die AMP-Analyse wurde dafür entwickelt, Daten einmal zu messen und dann gleichzeitig an viele Adressaten zu senden.
18 | 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.
19 |
20 | Wenn der Analyseanbieter keine Integration in AMP vorgenommen hat, bitten Sie ihn um Unterstützung.
21 | 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.
22 | Weitere Informationen finden Sie unter [Analysetools in AMP-HTML integrieren](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
23 |
24 | ### Welche Daten benötigen Sie?
25 |
26 | Welche Arten von Nutzerdaten werden Sie erfassen, um die Nutzerinteraktion zu messen?
27 | Auch dies müssen Sie entscheiden, um die entsprechenden Konfigurationen vornehmen zu können.
28 |
29 | Beachten Sie die folgenden wichtigen Punkte:
30 |
31 | * 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))?
32 | * 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))?
33 | * Wie werden Sie Ihre Nutzer identifizieren (siehe auch [Nutzeridentifikation](/docs/guides/analytics/analytics_basics.html#user-identification))?
34 |
35 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/login_requiring/add_comment.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Add a comment
3 | $order: 1
4 | ---
5 |
6 | <amp-img src="/static/img/comment.png" alt="Add comment" height="325" width="300"></amp-img>
7 |
8 | 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:
9 |
10 | [sourcecode:html]
11 | <form amp-access="loggedIn" amp-access-hide method="post" action-xhr="<%host%>/samples_templates/comment_section/submit-comment-xhr" target="_top">
12 | [/sourcecode]
13 |
14 | We specify a POST method and a XHR action, as non XHR actions are not allowed with POST methods in AMP.
15 | 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.
16 |
17 | Here's an example of JSON response:
18 |
19 | [sourcecode:json]
20 | {"Datetime":"09:34:21",
21 | "User":"Charlie",
22 | "Text":"Hello!",
23 | "UserImg":"/img/ic_account_box_black_48dp_1x.png"}
24 | [/sourcecode]
25 |
26 | 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:
27 |
28 | [sourcecode:html]
29 | <div submit-success>
30 | <template type="amp-mustache">
31 | <div class="comment-user">
32 | <amp-img width="44" class="user-avatar" height="44" alt="user" src="{{UserImg}}"></amp-img>
33 | <div class="card comment">
34 | <p><span class="user">{{User}}</span> <span class="date">{{Datetime}}</span></p>
35 | <p>{{Text}}</p>
36 | </div>
37 | </div>
38 | </template>
39 | </div>
40 | [/sourcecode]
41 |
42 | 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
43 |
44 | [sourcecode:html]
45 | <div submit-error>
46 | <template type="amp-mustache">
47 | Error! Looks like something went wrong with your comment, please try to submit it again.
48 | </template>
49 | </div>
50 | [/sourcecode]
51 |
52 | As an extra touch, we add the `required` attribute to enforce the presence of comment text before submitting the comment:
53 |
54 | <amp-img src="/static/img/enforce-comment.png" alt="Enforce comment" height="325" width="300"></amp-img>
55 |
56 | [sourcecode:html]
57 | <input type="text" class="data-input" name="text" placeholder="Your comment..." required>
58 | [/sourcecode]
59 |
60 | When you add a comment and click the submit button, you should now see something similar to the following screenshot:
61 |
62 | <amp-img src="/static/img/logout-button.png" alt="Comment added" height="352" width="300"></amp-img>
63 |
64 | <a class="go-button button" href="/docs/get_started/login_requiring/logout.html">Continue to Step 3</a>
65 |
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_priorities.svg:
--------------------------------------------------------------------------------
```
1 | <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-3{fill:#fff;fill-opacity:0.8;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-6{stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4,.cls-6{fill:none;}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{fill:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{fill:url(#linear-gradient-7);}.cls-8{fill:#0dd7ff;opacity:0.7;}</style><linearGradient id="linear-gradient" x1="54.5" y1="92.11" x2="82.17" y2="92.11" 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="57.83" y1="76.51" x2="85.5" y2="76.51" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="67.83" y1="78.97" x2="95.5" y2="78.97" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="90.83" y1="74.87" x2="90.83" y2="54.12" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="90.83" y1="74.87" x2="90.83" y2="54.12" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="63.33" y1="96.63" x2="63.33" y2="113.5" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="63.33" y1="96.63" x2="63.33" y2="113.5" xlink:href="#linear-gradient"/></defs><title>design_icon_priorities</title><polygon class="cls-1" points="55 94.99 55 104.84 81.67 89.24 81.67 79.38 55 94.99"/><polygon class="cls-2" points="58.33 79.38 58.33 89.24 85 73.64 85 63.78 58.33 79.38"/><polygon class="cls-3" points="68.33 81.85 68.33 91.7 95 76.1 95 66.24 68.33 81.85"/><line class="cls-4" x1="90.83" y1="74.87" x2="90.83" y2="55.2"/><polygon class="cls-5" points="94.92 58.51 94.19 59.2 90.83 55.58 87.48 59.2 86.74 58.51 90.83 54.12 94.92 58.51"/><line class="cls-6" x1="63.33" y1="96.63" x2="63.33" y2="112.42"/><polygon class="cls-7" points="59.24 109.1 59.98 108.42 63.33 112.03 66.69 108.42 67.42 109.1 63.33 113.5 59.24 109.1"/><ellipse class="cls-8" cx="72.19" cy="65.67" rx="1.44" ry="1.43" transform="translate(-25.4 65.94) rotate(-42.45)"/><ellipse class="cls-8" cx="68.14" cy="52.04" rx="1.44" ry="1.43" transform="translate(-17.27 59.64) rotate(-42.45)"/><ellipse class="cls-8" cx="76.8" cy="51.68" rx="1.44" ry="1.43" transform="translate(-14.75 65.39) rotate(-42.45)"/><ellipse class="cls-8" cx="75.15" cy="43.4" rx="1.44" ry="1.43" transform="translate(-9.59 62.1) rotate(-42.45)"/><ellipse class="cls-8" cx="67.44" cy="35.91" rx="1.44" ry="1.43" transform="translate(-6.56 54.94) rotate(-42.45)"/></svg>
```
--------------------------------------------------------------------------------
/content/learn/amp-design-principles.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Design Principles
2 | $order: 1
3 | class: design-principles bg-triangle-primary
4 | $view: /views/design-principles.html
5 | $parent: /content/learn/overview.yaml
6 |
7 | subtitle@: These design principles are meant to guide the ongoing design and development of AMP. They should help us make internally consistent decisions.
8 |
9 | principles:
10 | - title@: User Experience > Developer Experience > Ease of Implementation.
11 | description@: When in doubt, do what’s best for the end user experience, even if it means that it’s harder for the page creator to build or for the library developer to implement.
12 | icon: design_icon_ux.svg
13 | - title@: Don’t design for a hypothetical faster future browser.
14 | description@: "We’ve chosen to build AMP as a library in the spirit of the [extensible web manifesto](https://github.com/extensibleweb/manifesto/blob/master/README.md) to be able to fix the web of today, not the web of tomorrow.
15 |
16 | AMP should be fast in today's browsers. When certain optimizations aren't possible with today's platform, AMP developers should participate in standards development to get these added to the web platform."
17 | icon: design_icon_future.svg
18 | - title@: Don’t break the web.
19 | description@: Ensure that if AMP has outages or problems it doesn’t hurt the rest of the web. That means if the Google AMP Cache, the URL API or the library fails it should be possible for websites and consumption apps to gracefully degrade. If something works with an AMP cache it should also work without a cache.
20 | icon: design_icon_break.svg
21 | - title@: Solve problems on the right layer.
22 | description@: E.g. don’t integrate things on the client side, just because that is easier, when the user experience would be better with a server side integration.
23 | icon: design_icon_layers.svg
24 | - title@: Only do things if they can be made fast.
25 | description@: Don’t introduce components or features to AMP that can’t reliably run at 60fps or hinder the instant load experience on today’s most common mobile devices.
26 | icon: design_icon_fast.svg
27 | - title@: Prioritise things that improve the user experience – but compromise when needed.
28 | description@: Some things can be made fast and are still a terrible user experience. AMPs should deliver a fantastic user experience and speed is just one part of that. Only compromise when lack of support for something would stop AMP from being widely used and deployed.
29 | icon: design_icon_priorities.svg
30 | - title@: No whitelists.
31 | description@: We won’t give any special treatment to specific sites, domains or origins except where needed for security or performance reasons.
32 | icon: design_icon_whitelist.svg
33 |
34 | cta:
35 | title@: Get started building
36 | link_text@: Tutorials
37 | link_url: /content/docs/get_started/create.md
38 |
```
--------------------------------------------------------------------------------
/assets/img/about/overview/herolines1.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 583.43 522.44"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.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);}</style><linearGradient id="linear-gradient" x1="-24311.97" y1="2492.8" x2="-24009.73" y2="2492.8" gradientTransform="matrix(-0.1, 0.99, 0.99, 0.1, -4781.66, 24166.37)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#247bbd"/><stop offset="0.5" stop-color="#1987fa"/><stop offset="1" stop-color="#29d2fc"/></linearGradient><linearGradient id="linear-gradient-2" x1="11391.28" y1="19859.01" x2="11665.55" y2="19859.01" gradientTransform="matrix(0.27, -0.96, -0.96, -0.27, 16213.33, 16738.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#1987fa"/><stop offset="1" stop-color="#247bbd"/></linearGradient><linearGradient id="linear-gradient-3" x1="11228.98" y1="19910.37" x2="11503.26" y2="19910.37" gradientTransform="matrix(0.27, -0.96, -0.96, -0.27, 16213.33, 16738.28)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="11390.41" y1="19734.61" x2="11740.61" y2="19734.61" gradientTransform="matrix(0.27, -0.96, -0.96, -0.27, 16213.33, 16738.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1987fa"/><stop offset="1" stop-color="#29d2fc"/></linearGradient><linearGradient id="linear-gradient-5" x1="14304.21" y1="15856.27" x2="14610.19" y2="15856.27" gradientTransform="matrix(0.11, -0.99, -0.99, -0.11, 14504.55, 16316.58)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#1987fa"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-6" x1="-8517.28" y1="-6982.87" x2="-8316.52" y2="-6982.87" gradientTransform="matrix(-0.27, 0.96, 0.96, 0.27, 4690.66, 10099.78)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#29d2fc"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>herolines1</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="339.03" y1="256.18" x2="2.77" y2="518.89"/><line class="cls-2" x1="412.56" y1="100.15" x2="148.83" y2="304.57"/><line class="cls-3" x1="318.63" y1="242.11" x2="54.9" y2="446.53"/><line class="cls-4" x1="578.63" y1="69.47" x2="242.36" y2="332.18"/><line class="cls-5" x1="580.66" y1="3.55" x2="244.4" y2="266.25"/><line class="cls-6" x1="381.13" y1="15.21" x2="190.57" y2="164.09"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/_sidebar.scss:
--------------------------------------------------------------------------------
```scss
1 | amp-sidebar {
2 | background: $color-white;
3 | width: 100vw;
4 |
5 | .submenu {
6 | background: $color-white;
7 | bottom: 0;
8 | box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.075);
9 | left: 0;
10 | position: fixed;
11 | right: 0;
12 | top: 0;
13 | transform: translateX(100%);
14 | transition: transform 233ms cubic-bezier(0, 0, .21, 1);
15 | }
16 |
17 | input:checked + .submenu {
18 | transform: translateX(0);
19 | }
20 |
21 | input[type="checkbox"] {
22 | position: absolute;
23 | visibility: hidden;
24 | }
25 |
26 | .menu-item {
27 | border-bottom: solid 1px $color-grey-lt;
28 | color: $color-black;
29 | display: block;
30 | position: relative;
31 | text-transform: none;
32 |
33 | &:hover {
34 | background: $color-lightgrey;
35 | }
36 | }
37 |
38 | .item-layer-1 {
39 | font-size: 35px;
40 | font-weight: 100;
41 | line-height: 44px;
42 | padding: 30px 35px 30px 25px;
43 | }
44 |
45 | .item-layer-2,
46 | .item-layer-3 {
47 | font-size: 18px;
48 | font-weight: 300;
49 | line-height: 26px;
50 | padding: 15px 35px 15px 25px;
51 | }
52 |
53 | .menu-layer {
54 | &::after {
55 | background: $color-ampblue;
56 | bottom: 0;
57 | content: '';
58 | position: absolute;
59 | right: 0;
60 | top: 0;
61 | width: 13px;
62 | }
63 |
64 | .items {
65 | left: 0;
66 | overflow-x: hidden;
67 | overflow-y: scroll;
68 | position: absolute;
69 | right: 0;
70 | }
71 |
72 | &.primary {
73 | height: 100%;
74 | position: relative;
75 |
76 | .items {
77 | bottom: 80px;
78 | top: 60px;
79 | }
80 | }
81 |
82 | &.secondary {
83 | z-index: 2;
84 | }
85 |
86 | &.tertiary {
87 | z-index: 3;
88 | }
89 |
90 | &.secondary,
91 | &.tertiary {
92 | .items {
93 | bottom: 0;
94 | top: 85px;
95 | }
96 | }
97 | }
98 |
99 | .has-sub-level {
100 | &::after {
101 | @include sprite(carat)
102 | content: '';
103 | height: 12px;
104 | position: absolute;
105 | right: 35px;
106 | top: calc(50% - 6px);
107 | transform: rotate(90deg) scale(.75);
108 | width: 16px;
109 | }
110 | }
111 |
112 | .close-button {
113 | background: url(/static/img/symbols/close.svg) no-repeat center / 18px transparent;
114 | border: 0;
115 | height: 58px;
116 | position: absolute;
117 | right: 13px;
118 | top: 0;
119 | width: 68px;
120 | }
121 |
122 | .return-button {
123 | @extend %text-label;
124 | color: $color-grey-ltmd;
125 | font-weight: 300;
126 | left: 25px;
127 | position: absolute;
128 | top: 22px;
129 |
130 | &::before {
131 | background: url(/static/img/symbols/return.svg) no-repeat center / contain transparent;
132 | border: 0;
133 | content: '';
134 | display: inline-block;
135 | height: 11px;
136 | margin-right: 5px;
137 | position: relative;
138 | top: 1px;
139 | width: 7px;
140 | }
141 | }
142 | }
143 |
144 | .rtl amp-sidebar {
145 | .item-layer-1 {
146 | padding: 30px 35px;
147 | }
148 |
149 | .has-sub-level::after {
150 | left: 35px;
151 | right: auto;
152 | transform: rotate(-90deg) scale(.75);
153 | }
154 |
155 | .return-button::before {
156 | margin: 0 5px;
157 | transform: rotate(180deg);
158 | }
159 |
160 | .submenu {
161 | transform: translateX(-100%);
162 | }
163 | }
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/ads_on_amp/ads_tips.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title : Tips for Ads on AMP Pages
3 | $order : 1
4 | ---
5 |
6 | ### Placement & Controls: <br /> Optimize your ad placements
7 |
8 | - **Create separate ad units** on AMP pages for targeting, reporting, and control purposes.
9 | - **Place the same number of ads** on AMP Pages as your non-AMP pages to generate maximum revenue per page.
10 | - **Place the first ad immediately below the first viewport** ("below the fold") to provide an optimal user experience.
11 | - Unless you’re using advanced CSS or media queries, **ensure your ad units are centered on the page** to provide your users with an optimal mobile web experience.
12 | - **Enable <a href="https://github.com/ampproject/amphtml/tree/master/ads#support-for-multi-size-ad-requests">multi-size ad requests</a>** on your AMP inventory to increase ad auction pressure and drive revenue.
13 |
14 | ### Demand & Pricing: <br /> Get the right price for your ads
15 |
16 | - **Sell ad units on your AMP pages across all sales channels**, including direct and indirect to maximize competition for your inventory on AMP pages.
17 | - **Price your ad inventory on AMP pages** similar to your inventory on non-AMP pages. Monitor performance and adjust pricing accordingly.
18 | - **Ensure all ad demand channels are competing** for ad inventory on your AMP pages to drive up competition.
19 |
20 | ### Ad Types: <br /> Serve the best types of ads
21 |
22 | - **Avoid heavy creatives** per <a href="http://www.iab.com/wp-content/uploads/2015/11/IAB_Display_Mobile_Creative_Guidelines_HTML5_2015.pdf">IAB guidelines</a>.
23 | - **Avoid interstitials** or other ad formats that cause the content to reflow on ad load.
24 | - **Optimize for viewability** by setting the parameter:<br />
25 | <em>data-loading-strategy = prefer-viewability-over-views</em>
26 | - **Place ads in your video content** via [supported players](https://github.com/ampproject/amphtml/blob/master/extensions/README.md#audiovideo) or [`amp-iframe`](https://ampbyexample.com/components/amp-iframe/) to enable revenue on all types of content.
27 | - **Implement native ads** to compete with display ads using multi-sized ad requests, adding demand pressure while providing your readers with a premium user experience.
28 |
29 | ### Innovation: <br /> Offer the most engaging ad products
30 |
31 | - **Implement ads on ancillary AMP pages** to generate incremental revenue:
32 | - [Ads in your AMP Image Carousel](https://github.com/jasti/amp-ads-testing/blob/master/dfp-amp-testing/amp_tests/amp-carousel-demo.html)
33 | - [Ads in your AMP Lightbox](https://github.com/jasti/amp-ads-testing/blob/master/dfp-amp-testing/amp_tests/amp-lightbox-demo.html)
34 | - **Implement new formats for direct sold ads** to equip your sales team with high-impact, innovative ad products:
35 | - [Sticky Ads](https://ampbyexample.com/components/amp-sticky-ad/)
36 | - [Flying Carpet](https://ampbyexample.com/components/amp-fx-flying-carpet/)
37 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/roi_icon.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 113.95 91.88"><defs><style>.cls-1,.cls-2,.cls-4{fill:none;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8{stroke-miterlimit:10;}.cls-1,.cls-2{stroke-width:5.45px;opacity:0.8;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3,.cls-5,.cls-6,.cls-7,.cls-8{fill:#fff;}.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{stroke:url(#linear-gradient-7);}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{fill:#7ad5fc;fill-opacity:0.7;}</style><linearGradient id="linear-gradient" x1="-7593.72" y1="746.84" x2="-7538.03" y2="746.84" gradientTransform="translate(-7293.28 2130.75) 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="-7611.26" y1="765.38" x2="-7555.57" y2="765.38" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="32.4" y1="47.97" x2="78.95" y2="47.97" 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-4" x1="54.45" y1="63.25" x2="103.46" y2="14.23" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-5" x1="67.98" y1="36.72" x2="72.93" y2="31.77" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-6" x1="44.98" y1="58.72" x2="49.93" y2="53.77" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-7" x1="83.98" y1="46.72" x2="88.93" y2="41.77" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-8" x1="107.98" y1="23.72" x2="112.93" y2="18.77" xlink:href="#linear-gradient-3"/></defs><title>roi_icon</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="1.42" y1="89.56" x2="50.63" y2="59.49"/><line class="cls-2" x1="15.45" y1="68.24" x2="64.66" y2="38.18"/><polygon class="cls-3" points="32.9 42.93 32.9 81 78.45 53 78.45 14.93 32.9 42.93"/><polyline class="cls-4" points="47.45 56.24 70.45 34.24 86.45 44.24 110.45 21.24"/><circle class="cls-5" cx="70.45" cy="34.24" r="3"/><circle class="cls-6" cx="47.45" cy="56.24" r="3"/><circle class="cls-7" cx="86.45" cy="44.24" r="3"/><circle class="cls-8" cx="110.45" cy="21.24" r="3"/><circle class="cls-9" cx="89.77" cy="21.49" r="1.15"/><circle class="cls-9" cx="94.76" cy="11.15" r="1.15"/><circle class="cls-9" cx="100.1" cy="15.67" r="1.15"/><circle class="cls-9" cx="103.61" cy="9.82" r="1.15"/><circle class="cls-9" cx="103.1" cy="1.15" r="1.15"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/learn/who/advertisers.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: AMP for Advertisers
2 | class: about-who-vertical
3 | $order: 2
4 | $parent: /content/learn/who-uses-amp.yaml
5 | components:
6 | - carousel
7 |
8 | vertical_class: advertisers
9 |
10 | hero:
11 | title@: If it’s not instant, it’s not fast enough.
12 | paragraph@: "Conversions fall by 12% for every extra second a webpage takes to load.If you want people to engage with your brand and improve the performance of your campaigns, you have to speed things up. AMP offers a way for you to give users a faster experience everywhere -- on ads, landing pages or your entire website."
13 | hero_icon: advertisers/advertisers_icon_intro.svg
14 | hero_icon_width: 64
15 | hero_icon_height: 58
16 | hero_img_base: /static/img/about/who-use-amp/advertisers/advertiser_phone_wired
17 | hero_img_width: 1742
18 | hero_img_height: 1622
19 | triangle_img: advertisers/advertisers_bg.svg
20 | triangle_img_width: 622.5
21 | triangle_img_height: 973
22 | lines_img: advertisers/advertisers_lines.svg
23 | lines_img_width: 640
24 | lines_img_height: 619
25 |
26 | why:
27 | title@: Grow engagement and increase conversions with faster experiences
28 | reasons:
29 | - title@: Keep your audience engaged with AMP pages
30 | paragraph@: AMP pages typically load in under one second. That means when your target audience lands on an AMP page, they get what they’re looking for in the moment they’re looking for it. The net result -- they’re more likely to be engaged with and receptive to your brand’s messages, and more likely to take the actions you’re guiding them towards like completing a purchase.
31 | icon: advertisers/advertisers_icon_audience.svg
32 |
33 | - title@: Boost your campaign performance with AMP Ads
34 | paragraph@: Even the most memorable creative won’t serve it’s purpose if the ad is slow and disruptive for a user. AMP Ads are a new way of building ads, making them as fast as AMP pages to ensure your ads do what they’re meant to do and deliver the value you’re looking for.
35 | icon: advertisers/advertisers_icon_everywhere.svg
36 |
37 | - title@: Maximize ROI everywhere
38 | paragraph@: Building the right ad, landing page or web content takes time. With AMP Ads, your ads can serve on both AMP and non-AMP pages, meaning you can build your AMP Ads once and deliver a memorable brand experience everywhere. Similarly, AMP pages can be built once and distributed across a wide variety of distribution platforms simultaneously.
39 | icon: advertisers/advertisers_icon_ROI.svg
40 |
41 | large_cta:
42 | title@: Get started with AMP
43 | subtitle@: Learn more about AMP Ads and building AMP pages for your campaigns and website.
44 | cta@: Learn More
45 | cta_url: /content/learn/who/amp-ads.yaml
46 | lines_left: /static/img/about/who-use-amp/amp-ads/lines_bottom2.svg
47 | lines_left_width: 325
48 | lines_left_height: 303
49 | lines_right: /static/img/about/who-use-amp/amp-ads/lines_bottom1.svg
50 | lines_right_width: 325
51 | lines_right_height: 237
52 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Configuration d'Analytics
3 | ---
4 |
5 | ## Décidez avant de commencer
6 |
7 | Toutes les solutions d'analyse reposent sur la connaissance des données dont vous avez besoin
8 | et sur la façon dont vous comptez analyser ces données. Décidez avant de commencer :
9 |
10 | * Est-ce que pour analyser l'engagement des utilisateurs vous allez utiliser des outils d'analyse tiers
11 | ou votre propre solution interne ?
12 | * Quels comportements des utilisateurs allez-vous mesurer pour comprendre l'engagement des utilisateurs ?
13 |
14 | ### Transmettre les données au fournisseur ou vous les envoyer à vous-même ?
15 |
16 | Si vous avez votre propre solution interne pour mesurer l'engagement des utilisateurs,
17 | la seule chose dont vous aurez besoin pour intégrer les analyses AMP à cette solution est une URL.
18 | C'est là que vous enverrez les données.
19 | Vous pouvez également envoyer des données à différentes URL.
20 | Par exemple, vous pouvez envoyer les données sur les vues de page à une URL
21 | et les données d'engagement social à une autre.
22 |
23 | Les analyses AMP sont spécialement conçues pour mesurer une seule fois et transmettre ces mesures à autant de destinataires que nécessaire.
24 | Si vous travaillez déjà avec un ou plusieurs fournisseurs de solutions d'analyse,
25 | consultez la
26 | [spécification du composant amp-analytics](/docs/reference/extended/amp-analytics.html)
27 | pour savoir s'ils ont intégré leur solution avec AMP.
28 | Le cas échéant, il suffit de créer un lien vers leurs documents depuis la spécification
29 | et de commencer à suivre les instructions.
30 |
31 | Si le fournisseur de solutions d'analyse n'est pas intégré à AMP,
32 | contactez son service de support.
33 | Nous vous encourageons également à [créer un ticket d'incident dans le projet AMP](https://github.com/ampproject/amphtml/issues/new)
34 | pour demander à ce que le fournisseur soit ajouté.
35 | Voir également
36 | [Intégration de vos outils d'analyse dans AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
37 |
38 | ### De quelles données avez-vous besoin ?
39 |
40 | Quelles données sur vos utilisateurs allez-vous capturer pour mesurer l'engagement ?
41 | Vous devez en effet identifier ces données avant de pouvoir les configurer.
42 |
43 | Points clés à prendre en compte concernant les données :
44 |
45 | * Allez-vous suivre uniquement les vues de page ou d'autres tendances sur l'engagement des utilisateurs
46 | (voir également [amp-pixel ou amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics)) ?
47 | * Quels types de données allez-vous capturer sur vos utilisateurs, votre contenu,
48 | le périphérique ou le navigateur (voir également [Substitution de variables](/docs/guides/analytics/analytics_basics.html#variable-substitution)) ?
49 | * Comment allez-vous identifier vos utilisateurs (voir également [Identification des utilisateurs](/docs/guides/analytics/analytics_basics.html#user-identification)) ?
50 |
```
--------------------------------------------------------------------------------
/content/learn/case-studies/washingtonpost.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $order: 0
3 | $title: Washington Post
4 | $date: July 18, 2016
5 | $category: Publishers
6 | $parent: /content/learn/case-studies.html
7 | class: case-study post-detail
8 |
9 | components:
10 | - social-share
11 |
12 | headline: AMP helps the Washington Post increase returning users from mobile search by 23%
13 | thumb: "case-studies/wapo_thumb.png"
14 | results:
15 | - stat: 23%
16 | description: increase in mobile search users who return within 7 days
17 | - stat: 88%
18 | description: improvement in load time for AMP content versus traditional mobile web
19 | - stat: 1000+
20 | description: articles The Washington Post publishes in AMP HTML daily
21 | logo:
22 | src: "case-studies/wapo_logo.png"
23 | width: 130
24 | height: 20
25 | download: "case-studies/wapo.pdf"
26 | ---
27 |
28 | <div class="img-right wapo">
29 | <amp-img width="881" height="1318" layout="responsive"
30 | srcset="/static/img/case-studies/washingtonpost_phone.png 881w,
31 | /static/img/case-studies/washingtonpost_phone@1_5x.png 581w,
32 | /static/img/case-studies/[email protected] 441w"
33 | src="/static/img/case-studies/washingtonpost_phone.png">
34 | </amp-img>
35 | </div>
36 |
37 | With nearly 55% of their traffic coming from mobile devices, The Washington
38 | Post knows that providing a great reading experience on mobile devices is
39 | critical to their long-term success.
40 |
41 | In particular, The Post is focused on making their mobile content load as quickly
42 | as possible, because data shows that people abandon websites after just three
43 | seconds if the content doesn’t load quickly.
44 |
45 | In June 2015, The Washington Post joined a group of publishers and technology
46 | companies to create the <a href="https://www.ampproject.org/">Accelerated Mobile
47 | Pages Project</a>, a new open standard for publishing content which loads
48 | instantly, anywhere across the mobile web.
49 |
50 | > “We are committed to improving speed across the board,” said David Merrell,
51 | Senior Product Manager at The Washington Post. “If our site takes a long time
52 | to load, it doesn’t matter how great our journalism is, some people will leave
53 | the page before they see what’s there.”
54 |
55 | The Post publishes over 1,000 articles in AMP every day, and they’re already
56 | seeing concrete benefits. “We have seen load times average 400 milliseconds,
57 | an 88% improvement over our traditional mobile website. This has made
58 | readers more likely to tap on Washington Post stories because they know
59 | our articles will load consistently fast.”
60 |
61 | AMP has been great for retention as well. Traditionally 51% of mobile search
62 | users return to The Washington Post within 7 days. For users who read stories
63 | published in AMP, this number jumps to 63%.
64 |
65 | > “Getting started with AMP was easy because it is built on existing web
66 | technologies. And since AMP is not a template based system, we were able
67 | to host our content, style it as we see fit, and easily integrate our existing
68 | advertising, analytics and other business tools,” Merrell said.
69 |
```
--------------------------------------------------------------------------------
/assets/sass/_lang_switcher.scss:
--------------------------------------------------------------------------------
```scss
1 | .language {
2 | height: 33px;
3 | left: 100px;
4 | position: relative;
5 | top: -4px;
6 | user-select: none;
7 |
8 | section {
9 | border: 0;
10 | padding: 0;
11 |
12 | &[expanded] {
13 | .current,
14 | .others-inner {
15 | box-shadow: $header-shadow;
16 | }
17 |
18 | .current {
19 | left: 60px;
20 |
21 | &::after {
22 | transform: scale(.75);
23 | }
24 | }
25 | }
26 | }
27 |
28 | .current {
29 | font-size: 1em;
30 | margin-right: 100px;
31 | text-align: right;
32 | width: 140px;
33 |
34 | &::after {
35 | @include sprite(carat-down);
36 | content: '';
37 | display: inline-block;
38 | position: relative;
39 | top: -4px;
40 | transform: scale(.75);
41 | }
42 | }
43 |
44 | .others {
45 | padding: 0 50px 50px 50px;
46 | left: -50px;
47 | top: -1px;
48 | }
49 |
50 | .others-inner {
51 | background: $color-white;
52 | margin: 0;
53 |
54 | div {
55 | width: 200px;
56 |
57 | a {
58 | margin: 0 10px;
59 | text-transform: capitalize;
60 | }
61 |
62 | &:hover {
63 | background-color: $color-lightgrey;
64 | }
65 | }
66 | }
67 |
68 | .current,
69 | .others-inner div {
70 | background-color: transparent;
71 | border: 0;
72 | box-sizing: border-box;
73 | height: auto;
74 | padding: 10px 15px 8px;
75 |
76 | &:hover {
77 | a {
78 | text-decoration: none;
79 | }
80 | }
81 |
82 | a {
83 | color: $color-black-95;
84 | display: inline-block;
85 | overflow: hidden;
86 | padding: 0;
87 | text-overflow: ellipsis;
88 | white-space: nowrap;
89 | }
90 | }
91 | }
92 |
93 | .rtl .language {
94 | left: auto;
95 | right: 100px;
96 |
97 | .current {
98 | margin: 0 0 0 100px;
99 | right: -60px;
100 | }
101 |
102 | .others {
103 | left: auto;
104 | right: -50px;
105 | }
106 |
107 | section[expanded] .current {
108 | left: auto;
109 | right: 0;
110 | }
111 |
112 | .current,
113 | .others-inner div {
114 | a {
115 | background-position: right 6px;
116 | }
117 | }
118 | }
119 |
120 | header .language {
121 | align-self: center;
122 | margin-left: 12px;
123 |
124 | @media only screen and (max-height: 775px) {
125 | .others-inner div {
126 | padding: 7px 15px;
127 |
128 | a {
129 | display: block;
130 | }
131 | }
132 | }
133 | }
134 |
135 | amp-sidebar {
136 | .language {
137 | bottom: 15px;
138 | left: 10px;
139 | position: absolute;
140 | top: auto;
141 |
142 | section[expanded] {
143 | .current {
144 | left: 0;
145 | }
146 | }
147 |
148 | .current a,
149 | .others-inner div a {
150 | color: $color-ampblue;
151 | }
152 |
153 | .current {
154 | margin-right: 0;
155 | text-align: left;
156 |
157 | &::after {
158 | @include sprite(carat);
159 | top: -5px;
160 | transform: rotate(180deg) scale(.75);
161 | }
162 | }
163 |
164 | .others {
165 | box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);
166 | left: 0;
167 | padding: 0;
168 | transform: translateY(-117%);
169 | transform: translateY(calc(-100% - 50px));
170 |
171 | .others-inner {
172 | box-shadow: none;
173 | width: 240px;
174 |
175 | &::after {
176 | clear: both;
177 | content: '';
178 | display: table;
179 | }
180 |
181 | div {
182 | float: left;
183 | width: 120px;
184 | }
185 | }
186 | }
187 | }
188 | }
189 |
190 | .rtl amp-sidebar .language {
191 | section[expanded] .current {
192 | right: -50px;
193 | }
194 | }
195 |
```
--------------------------------------------------------------------------------
/content/includes/home.yaml:
--------------------------------------------------------------------------------
```yaml
1 | hero:
2 | title@: Building the future web, together.
3 | content@: The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.
4 | cta@: Learn about AMP
5 | cta_url: /content/learn/overview.yaml
6 | secondary_cta@: Start Building
7 | secondary_cta_url: /content/docs/get_started/general/create.md
8 | phone_img_base: /static/img/home/home_hero_phone
9 | carousel_title@: The Latest
10 |
11 | benefits:
12 | title@: What AMP Provides
13 | cards:
14 | - title@: Higher Performance and Engagement
15 | content@: Web pages and ads published in the AMP open-source format load near instantly, giving users a smooth, more engaging experience on mobile and desktop.
16 | img: /static/img/home/home_icon_performance.svg
17 | img_width: 56
18 | img_height: 103
19 |
20 | - title@: Flexibility and Results
21 | content@: Publishers and advertisers can decide how to present their content and what technology vendors to use, all while maintaining and improving key performance indicators.
22 | img: /static/img/home/home_icon_flexibility.svg
23 | img_width: 77
24 | img_height: 92
25 |
26 | experience:
27 | title@: A collaborative effort
28 | content@: AMP is built thanks to a deep collaboration with thousands of developers, publishers and websites, distribution platforms and tech companies. More than 1.5B AMP pages have been published to date and 100+ leading analytics, ad tech and CMS providers support the AMP format.
29 | bg_img: /static/img/home/bg_experience.png
30 | phone_img_base: /static/img/home/home_phone_ebay
31 | lines_img: /static/img/home/lines2.svg
32 |
33 | success_stories:
34 | title@: A path to success
35 | cards:
36 | - quote@: “If our site takes a long time to load, it doesn’t matter how great our journalism is, some people will leave the page before they see what’s there.”
37 | img: /static/img/home/wapo_logo.png
38 | img_height: 197
39 | img_width: 1280
40 | url@: /content/learn/case-studies/washingtonpost.md
41 | class: wapo
42 | - quote@: “We see our work on AMP as furthering the business need of providing a fast, clean user experience to our audience.”
43 | img_height: 263
44 | img_width: 1298
45 | img: /static/img/home/wired_logo.png
46 | url@: /content/learn/case-studies/wired.md
47 | class: wired
48 | - quote@: “Across Teads’ publisher portfolio, video ads perform significantly better on AMP pages than on the traditional mobile web.”
49 | img_height: 28
50 | img_width: 75
51 | img: /static/img/home/teads_logo.svg
52 | url@: /content/learn/case-studies/teads.md
53 | class: teads
54 |
55 | large_cta:
56 | title@: Learn how to build AMP pages and AMP Ads
57 | cta@: Start Building
58 | cta_url: /content/docs/get_started/general/create.md
59 | lines_left: /static/img/home/lines3.svg
60 | lines_left_width: 360
61 | lines_left_height: 377
62 | lines_right: /static/img/home/lines3.svg
63 | lines_right_width: 360
64 | lines_right_height: 377
65 |
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_break.svg:
--------------------------------------------------------------------------------
```
1 | <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:#0dd7ff;opacity:0.7;}.cls-2,.cls-3,.cls-5,.cls-6,.cls-8{fill:none;}.cls-10,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-2{stroke:url(#linear-gradient);}.cls-3{stroke:url(#linear-gradient-2);}.cls-10,.cls-4,.cls-7,.cls-9{fill:#fff;}.cls-4{fill-opacity:0.9;stroke:url(#linear-gradient-3);}.cls-5{stroke:url(#linear-gradient-4);}.cls-6{stroke:url(#linear-gradient-5);}.cls-7{opacity:0.9;}.cls-8{stroke:url(#linear-gradient-6);}.cls-9{stroke:url(#linear-gradient-7);}.cls-10{stroke:url(#linear-gradient-8);}</style><linearGradient id="linear-gradient" x1="52.89" y1="73.99" x2="89.17" y2="79.64" 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="76.56" y1="51.72" x2="87.22" y2="53.37" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="71.4" y1="84.05" x2="89.38" y2="84.05" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="71.44" y1="84.44" x2="88.76" y2="84.44" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="71.53" y1="83.86" x2="88.68" y2="83.86" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="82.29" y1="80.29" x2="102.61" y2="80.29" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="82.39" y1="80.44" x2="102.18" y2="80.44" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="82.72" y1="80.44" x2="101.86" y2="80.44" xlink:href="#linear-gradient"/></defs><title>design_icon_break</title><ellipse class="cls-1" cx="43.02" cy="89.06" rx="1.43" ry="1.44" transform="translate(-50.46 121.36) rotate(-83.27)"/><ellipse class="cls-1" cx="50.69" cy="77.09" rx="1.43" ry="1.44" transform="translate(-31.81 118.4) rotate(-83.27)"/><ellipse class="cls-1" cx="61.82" cy="76.74" rx="1.43" ry="1.44" transform="translate(-21.64 129.14) rotate(-83.27)"/><ellipse class="cls-1" cx="62.44" cy="66.02" rx="1.43" ry="1.44" transform="translate(-10.44 120.29) rotate(-83.27)"/><polygon class="cls-2" points="56 57.54 57.18 106.72 87.22 88.67 87.04 52.52 78.03 45.5 56 57.54"/><polyline class="cls-3" points="78.03 45.5 78.03 57.54 87.04 52.52"/><polygon class="cls-4" points="71.9 74.32 71.9 103.81 88.88 93.78 88.88 64.29 71.9 74.32"/><line class="cls-5" x1="71.9" y1="103.81" x2="88.3" y2="65.08"/><line class="cls-6" x1="71.9" y1="74.47" x2="88.3" y2="93.24"/><polygon class="cls-7" points="82.78 79.03 82.78 92.5 102.11 81.56 102.11 68.09 82.78 79.03"/><polygon class="cls-8" points="82.78 79.03 82.78 92.5 102.11 81.56 102.11 68.09 82.78 79.03"/><line class="cls-9" x1="82.79" y1="92.5" x2="101.79" y2="68.38"/><line class="cls-10" x1="82.79" y1="79.17" x2="101.79" y2="81.71"/></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/teads_logo.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.33 28.19"><defs><style>.cls-1{fill:#61b4e4;}.cls-2{fill:#231f20;}.cls-3{fill:#fff;}</style></defs><title>teads_logo</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><path class="cls-1" d="M69.41,3.9A5.92,5.92,0,0,0,65,13.81l-1.07,1.85,2.75-.56A5.93,5.93,0,1,0,69.41,3.9Z"/><path class="cls-2" d="M28.82.55c-.22-.15-.58.09-.59.09a11.21,11.21,0,0,1-3.35,1.1c-2.16.37-4.61.63-4.61.63q-1.74.14-3.36.33a2.53,2.53,0,0,0-.13-2C16.41.25,16,0,15.72,0s-.53.12-.74.67a10.43,10.43,0,0,1-1.43,2.49C5.14,4.53,0,6.94,0,9.14c-.06,2.73,4.5,4.56,4.5,4.56.19.06.25,0,.28,0s-.11-.27-.11-.27C2.11,11.42,2.28,10,2.28,10,2.41,8.31,6.44,7.26,11,6.63c-.82,1.22-1.8,2.79-2.73,4.53C5.8,15.76,4.62,19.74,4.75,23c0,.16.12,4,1.67,5a1.13,1.13,0,0,0,.56.19H7A.51.51,0,0,0,7.37,28a1.31,1.31,0,0,0,.21-1c0-.14,0-.29,0-.46-.15-1.77-.44-5.05,2.16-10.11,1.47-2.87,3-5.61,4.3-7.81.54-.95,1-1.8,1.43-2.53,3.53-.3,6.72-.39,8-.37C26.82,5.83,29,2.14,29,1A.57.57,0,0,0,28.82.55Z"/><path class="cls-2" d="M63.8,22.55a3.42,3.42,0,0,0-.51-1.71,9.86,9.86,0,0,0-2.41-2.46c-1.95-1.44-2.13-2.9-1.86-3.59s1-1.68.06-2.22-2.72,1.26-2.78,3a7.3,7.3,0,0,1-.77,2.78c-.7,1.31-3.51,6.28-5.28,5.73,0,0-.86-.39-.3-2.13s5.69-13.35,1.53-15.3c0,0-2.52-1-3.11.45,0,0,2-.24.63,5.72,0,0-6.86-.66-10,6.74,0,0-2.39,4.52-4.34,4.58,0,0-.78-.15-.36-2.42a32.84,32.84,0,0,1,2.57-7.54s-5.12-4.49-11.49,2.39a9.72,9.72,0,0,0-2.28,4.73s-2.84,3.32-5.93,2.66c0,0-2.69-.27-1.32-5.15,0,0,7.78.51,7.63-3.8,0,0-.12-2.81-4.19-2.19,0,0-4.5.43-7.09,6-.18.43-1.29,3.16-.81,4.76a4.2,4.2,0,0,0,4.39,3.2,9.65,9.65,0,0,0,7.1-3.63s0,3.51,2.87,3.67c0,0,2.37.08,4.35-3.8h0s.08-.16.15-.15a.1.1,0,0,1,.07.11h0c-.08.67-.34,4,2.57,3.88,0,0,2.56.4,5.43-4.47,0,0-.12,4.59,2.79,4.43,0,0,2.65.08,4.56-3.93h0s.06-.12.14-.08h0a.16.16,0,0,1,0,.16c-.13.65-.59,3.79,2.42,3.85h0a3.86,3.86,0,0,0,1.2-.12h0c1.25-.36,3.92-1.92,6.88-8.44,0,0,.18-.45.25-.45s.06,0,.09.12h0A15.07,15.07,0,0,0,58.61,21l.24.27h0c1,1.2,1.43,2.1.06,2.67-.25.08-2.77.88-3-.38,0,0-1.36.45-1.64,1.35a1.29,1.29,0,0,0,.53,1.54l.11.07h0a2.69,2.69,0,0,0,.69.21,9.21,9.21,0,0,0,4.58-.45l.57-.19.06,0h0a4.43,4.43,0,0,0,2.65-2.12h0a3.41,3.41,0,0,0,.3-1.3h0s0,0,0-.05v0Zm-44.62-8.4c1.77-.75,1.53.48,1.53.48-.18,2.6-4.28,3-4.28,3S17.41,14.9,19.18,14.15Zm11.29,6c-1.32,3.86-2.72,3.23-2.72,3.23-2-.9.15-5.21.15-5.21,2.69-5.06,5.33-4.22,5.33-4.22C32.59,14.78,31.78,16.28,30.47,20.14ZM43.4,23.4c-2.37-.32-.27-4.85-.27-4.85,2.6-5.27,5.51-4.64,5.51-4.64C45.94,23,43.4,23.4,43.4,23.4Z"/><path class="cls-3" d="M66.29,11.59a.47.47,0,0,1-.17.38.61.61,0,0,1-.41.15.49.49,0,0,1-.35-.14.46.46,0,0,1-.14-.35.51.51,0,0,1,.16-.39.56.56,0,0,1,.4-.15.5.5,0,0,1,.36.15A.47.47,0,0,1,66.29,11.59Z"/><path class="cls-3" d="M69.75,8.38l-.18.77H68.51L68.1,11a.41.41,0,0,0,0,.08q0,.23.3.23a1.62,1.62,0,0,0,.63-.15l.18.69a2.4,2.4,0,0,1-1,.21q-1,0-1-.8a1.82,1.82,0,0,1,0-.38l.38-1.77-.4,0,.15-.72.42,0,.21-1h.9l-.21,1Z"/><path class="cls-3" d="M73.69,8.38l-2.26,3.71a.81.81,0,0,1-.91-.69l-.56-3h.9L71.25,11h0l.11-.23,1.36-2.4Z"/></g></g></svg>
```