This is page 10 of 24. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.url(parentDoc.pod_path,%20locale=usedDoc.locale).path%7D%7D?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/content/latest/latest.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title@: The Latest News
3 | $titles:
4 | breadcrumb@: The Latest
5 | $path: /{base}/
6 | $view: /views/base.html
7 |
8 | $localization:
9 | path: /{locale}/{base}/
10 |
11 | class: latest
12 | components:
13 | - carousel
14 | ---
15 | {% set latest = g.doc('/content/includes/latest.yaml', locale=doc.locale) %}
16 | {% set blog_list = g.doc('/content/includes/list-blog.yaml', locale=doc.locale) %}
17 | {% set events_list = g.doc('/content/includes/events.yaml', locale=doc.locale) %}
18 | {% set tweets = g.doc('/content/includes/tweets.yaml', locale=doc.locale) %}
19 |
20 | {% include "/views/partials/breadcrumb-nav.html" %}
21 | <div class="container lg">
22 | <div class="content">
23 | <section class="hero">
24 | <div class="img-wrap">
25 | <div class="lines lines-back">
26 | <amp-img
27 | noloading
28 | height=571
29 | width=571
30 | layout=responsive
31 | src="{{latest.hero.lines_back_img}}">
32 | </amp-img>
33 | </div>
34 | <div class="hero-image-background">
35 | <amp-img
36 | noloading
37 | height=977
38 | width=2106
39 | layout=responsive
40 | src="{{latest.hero.hero_img}}">
41 | </amp-img>
42 | </div>
43 | <div class="lines lines-front">
44 | <amp-img
45 | noloading
46 | height=571
47 | width=571
48 | layout=responsive
49 | src="{{latest.hero.lines_front_img}}">
50 | </amp-img>
51 | </div>
52 | <div class="text">
53 | <div class="label">{{_(latest.hero.sub_title)}}</div>
54 | <h1 class="title">{{_(latest.hero.title)}}</h1>
55 | </div>
56 | </div>
57 | </section>
58 |
59 | <div class="feeds">
60 | <div class="text">
61 | <div class="label">{{_(latest.hero.sub_title)}}</div>
62 | <h1 class="title">{{_(latest.hero.title)}}</h1>
63 | <!-- <ul class="inline-toc">
64 | <li><a href="{{g.url('/content/pages/list-event.html', locale=doc.locale).path}}">{{_(latest.feed.category_event)}}</a></li>
65 | <li><a href="{{g.url('/content/pages/roadmap.html', locale=doc.locale).path}}">{{_(latest.feed.category_roadmap)}}</a></li>
66 | <li><a href="{{g.url('/content/pages/list-blog.html', locale=doc.locale).path}}">{{_(latest.feed.category_blog)}}</a></li>
67 | </ul> -->
68 | </div>
69 | <section class="posts">
70 | <h2 class="posts-label">{{_(latest.feed.title)}}</h2>
71 | {% for post in events_list.upcoming_events %}
72 | {% if loop.index <= 2 %}
73 | {% with past = false, meta = true %}
74 | {% include "/views/partials/post-item.html" %}
75 | {% endwith %}
76 | {% endif %}
77 | {% endfor %}
78 | {% for post in blog_list.blogs %}
79 | {% if loop.index <= 3 %}
80 | {% with past = false, meta = true %}
81 | {% include "/views/partials/post-item.html" %}
82 | {% endwith %}
83 | {% endif %}
84 | {% endfor %}
85 | <a href="{{g.doc(latest.feed.more_posts_href, locale=doc.locale).url.path}}" class="feed-cta underlined cta">{{_(latest.feed.more_posts)}}</a>
86 | </section>
87 |
88 | <section class="twitter">
89 | <h4 class="twitter-label">{{_(latest.twitter.title)}}</h4>
90 | <div class="twitter-account">
91 | <div class="twitter-icon">
92 | <amp-img
93 | noloading
94 | height=35
95 | width=45
96 | src="{{latest.twitter.icon_twitter}}">
97 | </amp-img>
98 | </div>
99 | <a class="main-account" href={{latest.twitter.account_href}}>@{{latest.twitter.account_id}}</a>
100 | </div>
101 | <div class="desktop-feed">
102 | {% for tweet in tweets.tweets %}
103 | <div class="post-item tweet">
104 | <div class="post-meta">
105 | <span class="origin-name">{{tweet.origin_name}}</span>
106 | <a class="origin-id" href="{{tweet.origin_href}}">@{{tweet.origin_id}}</a>
107 | {% if tweet.retweet_id %}
108 | <span class="retweet">
109 | <amp-img
110 | noloading
111 | height=10
112 | width=16
113 | src="{{latest.twitter.icon_retweet}}">
114 | </amp-img>
115 | by
116 | <a class="retweet-id" href="{{tweet.retweet_href}}">@{{tweet.retweet_id}}</a>
117 | </span>
118 | {% endif %}
119 | </div>
120 | <p class="post-excerpt">{{tweet.text|safe}}</p>
121 | <div class="post-meta time">{{tweet.date}}</div>
122 | </div>
123 | {% endfor %}
124 | <a class="feed-cta underlined cta" href="{{latest.twitter.follow_href}}" target="_blank">{{_(latest.twitter.follow_cta)}}</a>
125 | </div>
126 | <div class="mobile-feed">
127 | <amp-carousel class="latest-carousel"
128 | height="350"
129 | layout="flex-item"
130 | type="slides">
131 |
132 | {% for tweet in tweets.tweets %}
133 | <div class="card-container">
134 | <div class="post-item tweet card">
135 | <div class="post-meta">
136 | <span class="origin-name">{{tweet.origin_name}}</span>
137 | <a class="origin-id" href="{{tweet.origin_href}}">@{{tweet.origin_id}}</a>
138 | {% if tweet.retweet_id %}
139 | <span class="retweet">
140 | <amp-img
141 | noloading
142 | height=10
143 | width=16
144 | src="{{latest.twitter.icon_retweet}}">
145 | </amp-img>
146 | by
147 | <a class="retweet-id" href="{{tweet.retweet_href}}">@{{tweet.retweet_id}}</a>
148 | </span>
149 | {% endif %}
150 | </div>
151 | <p class="post-excerpt">{{tweet.text|safe}}</p>
152 | <div class="post-meta time">{{tweet.date}}</div>
153 | </div>
154 | </div>
155 | {% endfor %}
156 | </amp-carousel>
157 | </div>
158 | </section>
159 | </div>
160 | </div>
161 | </div>
162 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/card_smb.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="142.12" height="91.32" viewBox="0 0 142.12 91.32">
2 | <defs>
3 | <linearGradient id="linear-gradient" x1="37.32" y1="71.82" x2="113.57" y2="71.82" gradientUnits="userSpaceOnUse">
4 | <stop offset="0" stop-color="#1c79c4"/>
5 | <stop offset="0.51" stop-color="#0389ff"/>
6 | <stop offset="1" stop-color="#0dd4ff"/>
7 | </linearGradient>
8 | <linearGradient id="linear-gradient-2" y1="59.13" x2="43.93" y2="59.13" gradientUnits="userSpaceOnUse">
9 | <stop offset="0" stop-color="#1c79c4"/>
10 | <stop offset="0.51" stop-color="#0389ff"/>
11 | <stop offset="1" stop-color="#0dd4ff"/>
12 | </linearGradient>
13 | <linearGradient id="linear-gradient-3" x1="36.17" y1="62.56" x2="114.68" y2="62.56" xlink:href="#linear-gradient"/>
14 | <linearGradient id="linear-gradient-4" x1="42.37" y1="26" x2="115.43" y2="26" xlink:href="#linear-gradient-2"/>
15 | <linearGradient id="linear-gradient-5" x1="42.78" y1="46.13" x2="114.65" y2="46.13" xlink:href="#linear-gradient-2"/>
16 | <linearGradient id="linear-gradient-6" x1="70.74" y1="70.65" x2="70.74" y2="44.51" xlink:href="#linear-gradient-2"/>
17 | <linearGradient id="linear-gradient-7" x1="88" y1="49.97" x2="97.78" y2="49.97" gradientUnits="userSpaceOnUse">
18 | <stop offset="0" stop-color="#1c79c4"/>
19 | <stop offset="1" stop-color="#0389ff"/>
20 | </linearGradient>
21 | <linearGradient id="linear-gradient-8" x1="100.15" y1="39.07" x2="109.93" y2="39.07" xlink:href="#linear-gradient-2"/>
22 | <linearGradient id="linear-gradient-9" x1="75.18" y1="52.14" x2="84.28" y2="52.14" xlink:href="#linear-gradient-2"/>
23 | <linearGradient id="linear-gradient-10" x1="41.54" y1="36.69" x2="73.03" y2="36.69" xlink:href="#linear-gradient-2"/>
24 | <linearGradient id="linear-gradient-11" x1="102.52" y1="6.7" x2="120.79" y2="6.7" xlink:href="#linear-gradient-2"/>
25 | <linearGradient id="linear-gradient-12" x1="41.5" y1="24.46" x2="120.03" y2="24.46" xlink:href="#linear-gradient-2"/>
26 | <linearGradient id="linear-gradient-13" x1="74.74" y1="45.39" x2="93.42" y2="-11.98" xlink:href="#linear-gradient-2"/>
27 | <linearGradient id="linear-gradient-14" x1="70.72" y1="59.18" x2="114.39" y2="59.18" xlink:href="#linear-gradient-2"/>
28 | </defs>
29 | <title>Asset 15</title>
30 | <g id="Layer_2" data-name="Layer 2">
31 | <g id="Art">
32 | <g>
33 | <g>
34 | <circle cx="25.14" cy="51.64" r="0.97" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
35 | <circle cx="29.32" cy="42.98" r="0.97" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
36 | <circle cx="33.78" cy="46.76" r="0.97" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
37 | <circle cx="36.72" cy="41.87" r="0.97" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
38 | <circle cx="36.3" cy="34.61" r="0.97" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
39 | </g>
40 | <g>
41 | <circle cx="121.53" cy="40.31" r="0.97" transform="translate(11.11 105.13) rotate(-48.76)" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
42 | <circle cx="130.38" cy="36.55" r="0.97" transform="translate(16.95 110.51) rotate(-48.76)" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
43 | <circle cx="131.25" cy="42.34" r="0.97" transform="translate(12.9 113.13) rotate(-48.76)" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
44 | <circle cx="136.69" cy="40.6" r="0.97" transform="translate(16.06 116.63) rotate(-48.76)" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
45 | <circle cx="141.15" cy="34.85" r="0.97" transform="translate(21.9 118.03) rotate(-48.76)" style="fill: #0dd4ff;opacity: 0.7000000000000001"/>
46 | </g>
47 | <g>
48 | <polygon points="37.32 77.88 87.07 52.86 113.57 66.29 64.91 90.77 37.32 77.88" style="fill-opacity: 0.7000000000000001;stroke: #fff;stroke-miterlimit: 10;fill: url(#linear-gradient)"/>
49 | <line x1="43.7" y1="47.7" x2="0.23" y2="70.57" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-2)"/>
50 | <polygon points="37.32 68.63 87.07 43.61 113.57 57.04 64.91 81.51 37.32 68.63" style="fill: #fff;fill-opacity: 0.7000000000000001;stroke-miterlimit: 10;stroke: url(#linear-gradient-3)"/>
51 | <polygon points="43.51 30.9 87.61 7.49 114.3 21.1 70.19 44.51 43.51 30.9" style="fill: none;stroke-miterlimit: 10;stroke-width: 1.05020245701054px;stroke: url(#linear-gradient-4)"/>
52 | <polyline points="114.16 21.04 114.16 47.78 70.69 70.65 43.28 57.04 43.28 31.17" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-5)"/>
53 | <line x1="70.74" y1="44.51" x2="70.74" y2="70.65" style="fill: none;stroke-miterlimit: 10;stroke-width: 0.806659519672394px;stroke: url(#linear-gradient-6)"/>
54 | <polyline points="88.5 61.54 88.5 43.56 97.28 39.2 97.28 56.82" style="fill: none;stroke-miterlimit: 10;stroke: url(#linear-gradient-7)"/>
55 | <polygon points="109.43 41.79 109.43 31.99 100.66 36.35 100.66 46.15 109.43 41.79" style="fill: none;stroke-miterlimit: 10;stroke: url(#linear-gradient-8)"/>
56 | <polygon points="83.78 54.86 83.78 45.06 75.68 49.41 75.68 59.22 83.78 54.86" style="fill: none;stroke-miterlimit: 10;stroke: url(#linear-gradient-9)"/>
57 | <polyline points="42.18 24.67 42.05 33.26 72.81 48.27" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-10)"/>
58 | <line x1="120.57" y1="2.14" x2="102.75" y2="11.25" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-11)"/>
59 | <polygon points="42.42 24.73 88.7 0.59 119.11 24.19 72.82 48.33 42.42 24.73" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-12)"/>
60 | <path d="M106.38,30.44,77.62,6.61l5.74-3,28.46,24.14Zm-7.45,3.9L70.36,10.41l-5.62,2.9L93.52,37.18ZM86,41.12,57.37,17l-5.69,3L80.54,44Z" style="opacity: 0.9;fill: url(#linear-gradient-13)"/>
61 | <line x1="70.95" y1="70.57" x2="114.15" y2="47.78" style="fill: #fff;stroke-miterlimit: 10;stroke: url(#linear-gradient-14)"/>
62 | </g>
63 | </g>
64 | </g>
65 | </g>
66 | </svg>
67 |
```
--------------------------------------------------------------------------------
/assets/img/sprite.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?><svg width="99" height="74" viewBox="0 0 99 74" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg data-name="Layer 1" width="15.53" height="8.3" viewBox="0 0 15.53 8.3" id="carat" x="35.36" y="54.2"><title>carat</title><path fill="none" stroke="#1c79be" stroke-miterlimit="10" stroke-width=".75" d="M15.27 8.03L7.62.53.27 8.03" data-name="Layer 1-2"/></svg><svg id="carat-down" viewBox="0 0 16 8.3" width="16" height="8.3" x="60" y="43.66"><style>.bst0{fill:none;stroke:#000333;stroke-width:.75;stroke-miterlimit:10}</style><title>carat</title><g id="bLayer_2"><path class="bst0" d="M.3.5L7.9 8 15.3.5" id="bLayer_1-2"/></g></svg><svg viewBox="0 0 6.12 11.88" width="6.12" height="11.88" id="caret-right" x="84" y="14.93"><defs><style>.ccls-1{fill:none;stroke:#464646;stroke-miterlimit:10;opacity:.3}</style></defs><title>Asset 1</title><g id="cLayer_2" data-name="Layer 2"><path class="ccls-1" d="M.37 11.55l5.08-5.61L.37.34" id="cLayer_1-2" data-name="Layer 1"/></g></svg><svg width="15.71" height="15.71" viewBox="0 0 15.71 15.71" id="close" x="19.65" y="54.2"><defs><symbol id="da" data-name="New Symbol 1" viewBox="0 0 15.71 15.71"><path fill="none" stroke="#ccc" stroke-miterlimit="10" d="M15.35.35l-15 15M.43.43l14.85 14.85"/></symbol></defs><use width="15.71" height="15.71" xlink:href="#da" data-name="Layer 2"/></svg><svg height="24" viewBox="0 0 24 24" width="24" id="lang-icon" x="60"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></svg><svg width="30" height="30" viewBox="0 0 30 30" id="logo-blue-standalone" x="30"><title>Slice 1</title><path d="M20.004 13.627l-6.25 10.47h-1.13l1.118-6.823-3.466.005h-.05a.568.568 0 0 1-.564-.57c0-.134.125-.363.125-.363l6.228-10.46 1.15.006-1.146 6.833 3.483-.004h.055c.312 0 .566.255.566.57a.56.56 0 0 1-.12.334zM14.896 0C6.67 0 0 6.716 0 15c0 8.285 6.67 15 14.896 15 8.228 0 14.896-6.715 14.896-15 0-8.284-6.668-15-14.896-15z" fill="#0379C4" fill-rule="evenodd"/></svg><svg width="6.05" height="10.71" viewBox="0 0 6.05 10.71" id="return" x="90.12" y="14.93"><path fill="none" stroke="#ccc" stroke-miterlimit="10" d="M5.7.35L.71 5.44l4.99 4.91" data-name="Layer 1"/></svg><svg id="search" viewBox="0 0 24.6 24.2" width="24.6" height="24.2" y="30"><style>.hst0{fill:none;stroke:#4d4d4d;stroke-miterlimit:10}</style><title>icon_search</title><ellipse transform="rotate(-45.001 13.451 10.816)" class="hst0" cx="13.5" cy="10.8" rx="5.8" ry="5.8"/><path class="hst0" d="M3.6 20.4l5.6-5.6"/></svg><svg width="19.65" height="19.04" viewBox="0 0 19.65 19.04" id="share" y="54.2"><title>Asset 14</title><path d="M10.88 3.64V1.87.36c0-.12.06-.33.12-.34a.49.49 0 0 1 .38.11Q13.56 2 15.72 4l3.68 3.21c.34.3.34.35 0 .64l-7.86 7a1 1 0 0 1-.22.19.45.45 0 0 1-.31 0 .32.32 0 0 1-.13-.25V12.2v-.88a12.28 12.28 0 0 0-1.5.08 11.24 11.24 0 0 0-8.1 5.6 15 15 0 0 0-.75 1.69 1.75 1.75 0 0 0-.06.18c0 .14-.11.24-.28.22S0 18.9 0 18.75c0-.56 0-1.12.06-1.68a19.72 19.72 0 0 1 1.07-5.49A12.52 12.52 0 0 1 4.89 6a9.83 9.83 0 0 1 5.85-2.35z" fill="#fff" data-name="Layer 2"/></svg><svg viewBox="0 0 14.93 14.93" width="14.93" height="14.93" id="share-close" x="84"><defs><style>.jcls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.32px}</style></defs><title>close</title><g id="jLayer_2" data-name="Layer 2"><g id="jLayer_1-2" data-name="Layer 1"><path class="jcls-1" d="M.47.47l14 14M14.47.47l-14 14"/></g></g></svg><svg viewBox="0 0 22.93 19.66" width="22.93" height="19.66" id="twitter" x="60" y="24"><defs><style>.kcls-1{fill:#ccc;fill-rule:evenodd}</style></defs><title>Asset 5</title><g id="kLayer_2" data-name="Layer 2"><path class="kcls-1" d="M20.23 3.11A4.93 4.93 0 0 0 22.3.36a9.13 9.13 0 0 1-3 1.2A4.58 4.58 0 0 0 15.88 0a4.84 4.84 0 0 0-4.7 5 5.19 5.19 0 0 0 .12 1.13A13.14 13.14 0 0 1 1.6.91 5.16 5.16 0 0 0 1 3.4a5 5 0 0 0 2.05 4.13 4.54 4.54 0 0 1-2.13-.62V7a4.9 4.9 0 0 0 3.78 4.84 4.38 4.38 0 0 1-1.24.16 4.43 4.43 0 0 1-.88-.09A4.75 4.75 0 0 0 7 15.37a9.13 9.13 0 0 1-5.88 2.13A8.88 8.88 0 0 1 0 17.43a12.83 12.83 0 0 0 7.21 2.23c8.66 0 13.39-7.56 13.39-14.12V4.9a9.84 9.84 0 0 0 2.35-2.57 9 9 0 0 1-2.7.78zm0 0" id="kLayer_1-2" data-name="Layer 1"/></g></svg><svg width="30" height="30" viewBox="0 0 30 30" id="video-play"><title>Group 2</title><g transform="translate(2 2)" fill="none" fill-rule="evenodd"><circle stroke="#FFF" stroke-width="3" cx="13" cy="13" r="13"/><path d="M19.172 13.197l-9.59 5.731V7.467l9.59 5.73z" fill="#FFF"/></g></svg><svg viewBox="0 0 24.03 24.03" width="24.03" height="24.03" id="wordpress" x="24.6" y="30"><defs><style>.mcls-1{fill:#ccc;fill-rule:evenodd}</style></defs><title>Asset 2</title><g id="mLayer_2" data-name="Layer 2"><path class="mcls-1" d="M22.55 6.25a8.91 8.91 0 0 1 .08 1.24 11.33 11.33 0 0 1-.92 4.3L18.06 22.4a12 12 0 0 0 4.5-16.15zm-10.32 6.82L8.62 23.54a12 12 0 0 0 7.38-.2 1 1 0 0 1-.09-.16l-3.68-10.11zm7.9-1.66a6.33 6.33 0 0 0-1-3.31A5.62 5.62 0 0 1 18 5.28a2.08 2.08 0 0 1 2-2.13h.15A12 12 0 0 0 2 5.42h.77C4 5.43 6 5.28 6 5.28a.5.5 0 0 1 .07 1s-.65.08-1.37.11l4.3 13 2.63-7.88-1.85-5.13c-.65 0-1.26-.11-1.26-.11a.5.5 0 0 1 .08-1s2 .15 3.16.15S15 5.28 15 5.28a.5.5 0 0 1 .07 1s-.65.08-1.37.11l4.3 12.9 1.2-4a11.23 11.23 0 0 0 .91-3.88zM0 12a12 12 0 0 0 6.77 10.82L1 7.12A11.94 11.94 0 0 0 0 12zm0 0" id="mLayer_1-2" data-name="Layer 1"/></g></svg></svg>
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/use_cases.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Use Cases
3 | $order: 2
4 | toc: true
5 | ---
6 | [TOC]
7 |
8 |
9 | This guide provides a set of common use cases for tracking user engagement:
10 |
11 | Want to add a use case?
12 | [Let us know.](https://github.com/ampproject/docs/issues/new)
13 |
14 | You can also contribute your own use cases;
15 | see [How to Contribute](https://www.ampproject.org/docs/support/contribute.html).
16 |
17 | ## Tracking page views
18 |
19 | Learn how to track page views using `amp-pixel` and `amp-analytics`.
20 |
21 | ### Using amp-pixel
22 |
23 | Send pageview data to a specified URL using
24 | [amp-pixel](/docs/reference/amp-pixel.html):
25 |
26 | [sourcecode:html]
27 | <amp-pixel src="https://foo.com/pixel?"></amp-pixel>
28 | [/sourcecode]
29 |
30 | ### Using amp-analytics - no vendor
31 |
32 | Send pageview data to a specified URL using
33 | [amp-analytics](/docs/reference/extended/amp-analytics.html):
34 |
35 | [sourcecode:html]
36 | <amp-analytics>
37 | <script type="application/json">
38 | {
39 | "requests": {
40 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
41 | },
42 | "vars": {
43 | "account": "ABC123"
44 | },
45 | "triggers": {
46 | "trackPageview": {
47 | "on": "visible",
48 | "request": "pageview"
49 | }
50 | }
51 | }
52 | </script>
53 | </amp-analytics>
54 | [/sourcecode]
55 |
56 | ### Using amp-analytics - googleanalytics
57 |
58 | Send pageview data to Google Analytics
59 | (see also [Page tracking in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
60 |
61 | [sourcecode:html]
62 | <amp-analytics type="googleanalytics" id="analytics1">
63 | <script type="application/json">
64 | {
65 | "vars": {
66 | "account": "UA-XXXXX-Y" // Replace with your property ID.
67 | },
68 | "triggers": {
69 | "trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
70 | "on": "visible",
71 | "request": "pageview"
72 | }
73 | }
74 | }
75 | </script>
76 | </amp-analytics>
77 | [/sourcecode]
78 |
79 | ## Tracking page clicks
80 |
81 | Learn how to track page clicks using
82 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
83 | sending event data to a specified URL, and to
84 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
85 |
86 | ### Sending data to specified URL
87 |
88 | The following example uses the `selector` attribute to send a `click` event
89 | to the specified URL everytime a user clicks on a link (`<a href>`):
90 |
91 | [sourcecode:html]
92 | <amp-analytics>
93 | <script type="application/json">
94 | {
95 | "requests": {
96 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
97 | },
98 | "vars": {
99 | "account": "ABC123"
100 | },
101 | "triggers": {
102 | "trackAnchorClicks": {
103 | "on": "click",
104 | "selector": "a",
105 | "request": "event",
106 | "vars": {
107 | "eventId": "42",
108 | "eventLabel": "clicked on a link"
109 | }
110 | }
111 | }
112 | }
113 | </script>
114 | </amp-analytics>
115 | [/sourcecode]
116 |
117 | ### Sending data to Google Analytics
118 |
119 | The following example uses the `selector` attribute of the `trigger`
120 | to send a `click` event to Google Analytics when a particular element is clicked
121 | (see also
122 | [AMP event tracking in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
123 |
124 | [sourcecode:html]
125 | <amp-analytics type="googleanalytics" id="analytics3">
126 | <script type="application/json">
127 | {
128 | "vars": {
129 | "account": "UA-XXXXX-Y" // Replace with your property ID.
130 | },
131 | "triggers": {
132 | "trackClickOnHeader" : {
133 | "on": "click",
134 | "selector": "#header",
135 | "request": "event",
136 | "vars": {
137 | "eventCategory": "ui-components",
138 | "eventAction": "header-click"
139 | }
140 | }
141 | }
142 | }
143 | </script>
144 | </amp-analytics>
145 | [/sourcecode]
146 |
147 | ## Tracking scrolling
148 |
149 | Track page scrolling using [amp-analytics](/docs/reference/extended/amp-analytics.html).
150 | The following example uses the `scrollspec` attribute to send a `scroll` event
151 | to the specified URL when page is scrolled vertically by 25%, 50% and 90%.
152 | The event also fires when the page is horizontally scrolled
153 | to 90% of `scroll` width:
154 |
155 | [sourcecode:html]
156 | <amp-analytics>
157 | <script type="application/json">
158 | {
159 | "requests": {
160 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
161 | },
162 | "vars": {
163 | "account": "ABC123"
164 | },
165 | "triggers": {
166 | "scrollPings": {
167 | "on": "scroll",
168 | "scrollSpec": {
169 | "verticalBoundaries": [25, 50, 90],
170 | "horizontalBoundaries": [90]
171 | }
172 | }
173 | }
174 | }
175 | </script>
176 | </amp-analytics>
177 | [/sourcecode]
178 |
179 | ## Tracking social interactions
180 |
181 | Learn how to track social interactions using
182 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
183 | sending event data to a specified URL, and to
184 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
185 |
186 | ### Sending data to specified URL
187 |
188 | The following example uses the `selector` attribute to send a `click` event
189 | to the specified URL everytime a user clicks on a tweet (`#tweet-link`):
190 |
191 | [sourcecode:html]
192 | <amp-analytics>
193 | <script type="application/json">
194 | {
195 | "requests": {
196 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
197 | },
198 | "vars": {
199 | "account": "ABC123"
200 | },
201 | "triggers": {
202 | "trackClickOnTwitterLink": {
203 | "on": "click",
204 | "selector": "#tweet-link",
205 | "request": "event",
206 | "vars": {
207 | "eventId": "43",
208 | "eventLabel": "clicked on a tweet link"
209 | }
210 | }
211 | }
212 | }
213 | </script>
214 | </amp-analytics>
215 | [/sourcecode]
216 |
217 | ### Sending data to Google Analytics
218 |
219 | The following example uses the `selector` attribute of the `trigger`
220 | to send an event when a particular social button is clicked
221 | (see also
222 | [AMP social interactions tracking in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
223 |
224 | [sourcecode:html]
225 | <amp-analytics type="googleanalytics" id="analytics4">
226 | <script type="application/json">
227 | {
228 | "vars": {
229 | "account": "UA-XXXXX-Y" // Replace with your property ID.
230 | },
231 | "triggers": {
232 | "trackClickOnTwitterLink" : {
233 | "on": "click",
234 | "selector": "#tweet-link",
235 | "request": "social",
236 | "vars": {
237 | "socialNetwork": "twitter",
238 | "socialAction": "tweet",
239 | "socialTarget": "https://www.examplepetstore.com"
240 | }
241 | }
242 | }
243 | }
244 | </script>
245 | </amp-analytics>
246 | [/sourcecode]
247 |
```
--------------------------------------------------------------------------------
/content/support/faqs/overview@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Visão geral das Accelerated Mobile Pages
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Envolvimento de empresas de tecnologia e plataformas
7 | link_url: /content/support/faqs/platform-involvement.md
8 |
9 | faq:
10 | - title@: O que é o projeto das Accelerated Mobile Pages?
11 | answer@: |
12 | O projeto das Accelerated Mobile Pages (AMP) é uma iniciativa de código aberto que surgiu de discussões entre editores e empresas de tecnologia sobre a necessidade de melhorar todo o ecossistema de conteúdo para dispositivos móveis para editores, plataformas de consumidor, criadores e usuários.
13 |
14 | Hoje, a expectativa é de que o conteúdo seja carregado muito rápido e que seja fácil de explorar. A realidade é que o carregamento pode demorar vários segundos ou, se o usuário abandona a página lenta, não chega a ser concluído. As Accelerated Mobile Pages são páginas da Web desenvolvidas para carregar quase instantaneamente. Elas são um passo importante na criação de uma Web para dispositivos móveis melhor para todos.
15 | - title@: Quais são os benefícios das Accelerated Mobile Pages?
16 | answer@: |
17 | A velocidade é importante, e ser instantâneo é o ideal. Pesquisas mostraram que taxas de rejeições mais elevadas estão associadas a páginas da Web de carregamento mais lento. O uso do formato AMP fará com que seja muito mais atrativo para os usuários consumir e interagir com mais conteúdo. No entanto, isso não se trata somente de velocidade e desempenho. Queremos também promover uma distribuição aprimorada para que os editores possam tirar proveito do potencial da Web aberta de modo que o conteúdo deles apareça em qualquer lugar rapidamente, em todas as plataformas e aplicativos. Isso pode levar a uma receita maior por meio de anúncios e assinaturas.
18 | - title@: Como as Accelerated Mobile Pages funcionam?
19 | answer@: |
20 | As Accelerated Mobile Pages são como qualquer outra página HTML. No entanto, elas têm um conjunto limitado de funcionalidades técnicas permitidas que são definidas e governadas pelas especificações de AMP de código aberto. Assim como todas as páginas da Web, as Accelerated Mobile Pages carregarão em qualquer navegador moderno ou WebView de aplicativo.
21 |
22 | Os arquivos AMP usam diversas abordagens técnicas e arquitetônicas que priorizam a velocidade a fim de proporcionar uma experiência mais rápida aos usuários. Os desenvolvedores de AMP podem usar uma biblioteca rica e crescente de componentes da Web que oferecem a capacidade de incorporar objetos de rich media, como vídeos e postagens sociais, exibir publicidade ou coletar dados para análises. O objetivo não é homogeneizar a aparência do conteúdo, mas sim construir um núcleo comum mais técnico entre as páginas de modo a acelerar os tempos de carregamento.
23 |
24 | Além disso, os arquivos das AMP podem ser armazenados em cache na nuvem a fim de reduzir o tempo que o conteúdo leva para chegar ao dispositivo móvel do usuário. Ao usar o formato AMP, os criadores disponibilizam o conteúdo dos arquivos das AMP para ser armazenado em cache por terceiros. Nesse tipo de estrutura, os editores continuam controlando o conteúdo, mas as plataformas podem facilmente armazenar em cache ou espelhar o conteúdo para oferecer a velocidade ideal aos usuários. O Google forneceu um cache que pode ser usado por qualquer pessoa sem custos, e todas as AMPs serão armazenadas pelo [cache de AMP do Google](https://developers.google.com/amp/cache/). Outras empresas também podem desenvolver seu próprio cache de AMP.
25 |
26 | Em resumo, o objetivo é que a combinação de uma funcionalidade técnica limitada com um sistema de distribuição desenvolvido com base no armazenamento em cache leve a páginas com melhor desempenho e maior desenvolvimento de público para os editores.
27 | - title@: Por que o projeto das Accelerated Mobile Pages tem uma abordagem de código aberto?
28 | answer@: |
29 | As empresas envolvidas no projeto querem fazer com que a Web para dispositivos móveis funcione melhor para todos, não somente para uma plataforma, um conjunto de tecnologias ou de editores. O uso de código aberto nesse projeto permite que as pessoas contribuam e compartilhem suas ideias e códigos para tornar a Web para dispositivos móveis mais rápida. Estamos somente no início dessa jornada e esperamos que outros editores e empresas de tecnologia se juntem a nós.
30 | - title@: Quem pode usar as Accelerated Mobile Pages?
31 | answer@: |
32 | O projeto está aberto a todos os envolvidos no ecossistema: editores, plataformas de consumidores e criadores. Para ter uma ideia de quem são algumas das empresas e sites que usam as AMP, acesse a [página "Quem"](/who).
33 | - title@: Quais são as consequências do uso das Accelerated Mobile Pages?
34 | answer@: |
35 | Ao usar o formato AMP, os criadores disponibilizam o conteúdo em arquivos das AMP para ser rastreado, indexado, exibido (sujeito ao protocolo de exclusão de robots) e armazenado em cache por terceiros.
36 | - title@: Que tipo de conteúdo funciona melhor com as Accelerated Mobile Pages?
37 | answer@: |
38 | O objetivo é que todo o conteúdo publicado (de notícias a vídeos, passando por blogs, fotos e GIFs) funcione com as Accelerated Mobile Pages.
39 | - title@: Como editor, é mais trabalhoso fazer com que o meu conteúdo funcione com as Accelerated Mobile Pages?
40 | answer@: |
41 | No geral, não muito. Como o "HTML das AMP" é construído inteiramente a partir de tecnologias da Web existentes, o processo de desenvolvimento espelha o que os editores já usam hoje. Os editores podem familiarizar-se com as especificações do HTML das AMP no GitHub. Para aqueles acostumados com o processo atual, não esperamos uma curva de aprendizagem significativa.
42 | - title@: Como um editor pode criar conteúdo em HTML das AMP?
43 | answer@: |
44 | Os editores e fornecedores de sistema de gerenciamento de conteúdo (CMS, na sigla em inglês) podem desenvolver uma integração com o CMS deles para gerar conteúdo AMP. A Automattic já publicou um [plugin de AMP para WordPress](https://wordpress.org/plugins/amp/), e esperamos que todos os sistemas de gerenciamento de conteúdo adicionem a compatibilidade com páginas HTML das AMP.
45 | ---
46 |
```
--------------------------------------------------------------------------------
/assets/sass/_grid.scss:
--------------------------------------------------------------------------------
```scss
1 | /*
2 | * Skeleton V2.0.4
3 | * Copyright 2014, Dave Gamache
4 | * www.getskeleton.com
5 | * Free to use under the MIT license.
6 | * http://www.opensource.org/licenses/mit-license.php
7 | * 12/29/2014
8 | */
9 |
10 | /* Grid
11 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
12 | .column,
13 | .columns {
14 | width: 100%;
15 | float: left;
16 | box-sizing: border-box;
17 |
18 | &.contained {
19 | img {
20 | max-width: 100%;
21 | }
22 | }
23 | }
24 |
25 | .row.table {
26 | @media (min-width: $mobile-breakpoint) {
27 | & > .columns {
28 | display: table-cell;
29 | float: none;
30 | vertical-align: middle;
31 |
32 | &:nth-child(2) {
33 | padding-left: 4%;
34 | }
35 | }
36 | }
37 | }
38 |
39 | .row:after,
40 | .u-cf {
41 | content: "";
42 | display: table;
43 | clear: both; }
44 |
45 | /* For devices larger than $mobile-breakpoint */
46 | @media (min-width: $mobile-breakpoint) {
47 | .column,
48 | .columns {
49 | margin-left: 4%; }
50 |
51 | .column:first-child,
52 | .columns:first-child {
53 | margin-left: 0; }
54 |
55 | .reversed {
56 | .column,
57 | .columns {
58 | margin-left: 0; }
59 |
60 | .column:first-child,
61 | .columns:first-child {
62 | float: right;
63 | margin-left: 4%; }
64 | }
65 |
66 | .one.column,
67 | .one.columns { width: 4.66666666667%; }
68 | .two.columns { width: 13.3333333333%; }
69 | .three.columns { width: 22%; }
70 | .four.columns { width: 30.6666666667%; }
71 | .five.columns { width: 39.3333333333%; }
72 | .six.columns { width: 48%; }
73 | .seven.columns { width: 56.6666666667%; }
74 | .eight.columns { width: 65.3333333333%; }
75 | .nine.columns { width: 74.0%; }
76 | .ten.columns { width: 82.6666666667%; }
77 | .eleven.columns { width: 91.3333333333%; }
78 | .twelve.columns { width: 100%; margin-left: 0; }
79 |
80 | .one-third.column { width: 30.6666666667%; }
81 | .two-thirds.column { width: 65.3333333333%; }
82 |
83 | .one-half.column { width: 48%; }
84 |
85 | /* Offsets */
86 | .offset-by-one.column,
87 | .offset-by-one.columns { margin-left: 8.66666666667%; }
88 | .offset-by-two.column,
89 | .offset-by-two.columns { margin-left: 17.3333333333%; }
90 | .offset-by-three.column,
91 | .offset-by-three.columns { margin-left: 26%; }
92 | .offset-by-four.column,
93 | .offset-by-four.columns { margin-left: 34.6666666667%; }
94 | .offset-by-five.column,
95 | .offset-by-five.columns { margin-left: 43.3333333333%; }
96 | .offset-by-six.column,
97 | .offset-by-six.columns { margin-left: 52%; }
98 | .offset-by-seven.column,
99 | .offset-by-seven.columns { margin-left: 60.6666666667%; }
100 | .offset-by-eight.column,
101 | .offset-by-eight.columns { margin-left: 69.3333333333%; }
102 | .offset-by-nine.column,
103 | .offset-by-nine.columns { margin-left: 78.0%; }
104 | .offset-by-ten.column,
105 | .offset-by-ten.columns { margin-left: 86.6666666667%; }
106 | .offset-by-eleven.column,
107 | .offset-by-eleven.columns { margin-left: 95.3333333333%; }
108 |
109 | .offset-by-one-third.column,
110 | .offset-by-one-third.columns { margin-left: 34.6666666667%; }
111 | .offset-by-two-thirds.column,
112 | .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
113 |
114 | .offset-by-one-half.column,
115 | .offset-by-one-half.columns { margin-left: 52%; }
116 |
117 | }
118 |
119 | /* For devices larger than $mobile-breakpoint */
120 | @media (max-width: $mobile-breakpoint) {
121 | .row.row-sm {
122 |
123 | .column,
124 | .columns {
125 | margin-left: 4%; }
126 | .column:first-child,
127 | .columns:first-child {
128 | margin-left: 0; }
129 |
130 | .one.column,
131 | .one.columns { width: 4.66666666667%; }
132 | .two.columns { width: 13.3333333333%; }
133 | .three.columns { width: 22%; }
134 | .four.columns { width: 30.6666666667%; }
135 | .five.columns { width: 39.3333333333%; }
136 | .six.columns { width: 48%; }
137 | .seven.columns { width: 56.6666666667%; }
138 | .eight.columns { width: 65.3333333333%; }
139 | .nine.columns { width: 74.0%; }
140 | .ten.columns { width: 82.6666666667%; }
141 | .eleven.columns { width: 91.3333333333%; }
142 | .twelve.columns { width: 100%; margin-left: 0; }
143 |
144 | .one-third.column { width: 30.6666666667%; }
145 | .two-thirds.column { width: 65.3333333333%; }
146 |
147 | .one-half.column { width: 48%; }
148 |
149 | /* Offsets */
150 | .offset-by-one.column,
151 | .offset-by-one.columns { margin-left: 8.66666666667%; }
152 | .offset-by-two.column,
153 | .offset-by-two.columns { margin-left: 17.3333333333%; }
154 | .offset-by-three.column,
155 | .offset-by-three.columns { margin-left: 26%; }
156 | .offset-by-four.column,
157 | .offset-by-four.columns { margin-left: 34.6666666667%; }
158 | .offset-by-five.column,
159 | .offset-by-five.columns { margin-left: 43.3333333333%; }
160 | .offset-by-six.column,
161 | .offset-by-six.columns { margin-left: 52%; }
162 | .offset-by-seven.column,
163 | .offset-by-seven.columns { margin-left: 60.6666666667%; }
164 | .offset-by-eight.column,
165 | .offset-by-eight.columns { margin-left: 69.3333333333%; }
166 | .offset-by-nine.column,
167 | .offset-by-nine.columns { margin-left: 78.0%; }
168 | .offset-by-ten.column,
169 | .offset-by-ten.columns { margin-left: 86.6666666667%; }
170 | .offset-by-eleven.column,
171 | .offset-by-eleven.columns { margin-left: 95.3333333333%; }
172 |
173 | .offset-by-one-third.column,
174 | .offset-by-one-third.columns { margin-left: 34.6666666667%; }
175 | .offset-by-two-thirds.column,
176 | .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
177 |
178 | .offset-by-one-half.column,
179 | .offset-by-one-half.columns { margin-left: 52%; }
180 |
181 | }
182 | }
183 |
184 | //Bootstrap import for quote section
185 | .col-sx-4, .col-md-2{
186 | position: relative;
187 | min-height: 1px;
188 | padding-right: 15px;
189 | padding-left: 15px;
190 | float:left;
191 | }
192 |
193 | .col-xs-4 {
194 | width: 33.33333333%;
195 | }
196 |
197 | @media (min-width: 992px) {
198 | .col-md-2 {
199 | width: 16.66666667%;
200 | }
201 | }
202 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Présentation des pages Accelerated Mobile Pages
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Participation des plates-formes et des entreprises technologiques
7 | link_url: /content/support/faqs/platform-involvement.md
8 |
9 | faq:
10 | - title@: En quoi consiste le projet Accelerated Mobile Pages ?
11 | answer@: |
12 | Le projet Accelerated Mobile Pages (AMP) est une initiative Open Source née de discussions entre des éditeurs et des entreprises technologiques évoquant la nécessité d'améliorer l'ensemble de l'écosystème du contenu mobile pour tous : éditeurs, plates-formes pour les consommateurs, créateurs et mobinautes.
13 |
14 | Aujourd'hui, les gens veulent un contenu qui se charge ultra-rapidement et soit facile à explorer. Dans les faits, plusieurs secondes sont souvent nécessaires au chargement d'un contenu, si tant est que le mobinaute accepte de rester sur une page lente. Les pages Accelerated Mobile Pages sont des pages Web conçues pour un chargement presque instantané. Elles ont pour objectif d'améliorer l'Internet mobile pour tous.
15 | - title@: Quels sont les avantages des pages Accelerated Mobile Pages ?
16 | answer@: |
17 | La vitesse compte, l'instantané fait rêver. D'après les études réalisées à ce sujet, les taux de rebond sont plus élevés pour les pages Web au chargement plus lent. Grâce au format AMP, les mobinautes seront plus enclins à consommer et auront envie de consulter davantage de contenu. Mais la vitesse et les performances ne sont pas les seuls critères. Nous souhaitons également améliorer la diffusion, afin que les éditeurs puissent tirer parti du potentiel du Web ouvert avec un contenu qui s'affiche partout rapidement, sur les plates-formes et les applications. À la clé ? Plus de revenus grâce aux annonces et aux abonnements.
18 | - title@: Comment fonctionnent les pages Accelerated Mobile Pages ?
19 | answer@: |
20 | Les pages Accelerated Mobile Pages sont des pages HTML qui contiennent un ensemble limité de fonctionnalités techniques autorisées, définies et régies par la spécification AMP Open Source. À l'instar de toutes les pages Web, les pages Accelerated Mobile Pages se chargent dans tout navigateur récent et dans tout affichage Web d'application.
21 |
22 | Les fichiers AMP s'appuient sur diverses approches techniques et architecturales qui privilégient la vitesse pour offrir une expérience plus rapide aux mobinautes. Les développeurs AMP peuvent utiliser une bibliothèque de plus en plus fournie de composants Web qui offrent la possibilité d'intégrer des objets rich media, tels que des vidéos et des posts sur les réseaux sociaux, d'afficher des annonces ou de recueillir des statistiques. Le but n'est pas d'homogénéiser l'aspect du contenu, mais plutôt de construire un noyau technique plus commun entre les pages pour accélérer les temps de chargement.
23 |
24 | En outre, les fichiers AMP peuvent être mis en cache dans le cloud afin que le contenu soit plus rapidement disponible sur les appareils mobiles. En utilisant le format AMP, les créateurs permettent aussi à des tiers de mettre en cache le contenu des fichiers AMP. Dans ce type d'infrastructure, les éditeurs continuent de contrôler leur contenu, mais les plates-formes peuvent facilement mettre en cache le contenu ou créer un contenu miroir pour le proposer aux mobinautes en un temps record. Le [cache AMP Google](https://developers.google.com/amp/cache/) peut être utilisé pour toutes les pages AMP, par n'importe qui et gratuitement. Les entreprises peuvent aussi développer leur propre cache AMP.
25 |
26 | En résumé, la combinaison de fonctionnalités techniques limitées avec un système de diffusion basé sur la mise en cache doit permettre de créer des pages plus performantes et d'offrir un public plus large aux éditeurs.
27 | - title@: Pourquoi choisir une approche Open Source pour le projet Accelerated Mobile Pages ?
28 | answer@: |
29 | Les entreprises impliquées dans le projet veulent améliorer universellement le fonctionnement du Web pour mobile, et pas uniquement pour une plate-forme, un ensemble de technologies ou un groupe d'éditeurs spécifiques. En choisissant une approche Open Source, les gens peuvent partager leurs idées et leur code afin de rendre le Web pour mobile plus rapide. Nous ne sommes qu'au début de cette aventure, et nous nous réjouissons de la contribution future d'autres éditeurs et entreprises technologiques.
30 | - title@: Qui peut utiliser les pages Accelerated Mobile Pages ?
31 | answer@: |
32 | Le projet est ouvert à tous les acteurs de l'écosystème : éditeurs, plates-formes pour les consommateurs et créateurs. Pour connaître certains des sites et des entreprises qui utilisent les pages AMP, consultez la page [Qui](/who).
33 | - title@: Quelles sont les conséquences de l'utilisation de pages Accelerated Mobile Pages ?
34 | answer@: |
35 | En utilisant le format AMP, les créateurs permettent l'exploration, l'indexation et l'affichage (soumis au protocole d'exclusion des robots) du contenu des fichiers AMP, ainsi que sa mise en cache par des tiers.
36 | - title@: Quel type de contenu fonctionne le mieux avec les pages Accelerated Mobile Pages ?
37 | answer@: |
38 | L'objectif est que l'ensemble du contenu publié, des actualités aux vidéos, en passant par les blogs, les photos et les GIF, fonctionne à l'aide de pages Accelerated Mobile Pages.
39 | - title@: En tant qu'éditeur, le fait de créer des pages Accelerated Mobile Pages implique-t-il plus de travail ?
40 | answer@: |
41 | Pas vraiment. L'AMP HTML ne reposant sur aucune nouvelle technologie Web, le processus de développement reflète ce que les éditeurs utilisent déjà aujourd'hui. Les éditeurs peuvent se familiariser avec les spécifications AMP HTML sur GitHub. Les personnes maîtrisant déjà le processus actuel ne découvriront pas grand-chose de plus.
42 | - title@: Comment un éditeur peut-il convertir du contenu en AMP HTML ?
43 | answer@: |
44 | Les éditeurs et fournisseurs de systèmes de gestion de contenu (CMS) peuvent développer une intégration avec leur CMS pour générer du contenu AMP. Automattic a déjà publié un [plug-in AMP pour WordPress](https://wordpress.org/plugins/amp/) et nous espérons que tous les systèmes de gestion de contenu finiront par accepter les pages AMP HTML.
45 |
46 | ---
47 |
```
--------------------------------------------------------------------------------
/content/includes/roadmap.yaml:
--------------------------------------------------------------------------------
```yaml
1 | type: Roadmap
2 | year: 2017
3 | quarter: Q1
4 | outlook:
5 | current: Mid-Q1 2017
6 | updated: February 17, 2017
7 | excerpt: Excerpt of the roadmap here.
8 | stages:
9 | "6": Launched / Stable
10 | "5": Code Complete / Experimental
11 | "4": Pull Request (Changelist) Created
12 | "3": Coding Started
13 | "2": Intent to Implement (Feature Description) Posted
14 | "1": In Planning and Design
15 | "0": Not Started
16 | sections:
17 | 0_format:
18 | title: Format
19 | description: Enrich AMP's core, including its web components library, to grow support for content features
20 | themes:
21 | - Make it easier to build well-styled AMP pages
22 | - Provide initial support for data entry use cases (forms and searchboxes)
23 | - Broaden support to include a variety of content formats, including news articles, recipes, local listings, product listings, and more
24 | - Further alignment with Progressive Web Apps (PWAs)
25 | - Support for more engaging video experiences
26 | quarter:
27 | "0":
28 | - "[Autocomplete for form input](https://github.com/ampproject/amphtml/issues/6625)"
29 | - "[“Smart” buttons](https://github.com/ampproject/amphtml/issues/3459)"
30 | "1":
31 | - "[Tabbed selection interface](https://github.com/ampproject/amphtml/issues/7512)"
32 | - "[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)"
33 | - "[Support for parallax scrolling](https://github.com/ampproject/amphtml/issues/1443)"
34 | - "[Batch fetching and caching of dynamic data](https://github.com/ampproject/amphtml/issues/7463)"
35 | - "[“Hero” mode for video players](https://github.com/ampproject/amphtml/issues/7510)"
36 | "4":
37 | - "[**amp-lightbox** improvements](https://github.com/ampproject/amphtml/issues/4152)"
38 | - "[AMP Start out-of-the-box templates and styling](https://github.com/ampproject/amphtml/issues/2851)"
39 | "5":
40 | - "[Provide greater interactivity support by introducing a mechanism to bind element behavior to user actions](https://www.ampproject.org/docs/reference/components/amp-bind)"
41 | "6":
42 | - "[Native app install banner [**amp-app-banner**]](https://www.ampproject.org/docs/reference/components/amp-app-banner)"
43 | - "[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)"
44 | - "[Support for enhanced form inputs (images, etc) [**amp-selector**]](https://www.ampproject.org/pl/docs/reference/components/amp-selector)"
45 | forecast:
46 | - Geo-variation support
47 | - Offline support and improved intermittent connectivity handling
48 | 1_analytics:
49 | title: Analytics
50 | description: Enable analytics on AMP pages and provide interoperability with data analysis solutions
51 | themes:
52 | - Deepen support for basic analytics such as new event triggers, variables, and flexibility in constructing hit requests
53 | - Provide support for e-commerce analytics
54 | - Provide support for video analytics
55 | quarter:
56 | "1":
57 | - Expansion of **amp-analytics** capabilities for e-commerce use cases
58 | - Expose events from video players to **amp-analytics**
59 | "4":
60 | - "[Share-tracking support in **amp-analytics**](https://github.com/ampproject/amphtml/issues/3135)"
61 | - "[Filter support for variables in amp-analytics](https://github.com/ampproject/amphtml/issues/2198)"
62 | "5":
63 | - "[Outgoing link URL replacements, including Client ID](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#overview)"
64 | - "[Form URL replacements, including Client ID](https://www.ampproject.org/docs/reference/components/amp-form#variable-substitutions)"
65 | - "[Visibility v2 using Intersection Observer](https://github.com/ampproject/amphtml/issues/5697)"
66 | forecast:
67 | - Expose batched interaction data (e.g. scroll events) to **amp-analytics**
68 | - Offline support (i.e. enable queuing until back online)
69 | 2_ads:
70 | title: Ads
71 | description: Enable ads on AMP pages, provide interoperability with ad technology providers, and drive ad ecosystem innovation with the AMP format
72 | themes:
73 | - Improve the overall ad loading and user experience on AMP
74 | - Enable and grow A4A creative format demand across publishers and advertisers
75 | - Extend A4A usage beyond AMP pages
76 | - Enhance AMP-format landing pages for the ads use case
77 | quarter:
78 | "1":
79 | - "[Optimize rendering of 3P ads in AMP](https://github.com/ampproject/amphtml/issues/7500)"
80 | "4":
81 | - "[Support serving A4A creatives in non-AMP Pages](https://github.com/ampproject/amphtml/issues/3829)"
82 | "5":
83 | - "[Allow for serving ads that are in AMP format (A4A - AMP for Ads)](https://github.com/ampproject/amphtml/issues/3133)"
84 | "6":
85 | - "[Improvement to ad loading experience](https://github.com/ampproject/amphtml/issues/5918)"
86 | - "[Show default fallback when no ad is available to serve](https://github.com/ampproject/amphtml/issues/3817)"
87 | forecast:
88 | - Enable A4A creative demand across the buyer and publisher ecosystem
89 | - Enable deeper integration of ads with AMP-format landing pages across buyside and sellside systems
90 | 3_access:
91 | title: Access
92 | description: Enable login-based access to AMP pages
93 | themes:
94 | - Continue to improve paywall and subscription support in AMP
95 | - Make sign-in and payment for content a seamless and joyful experience in AMP
96 | quarter:
97 | "4":
98 | - "[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)"
99 | forecast:
100 | - Enable better mobile payments with AMP
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/adtech_icon_revenue.svg:
--------------------------------------------------------------------------------
```
1 | <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
1 | ---
2 | $title@: Descripción general de Accelerated Mobile Pages
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Participación de plataformas y empresas tecnológicas
7 | link_url: /content/support/faqs/platform-involvement.md
8 |
9 | faq:
10 | - title@: ¿Qué es el proyecto Accelerated Mobile Pages?
11 | answer@: |
12 | 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.
13 |
14 | 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.
15 | - title@: ¿Cuáles son las ventajas de Accelerated Mobile Pages?
16 | answer@: |
17 | 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.
18 | - title@: ¿Cómo funciona Accelerated Mobile Pages?
19 | answer@: |
20 | 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.
21 |
22 | 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.
23 |
24 | 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.
25 |
26 | 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.
27 | - title@: ¿Por qué se utiliza software libre en el proyecto Accelerated Mobile Pages?
28 | answer@: |
29 | 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.
30 | - title@: ¿Quién puede usar Accelerated Mobile Pages?
31 | answer@: |
32 | 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).
33 | - title@: ¿Cuáles son las consecuencias de utilizar Accelerated Mobile Pages?
34 | answer@: |
35 | 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é.
36 | - title@: ¿Qué tipo de contenido funciona mejor con Accelerated Mobile Pages?
37 | answer@: |
38 | 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.
39 | - title@: Como editor, ¿me llevará más trabajo hacer que mi contenido funcione con Accelerated Mobile Pages?
40 | answer@: |
41 | 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.
42 | - title@: ¿Cómo puede un editor generar contenido en AMP HTML?
43 | answer@: |
44 | 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.
45 | ---
46 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Accelerated Mobile Pages – Überblick
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Beteiligung von Plattformen und Technologieunternehmen
7 | link_url: /content/support/faqs/platform-involvement.md
8 |
9 | faq:
10 | - title@: Was ist das Projekt "Accelerated Mobile Pages"?
11 | answer@: |
12 | 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.
13 |
14 | 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.
15 | - title@: Welche Vorteile bieten Accelerated Mobile Pages?
16 | answer@: |
17 | 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.
18 | - title@: Wie funktionieren Accelerated Mobile Pages?
19 | answer@: |
20 | 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.
21 |
22 | 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.
23 |
24 | 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.
25 |
26 | 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.
27 | - title@: Warum wird für das Projekt "Accelerated Mobile Pages" ein Open-Source-Ansatz genutzt?
28 | answer@: |
29 | 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.
30 | - title@: Wer kann Accelerated Mobile Pages nutzen?
31 | answer@: |
32 | 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).
33 | - title@: Welche Auswirkungen hat die Nutzung von Accelerated Mobile Pages?
34 | answer@: |
35 | 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.
36 | - title@: Welche Inhalte sind am besten für Accelerated Mobile Pages geeignet?
37 | answer@: |
38 | 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.
39 | - title@: Macht es viel Arbeit, wenn ich meine Inhalte als Webpublisher oder Verlag für Accelerated Mobile Pages anpassen möchte?
40 | answer@: |
41 | 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.
42 | - title@: Wie können Webpublisher und Verlage ihre Inhalte in AMP-HTML übertragen?
43 | answer@: |
44 | 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.
45 | ---
46 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Panoramica delle pagine AMP (Accelerated Mobile Pages)
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Coinvolgimento di piattaforme e aziende tecnologiche
7 | link_url: /content/support/faqs/platform-involvement.md
8 |
9 | faq:
10 | - title@: Che cos'è il progetto Accelerated Mobile Pages?
11 | answer@: |
12 | 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.
13 |
14 | 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.
15 | - title@: Quali sono i vantaggi del formato Accelerated Mobile Pages?
16 | answer@: |
17 | 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.
18 | - title@: Come funzionano le pagine Accelerated Mobile Pages?
19 | answer@: |
20 | 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.
21 |
22 | 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.
23 |
24 | 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.
25 |
26 | 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.
27 | - title@: Perché il progetto Accelerated Mobile Pages adotta un approccio open source?
28 | answer@: |
29 | 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.
30 | - title@: Chi può utilizzare il formato Accelerated Mobile Pages?
31 | answer@: |
32 | 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).
33 | - title@: Quali sono le conseguenze dell'utilizzo del formato Accelerated Mobile Pages?
34 | answer@: |
35 | 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.
36 | - title@: Quali tipi di contenuti funzionano meglio con il formato Accelerated Mobile Pages?
37 | answer@: |
38 | Lo scopo è che tutti i contenuti pubblicati (notizie, video, blog, foto, GIF e così via) funzionino con il formato Accelerated Mobile Pages.
39 | - title@: Adattare i miei contenuti al formato Accelerated Mobile Pages mi comporta più lavoro come publisher?
40 | answer@: |
41 | 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.
42 | - title@: Come fanno i publisher ad adattare i contenuti alla specifica HTML AMP?
43 | answer@: |
44 | 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.
45 | ---
46 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/use_cases@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Casos de uso
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | Este guia oferece um conjunto de casos de uso comuns para rastrear o envolvimento do usuário:
9 |
10 | Deseja adicionar um caso de uso?
11 | [Entre em contato.](https://github.com/ampproject/docs/issues/new)
12 |
13 | Você também pode colaborar com seus próprios casos;
14 | consulte [Como colaborar](https://www.ampproject.org/docs/support/contribute.html).
15 |
16 | ## Rastrear visualizações de páginas
17 |
18 | Saiba como rastrear visualizações de páginas usando `amp-pixel` e `amp-analytics`.
19 |
20 | ### Usando amp-pixel
21 |
22 | Envie dados de page view a um URL específico usando
23 | [amp-pixel](/docs/reference/amp-pixel.html):
24 |
25 | [sourcecode:html]
26 | <amp-pixel src="https://foo.com/pixel?"></amp-pixel>
27 | [/sourcecode]
28 |
29 | ### Usando amp-analytics - sem fornecedor
30 |
31 | Envie dados de page view a um URL específico usando
32 | [amp-analytics](/docs/reference/extended/amp-analytics.html):
33 |
34 | [sourcecode:html]
35 | <amp-analytics>
36 | <script type="application/json">
37 | {
38 | "requests": {
39 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
40 | },
41 | "vars": {
42 | "account": "ABC123"
43 | },
44 | "triggers": {
45 | "trackPageview": {
46 | "on": "visible",
47 | "request": "pageview"
48 | }
49 | }
50 | }
51 | </script>
52 | </amp-analytics>
53 | [/sourcecode]
54 |
55 | ### Usando amp-analytics - googleanalytics
56 |
57 | Envie dados de page view ao Google Analytics
58 | (veja também [Rastreamento de páginas no Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
59 |
60 | [sourcecode:html]
61 | <amp-analytics type="googleanalytics" id="analytics1">
62 | <script type="application/json">
63 | {
64 | "vars": {
65 | "account": "UA-XXXXX-Y" // Replace with your property ID.
66 | },
67 | "triggers": {
68 | "trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
69 | "on": "visible",
70 | "request": "pageview"
71 | }
72 | }
73 | }
74 | </script>
75 | </amp-analytics>
76 | [/sourcecode]
77 |
78 | ## Rastrear cliques de páginas
79 |
80 | Saiba como rastrear cliques de páginas usando
81 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
82 | envio de dados de evento a um URL específico e ao
83 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
84 |
85 | ### Envio de dados a um URL específico
86 |
87 | O exemplo a seguir usa o atributo `selector` para enviar um evento de `click`
88 | ao URL especificado todas as vezes que um usuário clicar em um link (`<a href>`):
89 |
90 | [sourcecode:html]
91 | <amp-analytics>
92 | <script type="application/json">
93 | {
94 | "requests": {
95 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
96 | },
97 | "vars": {
98 | "account": "ABC123"
99 | },
100 | "triggers": {
101 | "trackAnchorClicks": {
102 | "on": "click",
103 | "selector": "a",
104 | "request": "event",
105 | "vars": {
106 | "eventId": "42",
107 | "eventLabel": "clicked on a link"
108 | }
109 | }
110 | }
111 | }
112 | </script>
113 | </amp-analytics>
114 | [/sourcecode]
115 |
116 | ### Envio de dados ao Google Analytics
117 |
118 | O exemplo a seguir usa o atributo `selector` do `trigger`
119 | para enviar um evento `click` ao Google Analytics quando um elemento específico é clicado
120 | (veja também
121 | [Rastreamento de eventos AMP no Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
122 |
123 | [sourcecode:html]
124 | <amp-analytics type="googleanalytics" id="analytics3">
125 | <script type="application/json">
126 | {
127 | "vars": {
128 | "account": "UA-XXXXX-Y" // Replace with your property ID.
129 | },
130 | "triggers": {
131 | "trackClickOnHeader" : {
132 | "on": "click",
133 | "selector": "#header",
134 | "request": "event",
135 | "vars": {
136 | "eventCategory": "ui-components",
137 | "eventAction": "header-click"
138 | }
139 | }
140 | }
141 | }
142 | </script>
143 | </amp-analytics>
144 | [/sourcecode]
145 |
146 | ## Rastrear rolagem
147 |
148 | Rastreie a rolagem de páginas com [amp-analytics](/docs/reference/extended/amp-analytics.html).
149 | O exemplo a seguir usa o atributo `scrollspec` para enviar um evento de `scroll`
150 | ao URL especificado quando uma página é rolada verticalmente em 25%, 50% e 90%.
151 | O evento também é acionado quando a página é rolada horizontalmente
152 | em 90% da largura de `scroll`:
153 |
154 | [sourcecode:html]
155 | <amp-analytics>
156 | <script type="application/json">
157 | {
158 | "requests": {
159 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
160 | },
161 | "vars": {
162 | "account": "ABC123"
163 | },
164 | "triggers": {
165 | "scrollPings": {
166 | "on": "scroll",
167 | "scrollSpec": {
168 | "verticalBoundaries": [25, 50, 90],
169 | "horizontalBoundaries": [90]
170 | }
171 | }
172 | }
173 | }
174 | </script>
175 | </amp-analytics>
176 | [/sourcecode]
177 |
178 | ## Rastrear interações sociais
179 |
180 | Saiba como rastrear interações sociais usando
181 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
182 | enviando dados de evento para um URL específico e para o
183 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
184 |
185 | ### Envio de dados a um URL específico
186 |
187 | O exemplo a seguir usa o atributo `selector` para enviar um evento de `click`
188 | ao URL especificado todas as vezes que um usuário clicar em um tweet (`#tweet-link`):
189 |
190 | [sourcecode:html]
191 | <amp-analytics>
192 | <script type="application/json">
193 | {
194 | "requests": {
195 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
196 | },
197 | "vars": {
198 | "account": "ABC123"
199 | },
200 | "triggers": {
201 | "trackClickOnTwitterLink": {
202 | "on": "click",
203 | "selector": "#tweet-link",
204 | "request": "event",
205 | "vars": {
206 | "eventId": "43",
207 | "eventLabel": "clicked on a tweet link"
208 | }
209 | }
210 | }
211 | }
212 | </script>
213 | </amp-analytics>
214 | [/sourcecode]
215 |
216 | ### Envio de dados ao Google Analytics
217 |
218 | O exemplo a seguir usa o atributo `selector` do `trigger`
219 | para enviar um evento quando um botão específico de rede social é clicado
220 | (veja também
221 | [Rastreamento de interações sociais AMP no Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
222 |
223 | [sourcecode:html]
224 | <amp-analytics type="googleanalytics" id="analytics4">
225 | <script type="application/json">
226 | {
227 | "vars": {
228 | "account": "UA-XXXXX-Y" // Replace with your property ID.
229 | },
230 | "triggers": {
231 | "trackClickOnTwitterLink" : {
232 | "on": "click",
233 | "selector": "#tweet-link",
234 | "request": "social",
235 | "vars": {
236 | "socialNetwork": "twitter",
237 | "socialAction": "tweet",
238 | "socialTarget": "https://www.examplepetstore.com"
239 | }
240 | }
241 | }
242 | }
243 | </script>
244 | </amp-analytics>
245 | [/sourcecode]
246 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Kasus Penggunaan
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | Panduan ini memberikan satu set kasus penggunaan umum untuk melacak keterlibatan pengguna:
9 |
10 | Ingin menambahkan kasus penggunaan?
11 | [Beri tahu kami.](https://github.com/ampproject/docs/issues/new)
12 |
13 | Anda juga bisa berkontribusi pada kasus penggunaan Anda sendiri;
14 | lihat [Cara Berkontribusi](https://www.ampproject.org/docs/support/contribute.html).
15 |
16 | ## Melacak tampilan halaman
17 |
18 | Ketahui cara melacak tampilan halaman menggunakan `amp-pixel` dan `amp-analytics`.
19 |
20 | ### Menggunakan amp-pixel
21 |
22 | Mengirim data penayangan ke URL yang ditetapkan memakai
23 | [amp-pixel](/docs/reference/amp-pixel.html):
24 |
25 | [sourcecode:html]
26 | <amp-pixel src="https://foo.com/pixel?"></amp-pixel>
27 | [/sourcecode]
28 |
29 | ### Menggunakan amp-analytics - tanpa vendor
30 |
31 | Mengirim data penayangan ke URL yang ditetapkan memakai
32 | [amp-analytics](/docs/reference/extended/amp-analytics.html):
33 |
34 | [sourcecode:html]
35 | <amp-analytics>
36 | <script type="application/json">
37 | {
38 | "requests": {
39 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
40 | },
41 | "vars": {
42 | "account": "ABC123"
43 | },
44 | "triggers": {
45 | "trackPageview": {
46 | "on": "visible",
47 | "request": "pageview"
48 | }
49 | }
50 | }
51 | </script>
52 | </amp-analytics>
53 | [/sourcecode]
54 |
55 | ### Menggunakan amp-analytics - googleanalytics
56 |
57 | Mengirim data penayangan ke Google Analytics
58 | (lihat juga [Pelacakan halaman dalam Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
59 |
60 | [sourcecode:html]
61 | <amp-analytics type="googleanalytics" id="analytics1">
62 | <script type="application/json">
63 | {
64 | "vars": {
65 | "account": "UA-XXXXX-Y" // Replace with your property ID.
66 | },
67 | "triggers": {
68 | "trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
69 | "on": "visible",
70 | "request": "pageview"
71 | }
72 | }
73 | }
74 | </script>
75 | </amp-analytics>
76 | [/sourcecode]
77 |
78 | ## Melacak klik halaman
79 |
80 | Mengetahui cara melacak klik halaman memakai
81 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
82 | mengirim data kejadian ke URL yang ditetapkan, dan
83 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
84 |
85 | ### Mengirim data ke URL yang ditetapkan
86 |
87 | Contoh berikut menggunakan atribut `selector` untuk mengirim kejadian `click`
88 | ke URL yang ditetapkan setiap kali pengguna mengeklik tautan (`<a href>`):
89 |
90 | [sourcecode:html]
91 | <amp-analytics>
92 | <script type="application/json">
93 | {
94 | "requests": {
95 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
96 | },
97 | "vars": {
98 | "account": "ABC123"
99 | },
100 | "triggers": {
101 | "trackAnchorClicks": {
102 | "on": "click",
103 | "selector": "a",
104 | "request": "event",
105 | "vars": {
106 | "eventId": "42",
107 | "eventLabel": "clicked on a link"
108 | }
109 | }
110 | }
111 | }
112 | </script>
113 | </amp-analytics>
114 | [/sourcecode]
115 |
116 | ### Mengirim data ke Google Analytics
117 |
118 | Contoh berikut menggunakan atribut `selector` dari `trigger`
119 | untuk mengirim kejadian `click` ke Google Analytics ketika elemen tertentu diklik
120 | (lihat juga
121 | (lihat juga [Pelacakan kejadian AMP dalam Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
122 |
123 | [sourcecode:html]
124 | <amp-analytics type="googleanalytics" id="analytics3">
125 | <script type="application/json">
126 | {
127 | "vars": {
128 | "account": "UA-XXXXX-Y" // Replace with your property ID.
129 | },
130 | "triggers": {
131 | "trackClickOnHeader" : {
132 | "on": "click",
133 | "selector": "#header",
134 | "request": "event",
135 | "vars": {
136 | "eventCategory": "ui-components",
137 | "eventAction": "header-click"
138 | }
139 | }
140 | }
141 | }
142 | </script>
143 | </amp-analytics>
144 | [/sourcecode]
145 |
146 | ## Melacak pengguliran
147 |
148 | Melacak pengguliran halaman menggunakan [amp-analytics](/docs/reference/extended/amp-analytics.html).
149 | Contoh berikut menggunakan atribut `scrollspec` untuk mengirim kejadian `scroll`
150 | ke URL yang ditetapkan ketika halaman digulirkan secara vertikal sebesar 25%, 50%, dan 90%.
151 | Kejadian ini juga dipicu ketika halaman digulirkan secara horizontal
152 | ke 90% lebar `scroll`:
153 |
154 | [sourcecode:html]
155 | <amp-analytics>
156 | <script type="application/json">
157 | {
158 | "requests": {
159 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
160 | },
161 | "vars": {
162 | "account": "ABC123"
163 | },
164 | "triggers": {
165 | "scrollPings": {
166 | "on": "scroll",
167 | "scrollSpec": {
168 | "verticalBoundaries": [25, 50, 90],
169 | "horizontalBoundaries": [90]
170 | }
171 | }
172 | }
173 | }
174 | </script>
175 | </amp-analytics>
176 | [/sourcecode]
177 |
178 | ## Melacak interaksi sosial
179 |
180 | Ketahui cara melacak interaksi sosial menggunakan
181 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
182 | mengirim data kejadian ke URL yang ditetapkan, dan ke
183 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
184 |
185 | ### Mengirim data ke URL yang ditetapkan
186 |
187 | Contoh berikut menggunakan atribut `selector` untuk mengirim kejadian `click`
188 | ke URL yang ditetapkan setiap kali pengguna mengeklik tweet (`#tweet-link`):
189 |
190 | [sourcecode:html]
191 | <amp-analytics>
192 | <script type="application/json">
193 | {
194 | "requests": {
195 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
196 | },
197 | "vars": {
198 | "account": "ABC123"
199 | },
200 | "triggers": {
201 | "trackClickOnTwitterLink": {
202 | "on": "click",
203 | "selector": "#tweet-link",
204 | "request": "event",
205 | "vars": {
206 | "eventId": "43",
207 | "eventLabel": "clicked on a tweet link"
208 | }
209 | }
210 | }
211 | }
212 | </script>
213 | </amp-analytics>
214 | [/sourcecode]
215 |
216 | ### Mengirim data ke Google Analytics
217 |
218 | Contoh berikut menggunakan atribut `selector` dari `trigger`
219 | untuk mengirim kejadian ketika tombol sosial tertentu diklik
220 | (lihat juga
221 | [pelacakan interaksi sosial AMP dalam Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
222 |
223 | [sourcecode:html]
224 | <amp-analytics type="googleanalytics" id="analytics4">
225 | <script type="application/json">
226 | {
227 | "vars": {
228 | "account": "UA-XXXXX-Y" // Replace with your property ID.
229 | },
230 | "triggers": {
231 | "trackClickOnTwitterLink" : {
232 | "on": "click",
233 | "selector": "#tweet-link",
234 | "request": "social",
235 | "vars": {
236 | "socialNetwork": "twitter",
237 | "socialAction": "tweet",
238 | "socialTarget": "https://www.examplepetstore.com"
239 | }
240 | }
241 | }
242 | }
243 | </script>
244 | </amp-analytics>
245 | [/sourcecode]
246 |
```
--------------------------------------------------------------------------------
/pwa/pwa.js:
--------------------------------------------------------------------------------
```javascript
1 | /**
2 | * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS-IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | 'use strict';
18 |
19 | function log(args) {
20 | var var_args = Array.prototype.slice.call(arguments, 0);
21 | var_args.unshift('[SHELL]');
22 | console/*OK*/.log.apply(console, var_args);
23 | }
24 |
25 |
26 | class Shell {
27 |
28 | constructor(win) {
29 | /** @private @const {!Window} */
30 | this.win = win;
31 |
32 | /** @private @const {!AmpViewer} */
33 | this.ampViewer_ = new AmpViewer(win,
34 | win.document.getElementById('doc-container'));
35 |
36 | /** @private {string} */
37 | this.currentPage_ = win.location.pathname;
38 |
39 | win.addEventListener('popstate', this.handlePopState_.bind(this));
40 | win.document.documentElement.addEventListener('click',
41 | this.handleNavigate_.bind(this));
42 |
43 | log('Shell created');
44 |
45 | if (this.currentPage_) {
46 | this.navigateTo(this.currentPage_);
47 | }
48 |
49 | }
50 |
51 | /**
52 | */
53 | handleNavigate_(e) {
54 | if (e.defaultPrevented) {
55 | return false;
56 | }
57 | if (event.button) {
58 | return false;
59 | }
60 | let a = event.target;
61 | while (a) {
62 | if (a.tagName == 'A' && a.href) {
63 | break;
64 | }
65 | a = a.parentElement;
66 | }
67 | if (a) {
68 | const url = new URL(a.href);
69 | if (url.origin == this.win.location.origin &&
70 | url.pathname.indexOf('/pwa/') == 0 &&
71 | url.pathname.indexOf('amp.max.html') != -1) {
72 | e.preventDefault();
73 | const newPage = url.pathname;
74 | log('Internal link to: ', newPage);
75 | if (newPage != this.currentPage_) {
76 | this.navigateTo(newPage);
77 | }
78 | }
79 | }
80 | }
81 |
82 | /**
83 | */
84 | handlePopState_() {
85 | const newPage = this.win.location.pathname;
86 | log('Pop state: ', newPage, this.currentPage_);
87 | if (newPage != this.currentPage_) {
88 | this.navigateTo(newPage);
89 | }
90 | }
91 |
92 | /**
93 | * @param {string} path
94 | * @return {!Promise}
95 | */
96 | navigateTo(path) {
97 | log('Navigate to: ', path);
98 | const oldPage = this.currentPage_;
99 | this.currentPage_ = path;
100 |
101 | // Update URL.
102 | const push = !isShellUrl(path) && isShellUrl(oldPage);
103 | if (path != this.win.location.pathname) {
104 | if (push) {
105 | this.win.history.pushState(null, '', path);
106 | } else {
107 | this.win.history.replaceState(null, '', path);
108 | }
109 | }
110 |
111 | if (isShellUrl(path)) {
112 | log('Back to shell');
113 | this.ampViewer_.clear();
114 | return Promise.resolve();
115 | }
116 |
117 | // Fetch.
118 | const url = this.resolveUrl_(path);
119 | log('Fetch and render doc:', path, url);
120 | return fetchDocument(url).then(doc => {
121 | log('Fetch complete: ', doc);
122 | this.ampViewer_.show(doc, url);
123 | });
124 | }
125 |
126 | /**
127 | * @param {string} url
128 | * @return {string}
129 | */
130 | resolveUrl_(url) {
131 | if (!this.a_) {
132 | this.a_ = this.win.document.createElement('a');
133 | }
134 | this.a_.href = url;
135 | return this.a_.href;
136 | }
137 | }
138 |
139 |
140 | class AmpViewer {
141 |
142 | constructor(win, container) {
143 | /** @private @const {!Window} */
144 | this.win = win;
145 | /** @private @const {!Element} */
146 | this.container = container;
147 |
148 | win.AMP_SHADOW = true;
149 | this.ampReadyPromise_ = new Promise(resolve => {
150 | (window.AMP = window.AMP || []).push(resolve);
151 | });
152 | this.ampReadyPromise_.then(AMP => {
153 | log('AMP LOADED:', AMP);
154 | });
155 |
156 | /** @private @const {string} */
157 | this.baseUrl_ = null;
158 | /** @private @const {?Element} */
159 | this.host_ = null;
160 | /** @private @const {...} */
161 | this.viewer_ = null;
162 |
163 | }
164 |
165 | /**
166 | */
167 | clear() {
168 | this.container.textContent = '';
169 | }
170 |
171 | /**
172 | * @param {!Document} doc
173 | * @param {string} url
174 | */
175 | show(doc, url) {
176 | log('Show document:', doc, url);
177 | this.container.textContent = '';
178 |
179 | this.baseUrl_ = url;
180 |
181 | this.host_ = this.win.document.createElement('div');
182 | this.host_.classList.add('amp-doc-host');
183 |
184 | const hostTemplate = this.win.document.getElementById('amp-slot-template');
185 | if (hostTemplate) {
186 | this.host_.appendChild(hostTemplate.content.cloneNode(true));
187 | }
188 |
189 | this.container.appendChild(this.host_);
190 |
191 | this.ampReadyPromise_.then(AMP => {
192 | const amp = AMP.attachShadowDoc(this.host_, doc, url);
193 | this.win.document.title = amp.title || '';
194 | this.viewer_ = amp.viewer;
195 | /* TODO(dvoytenko): enable message deliverer as soon as viewer is provided
196 | this.viewer_.setMessageDeliverer(this.onMessage_.bind(this),
197 | this.getOrigin_(this.win.location.href));
198 | */
199 | });
200 | }
201 |
202 | /**
203 | * @param {string} url
204 | * @return {string}
205 | */
206 | resolveUrl_(relativeUrlString) {
207 | return new URL(relativeUrlString, this.baseUrl_).toString();
208 | }
209 |
210 | /**
211 | * @param {string} url
212 | * @return {string}
213 | */
214 | getOrigin_(relativeUrlString) {
215 | return new URL(relativeUrlString, this.baseUrl_).origin;
216 | }
217 |
218 | /**
219 | */
220 | onMessage_(type, data, rsvp) {
221 | log('received message:', type, data, rsvp);
222 | }
223 | }
224 |
225 |
226 | /**
227 | * @param {string} url
228 | * @return {boolean}
229 | */
230 | function isShellUrl(url) {
231 | return (url == '/pwa' || url == '/pwa/');
232 | }
233 |
234 |
235 | /**
236 | * @param {string} url
237 | * @return {!Promise<!Document>}
238 | */
239 | function fetchDocument(url) {
240 | return new Promise((resolve, reject) => {
241 | const xhr = new XMLHttpRequest();
242 | xhr.open('GET', url, true);
243 | xhr.responseType = 'document';
244 | xhr.setRequestHeader('Accept', 'text/html');
245 | xhr.onreadystatechange = () => {
246 | if (xhr.readyState < /* STATUS_RECEIVED */ 2) {
247 | return;
248 | }
249 | if (xhr.status < 100 || xhr.status > 599) {
250 | xhr.onreadystatechange = null;
251 | reject(new Error(`Unknown HTTP status ${xhr.status}`));
252 | return;
253 | }
254 | if (xhr.readyState == /* COMPLETE */ 4) {
255 | if (xhr.responseXML) {
256 | resolve(xhr.responseXML);
257 | } else {
258 | reject(new Error(`No xhr.responseXML`));
259 | }
260 | }
261 | };
262 | xhr.onerror = () => {
263 | reject(new Error('Network failure'));
264 | };
265 | xhr.onabort = () => {
266 | reject(new Error('Request aborted'));
267 | };
268 | xhr.send();
269 | });
270 | }
271 |
272 |
273 |
274 | var shell = new Shell(window);
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Kullanım Durumları
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | Bu kılavuzda kullanıcı katılımını izlemek için bir dizi yaygın kullanım durumu verilmiştir:
9 |
10 | Bir kullanım durumu eklemek istiyor musunuz?
11 | [Bize bildirin.](https://github.com/ampproject/docs/issues/new)
12 |
13 | Kendi kullanım durumlarınızla da katkı da bulunabilirsiniz;
14 | bkz. [Katkı Sağlama](https://www.ampproject.org/docs/support/contribute.html).
15 |
16 | ## Sayfa görünümlerini izleme
17 |
18 | `amp-pixel` ve `amp-analytics` kullanarak sayfa görünümlerini nasıl izleyeceğinizi öğrenin.
19 |
20 | ### Amp-piksel kullanma
21 |
22 |
23 | [amp-piksel](/docs/reference/amp-pixel.html) kullanarak belli bir URL›ye sayfa görüntüleme verilerini gönderin:
24 |
25 | [sourcecode:html]
26 | <amp-pixel src="https://foo.com/pixel?"></amp-pixel>
27 | [/sourcecode]
28 |
29 | ### Amp-analitik kullanma - satıcısız
30 |
31 |
32 | [amp-analitik](/docs/reference/extended/amp-analytics.html)kullanarak belli bir URL›ye sayfa görüntüleme verilerini gönderin:
33 |
34 | [sourcecode:html]
35 | <amp-analytics>
36 | <script type="application/json">
37 | {
38 | "requests": {
39 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
40 | },
41 | "vars": {
42 | "account": "ABC123"
43 | },
44 | "triggers": {
45 | "trackPageview": {
46 | "on": "visible",
47 | "request": "pageview"
48 | }
49 | }
50 | }
51 | </script>
52 | </amp-analytics>
53 | [/sourcecode]
54 |
55 | ### Amp-analitik kullanma - googleanalytics
56 |
57 | Sayfa görüntüleme verilerini Google Analytics›e gönderin
58 | (ayrıca bkz. [Google Analytics›de sayfa izleme](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
59 |
60 | [sourcecode:html]
61 | <amp-analytics type="googleanalytics" id="analytics1">
62 | <script type="application/json">
63 | {
64 | "vars": {
65 | "account": "UA-XXXXX-Y" // Replace with your property ID.
66 | },
67 | "triggers": {
68 | "trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
69 | "on": "visible",
70 | "request": "pageview"
71 | }
72 | }
73 | }
74 | </script>
75 | </amp-analytics>
76 | [/sourcecode]
77 |
78 | ## Sayfa tıklamalarını izleme
79 |
80 |
81 | [amp-analitik](/docs/reference/extended/amp-analytics.html) kullanarak,
82 | etkinlik verilerini
83 | [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.
84 |
85 | ### Verileri belli bir URL›ye gönderme
86 |
87 | Aşağıdaki örnekte kullanıcı bir bağlantıya her tıkladığında (`<a href>`) belirlenen URL›ye bir `click` etkinliği
88 | göndermek için `selector` özelliği kullanılmıştır:
89 |
90 | [sourcecode:html]
91 | <amp-analytics>
92 | <script type="application/json">
93 | {
94 | "requests": {
95 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
96 | },
97 | "vars": {
98 | "account": "ABC123"
99 | },
100 | "triggers": {
101 | "trackAnchorClicks": {
102 | "on": "click",
103 | "selector": "a",
104 | "request": "event",
105 | "vars": {
106 | "eventId": "42",
107 | "eventLabel": "clicked on a link"
108 | }
109 | }
110 | }
111 | }
112 | </script>
113 | </amp-analytics>
114 | [/sourcecode]
115 |
116 | ### Verileri Google Analytics›e gönderme
117 |
118 | Aşağıdaki örnekte, özel bir ögeye tıklandığında Google Analytics›e bir `click` etkinliği göndermek için `trigger`
119 | özniteliği için `selector` kullanılmıştır
120 | (ayrıca bkz.
121 | [Google Analytics›de AMP etkinliği izleme](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
122 |
123 | [sourcecode:html]
124 | <amp-analytics type="googleanalytics" id="analytics3">
125 | <script type="application/json">
126 | {
127 | "vars": {
128 | "account": "UA-XXXXX-Y" // Replace with your property ID.
129 | },
130 | "triggers": {
131 | "trackClickOnHeader" : {
132 | "on": "click",
133 | "selector": "#header",
134 | "request": "event",
135 | "vars": {
136 | "eventCategory": "ui-components",
137 | "eventAction": "header-click"
138 | }
139 | }
140 | }
141 | }
142 | </script>
143 | </amp-analytics>
144 | [/sourcecode]
145 |
146 | ## Kaydırmayı izleme
147 |
148 | [Amp-analitik](/docs/reference/extended/amp-analytics.html) kullanarak sayfa kaydırmayı izleyin.
149 | Aşağıdaki örnekte, sayfa %25, %50 ve %90 oranında dikey olarak kaydırıldığında, belirlenen URL›ye bir `scroll` etkinliği
150 | göndermek için `scrollspec` özelliği kullanılmıştır:
151 | Etkinlik aynı zamanda sayfa, `scroll` genişliğinin %90 oranında yatay olarak
152 | kaydırıldığında da uyarı verir:
153 |
154 | [sourcecode:html]
155 | <amp-analytics>
156 | <script type="application/json">
157 | {
158 | "requests": {
159 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
160 | },
161 | "vars": {
162 | "account": "ABC123"
163 | },
164 | "triggers": {
165 | "scrollPings": {
166 | "on": "scroll",
167 | "scrollSpec": {
168 | "verticalBoundaries": [25, 50, 90],
169 | "horizontalBoundaries": [90]
170 | }
171 | }
172 | }
173 | }
174 | </script>
175 | </amp-analytics>
176 | [/sourcecode]
177 |
178 | ## Sosyal medya etkileşimlerini izleme
179 |
180 |
181 | [Amp-analitik](/docs/reference/extended/amp-analytics.html) kullanarak,
182 | etkinlik verilerini
183 | [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.
184 |
185 | ### Verileri belli bir URL›ye gönderme
186 |
187 | Aşağıdaki örnekte, kullanıcı bir tweet›e (`#tweet bağlantısı`) her tıkladığında, belirlenen URL›ye bir `click` etkinliği
188 | göndermek için `selector` özelliği kullanılmıştır:
189 |
190 | [sourcecode:html]
191 | <amp-analytics>
192 | <script type="application/json">
193 | {
194 | "requests": {
195 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
196 | },
197 | "vars": {
198 | "account": "ABC123"
199 | },
200 | "triggers": {
201 | "trackClickOnTwitterLink": {
202 | "on": "click",
203 | "selector": "#tweet-link",
204 | "request": "event",
205 | "vars": {
206 | "eventId": "43",
207 | "eventLabel": "clicked on a tweet link"
208 | }
209 | }
210 | }
211 | }
212 | </script>
213 | </amp-analytics>
214 | [/sourcecode]
215 |
216 | ### Verileri Google Analytics›e gönderme
217 |
218 | Aşağıdaki örnekte, özel bir sosyal medya düğmesine tıklandığında, bir etkinlik göndermek için `trigger`
219 | özelliği için `selector` kullanılmıştır
220 | (ayrıca bkz.
221 | [Google Analytics›de AMP sosyal medya etkileşimlerini izleme](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
222 |
223 | [sourcecode:html]
224 | <amp-analytics type="googleanalytics" id="analytics4">
225 | <script type="application/json">
226 | {
227 | "vars": {
228 | "account": "UA-XXXXX-Y" // Replace with your property ID.
229 | },
230 | "triggers": {
231 | "trackClickOnTwitterLink" : {
232 | "on": "click",
233 | "selector": "#tweet-link",
234 | "request": "social",
235 | "vars": {
236 | "socialNetwork": "twitter",
237 | "socialAction": "tweet",
238 | "socialTarget": "https://www.examplepetstore.com"
239 | }
240 | }
241 | }
242 | }
243 | </script>
244 | </amp-analytics>
245 | [/sourcecode]
246 |
```