This is page 9 of 20. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.url(parentDoc.pod_path,%20locale=usedDoc.locale).path%7D%7D?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
--------------------------------------------------------------------------------
/content/includes/roadmap.yaml:
--------------------------------------------------------------------------------
```yaml
type: Roadmap
year: 2017
quarter: Q1
outlook:
current: Mid-Q1 2017
updated: February 17, 2017
excerpt: Excerpt of the roadmap here.
stages:
"6": Launched / Stable
"5": Code Complete / Experimental
"4": Pull Request (Changelist) Created
"3": Coding Started
"2": Intent to Implement (Feature Description) Posted
"1": In Planning and Design
"0": Not Started
sections:
0_format:
title: Format
description: Enrich AMP's core, including its web components library, to grow support for content features
themes:
- Make it easier to build well-styled AMP pages
- Provide initial support for data entry use cases (forms and searchboxes)
- Broaden support to include a variety of content formats, including news articles, recipes, local listings, product listings, and more
- Further alignment with Progressive Web Apps (PWAs)
- Support for more engaging video experiences
quarter:
"0":
- "[Autocomplete for form input](https://github.com/ampproject/amphtml/issues/6625)"
- "[“Smart” buttons](https://github.com/ampproject/amphtml/issues/3459)"
"1":
- "[Tabbed selection interface](https://github.com/ampproject/amphtml/issues/7512)"
- "[Create a suite of effects, such as scroll-bound animations, that can be applied to AMP page content and structure](https://github.com/ampproject/amphtml/issues/5483)"
- "[Support for parallax scrolling](https://github.com/ampproject/amphtml/issues/1443)"
- "[Batch fetching and caching of dynamic data](https://github.com/ampproject/amphtml/issues/7463)"
- "[“Hero” mode for video players](https://github.com/ampproject/amphtml/issues/7510)"
"4":
- "[**amp-lightbox** improvements](https://github.com/ampproject/amphtml/issues/4152)"
- "[AMP Start out-of-the-box templates and styling](https://github.com/ampproject/amphtml/issues/2851)"
"5":
- "[Provide greater interactivity support by introducing a mechanism to bind element behavior to user actions](https://www.ampproject.org/docs/reference/components/amp-bind)"
"6":
- "[Native app install banner [**amp-app-banner**]](https://www.ampproject.org/docs/reference/components/amp-app-banner)"
- "[Interactive image gallery (large image + thumbnails)](https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md#advancing-amp-carouseltypeslides-to-a-specific-slide)"
- "[Support for enhanced form inputs (images, etc) [**amp-selector**]](https://www.ampproject.org/pl/docs/reference/components/amp-selector)"
forecast:
- Geo-variation support
- Offline support and improved intermittent connectivity handling
1_analytics:
title: Analytics
description: Enable analytics on AMP pages and provide interoperability with data analysis solutions
themes:
- Deepen support for basic analytics such as new event triggers, variables, and flexibility in constructing hit requests
- Provide support for e-commerce analytics
- Provide support for video analytics
quarter:
"1":
- Expansion of **amp-analytics** capabilities for e-commerce use cases
- Expose events from video players to **amp-analytics**
"4":
- "[Share-tracking support in **amp-analytics**](https://github.com/ampproject/amphtml/issues/3135)"
- "[Filter support for variables in amp-analytics](https://github.com/ampproject/amphtml/issues/2198)"
"5":
- "[Outgoing link URL replacements, including Client ID](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#overview)"
- "[Form URL replacements, including Client ID](https://www.ampproject.org/docs/reference/components/amp-form#variable-substitutions)"
- "[Visibility v2 using Intersection Observer](https://github.com/ampproject/amphtml/issues/5697)"
forecast:
- Expose batched interaction data (e.g. scroll events) to **amp-analytics**
- Offline support (i.e. enable queuing until back online)
2_ads:
title: Ads
description: Enable ads on AMP pages, provide interoperability with ad technology providers, and drive ad ecosystem innovation with the AMP format
themes:
- Improve the overall ad loading and user experience on AMP
- Enable and grow A4A creative format demand across publishers and advertisers
- Extend A4A usage beyond AMP pages
- Enhance AMP-format landing pages for the ads use case
quarter:
"1":
- "[Optimize rendering of 3P ads in AMP](https://github.com/ampproject/amphtml/issues/7500)"
"4":
- "[Support serving A4A creatives in non-AMP Pages](https://github.com/ampproject/amphtml/issues/3829)"
"5":
- "[Allow for serving ads that are in AMP format (A4A - AMP for Ads)](https://github.com/ampproject/amphtml/issues/3133)"
"6":
- "[Improvement to ad loading experience](https://github.com/ampproject/amphtml/issues/5918)"
- "[Show default fallback when no ad is available to serve](https://github.com/ampproject/amphtml/issues/3817)"
forecast:
- Enable A4A creative demand across the buyer and publisher ecosystem
- Enable deeper integration of ads with AMP-format landing pages across buyside and sellside systems
3_access:
title: Access
description: Enable login-based access to AMP pages
themes:
- Continue to improve paywall and subscription support in AMP
- Make sign-in and payment for content a seamless and joyful experience in AMP
quarter:
"4":
- "[Support for delegated sign-in (allow surface hosting AMP to sign-in user to publisher by using available identity information)](https://github.com/ampproject/amphtml/issues/4227)"
forecast:
- Enable better mobile payments with AMP
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/adtech_icon_revenue.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 87.92 125.14"><defs><style>.cls-1,.cls-10,.cls-12,.cls-13,.cls-14,.cls-16,.cls-17,.cls-6,.cls-8,.cls-9{fill:#fff;}.cls-1{fill-opacity:0.7;stroke:url(#linear-gradient);}.cls-1,.cls-11,.cls-15,.cls-2,.cls-3,.cls-4,.cls-7{stroke-miterlimit:10;}.cls-1,.cls-10,.cls-12,.cls-13,.cls-14,.cls-16,.cls-17,.cls-2,.cls-3,.cls-4,.cls-6,.cls-8,.cls-9{stroke-width:1.08px;}.cls-2,.cls-3,.cls-4{fill:none;}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-10,.cls-12,.cls-13,.cls-14,.cls-16,.cls-17,.cls-4,.cls-6,.cls-8,.cls-9{stroke-linecap:round;}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{fill:#0dd7ff;opacity:0.7;}.cls-10,.cls-14,.cls-6{fill-opacity:0.9;}.cls-10,.cls-12,.cls-13,.cls-14,.cls-16,.cls-17,.cls-6,.cls-8,.cls-9{stroke-linejoin:round;}.cls-6{stroke:url(#linear-gradient-5);}.cls-11,.cls-15,.cls-7{stroke:#fff;stroke-width:0.62px;}.cls-7{fill:url(#linear-gradient-6);}.cls-8{stroke:url(#linear-gradient-7);}.cls-9{stroke:url(#linear-gradient-8);}.cls-10{stroke:url(#linear-gradient-9);}.cls-11{fill:url(#linear-gradient-10);}.cls-12{stroke:url(#linear-gradient-11);}.cls-13{stroke:url(#linear-gradient-12);}.cls-14{stroke:url(#linear-gradient-13);}.cls-15{fill:url(#linear-gradient-14);}.cls-16{stroke:url(#linear-gradient-15);}.cls-17{stroke:url(#linear-gradient-16);}</style><linearGradient id="linear-gradient" x1="-8.18" y1="172.41" x2="30.72" y2="172.41" gradientTransform="translate(-92.27 -37.87) rotate(-45)" 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="50.69" y1="113.39" x2="21.45" y2="35.4" 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-3" x1="-11.69" y1="171.46" x2="30.75" y2="171.46" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="9.01" y1="204.47" x2="16.5" y2="204.47" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="27.15" y1="49.57" x2="71.35" y2="49.57" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="541.04" y1="1369.93" x2="549.66" y2="1369.93" gradientTransform="translate(1419.72 -495.25) rotate(90)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="61.11" y1="31.78" x2="67.58" y2="31.78" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="11403.34" y1="-2703.89" x2="11409.81" y2="-2703.89" gradientTransform="translate(11439.66 -2635.46) rotate(180)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-9" x1="33.59" y1="55.34" x2="77.78" y2="55.34" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-10" x1="548.67" y1="1373.99" x2="557.29" y2="1373.99" gradientTransform="translate(1430.22 -497.1) rotate(90)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-11" x1="67.54" y1="37.55" x2="74.01" y2="37.55" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-12" x1="11396.9" y1="-2709.66" x2="11403.37" y2="-2709.66" gradientTransform="translate(11439.66 -2635.46) rotate(180)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-13" x1="40.06" y1="58.57" x2="84.25" y2="58.57" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-14" x1="555.72" y1="1375.59" x2="564.35" y2="1375.59" gradientTransform="translate(1438.28 -500.92) rotate(90)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-15" x1="74.01" y1="40.79" x2="80.48" y2="40.79" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-16" x1="11390.44" y1="-2712.89" x2="11396.9" y2="-2712.89" gradientTransform="translate(11439.66 -2635.46) rotate(180)" xlink:href="#linear-gradient"/></defs><title>adtech_icon_revenue</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="4.15 69.08 17.12 28.83 71.01 82.72 58.11 123.3 4.15 69.08"/><polygon class="cls-2" points="9.82 68.39 19.63 37.19 62.25 80.22 52.16 111.73 9.82 68.39"/><polyline class="cls-3" points="17.1 28.35 13.2 29.65 0.61 70.47 54.4 124.56 58.26 123.81"/><line class="cls-4" x1="60.25" y1="101.14" x2="62.42" y2="94.25"/><circle class="cls-5" cx="72" cy="1.25" r="1.24" transform="translate(43.05 67.18) rotate(-67.28)"/><circle class="cls-5" cx="80.2" cy="10.51" r="1.24" transform="translate(39.54 80.43) rotate(-67.28)"/><circle class="cls-5" cx="73.49" cy="13.93" r="1.24" transform="translate(32.26 76.34) rotate(-67.28)"/><circle class="cls-5" cx="77.84" cy="19.86" r="1.24" transform="translate(29.47 83.99) rotate(-67.28)"/><circle class="cls-5" cx="86.67" cy="22.95" r="1.24" transform="translate(32.03 94.04) rotate(-67.28)"/><polygon class="cls-6" points="27.69 46.76 27.69 76.75 70.81 52.38 70.81 22.39 27.69 46.76"/><ellipse class="cls-7" cx="49.79" cy="50.11" rx="5.39" ry="4.31" transform="translate(-10.77 86.47) rotate(-76.16)"/><polyline class="cls-8" points="61.65 32.86 67.04 29.63 67.04 33.94"/><polyline class="cls-9" points="35.78 67.35 30.39 70.58 30.39 66.27"/><polygon class="cls-10" points="34.13 52.53 34.13 82.52 77.25 58.15 77.25 28.16 34.13 52.53"/><ellipse class="cls-11" cx="56.23" cy="55.88" rx="5.39" ry="4.31" transform="translate(-11.48 97.11) rotate(-76.16)"/><polyline class="cls-12" points="68.08 38.63 73.47 35.4 73.47 39.71"/><polyline class="cls-13" points="42.21 73.12 36.82 76.36 36.82 72.05"/><polygon class="cls-14" points="40.6 55.76 40.6 85.75 83.71 61.38 83.71 31.39 40.6 55.76"/><ellipse class="cls-15" cx="62.69" cy="59.11" rx="5.39" ry="4.31" transform="translate(-9.7 105.85) rotate(-76.16)"/><polyline class="cls-16" points="74.55 41.87 79.94 38.63 79.94 42.94"/><polyline class="cls-17" points="48.68 76.36 43.29 79.59 43.29 75.28"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Descripción general de Accelerated Mobile Pages
cta:
title@: Next FAQ
link_text@: Participación de plataformas y empresas tecnológicas
link_url: /content/support/faqs/platform-involvement.md
faq:
- title@: ¿Qué es el proyecto Accelerated Mobile Pages?
answer@: |
El proyecto Accelerated Mobile Pages (AMP) es una iniciativa de software libre que surge de los debates entre editores y empresas tecnológicas sobre la necesidad de mejorar el ecosistema de contenido móvil en su conjunto para todos: editores, plataformas de consumidores, creadores y usuarios.
Hoy en día, se espera que el contenido de las páginas web se cargue muy rápido y que la navegación sea sencilla. En realidad, sin embargo, el contenido puede tardar varios segundos en cargarse o puede no llegar a cargarse completamente porque los usuarios abandonan las páginas lentas. Las páginas Accelerated Mobile Pages son páginas web diseñadas para cargarse casi instantáneamente, en un paso más hacia una Web móvil mejor para todo el mundo.
- title@: ¿Cuáles son las ventajas de Accelerated Mobile Pages?
answer@: |
Nos importa la velocidad; la inmediatez es el objetivo. Las investigaciones han demostrado que los porcentajes de rebote son más altos en páginas web que se cargan más lentamente. El uso del formato AMP fomentará que los usuarios consuman más contenido e interaccionen con él. Pero no solo se trata de velocidad y rendimiento. También queremos promover una mayor distribución con la finalidad de que los editores puedan aprovechar el potencial de la Web abierta para que su contenido se muestre rápidamente en todas partes, tanto en plataformas como en aplicaciones, y esto genere más ingresos a partir de anuncios y suscripciones.
- title@: ¿Cómo funciona Accelerated Mobile Pages?
answer@: |
Las páginas Accelerated Mobile Pages funcionan como cualquier otra página HTML, pero solo admiten un conjunto limitado de funcionalidades técnicas que se define en las especificaciones de AMP de software libre y que se rige por estas mismas especificaciones. Igual que todas las páginas web, Accelerated Mobile Pages se cargará en todos los navegadores modernos y en todas las vistas web de aplicaciones.
Los archivos de AMP se benefician de diferentes enfoques técnicos y arquitectónicos que priorizan la velocidad para proporcionar una experiencia más rápida para los usuarios. Los desarrolladores de AMP pueden utilizar una biblioteca rica y cada vez más completa de componentes web que ofrecen la posibilidad de insertar objetos rich media, como vídeo y publicaciones en redes sociales, mostrar publicidad o recopilar análisis. El objetivo no es homogeneizar la forma en que se ve y se percibe el contenido, sino crear un núcleo técnico más común entre las páginas que acelere el tiempo de carga.
Además, los archivos de AMP pueden almacenarse en caché en la nube, de modo que se reduce el tiempo necesario para que el contenido llegue a los dispositivos móviles de los usuarios. Al utilizar el formato AMP, los creadores de contenidos ponen los archivos de AMP a disposición de terceros para que los almacenen en caché. En estas circunstancias, los editores siguen controlando su contenido, pero las plataformas pueden almacenar el contenido fácilmente en caché o reproducirlo para que la velocidad de publicación sea óptima para los usuarios. Google ofrece una caché que puede utilizar todo el mundo sin coste alguno, se trata de [Google AMP Cache](https://developers.google.com/amp/cache/) donde almacenamos todas las páginas AMP. Otras empresas también pueden crear su propia caché de AMP.
En resumen, el objetivo de este proyecto es combinar una funcionalidad técnica limitada con un sistema de distribución creado en torno al almacenamiento en la memoria caché para ofrecer páginas con un mejor rendimiento y más audiencia para los editores.
- title@: ¿Por qué se utiliza software libre en el proyecto Accelerated Mobile Pages?
answer@: |
Las empresas que participan en el proyecto quieren que la Web móvil funcione mejor para todo el mundo, no solo para una plataforma, un conjunto de tecnologías o un conjunto de editores. Al crear el proyecto con software libre, los usuarios pueden compartir y aportar ideas y código para conseguir una Web móvil más rápida. Acabamos de iniciar este recorrido, en el que esperamos que se unan otros editores y empresas tecnológicas.
- title@: ¿Quién puede usar Accelerated Mobile Pages?
answer@: |
El proyecto está abierto a todas las partes del ecosistema: editores, plataformas de consumidores y creadores. Para hacerte una idea de quiénes son algunas de las empresas y de los sitios web que utilizan AMP, ve a la [página Quién](/who).
- title@: ¿Cuáles son las consecuencias de utilizar Accelerated Mobile Pages?
answer@: |
Al utilizar el formato AMP, los creadores de contenidos ponen los archivos de AMP a disposición de terceros para que los rastreen, los indexen y los muestren (de conformidad con el protocolo de exclusión de robots) y los almacenen en caché.
- title@: ¿Qué tipo de contenido funciona mejor con Accelerated Mobile Pages?
answer@: |
El objetivo es que todo el contenido publicado, desde noticias hasta vídeos y desde blogs hasta fotos y GIFs, funcionen con Accelerated Mobile Pages.
- title@: Como editor, ¿me llevará más trabajo hacer que mi contenido funcione con Accelerated Mobile Pages?
answer@: |
De entrada, no mucho. Como "AMP HTML" está formado en su totalidad por tecnologías web existentes, el proceso de desarrollo reproduce el que los editores están utilizando en la actualidad. Los editores pueden familiarizarse con AMP HTML en GitHub. Creemos que los que ya utilicen el proceso actual no encontrarán difícil este aprendizaje.
- title@: ¿Cómo puede un editor generar contenido en AMP HTML?
answer@: |
Los editores y los proveedores de sistemas de gestión de contenido (CMS) pueden desarrollar una integración para generar contenido de AMP con su CMS. Automattic ya ha publicado un [complemento de AMP para WordPress](https://wordpress.org/plugins/amp/), y esperamos que todos los sistemas de gestión de contenido ofrezcan compatibilidad con las páginas AMP HTML.
---
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Accelerated Mobile Pages – Überblick
cta:
title@: Next FAQ
link_text@: Beteiligung von Plattformen und Technologieunternehmen
link_url: /content/support/faqs/platform-involvement.md
faq:
- title@: Was ist das Projekt "Accelerated Mobile Pages"?
answer@: |
Das Projekt "Accelerated Mobile Pages (AMP)" ist eine Open-Source-Initiative, die aus Diskussionen zwischen Webpublishern, Verlagen und Technologieunternehmen entstand. Ausgangspunkt war die Frage, wie das komplette Ökosystem für mobile Inhalte für alle – Webpublisher und Verlage, Verbraucherplattformen, Ersteller und Nutzer – optimiert werden kann.
Die Erwartung heutzutage ist, dass Inhalte rasant zu laden und leicht zu navigieren sind. Die Realität sieht anders aus: Der Ladevorgang kann schon einmal mehrere Sekunden dauern oder er wird erst gar nicht beendet, weil der Nutzer die langsame Seite verlässt. Accelerated Mobile Pages sind Webseiten, die vom Design her praktisch augenblicklich geladen sind. Damit sind sie ein wichtiger Schritt in Richtung eines besseren mobilen Webs für alle.
- title@: Welche Vorteile bieten Accelerated Mobile Pages?
answer@: |
Geschwindigkeit ist wichtig und "sofortiges" Laden ist ideal. Studien haben gezeigt, dass langsame Seiten zu mehr Abbrüchen des Ladevorgangs führen. Mit dem AMP-Format wird das Lesen verschiedener Inhalte und die Interaktion mit ihnen deutlich angenehmer. Aber es geht uns nicht nur um Geschwindigkeit und Leistung. Wir wollen auch eine optimierte Verteilung fördern, damit Webpublisher und Verlage das Potenzial des offenen Webs nutzen und ihre Inhalte überall (plattform- und appübergreifend) zeigen können. So haben sie die Möglichkeit, mit Anzeigen und Abos mehr Umsatz zu erzielen.
- title@: Wie funktionieren Accelerated Mobile Pages?
answer@: |
Accelerated Mobile Pages gleichen HTML-Seiten, unterliegen jedoch Einschränkungen hinsichtlich der technischen Funktionen. Diese sind in der Open-Source-Spezifikation für AMP definiert. Genau wie alle anderen Webseiten können Accelerated Mobile Pages in sämtlichen Webbrowsern oder App-WebViews geladen werden.
AMP-Dateien machen sich verschiedene technische und Architekturansätze zunutze, bei denen Geschwindigkeit im Vordergrund steht und die so eine schnellere Nutzererfahrung bewirken. AMP-Entwicklern steht eine umfangreiche und ständig wachsende Bibliothek mit Webkomponenten zur Verfügung, die die Einbettung von Rich-Media-Objekten wie Videos und Beiträgen in sozialen Medien und Werbung und die Erfassung von Analysedaten ermöglichen. Ziel ist es hierbei nicht, das Erscheinungsbild von Inhalten zu vereinheitlichen, sondern ein Seiten übergreifendes technisches Kernstück aufzubauen und so die Ladezeiten zu verkürzen.
Außerdem können AMP-Dateien im Cache in der Cloud gespeichert werden, um die Zeit zu verkürzen, bis die Inhalte auf Mobilgeräten von Nutzern bereitgestellt sind. Durch Nutzung des AMP-Formats geben Content-Ersteller die Inhalte Ihrer AMP-Dateien zum Speichern im Cache durch Drittanbieter frei. So behalten Webpublisher und Verlage die Kontrolle über ihre Inhalte, Plattformen können jedoch diese Inhalte problemlos im Cache speichern oder spiegeln, um ihren Nutzern optimale Ladezeiten zu bieten. Google stellt hierfür einen Cache bereit, der für alle kostenlos ist. Alle AMP-Dateien werden im [AMP-Cache von Google](https://developers.google.com/amp/cache/) gespeichert. Andere Unternehmen haben die Möglichkeit, eigene AMP-Caches zu erstellen.
Zusammenfassend gesprochen, möchten wir erreichen, dass die Kombination aus eingeschränkten technischen Funktionen und einem Verteilsystem, das auf Caching beruht, zu leistungsstärkeren Seiten und einer optimierten Entwicklung von Zielgruppen für Webpublisher und Verlage führt.
- title@: Warum wird für das Projekt "Accelerated Mobile Pages" ein Open-Source-Ansatz genutzt?
answer@: |
Die Unternehmen, die sich an dem Projekt beteiligen, möchten das mobile Web für alle optimieren – nicht nur für eine Plattform, eine Art von Technologie oder für bestimmte Webpublisher und Verlage. Bei einem Open-Source-Projekt haben alle die Möglichkeit, ihre Ideen und ihren Code zum Beschleunigen des Webs miteinander zu teilen. Wir sind noch am Anfang und freuen uns auf die Webpublisher, Verlage und Technologieunternehmen, die sich uns vielleicht noch anschließen werden.
- title@: Wer kann Accelerated Mobile Pages nutzen?
answer@: |
An dem Projekt können sich alle Nutzer des Ökosystems beteiligen – Webpublisher, Verlage, Verbraucherplattformen und Ersteller. Informationen zu einigen der Unternehmen und Websites, die AMP bereits nutzen, [finden Sie hier](/who).
- title@: Welche Auswirkungen hat die Nutzung von Accelerated Mobile Pages?
answer@: |
Durch Nutzung des AMP-Formats geben Content-Ersteller die Inhalte Ihrer AMP-Dateien zum Crawlen, Indexieren und Darstellen (gemäß Robots-Exclusion-Protokoll) sowie zum Speichern im Cache durch Drittanbieter frei.
- title@: Welche Inhalte sind am besten für Accelerated Mobile Pages geeignet?
answer@: |
Ziel ist es letztlich, dass alle veröffentlichten Inhalte – von Nachrichten über Videos, Blogs und Fotos bis hin zu GIFs – mit Accelerated Mobile Pages funktionieren.
- title@: Macht es viel Arbeit, wenn ich meine Inhalte als Webpublisher oder Verlag für Accelerated Mobile Pages anpassen möchte?
answer@: |
Die kurze Antwort: Nein. Ausführlicher: Da "AMP-HTML" komplett auf vorhandenen Webtechnologien aufbaut, entspricht der Entwicklungsprozess der Vorgehensweise, die Webpublisher und Verlage bereits heute praktizieren. Webpublisher und Verlage können sich auf GitHub mit der AMP-HTML-Spezifikation vertraut machen. Wenn Sie bereits mit dem aktuellen Verfahren vertraut sind, müssen Sie nicht viel dazulernen.
- title@: Wie können Webpublisher und Verlage ihre Inhalte in AMP-HTML übertragen?
answer@: |
Webpublisher, Verlage und Anbieter von Content-Management-Systemen (CMS) können eine Integration mit ihrem CMS entwickeln, um AMP-Inhalte zu generieren. Das Unternehmen Automattic hat bereits ein [WordPress-AMP-Plug-in](https://wordpress.org/plugins/amp/) veröffentlicht und wir hoffen, dass alle CMS-Anbieter AMP-HTML-Seiten unterstützen werden.
---
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Panoramica delle pagine AMP (Accelerated Mobile Pages)
cta:
title@: Next FAQ
link_text@: Coinvolgimento di piattaforme e aziende tecnologiche
link_url: /content/support/faqs/platform-involvement.md
faq:
- title@: Che cos'è il progetto Accelerated Mobile Pages?
answer@: |
Il progetto Accelerated Mobile Pages ("AMP") è un'iniziativa open source nata dal confronto tra publisher e aziende tecnologiche in merito alla necessità di migliorare l'intero ecosistema dei contenuti per dispositivi mobili per tutti: publisher, piattaforme di consumo, autori di contenuti e utenti.
Al giorno d'oggi ci si aspetta che i contenuti vengano caricati velocemente e siano di facile consultazione. Nella realtà però potrebbero essere necessari diversi secondi per il caricamento oppure i contenuti potrebbero non essere mai caricati completamente perché gli utenti abbandonano le pagine lente. Le pagine Accelerated Mobile Pages sono pagine web ideate per essere caricate quasi all'istante e rappresentano un primo passo verso un Web mobile migliore per tutti.
- title@: Quali sono i vantaggi del formato Accelerated Mobile Pages?
answer@: |
Il caricamento veloce è importante, ma se fosse istantaneo sarebbe l'ideale. Una ricerca ha evidenziato frequenze di rimbalzo più elevate associate a pagine web caricate più lentamente. Se viene utilizzato il formato AMP, gli utenti saranno molto più propensi a utilizzare e interagire con un maggior numero di contenuti. Ma non è solo questione di velocità e prestazioni. Desideriamo anche promuovere una migliore distribuzione per consentire ai publisher di trarre vantaggio in breve tempo dal potenziale offerto dal Web aperto, ossia la rapida pubblicazione dei loro contenuti su tutte le piattaforme e le app. Questa possibilità può portare maggiori entrate grazie ad annunci e abbonamenti.
- title@: Come funzionano le pagine Accelerated Mobile Pages?
answer@: |
Le pagine Accelerated Mobile Pages sono uguali a qualsiasi altra pagina HTML, ma hanno una serie limitata di funzionalità tecniche consentite che vengono definite e regolate dalla specifica AMP open source. Come tutte le pagine web, le pagine Accelerated Mobile Pages vengono caricate in qualsiasi browser moderno e in qualsiasi visualizzazione web delle app.
I file AMP adottano diversi approcci tecnici e architetturali che danno priorità alla velocità per offrire un'esperienza più rapida agli utenti. Gli sviluppatori AMP hanno a disposizione una ricca libreria sempre più ampia di componenti web che offrono la possibilità di incorporare oggetti multimediali quali post social e video, visualizzare annunci o raccogliere dati analitici. L'obiettivo non è rendere omogenei l'aspetto e il design dei contenuti, ma realizzare una base tecnica per le pagine più comune, che velocizzi i tempi di caricamento.
Inoltre, i file AMP possono essere memorizzati nella cache sulla cloud per ridurre il tempo di download dei contenuti sui dispositivi mobili degli utenti. Utilizzando il formato AMP, gli autori di contenuti consentono a terze parti di memorizzare nella cache i contenuti dei file AMP. Con questo tipo di framework, i publisher continuano ad avere il controllo dei propri contenuti, ma le piattaforme possono memorizzare facilmente nella cache i contenuti o eseguirne il mirroring per garantire una velocità di pubblicazione ottimale agli utenti. Google ha messo a disposizione la sua [cache AMP](https://developers.google.com/amp/cache/), che può essere utilizzata da tutti gratuitamente e nella quale verranno memorizzate tutte le pagine AMP. Anche altre aziende potrebbero realizzare la propria cache AMP.
Riassumendo, l'obiettivo è fare in modo che la combinazione di funzionalità tecniche limitate e di un sistema di distribuzione basato sulla memorizzazione nella cache consenta di migliorare le prestazioni delle pagine e permetta ai publisher di ampliare il proprio pubblico.
- title@: Perché il progetto Accelerated Mobile Pages adotta un approccio open source?
answer@: |
Le aziende coinvolte nel progetto desiderano migliorare il Web mobile per tutti, non soltanto per una piattaforma, un insieme di tecnologie o un gruppo di publisher. La caratteristica open source del progetto consente alle persone di condividere e proporre le proprie idee e il proprio codice per velocizzare il Web mobile. Siamo solo all'inizio e ci auguriamo che altri publisher e aziende tecnologiche si uniscano al progetto in futuro.
- title@: Chi può utilizzare il formato Accelerated Mobile Pages?
answer@: |
Il progetto è aperto a tutti i membri dell'ecosistema: publisher, piattaforme di consumo e autori di contenuti. Per farti un'idea su chi siano alcuni siti e aziende che utilizzano AMP, consulta [questa pagina](/who).
- title@: Quali sono le conseguenze dell'utilizzo del formato Accelerated Mobile Pages?
answer@: |
Utilizzando il formato AMP, gli autori di contenuti consentono a terze parti di eseguire la scansione, indicizzare, visualizzare (in base al protocollo di esclusione dei robot) e memorizzare nella cache i contenuti dei file AMP.
- title@: Quali tipi di contenuti funzionano meglio con il formato Accelerated Mobile Pages?
answer@: |
Lo scopo è che tutti i contenuti pubblicati (notizie, video, blog, foto, GIF e così via) funzionino con il formato Accelerated Mobile Pages.
- title@: Adattare i miei contenuti al formato Accelerated Mobile Pages mi comporta più lavoro come publisher?
answer@: |
Non molto. Poiché la specifica "HTML AMP" è basata interamente su tecnologie web esistenti, il processo di sviluppo rispecchia l'attuale processo già utilizzato dai publisher. I publisher possono conoscere meglio la specifica HTML AMP sul sito GitHub. Chi è abituato al processo attuale non dovrebbe avere molte cose nuove da imparare.
- title@: Come fanno i publisher ad adattare i contenuti alla specifica HTML AMP?
answer@: |
I publisher e i fornitori di sistemi di gestione dei contenuti (CMS) possono sviluppare un'integrazione con il proprio sistema CMS per generare i contenuti AMP. Automattic ha già pubblicato un [plug-in AMP WordPress](https://wordpress.org/plugins/amp/) e ci auguriamo che tutti i sistemi di gestione dei contenuti aggiungano il supporto delle pagine HTML AMP in futuro.
---
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/use_cases@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Casos de uso
toc: true
---
[TOC]
Este guia oferece um conjunto de casos de uso comuns para rastrear o envolvimento do usuário:
Deseja adicionar um caso de uso?
[Entre em contato.](https://github.com/ampproject/docs/issues/new)
Você também pode colaborar com seus próprios casos;
consulte [Como colaborar](https://www.ampproject.org/docs/support/contribute.html).
## Rastrear visualizações de páginas
Saiba como rastrear visualizações de páginas usando `amp-pixel` e `amp-analytics`.
### Usando amp-pixel
Envie dados de page view a um URL específico usando
[amp-pixel](/docs/reference/amp-pixel.html):
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
[/sourcecode]
### Usando amp-analytics - sem fornecedor
Envie dados de page view a um URL específico usando
[amp-analytics](/docs/reference/extended/amp-analytics.html):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Usando amp-analytics - googleanalytics
Envie dados de page view ao Google Analytics
(veja também [Rastreamento de páginas no Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Rastrear cliques de páginas
Saiba como rastrear cliques de páginas usando
[amp-analytics](/docs/reference/extended/amp-analytics.html),
envio de dados de evento a um URL específico e ao
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Envio de dados a um URL específico
O exemplo a seguir usa o atributo `selector` para enviar um evento de `click`
ao URL especificado todas as vezes que um usuário clicar em um link (`<a href>`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Envio de dados ao Google Analytics
O exemplo a seguir usa o atributo `selector` do `trigger`
para enviar um evento `click` ao Google Analytics quando um elemento específico é clicado
(veja também
[Rastreamento de eventos AMP no Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Rastrear rolagem
Rastreie a rolagem de páginas com [amp-analytics](/docs/reference/extended/amp-analytics.html).
O exemplo a seguir usa o atributo `scrollspec` para enviar um evento de `scroll`
ao URL especificado quando uma página é rolada verticalmente em 25%, 50% e 90%.
O evento também é acionado quando a página é rolada horizontalmente
em 90% da largura de `scroll`:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [25, 50, 90],
"horizontalBoundaries": [90]
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Rastrear interações sociais
Saiba como rastrear interações sociais usando
[amp-analytics](/docs/reference/extended/amp-analytics.html),
enviando dados de evento para um URL específico e para o
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Envio de dados a um URL específico
O exemplo a seguir usa o atributo `selector` para enviar um evento de `click`
ao URL especificado todas as vezes que um usuário clicar em um tweet (`#tweet-link`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackClickOnTwitterLink": {
"on": "click",
"selector": "#tweet-link",
"request": "event",
"vars": {
"eventId": "43",
"eventLabel": "clicked on a tweet link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Envio de dados ao Google Analytics
O exemplo a seguir usa o atributo `selector` do `trigger`
para enviar um evento quando um botão específico de rede social é clicado
(veja também
[Rastreamento de interações sociais AMP no Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Kasus Penggunaan
toc: true
---
[TOC]
Panduan ini memberikan satu set kasus penggunaan umum untuk melacak keterlibatan pengguna:
Ingin menambahkan kasus penggunaan?
[Beri tahu kami.](https://github.com/ampproject/docs/issues/new)
Anda juga bisa berkontribusi pada kasus penggunaan Anda sendiri;
lihat [Cara Berkontribusi](https://www.ampproject.org/docs/support/contribute.html).
## Melacak tampilan halaman
Ketahui cara melacak tampilan halaman menggunakan `amp-pixel` dan `amp-analytics`.
### Menggunakan amp-pixel
Mengirim data penayangan ke URL yang ditetapkan memakai
[amp-pixel](/docs/reference/amp-pixel.html):
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
[/sourcecode]
### Menggunakan amp-analytics - tanpa vendor
Mengirim data penayangan ke URL yang ditetapkan memakai
[amp-analytics](/docs/reference/extended/amp-analytics.html):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Menggunakan amp-analytics - googleanalytics
Mengirim data penayangan ke Google Analytics
(lihat juga [Pelacakan halaman dalam Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Melacak klik halaman
Mengetahui cara melacak klik halaman memakai
[amp-analytics](/docs/reference/extended/amp-analytics.html),
mengirim data kejadian ke URL yang ditetapkan, dan
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Mengirim data ke URL yang ditetapkan
Contoh berikut menggunakan atribut `selector` untuk mengirim kejadian `click`
ke URL yang ditetapkan setiap kali pengguna mengeklik tautan (`<a href>`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Mengirim data ke Google Analytics
Contoh berikut menggunakan atribut `selector` dari `trigger`
untuk mengirim kejadian `click` ke Google Analytics ketika elemen tertentu diklik
(lihat juga
(lihat juga [Pelacakan kejadian AMP dalam Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Melacak pengguliran
Melacak pengguliran halaman menggunakan [amp-analytics](/docs/reference/extended/amp-analytics.html).
Contoh berikut menggunakan atribut `scrollspec` untuk mengirim kejadian `scroll`
ke URL yang ditetapkan ketika halaman digulirkan secara vertikal sebesar 25%, 50%, dan 90%.
Kejadian ini juga dipicu ketika halaman digulirkan secara horizontal
ke 90% lebar `scroll`:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [25, 50, 90],
"horizontalBoundaries": [90]
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Melacak interaksi sosial
Ketahui cara melacak interaksi sosial menggunakan
[amp-analytics](/docs/reference/extended/amp-analytics.html),
mengirim data kejadian ke URL yang ditetapkan, dan ke
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Mengirim data ke URL yang ditetapkan
Contoh berikut menggunakan atribut `selector` untuk mengirim kejadian `click`
ke URL yang ditetapkan setiap kali pengguna mengeklik tweet (`#tweet-link`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackClickOnTwitterLink": {
"on": "click",
"selector": "#tweet-link",
"request": "event",
"vars": {
"eventId": "43",
"eventLabel": "clicked on a tweet link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Mengirim data ke Google Analytics
Contoh berikut menggunakan atribut `selector` dari `trigger`
untuk mengirim kejadian ketika tombol sosial tertentu diklik
(lihat juga
[pelacakan interaksi sosial AMP dalam Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
```
--------------------------------------------------------------------------------
/pwa/pwa.js:
--------------------------------------------------------------------------------
```javascript
/**
* Copyright 2016 The AMP HTML Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS-IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
function log(args) {
var var_args = Array.prototype.slice.call(arguments, 0);
var_args.unshift('[SHELL]');
console/*OK*/.log.apply(console, var_args);
}
class Shell {
constructor(win) {
/** @private @const {!Window} */
this.win = win;
/** @private @const {!AmpViewer} */
this.ampViewer_ = new AmpViewer(win,
win.document.getElementById('doc-container'));
/** @private {string} */
this.currentPage_ = win.location.pathname;
win.addEventListener('popstate', this.handlePopState_.bind(this));
win.document.documentElement.addEventListener('click',
this.handleNavigate_.bind(this));
log('Shell created');
if (this.currentPage_) {
this.navigateTo(this.currentPage_);
}
}
/**
*/
handleNavigate_(e) {
if (e.defaultPrevented) {
return false;
}
if (event.button) {
return false;
}
let a = event.target;
while (a) {
if (a.tagName == 'A' && a.href) {
break;
}
a = a.parentElement;
}
if (a) {
const url = new URL(a.href);
if (url.origin == this.win.location.origin &&
url.pathname.indexOf('/pwa/') == 0 &&
url.pathname.indexOf('amp.max.html') != -1) {
e.preventDefault();
const newPage = url.pathname;
log('Internal link to: ', newPage);
if (newPage != this.currentPage_) {
this.navigateTo(newPage);
}
}
}
}
/**
*/
handlePopState_() {
const newPage = this.win.location.pathname;
log('Pop state: ', newPage, this.currentPage_);
if (newPage != this.currentPage_) {
this.navigateTo(newPage);
}
}
/**
* @param {string} path
* @return {!Promise}
*/
navigateTo(path) {
log('Navigate to: ', path);
const oldPage = this.currentPage_;
this.currentPage_ = path;
// Update URL.
const push = !isShellUrl(path) && isShellUrl(oldPage);
if (path != this.win.location.pathname) {
if (push) {
this.win.history.pushState(null, '', path);
} else {
this.win.history.replaceState(null, '', path);
}
}
if (isShellUrl(path)) {
log('Back to shell');
this.ampViewer_.clear();
return Promise.resolve();
}
// Fetch.
const url = this.resolveUrl_(path);
log('Fetch and render doc:', path, url);
return fetchDocument(url).then(doc => {
log('Fetch complete: ', doc);
this.ampViewer_.show(doc, url);
});
}
/**
* @param {string} url
* @return {string}
*/
resolveUrl_(url) {
if (!this.a_) {
this.a_ = this.win.document.createElement('a');
}
this.a_.href = url;
return this.a_.href;
}
}
class AmpViewer {
constructor(win, container) {
/** @private @const {!Window} */
this.win = win;
/** @private @const {!Element} */
this.container = container;
win.AMP_SHADOW = true;
this.ampReadyPromise_ = new Promise(resolve => {
(window.AMP = window.AMP || []).push(resolve);
});
this.ampReadyPromise_.then(AMP => {
log('AMP LOADED:', AMP);
});
/** @private @const {string} */
this.baseUrl_ = null;
/** @private @const {?Element} */
this.host_ = null;
/** @private @const {...} */
this.viewer_ = null;
}
/**
*/
clear() {
this.container.textContent = '';
}
/**
* @param {!Document} doc
* @param {string} url
*/
show(doc, url) {
log('Show document:', doc, url);
this.container.textContent = '';
this.baseUrl_ = url;
this.host_ = this.win.document.createElement('div');
this.host_.classList.add('amp-doc-host');
const hostTemplate = this.win.document.getElementById('amp-slot-template');
if (hostTemplate) {
this.host_.appendChild(hostTemplate.content.cloneNode(true));
}
this.container.appendChild(this.host_);
this.ampReadyPromise_.then(AMP => {
const amp = AMP.attachShadowDoc(this.host_, doc, url);
this.win.document.title = amp.title || '';
this.viewer_ = amp.viewer;
/* TODO(dvoytenko): enable message deliverer as soon as viewer is provided
this.viewer_.setMessageDeliverer(this.onMessage_.bind(this),
this.getOrigin_(this.win.location.href));
*/
});
}
/**
* @param {string} url
* @return {string}
*/
resolveUrl_(relativeUrlString) {
return new URL(relativeUrlString, this.baseUrl_).toString();
}
/**
* @param {string} url
* @return {string}
*/
getOrigin_(relativeUrlString) {
return new URL(relativeUrlString, this.baseUrl_).origin;
}
/**
*/
onMessage_(type, data, rsvp) {
log('received message:', type, data, rsvp);
}
}
/**
* @param {string} url
* @return {boolean}
*/
function isShellUrl(url) {
return (url == '/pwa' || url == '/pwa/');
}
/**
* @param {string} url
* @return {!Promise<!Document>}
*/
function fetchDocument(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'document';
xhr.setRequestHeader('Accept', 'text/html');
xhr.onreadystatechange = () => {
if (xhr.readyState < /* STATUS_RECEIVED */ 2) {
return;
}
if (xhr.status < 100 || xhr.status > 599) {
xhr.onreadystatechange = null;
reject(new Error(`Unknown HTTP status ${xhr.status}`));
return;
}
if (xhr.readyState == /* COMPLETE */ 4) {
if (xhr.responseXML) {
resolve(xhr.responseXML);
} else {
reject(new Error(`No xhr.responseXML`));
}
}
};
xhr.onerror = () => {
reject(new Error('Network failure'));
};
xhr.onabort = () => {
reject(new Error('Request aborted'));
};
xhr.send();
});
}
var shell = new Shell(window);
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Kullanım Durumları
toc: true
---
[TOC]
Bu kılavuzda kullanıcı katılımını izlemek için bir dizi yaygın kullanım durumu verilmiştir:
Bir kullanım durumu eklemek istiyor musunuz?
[Bize bildirin.](https://github.com/ampproject/docs/issues/new)
Kendi kullanım durumlarınızla da katkı da bulunabilirsiniz;
bkz. [Katkı Sağlama](https://www.ampproject.org/docs/support/contribute.html).
## Sayfa görünümlerini izleme
`amp-pixel` ve `amp-analytics` kullanarak sayfa görünümlerini nasıl izleyeceğinizi öğrenin.
### Amp-piksel kullanma
[amp-piksel](/docs/reference/amp-pixel.html) kullanarak belli bir URL›ye sayfa görüntüleme verilerini gönderin:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
[/sourcecode]
### Amp-analitik kullanma - satıcısız
[amp-analitik](/docs/reference/extended/amp-analytics.html)kullanarak belli bir URL›ye sayfa görüntüleme verilerini gönderin:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Amp-analitik kullanma - googleanalytics
Sayfa görüntüleme verilerini Google Analytics›e gönderin
(ayrıca bkz. [Google Analytics›de sayfa izleme](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Sayfa tıklamalarını izleme
[amp-analitik](/docs/reference/extended/amp-analytics.html) kullanarak,
etkinlik verilerini
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/) ya da bir URL›ye göndererek sayfa tıklamalarını nasıl izleyeceğinizi öğrenin.
### Verileri belli bir URL›ye gönderme
Aşağıdaki örnekte kullanıcı bir bağlantıya her tıkladığında (`<a href>`) belirlenen URL›ye bir `click` etkinliği
göndermek için `selector` özelliği kullanılmıştır:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Verileri Google Analytics›e gönderme
Aşağıdaki örnekte, özel bir ögeye tıklandığında Google Analytics›e bir `click` etkinliği göndermek için `trigger`
özniteliği için `selector` kullanılmıştır
(ayrıca bkz.
[Google Analytics›de AMP etkinliği izleme](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Kaydırmayı izleme
[Amp-analitik](/docs/reference/extended/amp-analytics.html) kullanarak sayfa kaydırmayı izleyin.
Aşağıdaki örnekte, sayfa %25, %50 ve %90 oranında dikey olarak kaydırıldığında, belirlenen URL›ye bir `scroll` etkinliği
göndermek için `scrollspec` özelliği kullanılmıştır:
Etkinlik aynı zamanda sayfa, `scroll` genişliğinin %90 oranında yatay olarak
kaydırıldığında da uyarı verir:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [25, 50, 90],
"horizontalBoundaries": [90]
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Sosyal medya etkileşimlerini izleme
[Amp-analitik](/docs/reference/extended/amp-analytics.html) kullanarak,
etkinlik verilerini
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/) ya da bir URL›ye göndererek sosyal medya etkileşimlerini nasıl izleyeceğinizi öğrenin.
### Verileri belli bir URL›ye gönderme
Aşağıdaki örnekte, kullanıcı bir tweet›e (`#tweet bağlantısı`) her tıkladığında, belirlenen URL›ye bir `click` etkinliği
göndermek için `selector` özelliği kullanılmıştır:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackClickOnTwitterLink": {
"on": "click",
"selector": "#tweet-link",
"request": "event",
"vars": {
"eventId": "43",
"eventLabel": "clicked on a tweet link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Verileri Google Analytics›e gönderme
Aşağıdaki örnekte, özel bir sosyal medya düğmesine tıklandığında, bir etkinlik göndermek için `trigger`
özelliği için `selector` kullanılmıştır
(ayrıca bkz.
[Google Analytics›de AMP sosyal medya etkileşimlerini izleme](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Anwendungsbeispiele
---
Diese Anleitung enthält eine Reihe von Anwendungsbeispielen für das Erfassen der Nutzerinteraktion:
[TOC]
Sie möchten ein Anwendungsbeispiel hinzufügen?
[Dann geben Sie uns Bescheid.](https://github.com/ampproject/docs/issues/new)
Unter [Beitrag leisten](https://www.ampproject.org/docs/support/contribute.html) erfahren Sie, wie Sie eigene Anwendungsbeispiele bereitstellen können.
## Seitenaufrufe erfassen
Erfahren Sie, wie Sie mittels `amp-pixel` und `amp-analytics` Seitenaufrufe erfassen.
### amp-pixel verwenden
Daten zu Seitenaufrufen mittels [amp-pixel](/docs/reference/amp-pixel.html) an eine angegebene URL senden:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
[/sourcecode]
### amp-pixel verwenden – kein Anbieter
Daten zu Seitenaufrufen mittels [amp-analytics](/docs/reference/extended/amp-analytics.html) an eine angegebene URL senden:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### amp-analytics verwenden – googleanalytics
Daten zu Seitenaufrufen an Google Analytics senden (siehe auch [Seiten-Tracking in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Seitenklicks erfassen
Erfahren Sie, wie Sie Seitenklicks mittels [amp-analytics](/docs/reference/extended/amp-analytics.html) erfassen und Ereignisdaten an eine angegebene URL und an [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/) senden können.
### Daten an eine angegebene URL senden
Im folgenden Beispiel wird mithilfe des `selector`-Attributs jedes Mal ein `click`-Ereignis an die angegebene URL gesendet, wenn ein Nutzer auf einen Link (`a href`) klickt:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Daten an Google Analytics senden
Im folgenden Beispiel wird mithilfe des `selector`-Attributs von `trigger` ein `click`-Ereignis an Google Analytics gesendet, wenn auf ein bestimmtes Element geklickt wird (siehe auch [AMP-Ereignis-Tracking in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Scrollen erfassen
Sie können mittels [amp-analytics](/docs/reference/extended/amp-analytics.html) das Scrollen auf Seiten erfassen.
Im folgenden Beispiel wird mithilfe des `scrollspec`-Attributs ein `scroll`-Ereignis an die angegebene URL gesendet, wenn auf einer Seite vertikal um 25 %, 50 % und 90 % gescrollt wird.
Das Ereignis wird auch dann ausgelöst, wenn auf der Seite horizontal bis 90 % der `scroll`-Breite gescrollt wird:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [25, 50, 90],
"horizontalBoundaries": [90]
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Interaktionen über soziale Netzwerke erfassen
Erfahren Sie, wie Sie Interaktionen über soziale Netzwerke mittels [amp-analytics](/docs/reference/extended/amp-analytics.html) erfassen und Ereignisdaten an eine angegebene URL und an [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/) senden.
### Daten an eine angegebene URL senden
Im folgenden Beispiel wird mithilfe des `selector`-Attributs jedes Mal ein `click`-Ereignis an die angegebene URL gesendet, wenn ein Nutzer auf einen Tweet (`#tweet-link`) klickt:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackClickOnTwitterLink": {
"on": "click",
"selector": "#tweet-link",
"request": "event",
"vars": {
"eventId": "43",
"eventLabel": "clicked on a tweet link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Daten an Google Analytics senden
Im folgenden Beispiel wird mithilfe des `selector`-Attributs von `trigger` ein Ereignis gesendet, wenn auf ein bestimmtes Element geklickt wird (siehe auch [AMP-Tracking von Interaktionen über soziale Netzwerke in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Casos de uso
toc: true
---
[TOC]
En esta guía se incluye un conjunto de casos de uso comunes para realizar un seguimiento de la captación de usuarios:
¿Quieres agregar un caso de uso?
[Cuéntanos](https://github.com/ampproject/docs/issues/new).
También puedes aportar tus propios casos de uso;
consulta [Cómo contribuir](https://www.ampproject.org/docs/support/contribute.html).
## Seguimiento de vistas de página
Obtén información acerca de cómo realizar un seguimiento de las vistas de página usando `amp-pixel` y `amp-analytics`.
### Con amp-pixel
Envía datos de vistas de página a una URL especificada usando
[amp-pixel](/docs/reference/amp-pixel.html):
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
[/sourcecode]
### Con amp-analytics (sin proveedor)
Envía datos de vistas de página a una URL especificada usando
[amp-analytics](/docs/reference/extended/amp-analytics.html):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Con amp-analytics (googleanalytics)
Envía datos de vistas de página a Google Analytics
(consulta también [Seguimiento de páginas en Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Seguimiento de clics en páginas
Obtén información acerca de cómo realizar un seguimiento de los clics en páginas usando
[amp-analytics](/docs/reference/extended/amp-analytics.html),
enviando datos de eventos a una URL especificada y a
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Envío de datos a URL especificadas
En el ejemplo siguiente se usa el atributo `selector` para enviar un evento `click`
a la URL especificada cada vez que un usuario hace clic en un vínculo (`<a href>`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Envío de datos a Google Analytics
En el ejemplo siguiente se usa el atributo `selector` de `trigger`
para enviar un evento `click` a Google Analytics cuando se hace clic en un elemento específico
(consulta también
[Seguimiento de eventos de AMP en Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Seguimiento del desplazamiento
Realiza un seguimiento del desplazamiento usando [amp-analytics](/docs/reference/extended/amp-analytics.html).
En el ejemplo siguiente se usa el atributo `scrollspec` para enviar un evento `scroll`
a la URL especificada cuando la página se desplaza verticalmente un 25, un 50 y un 90%.
El evento también se activa cuando la página se desplaza horizontalmente
hasta el 90% del ancho de `scroll`:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [25, 50, 90],
"horizontalBoundaries": [90]
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Seguimiento de interacciones sociales
Obtén información acerca de cómo realizar un seguimiento de las interacciones sociales usando
[amp-analytics](/docs/reference/extended/amp-analytics.html)y
enviando datos de eventos a una URL especificada y a
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Envío de datos a URL especificadas
En el ejemplo siguiente se usa el atributo `selector` para enviar un evento `click`
a la URL especificada cada vez que un usuario hace clic en un tuit (`#tweet-link`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackClickOnTwitterLink": {
"on": "click",
"selector": "#tweet-link",
"request": "event",
"vars": {
"eventId": "43",
"eventLabel": "clicked on a tweet link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Envío de datos a Google Analytics
En el ejemplo siguiente se usa el atributo `selector` de `trigger`
para enviar un evento cuando se hace clic en un botón específico de una red social
(consulta también
[Seguimiento de interacciones sociales de AMP en Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Cas d'utilisation
toc: true
---
[TOC]
Ce guide propose des cas d'utilisation courants pour suivre l'engagement des utilisateurs :
Vous aimeriez ajouter un cas d'utilisation ?
[Dites-le nous.](https://github.com/ampproject/docs/issues/new)
Vous pouvez également partager vos propres cas d'utilisation ;
voir [Comment contribuer](https://www.ampproject.org/docs/support/contribute.html).
## Suivi des vues de page
Découvrez comment suivre les vues de page avec `amp-pixel` et `amp-analytics`.
### Utilisation du composant amp-pixel
Envoyez des données sur les vues de page à une URL spécifiée
en utilisant [amp-pixel](/docs/reference/amp-pixel.html) :
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
[/sourcecode]
### Utilisation du composant amp-analytics (pas de fournisseur)
Envoyez des données sur les vues de page à une URL spécifiée
en utilisant [amp-analytics](/docs/reference/extended/amp-analytics.html) :
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Utilisation du composant amp-analytics (googleanalytics)
Envoyez des données sur les vues de page à Google Analytics
(voir également [Suivi des pages dans Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)) :
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Suivi des clics sur une page
Découvrez comment suivre les clics sur une page à l'aide de
[amp-analytics](/docs/reference/extended/amp-analytics.html)
en envoyant les données d'événement à une URL spécifiée et à
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Envoi de données à une URL spécifiée
L'exemple suivant utilise l'attribut `selector` pour envoyer un événement `click`
à l'URL spécifiée à chaque fois qu'un utilisateur clique sur un lien (`<a href>`) :
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Envoi de données à Google Analytics
L'exemple suivant utilise l'attribut `selector` de `trigger`
pour envoyer un événement `click` à Google Analytics lorsque l'on clique sur un élément particulier
(voir également
[Suivi des événements AMP dans Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)) :
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Suivi du défilement
Suivez le défilement des pages avec [amp-analytics](/docs/reference/extended/amp-analytics.html).
L'exemple suivant utilise l'attribut `scrollspec` pour envoyer un événement `scroll`
à l'URL spécifiée à chaque fois qu'un utilisateur fait défiler verticalement la page de 25, 50 et 90 %.
Cet événement se déclenche également lorsque l'on fait défiler
horizontalement la page sur 90 % de sa largeur `scroll` :
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [25, 50, 90],
"horizontalBoundaries": [90]
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Suivi des interactions sociales
Découvrez comment suivre les interactions sociales à l'aide de
[amp-analytics](/docs/reference/extended/amp-analytics.html)
en envoyant les données d'événement à une URL spécifiée et à
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Envoi de données à une URL spécifiée
L'exemple suivant utilise l'attribut `selector` pour envoyer un événement `click`
à l'URL spécifiée à chaque fois qu'un utilisateur clique sur un tweet (« #tweet-link ») :
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackClickOnTwitterLink": {
"on": "click",
"selector": "#tweet-link",
"request": "event",
"vars": {
"eventId": "43",
"eventLabel": "clicked on a tweet link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Envoi de données à Google Analytics
L'exemple suivant utilise l'attribut `selector` de `trigger`
pour envoyer un événement lorsque l'on clique sur un bouton de réseau social particulier
(voir également
[Suivi des interactions sociales AMP dans Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)) :
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Casistica
toc: true
---
[TOC]
Questa guida offre una serie di tipologie di utilizzo comuni per seguire l’evoluzione del coinvolgimento degli utenti:
Vuoi aggiungere una tipologia di utilizzo?
[Comunicacelo.](https://github.com/ampproject/docs/issues/new)
Puoi anche contribuire condividendo la tua casistica personale,
scopri [Come dare il tuo contributo](https://www.ampproject.org/docs/support/contribute.html).
## Come monitorare le visualizzazioni di pagina
Scopri come monitorare le visualizzazioni di pagina tramite `amp-pixel` e `amp-analytics`.
### Uso di amp-pixel
Invia i dati sulla visualizzazione di pagina a un URL specifico utilizzando
[amp-pixel](/docs/reference/amp-pixel.html):
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
[/sourcecode]
### Uso di amp-analytics - no vendor
Invia i dati sulla visualizzazione di pagina a un URL specifico utilizzando
[amp-analytics](/docs/reference/extended/amp-analytics.html):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Uso di amp-analytics - googleanalytics
Invia i dati sulla visualizzazione di pagina a Google Analytics
(vedi anche [Monitoraggio delle pagine in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Come monitorare i clic sulla pagina
Scopri come monitorare i clic sulla pagina tramite
[amp-analytics](/docs/reference/extended/amp-analytics.html),
inviando dati eventi a un URL specifico e a
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Invio di dati a un URL specifico
Il seguente esempio utilizza l’attributo `selector` per inviare un evento `click`
all’URL specifico ogni volta che l’utente fa clic su un link (`<a href>`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Invio di dati a Google Analytics
Il seguente esempio utilizza l’attributo `selector` del `trigger`
per inviare un evento `click` a Google Analytics quando si fa clic su un determinato elemento
(vedi anche
[Monitoraggio degli eventi AMP in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Come monitorare lo scorrimento delle pagine
Puoi eseguire il monitoraggio dello scorrimento delle pagine utilizzando [amp-analytics](/docs/reference/extended/amp-analytics.html).
Il seguente esempio utilizza l’attributo `scrollspec` per inviare un evento `scroll`
all’URL specifico quando l’utente scorre la pagina in verticale del 25%, 50% e 90%.
L’evento si attiva anche quando viene eseguito lo scorrimento in orizzontale
per il 90% della larghezza di `scroll`:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [25, 50, 90],
"horizontalBoundaries": [90]
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Come monitorare le interazioni con i social network
Scopri come monitorare le interazioni con i social network utilizzando
[amp-analytics](/docs/reference/extended/amp-analytics.html),
inviando dati eventi a un URL specifico e a
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Invio di dati a un URL specifico
Il seguente esempio utilizza l’attributo `selector` per inviare un evento `click`
all’URL specifico ogni volta che un utente fa clic su un tweet (`#tweet-link`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackClickOnTwitterLink": {
"on": "click",
"selector": "#tweet-link",
"request": "event",
"vars": {
"eventId": "43",
"eventLabel": "clicked on a tweet link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Invio di dati a Google Analytics
Il seguente esempio utilizza l’attributo `selector` del `trigger`
per inviare un evento quando si fa clic su un determinato pulsante dei social
(vedi anche
[Monitoraggio delle interazioni con i social network con AMP in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Przykłady zastosowań
toc: true
---
[TOC]
W tym przewodniku przedstawiono szereg typowych przykładów zastosowań do monitorowania czynności użytkowników:
Chcesz dodać przykład zastosowania?
[Daj nam znać.](https://github.com/ampproject/docs/issues/new)
Możesz także zgłosić własne przykłady zastosowań;
zobacz [Jak dodać własne materiały](https://www.ampproject.org/docs/support/contribute.html).
## Monitorowanie wyświetleń stron
Dowiedz się, jak monitorować wyświetlenia strony przy użyciu elementów `amp-pixel` i `amp-analytics`.
### Używanie elementu amp-pixel
Wysyłanie danych żądania pageview na podany adres URL przy użyciu elementu
[amp-pixel](/docs/reference/amp-pixel.html):
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?"></amp-pixel>
[/sourcecode]
### Używanie elementu amp-analytics — bez dostawcy
Wysyłanie danych żądania pageview na podany adres URL przy użyciu elementu
[amp-analytics](/docs/reference/extended/amp-analytics.html):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Używanie elementu amp-analytics — googleanalytics
Wysyłanie danych żądania pageview do usługi Google Analytics
(zobacz też [Monitorowanie stron w Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Monitorowanie kliknięć na stronie
Dowiedz się, jak monitorować kliknięcia na stronie przy użyciu elementu
[amp-analytics](/docs/reference/extended/amp-analytics.html)
oraz wysyłać dane zdarzenia na podany adres URL i do
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Wysyłanie danych na podany adres URL
W poniższym przykładzie atrybut `selector` jest używany do wysyłania zdarzenia `click`
na podany adres URL za każdym razem, gdy użytkownik kliknie link (`<a href>`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Wysyłanie danych do Google Analytics
W poniższym przykładzie atrybut `selector` elementu `trigger`
jest używany do wysyłania zdarzenia `click` do Google Analytics, kiedy konkretny element zostanie kliknięty
(zobacz też
[Monitorowanie zdarzeń AMP w Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Monitorowanie przewijania
Przewijanie strony można monitorować przy użyciu elementu [amp-analytics](/docs/reference/extended/amp-analytics.html).
W poniższym przykładzie atrybut `scrollspec` jest używany do wysyłania zdarzenia `scroll`
na podany adres URL, gdy strona zostanie przewinięta o 25%, 50% i 90%.
Zdarzenie jest wyzwalane także wtedy, gdy strona zostanie przewinięta w poziomie
do 90% szerokości przewijania (`scroll`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"scrollPings": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [25, 50, 90],
"horizontalBoundaries": [90]
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
## Monitorowanie interakcji społecznościowych
Dowiedz się, jak monitorować interakcje społecznościowe przy użyciu
elementu [amp-analytics](/docs/reference/extended/amp-analytics.html)
oraz wysyłać dane zdarzenia na podany adres URL i do
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
### Wysyłanie danych na podany adres URL
W poniższym przykładzie atrybut `selector` jest używany do wysyłania zdarzenia `click`
na podany adres URL za każdym razem, gdy użytkownik kliknie tweet (`#tweet-link`):
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackClickOnTwitterLink": {
"on": "click",
"selector": "#tweet-link",
"request": "event",
"vars": {
"eventId": "43",
"eventLabel": "clicked on a tweet link"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
### Wysyłanie danych do Google Analytics
W poniższym przykładzie atrybut `selector` elementu `trigger`
jest używany do wysyłania zdarzenia, gdy użytkownik kliknie konkretny przycisk serwisu społecznościowego
(zobacz też
[Monitorowanie interakcji społecznościowych AMP w Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
[sourcecode:html]
<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com"
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
```
--------------------------------------------------------------------------------
/content/latest/blog/speeding-up-news-apps-with-amp.md:
--------------------------------------------------------------------------------
```markdown
---
class: post-blog post-detail
type: Blog
$title: Speeding up news apps with AMP
id: speeding-up-news-apps-with-amp
author: Mario Lorenzen
role: Portal Manager, mh:n digital
origin: "https://amphtml.wordpress.com/2017/01/25/speeding-up-news-apps-with-amp/amp/"
excerpt: "Shz.de is one of the top news publishers in Schleswig-Holstein, Germany’s most northern state. Each month around 1.5 million unique users access our content to stay up to date on local news. In 2011 we saw an increasing number of our readers viewing content on their mobile phones, so we produced a mobile app, which […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
date_data: 2017-01-25T12:58:19-08:00
$date: January 25, 2017
$parent: /content/latest/list-blog.html
components:
- social-share
---
<div class="amp-wp-article-content">
<p><a href="http://shz.de"><span style="font-weight:400;"><img data-attachment-id="946" data-permalink="https://amphtml.wordpress.com/2017/01/25/speeding-up-news-apps-with-amp/shz/" data-orig-file="https://amphtml.files.wordpress.com/2017/01/shz.png?w=495&h=278" data-orig-size="583,328" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="shz" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/01/shz.png?w=495&h=278?w=300" data-large-file="https://amphtml.files.wordpress.com/2017/01/shz.png?w=495&h=278?w=583" class=" wp-image-946 aligncenter" src="https://amphtml.files.wordpress.com/2017/01/shz.png?w=495&h=278" alt="shz" width="495" height="278" srcset="https://amphtml.files.wordpress.com/2017/01/shz.png?w=495&h=278 495w, https://amphtml.files.wordpress.com/2017/01/shz.png?w=150&h=84 150w, https://amphtml.files.wordpress.com/2017/01/shz.png?w=300&h=169 300w, https://amphtml.files.wordpress.com/2017/01/shz.png 583w" sizes="(max-width: 495px) 100vw, 495px" /></span></a></p>
<p><a href="http://shz.de"><span style="font-weight:400;">Shz.de</span></a><span style="font-weight:400;"> is one of the top news publishers in Schleswig-Holstein, Germany’s most northern state. Each month around 1.5 million unique users access our content to stay up to date on local news. In 2011 we saw an increasing number of our readers viewing content on their mobile phones, so we produced a mobile app, which has been downloaded over 40,000 times.</span></p>
<p><span style="font-weight:400;">After 4 years of minor updates, we decided to completely rebuild our app because it was difficult and resource intensive to keep up with app store update cycles and RSS limitation. Our plan was to use mobile web content inside the app which gave us flexibility and cost-effective development, but we still wanted to ensure content loaded quickly inside the app. Our team learned about the Accelerated Mobile Pages project through documentation on AMPproject.org and by inspecting examples on ampbyexample.com. We were excited by the possibility of having content flexibility across platforms with near instantaneous page load times. </span><i><span style="font-weight:400;">“Our belief is that anything less than instant kills engagement. Why not integrate AMP article pages in our native apps?”</span></i><span style="font-weight:400;">, explains CEO Nicolas L. Fromm. </span></p>
<p><img data-attachment-id="945" data-permalink="https://amphtml.wordpress.com/2017/01/25/speeding-up-news-apps-with-amp/shz_mobile/" data-orig-file="https://amphtml.files.wordpress.com/2017/01/shz_mobile.png?w=660" data-orig-size="285,545" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="shz_mobile" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/01/shz_mobile.png?w=660?w=157" data-large-file="https://amphtml.files.wordpress.com/2017/01/shz_mobile.png?w=660?w=285" class=" size-full wp-image-945 alignright" src="https://amphtml.files.wordpress.com/2017/01/shz_mobile.png?w=660" alt="shz_mobile" srcset="https://amphtml.files.wordpress.com/2017/01/shz_mobile.png 285w, https://amphtml.files.wordpress.com/2017/01/shz_mobile.png?w=78 78w" sizes="(max-width: 285px) 100vw, 285px" /></p>
<p><span style="font-weight:400;">We piloted utilizing AMP pages inside our smallest mobile app and were extremely pleased with the results. With only a few hours of additional development work, </span><b>we were seeing articles load 4x faster than in previous app versions</b><span style="font-weight:400;">. Additionally, </span><b>pageviews per session increased by 25%</b><span style="font-weight:400;"> – achieving our goal of both speed and engagement. With these initial easy wins, we quickly rolled out the AMP format to our other apps.</span></p>
<p><span style="font-weight:400;">Using AMP pages inside our app has provided fantastic improvements with speed and user engagement, but we’re not stopping there. We’re now exploring improving caching and offline support in our app. We look forward to these future enhancements and are excited to share our success with AMP. As Mr. Fromm said, </span><i><span style="font-weight:400;">“We’re in the business of creating engagement, building loyalty and monetizing quality journalism. Our main goal in building digital products is to create a frictionless and uninterrupted reading experi</span></i><i><span style="font-weight:400;">ence in our apps and news sites.”</span></i></p>
<p><span style="font-weight:400;">Posted by Mario Lorenzen, Portal Manager, mh:n digital</span><span style="font-weight:400;"><br />
</span></p><br /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/amphtml.wordpress.com/943/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/amphtml.wordpress.com/943/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=amphtml.wordpress.com&blog=102788268&post=943&subd=amphtml&ref=&feed=1" width="1" height="1" />
</div>
```
--------------------------------------------------------------------------------
/assets/sass/pages/_home.scss:
--------------------------------------------------------------------------------
```scss
.home {
.content {
overflow: hidden;
}
.hero {
position: relative;
margin: 0 auto;
max-width: 1440px;
.container {
position: relative;
display: flex;
justify-content: space-between;
}
.intro {
color: $color-black;
font-size: 16px;
margin: 0;
padding-bottom: 30px;
max-width: 500px;
}
.cta_connector {
margin: 0 20px;
}
}
.hero-image {
flex: 1 1 auto;
left: -100px;
min-width: 0;
position: relative;
transform: translateY(-14%);
z-index: -1;
@include max-screen($container-size) {
max-width: 700px;
top: 40px;
}
.lines, .phone {
max-width: 100%;
}
.lines {
height: 600px;
position: relative;
top: 50px;
width: 700px;
.animated-lines-big {
position: absolute;
left: 25%;
top: -100px;
}
}
.phone {
position: absolute;
left: -30%;
top: 70px;
transform: scale(1.1);
width: 700px;
z-index: 1;
}
}
.hero-content {
flex: 10 1 auto;
}
.latest {
left: -20%;
margin-top: 80px;
position: relative;
width: 120%;
.card {
flex-basis: calc(33% - 20px);
padding: 20px;
}
.card-type {
margin-bottom: 5px;
}
.card-content {
max-height: 48px;
overflow: hidden;
}
@include min-max-screen($container-size - 200, $container-size) {
left: 0;
width: 100%;
}
}
.latest-mobile {
margin-top: 140px;
.latest-label {
margin: 0;
text-align: center;
transform: none;
position: static;
}
}
.latest-label {
margin: 0 0 -15px 40px;
}
.benefits {
h1 {
margin: 0 auto;
max-width: 450px;
text-align: center;
}
.benefits-row {
display: flex;
justify-content: center;
margin-top: 80px;
}
.benefit {
margin: 0 80px;
min-width: 0;
white-space: nowrap;
&:nth-child(2) .benefit-image {
width: 80px;
}
}
.benefit-image {
display: inline-block;
margin-right: 15px;
position: relative;
top: 0;
width: 65px;
}
.benefit-content {
display: inline-block;
position: relative;
vertical-align: top;
white-space: normal;
width: 300px;
.desc {
font-size: 16px;
}
}
}
.experience {
align-items: center;
display: flex;
justify-content: flex-end;
margin-left: 50px;
margin-top: -250px;
max-width: 100%;
.experience-content {
margin-right: 100px;
max-width: 450px;
}
.experience-image {
min-width: 0;
position: relative;
.bg, .lines, .phone {
max-width: 100%;
z-index: -1;
}
.bg {
position: relative;
transform: translateY(-9%);
width: 712px;
}
.lines {
left: 0;
position: absolute;
top: 0;
width: 782px;
}
.phone {
left: 30%;
position: absolute;
top: 24%;
transform: scale(1.1);
width: 610px;
}
}
}
.success-stories {
margin-bottom: -80px;
padding: 0;
position: relative;
z-index: 1;
h1 {
margin: 0 auto 30px;
max-width: 700px;
text-align: center;
}
.card {
display: block;
&.wapo .card-icon {
width: 220px;
}
&.wired .card-icon {
width: 150px;
}
&.teads .card-icon {
width: 100px;
}
}
.card-inner {
width: 100%;
}
.card-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
position: relative;
p {
color: $color-black-95;
font-size: 18px;
}
}
.card-icon {
margin: 0 auto 30px;
}
}
.large-cta {
padding: 130px 0 100px 0;
}
.wrap section {
padding: 100px 0 60px 0;
}
&.rtl {
.hero {
.hero-image {
left: auto;
}
br.tablet-down {
display: block;
visibility: visible;
}
}
.latest {
left: auto;
right: -20%;
}
.latest-label {
margin: 0 40px -15px 0;
}
.benefits .benefit-image {
margin: 0 0 0 15px;
}
.experience {
justify-content: flex-start;
}
.experience-image {
order: 0;
}
.experience-content {
order: 1;
}
}
@include max-screen($tablet-breakpoint) {
.hero {
.container {
flex-direction: column;
}
.intro-container {
text-align: center;
.button {
margin-bottom: 20px;
}
}
.intro {
margin: 0 auto;
}
.cta_connector {
margin: 0 5px 0 0;
}
.card {
flex-basis: 100%;
}
}
.hero-image {
left: auto;
margin: 0 auto;
max-width: 500px;
order: 2;
transform: none;
width: 100%;
}
.hero-content {
order: 1;
}
.benefits .benefit-image {
display: block;
margin: 20px auto;
}
}
@include max-screen($mobile-breakpoint) {
.hero {
padding-top: 100px;
}
.hero-image {
z-index: 0;
.lines {
left: 50%;
height: 350px;
transform: translateX(-50%);
.animated-lines-big {
left: 0;
top: -140px;
transform: rotate(144deg) scale(0.5);
}
}
.phone {
left: 20%;
max-width: 380px;
transform: translateX(-50%);
}
}
.benefits {
h1 {
max-width: 200px;
}
.benefits-row {
flex-direction: column;
margin-top: 0;
}
.benefit {
margin: 20px auto;
text-align: center;
white-space: normal;
}
.benefit-image {
top: 0;
}
}
.experience {
flex-direction: column;
margin-top: 0;
.bg {
transform: translateY(-20%);
}
}
.experience-image {
margin: -50px 0 0 auto;
max-width: 600px;
width: 100%;
}
.success-stories {
margin-bottom: 0;
h1 {
max-width: 300px;
}
.card {
flex-basis: 100%;
}
.card-content {
h2 {
font-size: 20px;
line-height: 1.5;
}
}
}
.wrap section {
padding: 50px 0 40px;
}
&.rtl {
.experience-image {
order: 1;
}
.experience-content {
order: 0;
}
.benefits .benefit-image {
margin: 20px auto;
}
}
}
}
```
--------------------------------------------------------------------------------
/scripts/import_docs.js:
--------------------------------------------------------------------------------
```javascript
#!/usr/bin/env node
var github = require('octonode');
const fs = require('fs');
const path = require('path');
var clientSecret = process.argv[2] || process.env.AMP_DOC_SECRET;
var clientId = process.argv[3] || process.env.AMP_DOC_ID;
var clientToken = process.env.AMP_DOC_TOKEN;
var localPath = process.env.AMP_DOC_LOCAL_PATH;
var importData = require('./import_docs.json');
var subfolderLookupTable = require('./component_categories.json');
if(!(clientToken || (clientSecret && clientId))) {
console.error("This script reads the reference docs from GitHub which requires providing either a GitHub personal access token (AMP_DOC_TOKEN) or GitHub application id/secret (AMP_DOC_ID and AMP_DOC_SECRET). See README.md for more information.");
process.exit(1);
}
var client = github.client(
clientToken ||
{
id: clientId,
secret: clientSecret
});
var ghrepo = client.repo('ampproject/amphtml');
function downloadPage(filePath, callback, headingToStrip) {
var process = function (err, data) {
if (err) {
throw err;
}
if (data && data.content !== undefined && !data.content.length) {
console.log("Skipping " + filePath + ", file is empty..");
return;
}
var encodedContent = new Buffer(data.content || data, 'base64')
var decodedContent = encodedContent.toString();
// we need to concert some of the markdown from Github flavor to Jekyll flavor
var relativePath = filePath.substr(0, filePath.lastIndexOf("/"))
decodedContent = convertMarkdown(decodedContent, relativePath, headingToStrip);
callback(decodedContent);
};
if (localPath) {
fs.readFile(path.resolve(localPath, filePath), process);
} else {
ghrepo.contents(filePath, process);
}
}
function savePage(config, callback) {
var frontMatter = "---\n$title: " + config.title + "\n$order: " + (config.order || 0) + "\n---\n";
fs.writeFile(config.destination, frontMatter + config.content, callback);
}
function convertMarkdown(content, relativePath, headingToStrip) {
// strip out first heading
content = content.replace(headingToStrip === 1 ? (/^#{1}\s.+/m) : (/^#{3}\s.+/m), '');
// this regular expression is crazy. Adds a newline before lists so they are parsed
// as proper lists by Jekyll.
content = content.replace(/(\n(?![^\S\n]*\*[^\S\n])(?![^\S\n]*\-)[^\n]+\n)([^\S\n]*?(?!\*\*)((\-\s)|(\*\s)|(1\.\s)))/gm, '$1\n$2');
// for comments to be parsed correctly as HTML, we need an extra line break
content = content.replace('<!---', '\n<!---');
// replace code blocks
content = content.replace(/(\`\`\`)(([A-z\-]*)\n)(((?!\`\`\`)[\s\S])+)(\`\`\`\n)/gm, function (match, p1, p2, p3, p4) {
// work around for mustache-style curly braces to not mess with Grow
if (p4.indexOf('{{') > -1) {
p4 = "{% raw %}" + p4 + '{% endraw %}';
}
return '[sourcecode' + (p3 ? ':' + p3 : '') + ']\n' + p4 + '[/sourcecode]\n';
});
// replace mustache-style code elements
content = content.replace(/\`[^\s{`]*(\{\{[^`]*\}\})[^`]*\`/g, '{% raw %}`$1`{% endraw %}');
// horizontal rules like --- will break front matter
content = content.replace(/\n---\n/gm, '\n- - -\n');
// create absolute urls from relative github urls
content = content.replace(/\[([^\]]+)\]\((?!http|#)([^\)]+)\)/g, '[$1](https://github.com/ampproject/amphtml/blob/master/' + relativePath + '/$2)');
// now substitute links going to extensions with relative urls to the downloaded ones
content = content.replace(/https\:\/\/github.com\/ampproject\/amphtml\/blob\/master\/extensions\/[^\/]+\/([^\.]+)\.md/g, "components/$1.html");
return content;
}
/*
* Imports all docs specified in the import_docs.json config file.
*/
importData.forEach((item) => {
downloadPage(item.from, function(pageContent) {
savePage({
destination: '../content/' + item.to,
content: (item.toc ? '[TOC]\n' : '') + pageContent,
title: item.title,
order: item.order
}, function (err) {
if (err) throw err;
console.log('Successfully imported: ' + item.title);
});
}, 1);
});
// Download built-in AMP component ref docs
ghrepo.contents('builtins', 'master', function(err, data) {
if(err) {
throw err;
}
var components = data.filter(function (obj) {
return /amp\-.*\.md/.test(obj.name);
});
var index = 0;
components.forEach(function(component) {
index++;
// if we don't know how to categorize this one, warn and skip
var subfolder = subfolderLookupTable[component.name.replace(/\.md$/, '')];
if (!subfolder) {
console.warn("Warning: Don\t know how to categorize " + component.name + ', skipping..');
return;
}
downloadPage(component.path, function(pageContent) {
savePage({
destination: '../content/docs/reference/components/' + subfolder + '/' + component.name,
content: pageContent,
title: component.name.replace('.md', '') + ' (Built-in)'
}, function (err) {
if (err) throw err;
console.log('Successfully imported: ' + component.name + ' (Built-in)');
});
}, 1);
});
});
// download extension component ref docs
ghrepo.contents('extensions', "master", function(err, data) {
if(err) {
throw err;
}
// grab extended component sub pages
var components = data.filter(function(obj) {
return obj.type === 'dir';
});
var index = 0;
components.forEach(function(component) {
var order = index;
ghrepo.contents(component.path, "master", function(err, data) {
// fish out the markdown file from the folder
var subComponent;
for (var i = 0; i < data.length; i++) {
if(data[i].type === 'file' && data[i].name === component.name + '.md') {
subComponent = data[i];
break;
}
}
// if there's nothing in the folder for some reason, skip
if(!subComponent) {
return;
}
// if we don't know how to categorize this one, warn and skip
var subfolder = subfolderLookupTable[subComponent.name.replace(/\.md$/, '')];
if (!subfolder) {
console.warn("Warning: Don\'t know how to categorize " + subComponent.name + ', skipping..');
return;
}
// download the page contents
downloadPage(subComponent.path, function(pageContent) {
// save it to the extended folder
savePage({
destination: '../content/docs/reference/components/' + subfolder + '/' + subComponent.name,
content: pageContent,
order: order,
parent: '/content/docs/components.md',
title: subComponent.name.replace('.md', '')
}, function (err) {
if (err) throw err;
console.log('Successfully imported: ' + subComponent.name + ' (Extended)');
});
}, 1);
});
index++;
});
});
```
--------------------------------------------------------------------------------
/content/latest/blog/1056.md:
--------------------------------------------------------------------------------
```markdown
---
class: post-blog post-detail
type: Blog
$title: Better galleries and forms in AMP
id: 1056
author: Eric Lindley
role: Product Manager
origin: "https://amphtml.wordpress.com/2017/02/15/1056/amp/"
excerpt: "We just released a couple of small tweaks in the AMP library that can make a big difference in building a better user experience. First, a new JavaScript method (goToSlide) supports advancing <amp-carousel> to a particular slide on user tap/click. This enables significant UX enhancements to image galleries. Second, we’ve made it easier to integrate […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
date_data: 2017-02-15T10:29:48-08:00
$date: February 15, 2017
$parent: /content/latest/list-blog.html
components:
- social-share
---
<div class="amp-wp-article-content">
<p><strong>We just released a couple of small tweaks in the AMP library that can make a big difference in building a better user experience.</strong></p>
<p><strong>First, a new JavaScript method (</strong><a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md#advancing-amp-carouseltypeslides-to-a-specific-slide"><strong>goToSlide</strong></a><strong>) supports advancing </strong><a href="https://www.ampproject.org/docs/reference/components/amp-carousel"><strong><amp-carousel></strong></a><strong> to a particular slide on user tap/click. This enables significant UX enhancements to image galleries. Second, we’ve made it easier to integrate image thumbnails into forms with </strong><a href="https://www.ampproject.org/docs/reference/components/amp-selector"><strong><amp-selector></strong></a><strong>. These will be useful to a lot of developers in providing engaging content to users, as in image-rich journalism and e-commerce product pages.</strong></p>
<h2><strong>Using the goToSlide method: Carousel with thumbnails</strong></h2>
<p><strong>Until now, <amp-carousel> hasn’t supported some key interaction patterns for image galleries. How does the user know how many images are in this carousel? What if they want to jump directly to image five in a carousel of eight? How does the user even know the carousel is swipeable, if they don’t notice the arrow icon, or if it’s been hidden on the page?</strong></p>
<p><strong>The solution, for many developers and designers, is to provide image thumbnails to the user. Tapping on these thumbnails will automatically advance the carousel to a specific slide.</strong></p>
<p><div class="wp-image wp-image-1107 aligncenter"><amp-img layout='fixed' width="337" height="615" src="https://amphtml.files.wordpress.com/2017/02/ezgif-com-4626d203721.gif?w=337&h=615"></amp-img></p>
<p><strong>This is now possible in AMP, using the goToSlide method. You, as a developer, can trigger this method on user tap to advance a slide carousel to a particular slide.</strong></p>
<p><b>Example implementation</b></p>
<pre class="brush: xml; title: ; notranslate">
<!-- Primary Carousel -->
<amp-carousel id="carousel-with-preview"
width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="https://example.com/path/to?image=10"
width="400"
height="300"
layout="responsive"
alt="a sample image"></amp-img>
<amp-img src="https://example.com/path/to?image=11"
width="400"
height="300"
layout="responsive"
alt="a sample image"></amp-img>
</amp-carousel>
<!-- Carousel thumbnails -->
<div class="carousel-preview">
<button on="tap:carousel-with-preview.goToSlide(index=0)">
<amp-img src="https://example.com/path/to?image=10"
width="60"
height="40"
layout="responsive"
alt="a sample image"></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=1)">
<amp-img src="https://example.com/path/to?image=11"
width="60"
height="40"
layout="responsive"
alt="a sample image"></amp-img>
</button>
</div>
</pre>
<p> </p>
<p> </p>
<p><strong>If you have a lot of images, you can even put the thumbnails in a smaller scrollable carousel:</strong></p>
<center><div class="wp-image wp-image-1071 aligncenter"><amp-img layout='fixed' width="339" height="620" src="https://amphtml.files.wordpress.com/2017/02/sub-carousel.gif?w=339&h=620"></amp-img><i><strong>See AMP by Example for a </strong></i><a href="https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/"><b><i>sample implementation</i></b></a></center>
<p>This pattern pops up all over the web—e-commerce sites may find it especially useful on product pages.</p>
<h2><strong>Using <amp-selector>: Forms + image thumbnails</strong></h2>
<p><strong>The previous two examples focused on use cases where images are important to a story or immersive experience, but images can also be useful to help users make selections when filling out forms. Using <amp-selector> makes this markup easy and semantically consistent. As a result, users understand their form selections in context. The experience becomes more informative, engaging, and easier to accomplish.</strong></p>
<center><div class="wp-image wp-image-1073 aligncenter"><amp-img layout='fixed' width="341" height="635" src="https://amphtml.files.wordpress.com/2017/02/form.gif?w=341&h=635"></amp-img><i><strong>See AMP by Example for a </strong></i><a href="https://ampbyexample.com/samples_templates/product/"><b><i>sample implementation</i></b></a></center>
<center>
<h2><strong>Try it out!</strong></h2>
<p><strong>To get started with <amp-selector> and the goToSlide method, you can take a look at the documentation (</strong><a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md#advancing-amp-carouseltypeslides-to-a-specific-slide"><strong>goToSlide</strong></a><strong>, </strong><a href="https://www.ampproject.org/docs/reference/components/amp-selector"><strong><amp-selector></strong></a><strong>), check out working examples at AMP By Example (</strong><a href="https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/"><strong>goToSlide</strong></a><strong>, </strong><a href="https://ampbyexample.com/components/amp-selector/"><strong><amp-selector></strong></a><strong>), and give us feedback on what’s working and what’s not in the </strong><a href="https://github.com/ampproject/amphtml/issues/new"><strong>AMP GitHub repo</strong></a><strong>. We look forward to hearing from you!</strong></center>
<p><i><strong>Posted by Eric Lindley, Product Manager</strong></i></p><br />
</div>
```
--------------------------------------------------------------------------------
/assets/sass/_header.scss:
--------------------------------------------------------------------------------
```scss
.header {
backface-visibility: hidden;
background-color: $color-white;
box-shadow: $header-shadow;
font-size: 14px;
font-weight: 300;
transform: translateZ(0);
&.fixed {
left: 0;
position: fixed;
top: 0;
transform: translateY(0%);
transition: all .4s ease;
width: 100%;
z-index: 1000;
}
.promo {
align-items: center;
background: $gradient-anglebold;
display: flex;
font-weight: 300;
height: 60px;
justify-content: center;
overflow: hidden;
padding: 0 20px;
position: relative;
text-align: center;
text-transform: none;
.description, .link {
color: white;
line-height: 1.5;
position: relative;
}
.description {
font-size: 20px;
}
.link {
display: inline-block;
font-weight: 400;
margin-left: 20px;
text-transform: uppercase;
vertical-align: center;
&::after {
background: url(/static/img/arrow.svg) center/cover no-repeat;
content: '';
display: inline-block;
height: 10px;
margin-left: 10px;
width: 10px;
}
}
}
.promo-line {
left: 50px;
top: -50px;
position: absolute;
width: 150px;
}
.nav-container,
.left-nav,
.alt,
.tabs {
display: flex;
}
.nav-container {
justify-content: space-between;
position: relative;
}
.left-nav,
.alt {
justify-content: flex-start;
}
.left-nav {
align-items: center;
font-size: 20px;
font-weight: 300;
margin-left: 0;
.header-title {
background: url('/static/img/logo-blue.svg') no-repeat center left / 100%;
color: $color-midblue;
margin: 0;
padding: $header-padding $header-padding $header-padding ($header-padding + 20px);
text-transform: none;
white-space: nowrap;
width: auto;
&::after, &::before {
display: none;
}
}
}
.alt,
.tabs {
align-items: stretch;
}
.alt {
padding: 0;
&.right {
font-size: 15px;
}
}
.tabs {
justify-content: center;
margin-left: 60px;
}
.tab {
color: $color-black-95;
font-weight: 400;
margin: 0 4px;
padding: 6px;
position: relative;
transition: .1s ease color;
&::after {
background: $gradient-bold;
bottom: 0;
content: '';
height: 3px;
left: 20px;
margin: auto;
opacity: 0;
position: absolute;
right: 20px;
transition: .1s ease opacity;
}
&:hover,
&.active {
color: $color-ampblue;
}
&.active {
&::after {
opacity: 1;
}
&:hover {
&::after {
opacity: 0;
}
}
}
&.hamburger {
align-self: center;
background: url('/static/img/hamburger.svg') no-repeat center / 30px 24px transparent;
border: 0;
cursor: pointer;
display: none;
height: 40px;
margin: 0;
padding: 0;
width: 40px;
}
}
.tab {
padding: 6px 20px;
&::before {
bottom: 0;
box-shadow: $header-shadow;
content: '';
left: -10px;
opacity: 0;
position: absolute;
right: -10px;
top: 20px;
transition: opacity .2s ease-out;
}
> a {
color: inherit;
position: relative;
top: 19px;
}
.list-container > ul,
.sublist {
list-style: none;
}
.list-container,
.sublist {
opacity: 0;
pointer-events: none;
position: absolute;
}
.list-container {
left: -10px;
top: 100%;
transition: .2s ease-out;
z-index: -1;
}
.list-shadow {
bottom: -50px;
left: -50px;
overflow: hidden;
position: absolute;
right: -50px;
top: 0;
&::before {
bottom: 50px;
box-shadow: $header-shadow;
content: '';
left: 50px;
position: absolute;
right: 50px;
top: 0;
}
}
.list-container > ul {
background: $color-white;
min-width: 250px;
position: relative;
li {
box-sizing: border-box;
position: relative;
&.has-sublist {
&::after {
@include sprite(caret-right);
content: '';
position: absolute;
right: 20px;
top: 18px;
}
}
a {
@extend %text-base;
@extend %text-small;
display: block;
padding: 7.5px 30px;
}
&:hover {
background: #f8f8f8;
.sublist {
opacity: 1;
pointer-events: all;
}
}
&.external {
a {
background: no-repeat right 15px center / 12px;
}
&:hover {
a {
background-image: url('/static/img/ic_open_in_new_black.svg');
}
}
}
}
.sublist {
background: #f8f8f8;
box-shadow: $header-shadow;
right: 0;
top: 0;
transform: translateX(100%);
transition: opacity .3s;
li {
&:hover {
background: white;
}
a {
display: block;
font-size: 14px;
line-height: 1.3;
padding: 15px 35px;
}
}
}
}
&:hover {
&::before {
opacity: 1;
}
.list-container {
opacity: 1;
pointer-events: all;
z-index: 0;
}
}
}
@include min-screen($mobile-breakpoint + 1) {
.description.desktop-up {
display: inline-block;
}
}
@include max-screen($mobile-breakpoint) {
.container {
// aligns the hamburger
padding-right: 18px;
}
.promo {
.description, .link {
font-size: 16px;
}
.description.mobile-down {
display: inline-block;
}
}
.left-nav {
flex: 1 1 auto;
width: auto;
.header-title {
margin: 0;
padding: $header-mobile-padding $header-mobile-padding $header-mobile-padding ($header-mobile-padding + 20px);
width: auto;
}
}
div.tab,
.desktop {
display: none;
}
.tab.hamburger {
display: inline-block;
}
.promo {
.description, .link {
font-size: 14px;
}
}
}
}
.rtl .header {
.promo .link::after {
transform: rotate(180deg);
}
.tabs {
margin-right: 60px;
}
.tab {
.list-container {
left: auto;
right: -10px;
& > ul {
li.has-sublist::after {
left: 20px;
right: auto;
transform: rotate(180deg);
}
li.external a {
background-position: left 15px center;
}
.sublist {
left: 0;
transform: translateX(-100%);
right: auto;
}
}
}
}
}
```