This is page 12 of 20. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.url(parentDoc.pod_path,%20locale=usedDoc.locale).path%7D%7D?lines=false&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/docs/guides/deploy/analytics_amp/analytics_basics.md:
--------------------------------------------------------------------------------
```markdown
---
$title: "Analytics: the Basics"
$order: 0
toc: true
---
Start here to learn the basics about AMP analytics.
[TOC]
## Use amp-pixel or amp-analytics?
AMP provides two components to meet your analytics and measurement needs:
[amp-pixel](/docs/reference/amp-pixel.html) and
[amp-analytics](/docs/reference/extended/amp-analytics.html).
Both options send analytics data to a defined endpoint.
If you are looking for behavior like a simple
[tracking pixel](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
the `amp-pixel` component provides basic page view tracking;
page view data gets sent to a defined URL.
Some integrations with a vendor may call for this component,
in which case they will specify the exact URL endpoint.
For most analytics solutions, use `amp-analytics`.
Page view tracking works in `amp-analytics` too.
But you can also track user engagement with any type of page content,
including clicks on links and buttons.
And you can measure how far on the page the user scrolled,
whether or not the user engaged with social media, and more
(see
[Deep Dive into AMP Analytics](/docs/guides/analytics/deep_dive_analytics.html)).
As part of integrating with the AMP platform,
providers have offered pre-defined `amp-analytics` configurations
so that it's easy to capture data and push to their tracking tools.
Access vendor documentation from the
[amp-analytics specification](/docs/reference/extended/amp-analytics.html).
You can use both `amp-pixel` and `amp-analytics` in your pages:
`amp-pixel` for simple page view tracking,
and `amp-analytics` for everything else.
You can also add multiples of each tag.
If you're working with multiple analytics providers,
you will need one tag per solution.
Keep in mind that simpler AMP pages are better for users,
so if you don’t need the extra tags, don’t use them.
## Create a simple analytics configuration
Learn how to create a simple
[amp-pixel](/docs/reference/amp-pixel.html) and
[amp-analytics](/docs/reference/extended/amp-analytics.html) configuration.
### Simple amp-pixel configuration
To create a simple `amp-pixel` configuration,
insert something like the following into the body of your AMP page:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
[/sourcecode]
In this example,
the page view data gets sent to the defined URL, along with a random number.
The `RANDOM` variable is one of many
[substitution variables in the AMP platform](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
Learn more about
[Variable substitution](/docs/guides/analytics/analytics_basics.html#variable-substitution) here.
The [amp-pixel](/docs/reference/amp-pixel.html)
component is built-in,
so you won't need an inclusion declaration like you do
for AMP's extended components, including `amp-analytics`.
But you should place the `amp-pixel` tag as close as possible
to the start of your `<body>`.
The tracking pixel will only fire when the tag comes into view itself.
If `amp-pixel` is positioned near the bottom of the page,
it may not fire.
### Simple amp-analytics configuration
To create a simple
[amp-analytics](/docs/reference/extended/amp-analytics.html) configuration,
you must first include this `custom-element` declaration
in the `<head>` of the AMP document (see also
[Component inclusion declaration](/docs/reference/extended.html#component-inclusion-declaration)):
[sourcecode:html]
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
[/sourcecode]
The following example is similar to the [`amp-pixel` example](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
Everytime a page is visible,
the trigger event fires, and
sends the pageview data to a defined URL along with a random ID:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://foo.com/pixel?RANDOM",
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
In the above example, we have defined a request called pageview to be https://foo.com/pixel?RANDOM. As discussed earlier, RANDOM is substituted by a random number, so the request will actually end up looking like https://foo.com/pixel?0.23479283687235653498734.
When the page becomes visible
(as specified by the use of the trigger keyword `visible`),
an event triggers and the `pageview` request is sent.
The triggers attribute determines when the pageview request fires.
Learn more about [requests and triggers](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
## Variable substitution
Both the [amp-pixel](/docs/reference/amp-pixel.html) and
[amp-analytics](/docs/reference/extended/amp-analytics.html) components
allow all standard URL variable substitutions (see
[AMP HTML Variable Substitutions](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
In the following example,
the page view request is sent to the URL,
along with the current AMP document’s canonical URL, its title, and a
[client ID](/docs/guides/analytics/analytics_basics.html#user-identification):
[sourcecode:html]
<amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
[/sourcecode]
Due to its simplicity,
the `amp-pixel` tag can only include variables defined by the platform
or that the AMP runtime can parse from the AMP page.
In the above example,
the platform populates the values for both
`canonicalURL` and `clientId(site-user-id)`.
The `amp-analytics` tag can include the same variables as `amp-pixel`,
as well as uniquely defined variables inside the tag configuration.
Use the format `${varName}` in a request string for a page
or platform-defined variable.
The `amp-analytics` tag will replace the template with its actual value
at the time of construction of the analytics request (see also
[Variables supported in amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
In the following `amp-analytics` example,
the page view request is sent to the URL,
with additional data extracted from variable substitutions,
some provided by the platform,
some defined inline,
within the `amp-analytics` configuration:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
},
"vars": {
"account": "ABC123",
},
"triggers": {
"someEvent": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My homepage",
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
In the above example,
the variables, `account` and `title` are defined
in the `amp-analytics` configuration.
The `canonicalUrl` and `clientId` variables aren't defined in the configuration,
so their values get substituted by the platform.
**Important:** Variable substitution is flexible;
you can have the same variables defined in different locations,
and the AMP runtime will parse the values in this order of precedence
(see [Variable substitution ordering](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
## User identification
Websites use cookies to store information specific to a user in the browser.
Cookies can be used to tell that a user has visited a site before.
In AMP,
pages can be served from either a publisher's website or a cache
(like the Google AMP Cache).
The publisher's website and the cache are likely to have different domains.
For security reasons,
browsers can (and often will) limit access to another domain’s cookies
(see also
[Tracking users across origins](https://github.com/ampproject/amphtml/blob/master/spec/amp-managing-user-state.md)).
By default,
AMP will manage the provision of a client ID whether the page is accessed from the publisher's original website or through a cache.
The AMP-generated client ID has a value of `"amp-"`
followed by a random `base64` encoded string and remains the same
for the user if that same user visits again.
AMP manages reading and writing of the client ID in all cases.
This is particularly notable in the case when a page is served
via a cache or otherwise shown outside the viewing context
of the publisher's original site.
In this circumstance, access to the publisher site's cookies is unavailable.
When an AMP page is served from a publisher's site,
the client ID framework that AMP uses can be told about a fallback cookie
to look for and use.
In this case,
the `cid-scope-cookie-fallback-name` argument of the `clientId` variable
is interpreted as a cookie name.
The formatting may appear as either
`CLIENT_ID(cid-scope-cookie-fallback-name)` or
`${clientId(cid-scope-cookie-fallback-name)}`.
For example:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
[/sourcecode]
If AMP finds that this cookie is set,
then the client ID substitution will return the cookie's value.
If the AMP finds that this cookie is not set,
then AMP will generate a value of the form `amp-` followed
by a random base64 encoded string.
Learn more about client ID substitution,
including how to add an optional user notification ID, in
[Variables supported in AMP analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Accélération de la performance avec AMP
---
[TOC]
La combinaison de toutes les optimisations suivantes est la raison pour laquelle les pages AMP sont tellement rapides qu'elles semblent se charger instantanément :
Si vous préférez l'écoute à la lecture, la vidéo suivante présentée par l'ingénieur AMP en chef, Malte Ubl, aborde les mêmes informations que les paragraphes suivants.
<amp-youtube
data-videoid="hVRkG1CQScA"
layout="responsive"
width="480" height="270">
</amp-youtube>
## Autoriser uniquement les scripts asynchrones
JavaScript est puissant.
Il peut modifier pratiquement tous les aspects de la page,
mais aussi bloquer la construction DOM et retarder le rendu de la page
(voir aussi [Ajouter l'interactivité avec JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Pour empêcher JavaScript de retarder le rendu de la page,
AMP autorise uniquement les scripts JavaScript asynchrones.
Les pages AMP ne peuvent inclure aucun autre JavaScript rédigé.
Plutôt que d'utiliser JavaScript,
les fonctions de page interactives sont traitées dans des éléments AMP personnalisés.
Les éléments AMP personnalisés peuvent intégrer du JavaScript,
mais ils sont conçus de sorte à ne pas impacter la performance.
Même si des scripts JS tiers sont autorisés dans les iframes,
ils ne peuvent pas bloquer le rendu.
Par exemple, si un script JS tiers utilise l'
[API `document.write` à fort impact négatif sur la performance](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
il ne bloque pas le rendu de la page principale.
## Dimensionner toutes les ressources de manière statique
Les ressources externes, comme les images, les publicités ou les iframes, doivent déclarer leur taille dans le code HTML
pour permettre à AMP de déterminer la taille et la position de chaque élément avant leur téléchargement.
AMP charge la disposition de la page sans attendre le téléchargement des ressources.
AMP dissocie la disposition des documents de celle des ressources.
Une seule requête HTTP est nécessaire pour mettre en page le document entier
([+ les polices](#font-triggering-must-be-efficient)).
Dans la mesure où AMP est optimisé pour éviter les coûteux recalculs de style et dispositions dans le navigateur,
aucune re-disposition n'est nécessaire lors du chargement des ressources.
## Empêcher les mécanismes d'extension de bloquer le rendu
AMP empêche les mécanismes d'extension de bloquer le rendu des pages.
AMP prend en charge les extensions d'objets tels que les
[mosaïques](/docs/reference/extended/amp-lightbox.html), les
[intégrations Instagram](/docs/reference/extended/amp-instagram.html), les
[tweets](/docs/reference/extended/amp-twitter.html), etc.
Même si ces extensions exigent des requêtes HTTP supplémentaires,
ces dernières ne bloquent ni la mise en page ni le rendu des pages.
Toute page qui utilise un script personnalisé doit indiquer au système AMP
qu'elle contiendra ultérieurement une balise personnalisée.
Par exemple, le script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
indique au système qu'il y aura une balise `amp-iframe`.
AMP crée le cadre iframe avant même de savoir ce qu'il contiendra :
[sourcecode:html]
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
## Écarter le JavaScript tiers du processus principal
Le script JS tiers aime utiliser le chargement JS synchrone.
Il aime également appliquer `document.write` à d'autres scripts synchrones.
Par exemple, si vous avez cinq publicités, chacune exécutant
trois chargements synchrones avec une connexion
d'une latence d'une seconde, le chargement JS prend à lui seul 15 secondes.
Les pages AMP autorisent le JavaScript tiers, mais seulement dans des iframes placés en sandbox.
Limité aux iframes, ces scripts ne peuvent pas bloquer l'exécution de la page principale.
Même s'ils déclenchent plusieurs recalculs de style,
le DOM de leurs iframes minuscules est très réduit.
Les recalculs de style et les dispositions dépendent de la taille du DOM ;
aussi, les recalculs d'iframe sont très rapides
comparés aux recalculs de styles et à la disposition de la page.
## Tout le style CSS doit être en ligne et limité en taille
Le CSS bloque tout le rendu. Il bloque le chargement des pages et a tendance à « gonfler ».
Dans les pages AMP HTML, seuls les styles en ligne sont autorisés.
Une ou souvent plusieurs requêtes HTTP sont ainsi supprimées du processus de rendu principal,
par rapport à la plupart des pages Web.
De plus, la taille des feuilles de style en ligne est limitée à 50 Ko maximum.
Même si cette taille est suffisante pour les pages très complexes,
le créateur de la page doit malgré tout appliquer un style CSS propre.
## Le déclenchement de police doit être efficace
Les polices Web étant très volumineuses,
l'[optimisation des polices Web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
est essentielle pour la performance.
Sur une page standard ne contenant que peu de scripts synchrones et de feuilles de style externes,
le navigateur doit attendre sans fin le téléchargement de ces énormes polices.
Le système AMP ne déclare aucune requête HTTP avant le début du téléchargement des polices.
En effet, tous les scripts JS dans AMP contiennent l'attribut « asynch »
et seules les feuilles de style en ligne sont autorisées.
Aucune requête HTTP n'empêche donc le navigateur de télécharger les polices.
## Réduire au minimum les recalculs de style
Dès lors que vous effectuez des mesures, de coûteux recalculs de style sont exécutés
car le navigateur doit définir la disposition de la page entière.
Dans les pages AMP, toutes les lectures DOM se produisent avant toutes les écritures.
Ainsi, un seul recalcul de style maximum est effectué par cadre.
Pour en savoir plus sur l'impact des recalculs de style et de disposition, voir
[performances de rendu](https://developers.google.com/web/fundamentals/performance/rendering/).
## Exécuter uniquement les animations accélérées par GPU
La seule façon d'obtenir des optimisations rapides, c'est de les exécuter sur le GPU.
Le GPU connaît les couches, il sait comment exécuter certaines choses sur ces couches,
il peut les déplacer, il peut les diminuer, mais il ne peut pas actualiser
la disposition de la page. Il laisse cette tâche au navigateur, ce qui n'est pas une bonne chose.
Les règles concernant le CSS lié aux animations garantissent que ces dernières peuvent être accélérées par GPU.
Tout particulièrement, AMP autorise les animations et transitions uniquement sur les propriétés transform et opacity
; aucune disposition de la page n'est ainsi requise.
En savoir plus sur
l'[utilisation des propriétés transform et opacity pour les changements sur les animations](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
## Hiérarchiser le chargement des ressources
AMP contrôle tous les téléchargements de ressources : il hiérarchise
le chargement, ne chargeant que ce qui est nécessaire, et pré-extrait les ressources les plus lentes à charger.
Lorsqu'AMP télécharge des ressources, il optimise ces téléchargements
de sorte que les ressources actuellement les plus importantes soient téléchargées en premier lieu.
Les images et publicités ne sont téléchargées que si elles seront vues par l'utilisateur,
dans la partie au-dessus de la ligne de flottaison, ou si l'utilisateur fera défiler rapidement la page pour y accéder.
De plus, AMP pré-extrait les ressources les plus lentes à charger.
Les ressources sont chargées le plus tard possible, mais pré-extraites le plus tôt possible.
De cette façon, le chargement est très rapide ; le processeur
n'est utilisé que lorsque les ressources sont effectivement affichées aux utilisateurs.
## Charger les pages instantanément
La nouvelle [API de pré-connexion](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
est largement utilisée pour garantir des requêtes HTTP aussi rapides que possible dès leur lancement.
Ainsi,
une page peut être rendue avant même que l'utilisateur n'indique explicitement qu'il aimerait y accéder.
La page peut être déjà disponible avant l'instant où l'utilisateur la sélectionne effectivement,
ce qui permet un chargement instantané.
Alors que tout contenu Web peut être pré-rendu,
il peut également consommer une grande quantité de bande passante et de ressources du processeur. AMP est optimisé pour limiter ces deux facteurs. Le pré-rendu permet de télécharger uniquement les ressources situées
dans la partie au-dessus de la ligne de flottaison et n'inclut pas les éléments gourmands en processeur.
Lorsque les documents AMP sont pré-rendus pour un chargement instantané,
seules les ressources situées dans la partie au-dessus de la ligne de flottaison sont effectivement téléchargées.
Lorsque les documents AMP sont pré-rendus pour un chargement instantané,
les ressources susceptibles d'utiliser une grande quantité de ressources du processeur (telles que les iframes tiers) ne sont pas téléchargées.
En savoir plus sur
les [raisons pour lesquelles AMP HTML n'exploite pas pleinement le scanner de pré-chargement](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
## Contribuer à l'accélération d'AMP
AMP est une initiative open-source.
Nous avons besoin de votre aide pour rendre AMP encore plus rapide.
Découvrez [comment contribuer](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Obsługiwane układy
---
Atrybut `layout=responsive` zapewnia elastyczność elementów umieszczanych na stronie.
[TOC]
## Obsługiwane wartości atrybutu układu
Domyślnie należy stosować układy elastyczne.
Pełna lista obsługiwanych wartości atrybutów układu:
<table>
<thead>
<tr>
<th class="col-twenty" data-th="Layout type">Typ układu</th>
<th class="col-twenty" data-th="Width/height required">Wymagana szerokość/wysokość</th>
<th data-th="Behavior">Zachowanie</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
<td class="col-twenty" data-th="Description">Nie</td>
<td data-th="Behavior">Element niewyświetlany. Ten układ można stosować dla każdego elementu AMP. Komponent nie zajmuje miejsca na ekranie, tak jakby nie miał stylu wyświetlania. Element powinien się wyświetlać wskutek działania użytkownika, np. [<code>amp-lightbox</code>](/docs/reference/extended/amp-lightbox.html).</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
<td class="col-twenty" data-th="Description">Tak</td>
<td data-th="Behavior">Nieelastyczny element o stałej szerokości i wysokości. Jedyne wyjątki to elementy [<code>amp-pixel</code>](/docs/reference/amp-pixel.html) i [<code>amp-audio</code>](/docs/reference/extended/amp-audio.html).</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
<td class="col-twenty" data-th="Description">Tak</td>
<td data-th="Behavior">Rozmiar elementu jest dopasowywany do szerokości kontenera, a jego wysokość jest automatycznie dopasowywana do współczynnika proporcji określonego za pomocą atrybutów width oraz height. Ten układ bardzo dobrze współpracuje z większością elementów AMP, w tym z elementami [<code>amp-img</code>](/docs/reference/amp-img.html) oraz [<code>amp-video</code>](/docs/reference/amp-video.html). Ilość dostępnego miejsca zależy od elementu nadrzędnego i można ją również dostosowywać za pomocą stylu <code>max-width</code>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
<td class="col-twenty" data-th="Description">Tylko wysokość</td>
<td data-th="Behavior">Element zajmuje dostępne dla niego miejsce, ale jego wysokość się nie zmienia. Ten układ bardzo dobrze współpracuje z elementami takimi jak [<code>amp-carousel</code>](/docs/reference/extended/amp-carousel.html), zawierającymi treść zorientowaną poziomo. Atrybut <code>width</code> nie może występować w kodzie lub musi mieć wartość <code>auto</code>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fill</code></td>
<td class="col-twenty" data-th="Description">Nie</td>
<td data-th="Behavior">Element zajmuje dostępne dla niego miejsce zarówno dla atrybutów szerokości oraz wysokości. Innymi słowy układ elementu fill odpowiada elementowi nadrzędnemu.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>container</code></td>
<td class="col-twenty" data-th="Description">Nie</td>
<td data-th="Behavior">Element zezwala elementom podrzędnym na samodzielne definiowanie rozmiaru, podobnie jak zwykły tag HTML <code>div</code>. Komponent nie powinien mieć żadnego określonego układu, tylko zachowywać się jak kontener. Jego elementy podrzędne renderują się błyskawicznie.</td>
</tr>
</tbody>
</table>
### Co się dzieje, jeśli szerokość i wysokość nie są zdefiniowane?
Jeśli atrybuty `width` lub `height` nie są zdefiniowane, standard AMP w kilku przypadkach nada im wartości domyślne w następujący sposób:
* [`amp-pixel`](/docs/reference/amp-pixel.html): szerokość i wysokość przyjmują wartość 0.
* [`amp-audio`](/docs/reference/extended/amp-audio.html): domyślne wartości dla szerokości i wysokości są wnioskowane z danych przeglądarki.
### Co się dzieje, jeśli atrybut układu nie jest zdefiniowany?
Zachowanie atrybutu jest określane w następujący sposób:
* Jeśli atrybut `height` jest obecny, a brakuje atrybutu `width` lub ma on wartość `auto`, przyjmowany jest układ `fixed-height`.
* Jeśli atrybuty `width` i `height` są obecne z atrybutem `sizes`, przyjmowany jest układ `responsive`.
* Jeśli atrybuty `width` i `height` są obecne, przyjmowany jest układ `fixed`.
* Jeśli atrybuty `width` i `height` nie są obecne, przyjmowany jest układ `container`.
## Zapytania mediów i atrybuty @media
Atrybut [`@media`](https://developer.mozilla.org/pl-PL/docs/Web/CSS/@media) służy do kontroli wyglądu i zachowania układu, tak jak w przypadku każdej innej strony.
Gdy okno przeglądarki zmienia rozmiar lub orientację, zapytania mediów są ponownie przeliczane, a elementy są ukrywane i wyświetlane na podstawie nowych wyników.
Dowiedz się więcej na temat kontrolowania układu za pomocą zapytań mediów z artykułu na temat [wykorzystania mediów CSS do uzyskania elastyczności](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=pl).
Atrybut `media` jest dodatkową funkcją z zakresu elastycznego projektowania stron dostępną w standardzie AMP.
Tego atrybutu można używać w odniesieniu do każdego elementu AMP.
Działa on podobnie do zapytań mediów stosowanych w globalnym arkuszu stylów,
jednak ma wpływ tylko na określone elementy na pojedynczej stronie.
Na przykład mamy tutaj 2 obrazy z wzajemnie wykluczającymi się zapytaniami mediów.
[sourcecode:html]
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive" >
</amp-img>
[/sourcecode]
W zależności od szerokości ekranu tylko jeden z nich zostanie pobrany i zrenderowany.
[sourcecode:html]
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width=527
height=193
layout="responsive" >
</amp-img>
[/sourcecode]
## Atrybut srcset i rozmiary
Atrybut `srcset` służy do kontrolowania zasobów elementów na podstawie różnych zapytań mediów.
W szczególności używa się go w przypadku wszystkich tagów [`amp-img`](/docs/reference/amp-img.html) do wskazywania, których zasobów obrazu użyć w zależności od rozmiaru ekranu.
W tym prostym przykładzie atrybut `srcset` określa, który obraz zostanie użyty, na podstawie szerokości ekranu.
Deskryptor `w` informuje przeglądarkę o szerokości każdego obrazu na liście:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w >
</amp-img>
[/sourcecode]
**Uwaga:** standard AMP obsługuje deskryptor `w` we wszystkich przeglądarkach.
Aby dowiedzieć się więcej na temat tworzenia elastycznych obrazów za pomocą atrybutu `srcset`, przeczytaj artykuł [Using Responsive Images (Now)](http://alistapart.com/article/using-responsive-images-now).
Możesz także użyć atrybutu `sizes` w połączeniu z atrybutem `srcset`.
Atrybut `sizes` opisuje sposób obliczania rozmiaru elementu w oparciu o dowolne zapytanie mediów.
Klient użytkownika, na podstawie obliczonego rozmiaru elementu, dobiera najbardziej odpowiednie źródło podane przez atrybut `srcset`.
Na przykład:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w
sizes="(min-width: 650px) 50vw, 100vw" >
</amp-img>
[/sourcecode]
Atrybut `sizes` definiuje szerokość elementu do 50% rozmiaru widocznego obszaru, gdy ma on co najmniej 650 pikseli.
Na przykład jeśli widoczny obszar miałby 800 pikseli, szerokość elementu wynosiłaby 400 pikseli.
Następnie przeglądarka wybiera zasób `srcset` odpowiadający wartości 400 pikseli, przyjmując 1 jako proporcję piksela. W tym przypadku będzie to `narrow.jpg` (320 pikseli).
**Ważne:** gdy atrybut rozmiaru jest określony wraz z szerokością i wysokością, układ domyślnie przyjmuje wartość `responsive`.
Więcej informacji na temat sposobu porównywania zapytań mediów przez atrybuty `sizes` i `srcset` zawiera post na blogu dotyczący [atrybutów srcset i sizes](https://ericportis.com/posts/2014/srcset-sizes/).
## Korzystanie z symboli i kreacji zastępczych
### symbol zastępczy
Element oznaczony za pomocą atrybutu `placeholder` pełni funkcję symbolu zastępującego nadrzędny element AMP.
Jeśli zostanie określony, element `placeholder` musi być bezpośrednim elementem podrzędnym elementu AMP.
[sourcecode:html]
<amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>
[/sourcecode]
Domyślnie symbol zastępczy jest natychmiast wyświetlany zamiast elementu AMP nawet w przypadku niepobrania lub braku inicjalizacji zasobów elementu AMP.
Po skonfigurowaniu element AMP zwykle ukrywa symbol zastępczy i wyświetla treść.
**Uwaga:** symbol zastępczy nie musi być elementem AMP. Może nim być dowolny element HTML.
### kreacja zastępcza
Atrybut `fallback` służy do wskazywania zachowania kreacji zastępczej w odniesieniu do dowolnego elementu nieobsługiwanego przez przeglądarkę.
Na przykład atrybut `fallback` służy do informowania użytkownika, że przeglądarka nie obsługuje określonej funkcji:
[sourcecode:html]
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg" >
<div fallback>
<p>Your browser doesn’t support HTML5 video.</p>
</div>
</amp-video>
[/sourcecode]
Atrybut `fallback` można ustawić dla dowolnego atrybutu HTML, nie tylko elementów AMP.
Jeśli jest obecny w kodzie, element `fallback` musi być bezpośrednim elementem podrzędnym elementu AMP.
### noloading
Wiele elementów AMP znajduje się na białej liście, by umożliwić wyświetlanie „wskaźnika ładowania”, który jest podstawowym animowanym elementem informującym o niepełnym wczytaniu elementu.
Można wyłączyć takie zachowanie elementów za pomocą atrybutu `noloading`.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/control_layout@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Layouts compatíveis
---
Torne seus elementos responsivos;
inclua `layout=responsive`.
[TOC]
## Valores compatíveis com o atributo de layout
Por padrão,
use os layouts responsivos.
Veja esta lista completa de valores compatíveis com o atributo de layout:
<table>
<thead>
<tr>
<th class="col-twenty" data-th="Layout type">Tipo de layout</th>
<th class="col-twenty" data-th="Width/height required">Largura/altura necessária</th>
<th data-th="Behavior">Comportamento</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
<td class="col-twenty" data-th="Description">Não</td>
<td data-th="Behavior">Elemento não exibido. Pode ser aplicado a cada elemento da AMP. O componente não ocupa espaço na tela, como se o seu estilo de exibição fosse "none". A ação esperada é que o elemento seja exibido mediante ação do usuário, por exemplo, <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
<td class="col-twenty" data-th="Description">Sim</td>
<td data-th="Behavior">O elemento tem largura e altura fixas sem suporte à responsividade. As únicas exceções são os elementos <a href="/docs/reference/amp-pixel.html"><code>amp-pixel</code></a> e <a href="/docs/reference/extended/amp-audio.html"><code>amp-audio</code></a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
<td class="col-twenty" data-th="Description">Sim</td>
<td data-th="Behavior">O elemento é redimensionado para a largura do seu elemento contêiner e redimensiona a sua altura automaticamente de acordo com a proporção determinada pelos atributos de largura e altura. Este layout funciona muito bem na maioria dos elementos de AMP, incluindo <a href="/docs/reference/amp-img.html"><code>amp-img</code></a> e <a href="/docs/reference/amp-video.html"><code>amp-video</code></a>. O espaço disponível depende do elemento principal e também pode ser personalizado com a CSS <code>max-width</code>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
<td class="col-twenty" data-th="Description">Somente altura</td>
<td data-th="Behavior">O elemento ocupa o espaço disponibilizado para ele, mas mantém a altura inalterada. Este layout funciona bem para elementos como <a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a>, que envolvem conteúdo posicionado horizontalmente. O atributo <code>width</code> não deve estar presente ou deve ser igual a <code>auto</code>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fill</code></td>
<td class="col-twenty" data-th="Description">Não</td>
<td data-th="Behavior">O elemento ocupa o espaço disponibilizado para ele, tanto em largura quanto em altura. Em outras palavras, o layout de um elemento de preenchimento corresponde ao layout pai dele.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>container</code></td>
<td class="col-twenty" data-th="Description">Não</td>
<td data-th="Behavior">O elemento permite que seus derivados definam seu tamanho, quase como um <code>div</code> de HTML normal. Supõe-se que o componente não tem um layout próprio específico e apenas atua como um contêiner. Seus derivados são renderizados imediatamente.</td>
</tr>
</tbody>
</table>
### E se largura e altura estiverem indefinidas?
Em alguns casos, se `width` ou `height` não forem especificadas,
o tempo de execução da AMP poderá adotar os seguintes valores padrão:
* [`amp-pixel`](/docs/reference/amp-pixel.html): largura e altura adotam o padrão de 0.
* [`amp-audio`](/docs/reference/extended/amp-audio.html): largura e altura padrão são inferidas a partir do navegador.
### E se o atributo de layout não estiver definido?
O comportamento do layout é determinado assim:
* Se `height` estiver presente e `width` estiver ausente ou for igual a `auto`, o layout `fixed-height` será assumido.
* Se os atributos `width` ou `height` estiverem presentes juntamente com o atributo `sizes`, o layout `responsive` será assumido.
* Se os atributos `width` ou `height` estiverem presentes, o layout `fixed` será assumido.
* Se `width` e `height` não estiverem presentes, o layout `container` será assumido.
## Uso de @media e mídia
Use [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)
para controlar a aparência e o comportamento do layout da página, assim como você faria em outro site.
Quando a janela do navegador muda de tamanho ou de orientação,
as consultas de mídia são reavaliadas e os elementos são escondidos e mostrados
com base nos novos resultados.
Saiba mais sobre como controlar o layout aplicando consultas de mídia em
[Usar consultas de mídia CSS para gerar responsividade](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en).
Outro recurso extra para a geração de um design responsivo disponibilizado na AMP é o atributo `media`.
Esse atributo pode ser usado em cada elemento da AMP.
Ele funciona de modo semelhante às consultas de mídia em sua folha de estilo global,
mas impacta apenas esse determinado elemento em uma única página.
Por exemplo, aqui temos duas imagens com consultas de mídia que se excluem mutuamente.
[sourcecode:html]
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive" >
</amp-img>
[/sourcecode]
Dependendo da largura da tela, uma ou outra será buscada e processada.
[sourcecode:html]
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width=527
height=193
layout="responsive" >
</amp-img>
[/sourcecode]
## Uso de srcset e tamanhos
Use o atributo `srcset` para controlar os recursos de um elemento
com base em expressões de mídia variantes.
Em particular, use-o em todas as tags [`amp-img`](/docs/reference/amp-img.html)
para especificar quais recursos de imagem serão usados com base em tamanhos de tela diferentes.
Neste exemplo simples,
`srcset` especifica qual a imagem será usada conforme a largura da tela.
O descritor `w` informa ao navegador a largura
de cada imagem na lista:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w >
</amp-img>
[/sourcecode]
**Observação:** a AMP é compatível com o descritor `w` em todos os navegadores.
Saiba mais sobre a criação de imagens responsivas usando `srcset`
em [Uso de imagens responsivas (agora)](http://alistapart.com/article/using-responsive-images-now).
Você também pode usar o atributo `sizes` juntamente com `srcset`.
O atributo `sizes` descreve como calcular o tamanho do elemento
com base em qualquer expressão de mídia.
Com base no tamanho calculado do elemento,
o user agent seleciona a fonte mais relativa fornecida pelo atributo `srcset`.
Considere o seguinte exemplo:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w
sizes="(min-width: 650px) 50vw, 100vw" >
</amp-img>
[/sourcecode]
O atributo `sizes` definirá a largura do elemento como 50% do tamanho da janela de visualização
quando esta tiver 650 px ou mais.
Por exemplo, se a janela de visualização tiver 800 px,
a largura do elemento será definida como 400 px.
O navegador então seleciona o recurso `srcset` relativo a 400 px,
supondo que a proporção de pixels do dispositivo é de 1,
que neste caso é `narrow.jpg` (320 px).
**Importante:** quando o atributo de tamanhos é especificado juntamente com a largura e a altura,
o layout assume o padrão de `responsive`.
Saiba mais sobre os atributos `sizes` e `srcset` em comparação
com as consultas de mídia nesta
postagem do blog: [Srcset e tamanhos](https://ericportis.com/posts/2014/srcset-sizes/).
## Incluir marcadores de posição e substitutos
### placeholder
O elemento marcado com o atributo `placeholder` atua
como um marcador de posição para o elemento de AMP principal.
Se especificado, um elemento `placeholder` deve ser um derivado direto do elemento da AMP.
[sourcecode:html]
<amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>
[/sourcecode]
Por padrão, o marcador de posição é imediatamente mostrado para o elemento da AMP,
mesmo que os recursos do elemento da AMP não tenham sido transferidos ou inicializados.
Depois de pronto, o elemento da AMP normalmente esconde seu marcador de posição e mostra o conteúdo.
**Observação:** o marcador de posição não precisa ser um elemento da AMP.
Qualquer elemento HTML pode atuar como marcador de posição.
### fallback
Use o atributo `fallback` para indicar o comportamento de substituição
de qualquer elemento incompatível com o navegador.
Por exemplo, use o atributo `fallback` para comunicar o usuário
que o navegador não é compatível com um determinado recurso:
[sourcecode:html]
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg" >
<div fallback>
<p>Your browser doesn’t support HTML5 video.</p>
</div>
</amp-video>
[/sourcecode]
O atributo `fallback` pode ser definido em qualquer elemento HTML, e não apenas em elementos da AMP.
Se especificado, o elemento `fallback` deve ser um derivado direto do elemento da AMP.
### noloading
Muitos elementos da AMP estão na lista de permissões para a exibição de um "indicador de carregamento",
ou seja, uma animação básica que mostra que o elemento ainda não foi totalmente carregado.
Os elementos podem desativar esse comportamento adicionando o atributo `noloading`.
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/validate.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Validate AMP Pages
$order: 0
toc: true
---
[TOC]
The key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be *validated*. This way, third parties such as Twitter, Instagram or Google Search can feel great about serving AMP pages to readers in increasingly interesting ways.
## How do I check if my page is valid AMP?
There are several ways available to validate an AMP document. They will all
produce the exact same result, so use whichever one suits your development
style the most.
In addition to AMP validity, you may also want to confirm that your AMP document is [discoverable](/docs/guides/discovery.html) to third-party platforms.
### Browser Developer Console.
The AMP Validator comes bundled with the AMP JS library, so it is available on every AMP page out of the box. To validate:
1. Open your AMP page in your browser
1. Append "`#development=1`" to the URL, for example, `http://localhost:8000/released.amp.html#development=1`.
1. Open the [Chrome DevTools console](https://developers.google.com/web/tools/chrome-devtools/debug/console/) and check for validation errors.
Developer Console errors will look similar to this:
<amp-img src="/static/img/docs/validator_errors.png"
width="713" height="243" layout="responsive"
alt="Screen grab of AMP Validator errors in chrome developer console">
</amp-img>
### Web Interface
The AMP Validator can be used as a web interface at
<a href="https://validator.ampproject.org/">validator.ampproject.org</a>. This
interface shows errors displayed inline alongside the HTML source of the page.
The interface is an interactive editor: changes to the html source result in
interactive revalidation.
<amp-img src="/static/img/docs/validator_web_ui.png"
width="660" height="507" layout="responsive"
alt="Screen grab of validator.ampproject.org with error examples.">
</amp-img>
### Browser Extension
The AMP Validator can be accessed directly from your browser's toolbar using
a browser extension. As you browse, it will automatically validate each AMP page
visited and gives a visual indication of the validity of the page as a colored
icon.
<table>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_invalid.png"
width="20" height="20" layout="fixed"
alt="Red AMP icon indicating invalid AMP document.">
</amp-img>
</td>
<td>When there are errors within an AMP page the extension’s icon
shows in a red color and displays the number of errors encountered.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_valid.png"
width="20" height="20" layout="fixed"
alt="Green AMP icon indicating valid AMP document.">
</amp-img>
</td>
<td>When there are no errors within an AMP page, the icon shows in a
green color and displays the number of warnings, if any exist.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_link.png"
width="20" height="20" layout="fixed"
alt="Blue AMP icon indicating AMP HTML variant if clicked.">
</amp-img>
</td>
<td>When the page isn’t AMP but the page indicates that an AMP version is
available, the icon shows in a blue color with a link icon, and clicking on
the extension will redirect the browser to the AMP version.
</td>
</tr>
</table>
AMP Validator Extension for
[Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) and [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
### Command Line Tool
As a prerequisite, you may need to install [Node.js with its package manager
'npm' on your system](https://docs.npmjs.com/getting-started/installing-node).
To install the [AMP HTML validator command line tool](https://www.npmjs.com/package/amphtml-validator), type `npm install -g amphtml-validator`.
Now let's validate a real AMP HTML page.
[sourcecode:console]
$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS
[/sourcecode]
Unsurprisingly this page is valid AMP HTML. Let's try a page that is not valid:
[several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). To run the `amphtml-validator` command, you can either provide the URL of the page or a local file name. Download and save [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) into a file, then run:
[sourcecode:console]
$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://www.ampproject.org/docs/reference/amp-ad.html)
...
[/sourcecode]
The format of the error messages consists of file name, line, column, and message,
often followed by a link to the AMP HTML reference. Some editors, including Emacs
(look for compile command and compilation mode), can interpret this format and let
you jump to the errors in the original file.
For a good starting point to make your own AMP page consider [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html):
[sourcecode:console]
$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS
[/sourcecode]
The command line tool offers additional features including switching off
the color, printing JSON output, or running a specific version of the
validator Javascript (by default it runs the latest published script).
[sourcecode:console]
$ amphtml-validator --help
Usage: index [options] <fileOrUrlOrMinus...>
Validates the files or urls provided as arguments. If "-" is
specified, reads from stdin instead.
Options:
-h, --help output usage information
-V, --version output the version number
--validator_js <fileOrUrl> The Validator Javascript.
Latest published version by default, or
dist/validator_minified.js (built with build.py)
for development.
--format <color|text|json> How to format the output.
"color" displays errors/warnings/success in
red/orange/green.
"text" avoids color (e.g., useful in terminals not
supporting color).
"json" emits json corresponding to the ValidationResult
message in validator.proto.
[/sourcecode]
## What happens if my page isn’t valid?
The AMP Validator isn’t just a convenience for you during development. It’s also used by platforms like Twitter or Google who integrate your AMP pages into their content and search results. More so, they usually don’t request the pages directly from your server but make use of the Google AMP Cache, a free service that caches your pages and makes them available across the world, so they load even faster.
If the AMP validation service detects that there’s something wrong with your page, it won’t get discovered and distributed by third party websites and won’t appear in the Google AMP Cache. So not only would you lose the speed benefits of the cache, it’s likely that your page will not be seen in many places! That would be a shame, so let’s make sure it doesn’t happen.
## How do I fix validation errors?
Most validation errors are easy to address and fix. Consider this HTML tag:
[sourcecode:html]
<img src="cat.png">
[/sourcecode]
Which generates this AMP validation error, shown in these different tools:
* Browser Developer Console
<amp-img src="/static/img/docs/validator_console_imgerror.png"
width="696" height="30" layout="responsive"
alt="AMP error: The tag 'img' may only appear as a descendant of tag
'noscript'. Did you mean 'amp-img'? line 11, column 2">
</amp-img>
* Web Interface
<amp-img src="/static/img/docs/validator_webui_imgerror.png"
width="676" height="58" layout="responsive"
alt="AMP error: The tag 'img' may only appear as a descendant of tag
'noscript'. Did you mean 'amp-img'? line 11, column 2">
</amp-img>
* Browser Extension
<amp-img src="/static/img/docs/validator_extension_imgerror.png"
width="724" height="108" layout="responsive"
alt="AMP error: The tag 'img' may only appear as a descendant of tag
'noscript'. Did you mean 'amp-img'? line 11, column 2">
</amp-img>
Each tool gives several pieces of information:
1. The location (line and column) in the HTML document where the error
occurred, clickable in some interfaces to highlight that location. In this
case the issue occurs on line 11, column 2.
1. A line of text describing the error. In this case the text indicates that
we are using an `<img>` tag, when we should have used an `<amp-img>` tag.
1. A link to a relevant document about the error. In this case the
documentation for the `<amp-img>` tag. Not all errors generate
documentation links.
Carefully re-reading the spec, we realize that we are using an `<img>` tag, when we should have used an `<amp-img>` tag.
To better understand the complete list of potential errors,
see the [AMP Validation Errors guide](https://www.ampproject.org/docs/reference/validation_errors.html).
If you’re still stuck after careful evaluation, [ask a
question](http://stackoverflow.com/questions/tagged/amp-html) and we'll try to
help.
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Il metodo di AMP per ottimizzare le prestazioni
---
[TOC]
Grazie alla combinazione tra seguenti ottimizzazioni, le pagine AMP sono così veloci da sembrare di essere caricate in pochi istanti:
Se preferisci ascoltare anziché leggere, il seguente video realizzato da Malte Ubl, AMP engineering lead, offre una panoramica simile al contenuto delle seguenti sezioni.
<amp-youtube
data-videoid="hVRkG1CQScA"
layout="responsive"
width="480" height="270">
</amp-youtube>
## Consentire solo gli script asincroni
JavaScript è potente,
può modificare praticamente qualsiasi aspetto della pagina,
ma può anche bloccare la costruzione DOM e ritardare il rendering della pagina
(vedi anche [Aggiunta di interattività con JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Per impedire che JavaScript ritardi il rendering della pagina,
AMP consente solo JavaScript asincrono.
Le pagine AMP non possono includere JavaScript scritto dall’autore.
Anziché utilizzare JavaScript,
le funzioni interattive della pagina vengono gestite in elementi AMP personalizzati.
Gli elementi AMP personalizzati possono contenere JavaScript che funzionano dietro le quinte
e sono attentamente progettati per garantire che non provochino cali delle performance.
Benché il codice JavaScript di terzi sia consentito in iframe,
non può bloccare il rendering.
Ad esempio, se il codice JavaScript di terzi utilizza l’
[API `document.write` pessima amica delle prestazioni](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
non blocca il rendering della pagina principale.
## Definire le dimensioni di tutte le risorse in modo statico
Le risorse esterne come le immagini, gli annunci o iframe devono dichiarare le proprie dimensioni nell’HTML
affinché AMP possa determinare le dimensioni e la posizione di ciascun elemento prima che le risorse vengano scaricate.
AMP carica il layout della pagina senza attendere il download di alcuna risorsa.
AMP separa il layout del documento da quello delle risorse.
Per il layout dell’intero documento ([e dei font](#font-triggering-must-be-efficient)) è necessaria solamente una richiesta HTTP
.
Dal momento che AMP è ottimizzato per evitare dispendiosi ricalcoli di stile e layout nel browser,
non è necessario rielaborare i layout al caricamento delle risorse.
## Non consentire ai meccanismi delle estensioni di bloccare il rendering
AMP non consente ai meccanismi delle estensioni di bloccare il rendering della pagina.
AMP supporta le estensioni per componenti come
[lightbox](/docs/reference/extended/amp-lightbox.html),
[incorporamenti instagram](/docs/reference/extended/amp-instagram.html),
[tweet](/docs/reference/extended/amp-twitter.html) e così via.
Benché questi avanzino ulteriori richieste HTTP,
tali richieste non bloccano il layout e il rendering della pagina.
Tutte le pagine che utilizzano uno script personalizzato devono indicare al sistema AMP
che prima o poi avrà un tag personalizzato.
Ad esempio, lo script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
indica al sistema che ci sarà un tag `amp-iframe`.
AMP crea la casella dell’iframe prima ancora di sapere cosa conterrà:
[sourcecode:html]
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
## Tenere lontano dalla fase critica qualsiasi codice JavaScript di terzi
Al codice JavaScript di terzi piace usare il caricamento JS sincrono.
Ama anche usare `document.write` per creare più script sincroni.
Ad esempio, se hai cinque annunci e ognuno di essi esegue tre caricamenti sincroni
con una latenza di connessione di 1 secondo,
ti ritrovi con 15 secondi di tempo di caricamento solo per il caricamento JS.
Le pagine AMP consentono codice JavaScript di terzi ma solo in iframe in modalità sandbox.
Circoscrivendo questo codice agli iframe gli viene impedito di bloccare l’esecuzione della pagina principale.
Anche se attiva più ricalcoli di stile,
i rispettivi piccoli iframe hanno DOM molto limitati.
I ricalcoli di stile e i layout sono tipici delle dimensioni DOM,
pertanto i ricalcoli degli iframe sono molto veloci rispetto
alle operazioni di ricalcolo degli stili e dei layout per la pagina.
## Tutto il codice CSS deve essere in linea e di dimensioni limitate
Il codice CSS blocca tutto il rendering, interrompe il caricamento delle pagine e tende a gonfiarsi.
Nelle pagine HTML AMP sono consentiti solo gli stili incorporati.
Questo elimina una o spesso più richieste HTTP dalla fase di rendering critica
rispetto a quanto accade nella maggior parte delle pagine web.
Inoltre, il foglio di stile incorporato ha una dimensione massima di 50 kilobyte.
Sebbene queste dimensioni siano sufficienti per pagine più complesse,
impone comunque all’autore della pagina di adottare una buona dose di moderazione nell’uso del codice CSS.
## L’attivazione dei font deve essere efficiente
I font web sono particolarmente grandi, per cui
l’[ottimizzazione dei font web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
è fondamentale per le performance.
In una pagina tipica dotata di alcuni script sincroni e di alcuni fogli di stile esterni,
il browser attende il completamento di tali operazioni per iniziare il download dei font di grandi dimensioni.
Il sistema AMP dichiara zero richieste HTTP fino a quando non inizia il download dei font.
Questo è possibile solamente perché tutto il codice JS in AMP ha l’attributo asincrono
e perché sono consentiti solo i fogli di stile incorporati,
non ci sono richieste HTTP che impediscono al browser di scaricare i font.
## Ridurre al minimo i ricalcoli di stile
Ogni volta che misuri qualcosa si attivano dispendiosi ricalcoli di stile
in quanto il browser deve elaborare il layout dell’intera pagina.
Nelle pagine AMP, tutte le operazioni di lettura DOM vengono eseguite prima di tutte quelle di scrittura.
In questo modo si garantisce un massimo di un ricalcolo di stili per frame.
Per ulteriori informazioni sull’impatto dei ricalcoli di stile e layout consulta la sezione sulle
[performance del rendering](https://developers.google.com/web/fundamentals/performance/rendering/).
## Eseguire solamente animazioni con accelerazione GPU
L’unico modo per avere ottimizzazioni veloci è quello di eseguirle sulla GPU.
La GPU è cosciente dei livelli, sa come eseguire alcune operazioni su questi livelli,
è in grado di spostarli o applicare una dissolvenza su di essi ma non può aggiornare il layout della pagina,
passa perciò il compito al browser e questa non è una buona idea.
Le regole per il codice CSS correlato alle animazioni garantiscono che queste possano usufruire dell’accelerazione GPU.
In particolare, AMP consente solamente l’animazione e la transizione su trasformazione e opacità
per cui il layout della pagina non è necessario.
Consulta ulteriori informazioni sull’
[utilizzo delle variazioni di trasformazione e opacità per le animazioni](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
## Dare priorità al caricamento delle risorse
AMP controlla tutti i download delle risorse: assegna la priorità al caricamento delle risorse,
caricando solo ciò che è necessario, ed esegue la prelettura delle risorse di tipo lazy-load.
Quando AMP scarica le risorse, ottimizza i download
in modo tale che vengano scaricate prima le risorse attualmente più importanti.
Le immagini e gli annunci vengono scaricati solo se ci sono probabilità che vengano visualizzati dall’utente,
nella parte visibile della pagina (above the fold), o se ci sono probabilità che l’utente scorra rapidamente su di esse.
AMP esegue anche la prelettura delle risorse di tipo lazy-load, ovvero quelle che non vengono caricate finché non richieste.
Le risorse vengono caricate con il maggior ritardo possibile, ma la loro prelettura viene eseguita il prima possibile.
In tal modo i componenti vengono caricati molto rapidamente ma la CPU viene utilizzata unicamente
quando le risorse vengono effettivamente mostrate agli utenti.
## Caricare le pagine in un attimo
La nuova [API preconnect](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
viene utilizzata intensamente per garantire che le richieste HTTP vengano completate il più rapidamente possibile.
Grazie a questo,
il rendering della pagina può essere eseguito prima che l’utente dichiari in modo esplicito che vorrebbe navigare verso di essa e
la pagina potrebbe essere già disponibile nel momento in cui l’utente la seleziona effettivamente,
con conseguente caricamento istantaneo.
Sebbene il prerendering possa applicarsi a tutto il contenuto web,
può anche consumare una grande quantità di larghezza di banda e CPU. AMP è ottimizzato per limitare al minimo entrambi questi fattori. Il prerendering scarica unicamente le risorse più visibili della pagina (above the fold)
e non esegue il rendering di elementi che potrebbero essere dispendiosi in termini di uso della CPU.
Quando viene eseguito il prerendering dei documenti AMP per il caricamento istantaneo,
vengono effettivamente scaricate solo le risorse visibili della pagina (above the fold).
Quando viene eseguito il prerendering dei documenti AMP per il caricamento istantaneo,
le risorse che potrebbero pesare in modo eccessivo sulla CPU (come iframe di terzi) non vengono scaricate.
Scopri
[perché HTML AMP non sfrutta appieno la funzione di scansione di precaricamento](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
## Aiutare a rendere AMP ancora più veloce
AMP è una specifica open source.
Ci serve il tuo aiuto per rendere AMP ancora più veloce.
Scopri [come dare il tuo contributo](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
hero:
title@: Cara AMP Mempercepat Kinerja
subtitle@: |
Kombinasi semua pengoptimalan berikut adalah alasan mengapa halaman AMP sangat cepat sehingga tampak dimuat seketika:
<p>Jika Anda lebih memilih mendengarkan dibanding membaca, video berikut yang disajikan oleh pimpinan teknisi AMP Malte Ubl akan memberikan ikhtisar yang mirip dengan teks yang ada di bawahnya.
points:
pointlist:
- title@: Hanya memperbolehkan skrip asinkron
description@: |
JavaScript sangat hebat,
karena mampu memodifikasi hampir semua aspek halaman,
tetapi di sisi lain, juga bisa memblokir konstruksi DOM dan menunda perenderan halaman
(lihat juga [Menambahkan interaktivitas dengan JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Agar JavaScript tidak terus-menerus menunda perenderan halaman,
AMP hanya memperbolehkan JavaScript asinkron.
<p>Halaman AMP tidak boleh berisi JavaScript apa pun yang disusun oleh penulis program.
Sebagai ganti menggunakan JavaScript,
fitur halaman interaktif ditangani di elemen AMP khusus.
Elemen AMP khusus bisa berisi JavaScript di dalamnya,
tetapi didesain dengan cermat agar tidak menyebabkan penurunan kinerja.
<p>Meskipun diperbolehkan di iframe,
JS pihak ketiga tidak diperbolehkan memblokir perenderan.
Misalnya, jika JS pihak ketiga menggunakan
[API `document.write` yang buruk untuk kinerja](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
JS ini tidak memblokir perenderan halaman utama.
- title@: Menyatakan ukuran semua sumber daya secara statis
description@: |
Sumber daya eksternal seperti gambar, iklan, atau iframe harus dinyatakan ukurannya di HTML
sehingga AMP bisa menentukan ukuran dan posisi setiap elemen sebelum sumber daya diunduh.
AMP memuat layout halaman tanpa menunggu sumber daya apa pun untuk diunduh.
<p>AMP melepaskan layout dokumen dari layout sumber daya.
Hanya satu permintaan HTTP yang diperlukan untuk melayout keseluruhan dokumen
([+font](#font-triggering-must-be-efficient)).
Karena AMP dioptimalkan untuk menghindari rekalkulasi gaya dan layout yang bebannya besar di browser,
tidak akan ada layout ulang saat sumber daya dimuat.
- title@: Tidak memperbolehkan mekanisme ekstensi memblokir perenderan
description@: |
AMP tidak memperbolehkan mekanisme ekstensi memblokir perenderan halaman.
AMP mendukung ekstensi untuk elemen-elemen seperti
[lightbox](/docs/reference/extended/amp-lightbox.html),
[sematan instagram](/docs/reference/extended/amp-instagram.html),
[tweet](/docs/reference/extended/amp-twitter.html), dsb.
Meskipun elemen ini memerlukan permintaan HTTP tambahan,
permintaan tersebut tidak memblokir layout dan perenderan halaman.
<p>Halaman apa pun yang menggunakan skrip khusus harus memberi tahu sistem AMP
bahwa nantinya akan memiliki tag khusus.
Misalnya, skrip [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
memberi tahu sistem bahwa akan ada tag `amp-iframe`.
AMP membuat kotak iframe sebelum mengetahui apa yang akan disertakan:
example: /content/includes/amp-iframe.md
- title@: Mempertahankan semua JavaScript pihak ketiga di luar jalur penting
description@: |
JS pihak ketiga cenderung menggunakan pemuatan JS sinkron.
Skrip ini juga cenderung menerapkan `document.write` pada skrip sinkronisasi lainnya.
Misalnya, jika Anda memiliki lima iklan dan setiap iklan ini melakukan tiga pemuatan sinkronisasi
dengan koneksi latensi 1 detik,
Anda membutuhkan waktu pemuatan 15 detik hanya untuk memuat JS.
<p>Halaman AMP memperbolehkan JavaScript pihak ketiga tetapi hanya dalam iframe yang di-sandbox.
Dengan mencegahnya masuk ke dalam iframe, JavaScript pihak ketiga tidak bisa memblokir eksekusi halaman utama.
Bahkan apabila memicu rekalkukasi gaya berkali-kali,
iframe-nya yang sangat kecil hanya memiliki sedikit DOM.
<p>Rekalkulasi gaya dan layout umumnya sebanding dengan ukuran DOM,
sehingga rekalkulasi iframe sangat cepat dibandingkan dengan
rekalkulasi gaya dan layout untuk halaman.
- title@: Semua CSS harus sebaris dan dibatasi ukurannya
description@: |
CSS memblokir semua perenderan, memblokir pemuatan halaman, dan cenderung besar ukurannya.
Di halaman AMP HTML, hanya gaya sebaris yang diperbolehkan.
Ini menghilangkan 1 permintaan HTTP atau sering kali lebih dari jalur perenderan yang penting
dibanding dengan sebagian besar laman web.
<p>Selain itu, ukuran maksimum style sheet sebaris adalah 50 kilobyte.
Meskipun ukurannya cukup besar untuk halaman yang sangat kompleks,
style sheet sebaris mengharuskan penulis halaman untuk menerapkan gaya penulisan CSS yang bersih.
- title@: Pemicuan font harus efisien
id: font-triggering-must-be-efficient
description@: |
Font web ukurannya sangat besar, sehingga
[pengoptimalan font web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
sangat penting bagi kinerja.
Pada halaman umumnya yang memiliki beberapa skrip sinkronisasi dan beberapa style sheet eksternal,
browser menunggu dan terus menunggu untuk mulai mengunduh font yang ukurannya besar hingga semuanya berakhir.
<p>Sistem AMP menyatakan nol permintaan HTTP hingga font mulai diunduh.
Ini hanya bisa dilakukan karena semua JS di AMP memiliki atribut asinkron
dan hanya style sheet sebaris yang diperbolehkan;
tidak ada permintaan HTTP yang memblokir browser mengunduh font.
- title@: Meminimalkan rekalkulasi gaya
description@: |
Setiap kali Anda mengukur sesuatu, tindakan ini memicu rekalkulasi gaya yang bebannya berat
karena browser harus melayout keseluruhan halaman.
Di halaman AMP, semua pembacaan DOM terjadi di awal sebelum terjadi semua penulisan.
Ini memastikan terjadi maksimal satu rekalkulasi gaya per bingkai.
<p>Ketahui selengkapnya tentang dampak gaya dan rekalkulasi layout terhadap
[kinerja perenderan](https://developers.google.com/web/fundamentals/performance/rendering/).
- title@: Hanya menjalankan animasi yang diakselerasi GPU
description@: |
Satu-satunya cara untuk mendapatkan pengoptimalan maksimal adalah dengan menjalankan animasi di GPU.
GPU memahami layer serta cara menjalankan beberapa hal di layer ini,
GPU bisa menggerakkannya, memudarkannya, tetapi tidak bisa memperbarui layout halaman;
GPU akan menyerahkan tugas ini kepada browser, yang dampaknya tidak bagus.
<p>Aturan untuk CSS yang berkaitan dengan animasi memastikan animasi bisa diakselerasi oleh GPU.
Khususnya, AMP hanya memperbolehkan animasi dan transisi pada transform dan opacity
sehingga layout halaman tidak diperlukan.
Ketahui selengkapnya tentang
[menggunakan transform dan opacity untuk perubahan animasi](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count)
- title@: Memprioritaskan pemuatan sumber daya
description@: |
AMP mengontrol semua unduhan sumber daya: dengan memprioritaskan pemuatan sumber daya,
memuat hanya apa yang diperlukan, dan mengambil di awal sumber daya yang lambat dimuat.
<p>Saat mengunduh sumber daya, AMP mengoptimalkan unduhan
sehingga sumber daya yang paling penting saat ini diunduh terlebih dulu.
Gambar dan iklan hanya diunduh jika berpotensi besar dilihat oleh pengguna,
di paro atas, atau jika pengguna berpotensi menggulir ke arahnya dengan cepat.
<p>AMP juga mengambil sumber daya yang lambat dimuat di awal.
Sumber daya dimuat selambat mungkin, tetapi diambil terlebih dahulu sedini mungkin.
Dengan demikian, semuanya dimuat sangat cepat tetapi CPU hanya dipakai
saat sumber daya benar-benar diperlihatkan ke pengguna.
- title@: Memuat halaman seketika
description@: |
[API preconnect](http://www.w3.org/TR/resource-hints/#dfn-preconnect) yang baru
sangat sering dipakai untuk memastikan permintaan HTTP secepat mungkin saat dibuat.
Dengan demikian,
halaman bisa dirender sebelum pengguna secara eksplisit menyatakan ingin menuju ke sana;
halaman mungkin sudah tersedia saat pengguna benar-benar memilihnya,
sehingga terjadi pemuatan seketika.
<p>Meskipun pra-perenderan bisa diterapkan pada semua materi web,
tindakan ini juga bisa menggunakan banyak sekali bandwidth dan CPU. AMP dioptimalkan untuk mengurangi kedua faktor ini. Pra-perenderan hanya mengunduh sumber daya di paro atas
dan pra-perenderan tidak merender hal-hal yang memberatkan CPU.
<p>Saat dokumen AMP dipra-render untuk pemuatan seketika,
hanya sumber daya di paro atas yang benar-benar diunduh.
Saat dokumen AMP dipra-render untuk pemuatan seketika,
sumber daya yang berpotensi memakai banyak CPU (seperti iframe pihak ketiga) tidak diunduh.
<p>Ketahui selengkapnya tentang
[mengapa AMP HTML tidak penuh memanfaatkan pemindai pramuat](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e)
- title@: Bantu mempercepat AMP
description@: |
AMP adalah upaya sumber terbuka.
Kami membutuhkan bantuan Anda untuk semakin mempercepat AMP.
Pelajari [cara berkontribusi](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Memvalidasi Laman AMP
---
Kekuatan utama AMP tidak hanya membuat laman cepat dimuat, tetapi AMP membuat laman cepat dimuat dengan cara yang dapat *divalidasi*. Dengan cara ini, pihak ketiga seperti Twitter, Instagram, atau Google Penelusuran dapat merasa puas terkait penyajian laman AMP kepada pembaca dengan cara yang semakin menarik.
## Bagaimana cara memeriksa validitas laman AMP saya?
Ada beberapa cara untuk memvalidasi dokumen AMP. Semuanya akan
memberikan hasil yang sama persis, jadi gunakan cara mana saja yang paling sesuai dengan gaya
pengembangan Anda.
Selain untuk memvalidasi AMP, Anda mungkin juga ingin mengonfirmasi bahwa dokumen AMP [dapat ditemukan](/docs/guides/discovery.html) oleh platform pihak ketiga.
### Developer Console Browser.
Validator AMP hadir sepaket dengan pustaka JS AMP, jadi validator tersedia di setiap laman AMP tanpa perlu diotak-atik. Untuk memvalidasi:
* Buka laman AMP di browser
* Tambahkan "`#development=1`" ke URL, misalnya, `http://localhost:8000/released.amp.html#development=1`.
* Buka [konsol Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) dan periksa kesalahan validasi.
Kesalahan Developer Console akan terlihat seperti ini:
<amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" alt="Tangkapan layar kesalahan Validator AMP di Developer Console Chrome" layout="responsive"></amp-img>
### Antarmuka Web
Validator AMP dapat digunakan sebagai antarmuka web di
[validator.ampproject.org](https://validator.ampproject.org/). Antarmuka
ini menunjukkan kesalahan yang ditampilkan sebaris bersama dengan sumber HTML laman.
Antarmuka adalah editor yang interaktif: perubahan pada sumber html menyebabkan
validasi ulang yang interaktif.
<amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" alt="Tangkapan layar validator.ampproject.org dengan contoh kesalahan." layout="responsive"></amp-img>
### Ekstensi Browser
Validator AMP dapat diakses langsung dari bilah alat browser menggunakan
ekstensi browser. Saat Anda menjelajah, secara otomatis validator akan memvalidasi setiap laman AMP
yang dikunjungi dan memberikan indikasi visual terkait validitas laman dengan ikon
berwarna.
<table>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" alt="Ikon AMP Merah menunjukkan dokumen AMP yang tidak valid."></amp-img>
</td>
<td>Jika terjadi kesalahan dalam laman AMP, ikon ekstensi
muncul dalam warna merah dan menampilkan jumlah kesalahan yang ditemukan.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" alt="Ikon AMP Hijau menunjukkan dokumen AMP yang valid."></amp-img>
</td>
<td>Jika tidak ada kesalahan dalam laman AMP, ikon muncul dalam warna hijau
dan menampilkan jumlah peringatan, jika ada.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" alt="Ikon AMP Biru menunjukkan varian HTML AMP jika diklik."></amp-img>
</td>
<td>Jika laman bukan merupakan AMP namun mengindikasikan bahwa versi AMP tersedia,
ikon muncul dalam warna biru dengan ikon tautan, dan mengeklik
ekstensi tersebut akan mengalihkan browser ke versi AMP.
</td>
</tr>
</table>
Ekstensi Validator AMP untuk
[Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) dan [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
### Alat Baris Perintah
Sebagai prasyarat, Anda harus memasang <a href="https://docs.npmjs.com/getting-started/installing-node">Node.js dengan `npm` pengelola paketnya
di sistem</a>.
Untuk memasang [alat baris perintah validator HTML AMP ](https://www.npmjs.com/package/amphtml-validator), ketik `npm install -g amphtml-validator`.
Sekarang, mari memvalidasi laman HTML AMP yang sesungguhnya.
[sourcecode:console]
$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS
[/sourcecode]
Ternyata laman ini adalah HTML AMP valid. Mari coba laman yang tidak valid:
[several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Untuk menjalankan perintah `amphtml-validator`, Anda dapat menyediakan URL laman atau nama file lokal. Download dan simpan [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) ke file, lalu jalankan:
[sourcecode:console]
$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://www.ampproject.org/docs/reference/amp-ad.html)
...
[/sourcecode]
Format pesan kesalahan terdiri dari nama file, baris, kolom, dan pesan,
sering kali diikuti oleh tautan ke referensi HTML AMP. Beberapa editor, termasuk Emacs
(cari mode kompilasi dan perintah kompilasi), dapat menafsirkan format ini dan memungkinkan
Anda melompat ke kesalahan di file asli.
Untuk titik awal yang baik guna membuat laman AMP sendiri, pertimbangkan [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html):
[sourcecode:console]
$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS
[/sourcecode]
Alat baris perintah menawarkan fitur tambahan yang meliputi menonaktifkan
warna, mencetak keluaran JSON, atau menjalankan versi tertentu dari
Javascript validator (secara default menjalankan skrip terbaru yang dipublikasikan).
[sourcecode:console]
$ amphtml-validator --help
Usage: index [options] <fileOrUrlOrMinus...>
Validates the files or urls provided as arguments. If "-" is
specified, reads from stdin instead.
Options:
-h, --help output usage information
-V, --version output the version number
--validator_js <fileOrUrl> The Validator Javascript.
Latest published version by default, or
dist/validator_minified.js (built with build.py)
for development.
--format <color|text|json> How to format the output.
"color" displays errors/warnings/success in
red/orange/green.
"text" avoids color (e.g., useful in terminals not
supporting color).
"json" emits json corresponding to the ValidationResult
message in validator.proto.
[/sourcecode]
## Apa yang terjadi jika laman saya tidak valid?
Validator AMP tidak hanya memudahkan Anda selama pengembangan. Validator juga digunakan oleh platform seperti Twitter atau Google yang mengintegrasikan laman AMP ke konten dan hasil penelusurannya. Selain itu, mereka biasanya tidak meminta laman langsung dari server, tetapi menggunakan Cache AMP Google, layanan gratis yang menyimpan cache laman Anda dan membuatnya tersedia di seluruh dunia, sehingga laman tersebut dimuat dengan lebih cepat.
Jika layanan validasi AMP mendeteksi ada sesuatu yang salah di laman Anda, laman tidak akan dapat ditemukan dan didistribusikan oleh situs web pihak ketiga dan tidak akan muncul di Cache AMP Google. Jadi tidak hanya akan kehilangan manfaat kecepatan menyimpan dalam cache, tetapi laman tidak akan terlihat di banyak tempat! Sangat disayangkan, jadi pastikan itu tidak terjadi.
## Bagaimana cara saya memperbaiki kesalahan validasi?
Kebanyakan kesalahan validasi cukup mudah dideteksi dan diperbaiki. Perhatikan tag HTML ini:
[sourcecode:html]
<img src="cat.png">
[/sourcecode]
Hal yang menyebabkan kesalahan validasi AMP ini ditampilkan di alat yang berbeda berikut:
* Developer Console Browser
<amp-img alt="Kesalahan AMP: Tag 'img' mungkin hanya muncul sebagai turunan tag 'noscript'. Apakah maksud Anda 'amp-img'? baris 11, kolom 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive"></amp-img>
* Antarmuka Web
<amp-img alt="Kesalahan AMP: Tag 'img' mungkin hanya muncul sebagai turunan tag 'noscript'. Apakah maksud Anda 'amp-img'? baris 11, kolom 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive"></amp-img>
* Ekstensi Browser
<amp-img alt="Kesalahan AMP: Tag 'img' mungkin hanya muncul sebagai turunan tag 'noscript'. Apakah maksud Anda 'amp-img'? baris 11, kolom 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive"></amp-img>
Setiap alat memberikan beberapa informasi:
1. Lokasi (baris dan kolom) di dokumen HTML tempat kesalahan terjadi,
dapat diklik pada beberapa antarmuka untuk menyorot lokasi tersebut. Pada kasus
ini, masalah terjadi di baris 11, kolom 2.
1. Baris teks mendeskripsikan kesalahannya. Pada kasus ini, teks menunjukkan bahwa
kami menggunakan tag `<img>`, ketika seharusnya menggunakan tag `<amp-img>`.
1. Tautan ke dokumen yang relevan tentang kesalahan. Pada kasus ini,
dokumentasi tersebut untuk tag `<amp-img>`. Tidak semua kesalahan menghasilkan
tautan dokumentasi.
Berhati-hatilah saat membaca ulang spek, kami menyadari bahwa kami menggunakan tag `<img>`, yang seharusnya menggunakan tag `<amp-img>`.
Untuk memahami daftar lengkap potensi masalah dengan lebih baik,
lihat [panduan Kesalahan Validasi AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
Jika masih mengalami masalah setelah mengevaluasi secara hati-hati, <a href="http://stackoverflow.com/questions/tagged/amp-html">ajukan
pertanyaan</a> dan kami akan mencoba
membantu.
```
--------------------------------------------------------------------------------
/content/learn/about-how@pt_BR.yaml:
--------------------------------------------------------------------------------
```yaml
hero:
title@: Como o AMP acelera o desempenho
subtitle@: |
Combinadas, as otimizações a seguir são a razão das páginas AMP serem tão rápidas que parecem carregar instantaneamente:
<p>Se você prefere ouvir em vez de ler, este vídeo feito pelo engenheiro-chefe em AMP, Malte Ubl, passa uma visão geral semelhante aos próximos parágrafos.
points:
pointlist:
- title@: Permitir apenas scripts assíncronos
description@: |
O JavaScript é uma ferramenta eficaz,
que pode modificar praticamente todos os aspectos da página,
mas também pode bloquear uma construção em DOM e atrasar a renderização da página
(veja também [Adicionar interatividade com o JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
Para evitar que o JavaScript atrase a renderização da página,
o AMP permite apenas o JavaScript assíncrono.
<p>Páginas AMP não podem incluir JavaScript escrito pelo autor.
Em vez de usar JavaScript,
os recursos interativos da página são processados em elementos AMP personalizados.
Os elementos AMP personalizados podem incluir JavaScript,
mas são projetados cuidadosamente para garantir que não atrapalhem o desempenho.
<p>Embora JS de terceiros seja permitido nos iframes,
ele não pode bloquear a renderização.
Por exemplo, se o JS de terceiros usar a
[API `document.write` muito prejudicial para o desempenho](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
ela não bloqueará a renderização da página principal.
- title@: Dimensionar todos os recursos estaticamente
description@: |
Recursos externos, como imagens, anúncios ou iframes, devem informar seu tamanho no HTML
para que o AMP possa determinar o tamanho e a posição de cada elemento antes de que seja feito o download dos recursos.
O AMP carrega o layout da página sem esperar que seja feito o download dos recursos.
<p>O AMP separa o layout do documento do layout do recurso.
Apenas uma solicitação HTTP é necessária para se ter o layout do documento inteiro
([+fontes](#font-triggering-must-be-efficient)).
Como o AMP é otimizado para evitar recálculos de estilo e layouts pesados no navegador,
o layout não será recriado quando os recursos forem carregados.
- title@: Não permitir que mecanismos de extensões bloqueiem a renderização
description@: |
O AMP não permite que mecanismos de extensões bloqueiem a renderização da página.
O AMP oferece suporte a extensões para itens como
[efeitos Lightbox](/docs/reference/extended/amp-lightbox.html),
[incorporações do Instagram](/docs/reference/extended/amp-instagram.html),
[tweets](/docs/reference/extended/amp-twitter.html) etc.
Embora eles precisem de solicitações HTTP adicionais,
essas solicitações não bloqueiam o layout e a renderização da página.
<p>Qualquer página que use um script personalizado deve informar ao sistema AMP
que ela futuramente terá uma tag personalizada.
Por exemplo, o script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
informa ao sistema que haverá uma tag `amp-iframe`.
O AMP cria a caixa de iframe antes mesmo de saber o que ela incluirá:
example: /content/includes/amp-iframe.md
- title@: Remover qualquer JavaScript de terceiros do caminho essencial
description@: |
JS de terceiros costuma usar o carregamento síncrono de JS.
Eles também gostam de `document.write` mais scripts síncronos.
Por exemplo, se tiver cinco anúncios e cada um realizar três carregamentos de sincronização
em uma conexão com 1 segundo de latência,
você terá 15 segundos de carregamento apenas para carregar o JS.
<p>As páginas AMP permitem o uso de JavaScript de terceiros, mas apenas em iframes com sandbox.
Ao serem restritos a iframes, eles não podem bloquear a execução da página principal.
Mesmo que façam com que o estilo seja recalculado várias vezes,
seus iframes pequenos contêm muito pouco DOM.
<p>Recálculos de estilos e layouts são típicos para o tamanho de DOM,
então os recálculos de iframe são muito rápidos em comparação
a um recálculo de estilos e layout para a página.
- title@: Qualquer CSS deve ser inline e de tamanho limitado
description@: |
O CSS bloqueia toda a renderização, bloqueia o carregamento da página e costuma ser excessivo.
Nas páginas AMP HTML, apenas estilos inline são permitidos.
Isso remove uma ou até mais solicitações HTTP do caminho essencial de renderização
em comparação com a maioria das páginas da Web.
<p>Além disso, a folha de estilo inline deve ter um tamanho máximo de 50 kilobytes.
Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas,
ele ainda exige que o autor da página otimize o CSS.
- title@: O acionamento de fontes deve ser eficiente
id: font-triggering-must-be-efficient
description@: |
As fontes da Web são muito grandes, então uma
[otimização de fontes da Web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
é essencial para o desempenho.
Em uma página comum, com poucos scripts de sincronização e poucas folhas de estilo externas,
o navegador fica esperando para começar a fazer o download dessas fontes enormes até que tudo isso aconteça.
<p>O sistema AMP declara zero solicitação HTTP até que comece o download das fontes.
Isso só é possível porque todo JS em AMP tem o atributo de sincronização
e apenas folhas de estilo inline são permitidas;
nenhuma solicitação HTTP impede que o navegador faça o download das fontes.
- title@: Minimizar os recálculos de estilo
description@: |
Cada vez que você mede algo, recálculos de estilo são acionados, o que é pesado,
pois o navegador precisa refazer o layout da página inteira.
Nas páginas AMP, todas as leituras de DOM são realizadas primeiro, antes de todas as gravações.
Isso garante que ocorra, no máximo, um recálculo de estilos por frame.
<p>Saiba mais sobre o impacto dos recálculos de estilo e layout em
[desempenho de renderização](https://developers.google.com/web/fundamentals/performance/rendering/).
- title@: Executar apenas animações aceleradas por GPU
description@: |
A única maneira de ter otimizações rápidas é executá-las na GPU.
A GPU entende camadas, sabe como realizar atividades nessas camadas,
pode movê-las, pode desvanecê-las, mas não pode atualizar o layout da página;
ela passa essa tarefa para o navegador e isso não é bom.
<p>As regras para CSS relacionado a animações garantem que as animações possam ser aceleradas pela GPU.
Especificamente, o AMP permite animação e transição apenas em transform e opacity
para que o layout da página não seja necessário.
Saiba mais sobre como
[usar transform e opacity em alterações de animação](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
- title@: Priorizar o carregamento de recursos
description@: |
O AMP controla todos os downloads de recursos: ele prioriza o carregamento de recursos,
carregando apenas o necessário, e realiza a pré-busca de recursos de carregamento lento.
<p>Quando o AMP baixa recursos, ele otimiza os downloads
para que se faça primeiro o download dos recursos mais importantes no momento.
Somente é feito o download de imagens e anúncios quando forem ser vistos pelo usuário,
vistos acima da dobra ou se for provável que o usuário chegue a eles rapidamente.
<p>O AMP também realiza a pré-busca de recursos de carregamento lento.
Os recursos são carregados o mais tarde possível, mas a pré-busca é feita assim que possível.
Dessa forma, tudo é carregado muito rapidamente, mas a CPU só é usada
quando os recursos são exibidos aos usuários.
- title@: Carregar páginas em um instante
description@: |
A nova [preconnect API](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
é muito usada para garantir que as solicitações HTTP sejam tão rápidas quanto possível ao serem feitas.
Assim,
uma página pode ser renderizada antes de o usuário informar explicitamente que deseja navegar até ela;
a página pode já estar disponível quando o usuário a selecionar,
fazendo com que o carregamento seja instantâneo.
<p>Embora a pré-renderização possa ser aplicada a todo o conteúdo Web,
ela também pode usar muita largura de banda e recursos de CPU. O AMP é otimizado para reduzir esses fatores. A pré-renderização somente faz o download dos recursos acima da dobra
e não renderiza itens que possam ser pesados em termos de uso de CPU.
<p>Quando documentos AMP são pré-renderizados para carregamento instantâneo,
somente é feito o download dos recursos acima da dobra.
Quando documentos AMP são pré-renderizados para carregamento instantâneo,
não é feito o download de recursos que podem usar muitos recursos de CPU (como iframes de terceiros).
<p>Saiba mais sobre
[por que o AMP HTML não aproveita ao máximo o scanner de pré-carregamento](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
- title@: Ajude a tornar o AMP mais rápido
description@: |
AMP é um esforço de código aberto.
Precisamos da sua ajuda para deixá-lo ainda mais rápido.
Saiba [como contribuir](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Diseños compatibles
---
Convierte tus elementos en adaptables
con `layout=responsive`.
[TOC]
## Valores compatibles con el atributo de diseño
De forma predeterminada,
utiliza diseños adaptables.
Lista completa de los valores compatibles con el atributo de diseño:
<table>
<thead>
<tr>
<th class="col-twenty" data-th="Layout type">Tipo de diseño</th>
<th class="col-twenty" data-th="Width/height required">Anchura/altura requerida</th>
<th data-th="Behavior">Comportamiento</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-twenty" data-th="Layout type">`nodisplay`</td>
<td class="col-twenty" data-th="Description">No</td>
<td data-th="Behavior">El elemento no se muestra. Este diseño se puede aplicar a todos los elementos de AMP. El componente no ocupa espacio en la pantalla, como si su estilo de visualización tuviera como valor "none". Se supone que el elemento puede mostrarse con una acción del usuario, por ejemplo, <a href="/docs/reference/extended/amp-lightbox.html">`amp-lightbox`</a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type">`fixed`</td>
<td class="col-twenty" data-th="Description">Sí</td>
<td data-th="Behavior">El elemento tiene una anchura y una altura fijas y no es compatible con la adaptabilidad. Las únicas excepciones son los elementos <a href="/docs/reference/amp-pixel.html">`amp-pixel`</a> y <a href="/docs/reference/extended/amp-audio.html">`amp-audio`</a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type">`responsive`</td>
<td class="col-twenty" data-th="Description">Sí</td>
<td data-th="Behavior">El tamaño del elemento depende de la anchura de su elemento contenedor y la altura se modifica de tamaño automáticamente en función de la relación de aspecto determinada por los atributos de anchura y altura. Este diseño funciona muy bien para la mayoría de los elementos de AMP, incluidos <a href="/docs/reference/amp-img.html">`amp-img`</a> y <a href="/docs/reference/amp-video.html">`amp-video`</a>. El espacio disponible depende del elemento principal y también se puede personalizar usando el elemento CSS `max-width`.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type">`fixed-height`</td>
<td class="col-twenty" data-th="Description">Solo altura</td>
<td data-th="Behavior">El elemento toma el espacio disponible, pero no modifica la altura. Este diseño funciona bien para elementos como <a href="/docs/reference/extended/amp-carousel.html">`amp-carousel`</a>, que implica contenido en posición horizontal. El atributo `width` no debe estar presente o debe ser igual a `auto`.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type">`fill`</td>
<td class="col-twenty" data-th="Description">No</td>
<td data-th="Behavior">El elemento toma el espacio disponible, tanto en anchura como en altura. En otras palabras, el diseño de un elemento de relleno coincide con el elemento principal.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type">`container`</td>
<td class="col-twenty" data-th="Description">No</td>
<td data-th="Behavior">El elemento permite que los elementos secundarios definan su tamaño, igual que un HTML `div` normal. Se supone que el componente no tiene un diseño específico propio, sino que simplemente actúa como contenedor. Los elementos secundarios se procesan inmediatamente.</td>
</tr>
</tbody>
</table>
### ¿Qué ocurre si la altura y la anchura no están definidas?
En algunos casos, si los atributos `width` o `height` no están especificados,
el tiempo de ejecución de AMP puede ofrecer estos valores de forma predeterminada del siguiente modo:
* [`amp-pixel`](/docs/reference/amp-pixel.html): tanto la anchura como la altura tienen 0 como valor predeterminado.
* [`amp-audio`](/docs/reference/extended/amp-audio.html): el navegador infiere la anchura y la altura predeterminadas.
### ¿Qué ocurre si el atributo de diseño no está definido?
El comportamiento de diseño se determina del siguiente modo:
* Si `height` está presente y `width` está ausente o es igual a `auto`, se asume que el diseño es `fixed-height`.
* Si los atributos `width` o `height` están presentes junto con el atributo `sizes`, se asume que el diseño es `responsive`.
* Si los atributos `width` o `height` están presentes, se asume que el diseño es `fixed`.
* Si `width` y `height` no están presentes, se asume que el diseño es `container`.
## Utilizar @media y media
Utiliza a [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) para controlar el aspecto y el comportamiento del diseño de la página del mismo modo que lo harías con cualquier otro sitio web.
Cuando la ventana del navegador cambia de tamaño o de orientación,
las consultas de los medios se vuelven a evaluar y los elementos se ocultan y se muestran en función de los nuevos resultados.
Obtén más información sobre cómo controlar el diseño con consultas de medios en [Usar consultas de medios en CSS para una mayor adaptabilidad](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=es).
Una función adicional para el diseño adaptable disponible en AMP es el atributo `media`.
Este atributo se puede utilizar en todos los elementos de AMP;
funciona de forma similar a las consultas de medios en la hoja de estilo global,
pero solamente influye en el elemento específico de una única página.
Por ejemplo, aquí tenemos dos imágenes con consultas de medios que se excluyen mutuamente.
[sourcecode:html]
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive" >
</amp-img>
[/sourcecode]
En función de la anchura de la pantalla, se elegirá y procesará una de ellas.
[sourcecode:html]
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width=527
height=193
layout="responsive" >
</amp-img>
[/sourcecode]
## Usar los atributos srcset y sizes
Usa el atributo `srcset` para controlar los recursos de un elemento
en función de las diferentes expresiones de medios.
En particular, úsalo para especificar en todas las etiquetas [`amp-img`](/docs/reference/amp-img.html) qué recursos de imagen se deben utilizar en función de los diferentes tamaños de pantalla.
En este sencillo ejemplo,
`srcset` especifica qué imagen hay que utilizar en función de la anchura de la pantalla.
El descriptor `w` indica al navegador la anchura
de cada una de las imágenes de la lista:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w >
</amp-img>
[/sourcecode]
**Nota:** AMP es compatible con el descriptor `w` en todos los navegadores.
Obtén más información sobre cómo crear imágenes adaptables con `srcset`
en [Using Responsive Images (Now)](http://alistapart.com/article/using-responsive-images-now).
También puedes utilizar el atributo `sizes` junto con `srcset`.
El atributo `sizes` describe cómo calcular el tamaño del elemento en función de cualquier expresión de medios.
A partir del tamaño del elemento calculado, el agente de usuario selecciona la fuente más pertinente suministrada por el atributo `srcset`.
Consideremos el siguiente ejemplo:
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w
sizes="(min-width: 650px) 50vw, 100vw" >
</amp-img>
[/sourcecode]
El atributo `sizes` define la anchura del elemento como el 50% del tamaño de la ventana gráfica cuando esta es de 650 píxeles o más.
Por ejemplo, si la ventana gráfica es de 800 píxeles, la anchura del elemento se establece en 400 píxeles.
El navegador selecciona el recurso `srcset` relativo a 400 píxeles,
suponiendo que la proporción de píxeles del dispositivo es 1,
que, en este caso, es `narrow.jpg` (320px).
**Importante:** Cuando el atributo sizes se especifica junto con la anchura y la altura, el diseño pasa a `responsive` de forma predeterminada.
Obtén más información sobre las similitudes y las diferencias entre los atributos `sizes` y `srcset` y las consultas de medios en la entrada de blog [Srcset and sizes](https://ericportis.com/posts/2014/srcset-sizes/).
## Incluir los atributos placeholder y fallback
### placeholder
El elemento marcado con el atributo `placeholder` actúa como marcador de posición para el elemento AMP superior.
Si se especifica, un elemento `placeholder` debe ser un elemento secundario directo del elemento AMP.
[sourcecode:html]
<amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>
[/sourcecode]
De forma predeterminada, el marcador de posición se muestra inmediatamente para el elemento AMP, incluso si no se han descargado o inicializado los recursos del elemento AMP.
Una vez listo, el elemento AMP normalmente oculta su marcador de posición y muestra el contenido.
**Nota:** El marcador de posición no tiene que ser un elemento AMP; cualquier elemento HTML puede actuar como marcador de posición.
### fallback
Utiliza el atributo `fallback` para indicar el comportamiento de respaldo
de cualquier elemento que no sea compatible con el navegador.
Por ejemplo, utiliza el atributo `fallback` para comunicar al usuario
que el navegador no es compatible con una característica concreta:
[sourcecode:html]
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg" >
<div fallback>
<p>Your browser doesn’t support HTML5 video.</p>
</div>
</amp-video>
[/sourcecode]
El atributo `fallback` se puede establecer en cualquier elemento HTML, no solo en los elementos AMP.
Si se especifica, el elemento `fallback` debe ser un elemento secundario directo del elemento AMP.
### noloading
Muchos elementos AMP están incluidos en la lista blanca para mostrar un "indicador de carga", que es una animación básica que muestra que el elemento aún no se ha cargado completamente.
Los elementos pueden excluirse de este comportamiento añadiendo el atributo `noloading`.
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Weryfikacja stron AMP
---
Główną zaletą AMP nie jest to, że dzięki niemu strony działają szybciej, tylko to, że tę szybkość uzyskujemy za pomocą standardu, który można *weryfikować*. W ten sposób serwisy takie jak Twitter, Instagram czy wyszukiwarka Google, mogą w coraz bardziej interesujący sposób oferować użytkownikom swoje treści.
## Jak mogę sprawdzić, czy moja strona AMP jest prawidłowa?
Dokument AMP można sprawdzić na kilka sposobów. Każdy z nich da ten sam efekt, możesz więc korzystać z tego, który najbardziej Ci odpowiada.
Poza przeprowadzeniem weryfikacji AMP warto też upewnić się, czy Twój dokument AMP jest [wykrywalny](/docs/guides/discovery.html) na platformach zewnętrznych.
### Developer Console w przeglądarce
Narzędzie do weryfikacji stron AMP jest dołączane do biblioteki AMP JS, jest więc dostępne na każdej stronie AMP. Aby przeprowadzić weryfikację:
* Otwórz stronę AMP w przeglądarce.
* Dołącz do adresu URL atrybut „`#development=1`”, na przykład `http://localhost:8000/released.amp.html#development=1`
* Otwórz [konsolę Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) i sprawdź błędy weryfikacji.
Błędy Developer Console będą wyglądać mniej więcej tak:
<amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" alt="Zrzut ekranu narzędzia do weryfikacji stron AMP w konsoli chrome" layout="responsive"></amp-img>
### Interfejs internetowy
Narzędzia do weryfikacji stron AMP można użyć w postaci interfejsu internetowego
na stronie [validator.ampproject.org](https://validator.ampproject.org/). Interfejs ten pokazuje błędy wyświetlone w tekście obok źródła HTML strony.
Jest to edytor interaktywny: zmiany w źródle html powodują automatyczną, ponowną weryfikację.
<amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" alt="Zrzut ekranu ze strony validator.ampproject.org z przykładami błędów." layout="responsive"></amp-img>
### Rozszerzenie do przeglądarki
Narzędzie do weryfikacji stron AMP można otworzyć bezpośrednio z przeglądarki za pomocą odpowiedniego rozszerzenia. Podczas przeglądania rozszerzenie automatycznie zweryfikuje każdą odwiedzoną stronę AMP, wyświetlając informacje weryfikacyjne za pomocą kolorowych ikon.
<table>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" alt="Czerwona ikona AMP informująca o nieprawidłowym dokumencie AMP." layout="fixed"></amp-img>
</td>
<td>W przypadku wykrycia błędów na stronach AMP pojawi się czerwona ikona rozszerzenia pokazująca liczbę znalezionych błędów.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" alt="Zielona ikona wskazująca poprawny dokument AMP." layout="fixed"></amp-img>
</td>
<td>Gdy rozszerzenie nie wykryje błędów na stronie AMP, ikona będzie zielona i wyświetli liczbę ostrzeżeń, jeśli jakieś będą.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" alt="Niebieska ikona wskazująca po kliknięciu wariant AMP HTML." layout="fixed"></amp-img>
</td>
<td>Gdy strona nie jest stroną AMP, ale wyświetla informację o dostępnej wersji AMP, ikona ma postać linku w kolorze niebieskim. Kliknięcie rozszerzenia spowoduje przekierowanie przeglądarki do wersji AMP.
</td>
</tr>
</table>
Rozszerzenie narzędzia do weryfikacji stron AMP do przeglądarek [Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) i [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
### Narzędzie wiersza poleceń
Warunkiem wstępnym może być konieczność [zainstalowania w systemie platformy Node.js z menedżerem pakietów `npm`](https://docs.npmjs.com/getting-started/installing-node).
Aby zainstalować [narzędzie wiersza poleceń weryfikatora stron AMP HTML](https://www.npmjs.com/package/amphtml-validator), wpisz `npm install -g amphtml-validator`.
A teraz zweryfikujemy istniejącą stronę AMP HTML.
[sourcecode:console]
$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS
[/sourcecode]
Jak można się było spodziewać, ta strona zawiera prawidłowy kod AMP HTML. Sprawdźmy zatem stronę z błędami:
[several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Aby uruchomić polecenie `amphtml-validator`, można podać adres URL strony albo ścieżkę do pliku zapisanego lokalnie. Pobierz i zapisz do pliku stronę [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html), i uruchom:
[sourcecode:console]
$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see https://www.ampproject.org/docs/reference/amp-img.html)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see https://www.ampproject.org/docs/reference/amp-ad.html)
...
[/sourcecode]
Format komunikatów o błędach składa się z nazwy pliku, linii, kolumny i komunikatu, po którym często następuje link do materiałów o AMP HTML. Niektóre edytory, np. Emacs (poszukaj polecenia kompilacji oraz trybu kompilacji), mogą interpretować ten format i umożliwić Ci przechodzenie bezpośrednio do błędów w pliku oryginalnym.
Dobrym punktem początkowym w tworzeniu własnej strony AMP jest [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html):
[sourcecode:console]
$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS
[/sourcecode]
Narzędzie wiersza polecenia oferuje dodatkowe funkcje, w tym wyłączanie koloru, wydruk składni JSON czy uruchamianie określonej wersji weryfikatora JavaScriptu (domyślnie uruchamiany jest ostatnio opublikowany skrypt).
[sourcecode:console]
$ amphtml-validator --help
Usage: index [options] <fileOrUrlOrMinus...>
Validates the files or urls provided as arguments. If "-" is
specified, reads from stdin instead.
Options:
-h, --help output usage information
-V, --version output the version number
--validator_js <fileOrUrl> The Validator Javascript.
Latest published version by default, or
dist/validator_minified.js (built with build.py)
for development.
--format <color|text|json> How to format the output.
"color" displays errors/warnings/success in
red/orange/green.
"text" avoids color (e.g., useful in terminals not
supporting color).
"json" emits json corresponding to the ValidationResult
message in validator.proto.
[/sourcecode]
## Co się stanie, jeśli moja strona okaże się nieprawidłowa?
Narzędzie do weryfikacji stron AMP ułatwia nie tylko tworzenie kodu. Korzystają z niego również platformy takie jak Twitter czy Google, integrujące Twoje strony AMP we własnych treściach i wynikach wyszukiwania. Co więcej, takie platformy zwykle nie żądają stron bezpośrednio z Twojego serwera, tylko korzystają z pamięci podręcznej Google AMP Cache – darmowej usługi przechowującej Twoje strony w pamięci podręcznej – co umożliwia jeszcze szybsze wczytywanie ich w dowolnym miejscu świata.
Jeśli usługa weryfikacji AMP znajdzie jakąś nieprawidłowość na Twojej stronie, nie zostanie ona wykryta przez witryny firm zewnętrznych i nie będzie przez nie rozpowszechniana. Nie pojawi się również w pamięci podręcznej Google AMP Cache. W takim przypadku nie tylko utracisz korzyści płynące z korzystania z pamięci podręcznej. Prawdopodobnie Twoja strona nie wyświetli się w wielu miejscach. Byłaby to wielka szkoda, dopilnujmy więc, by tak się nie stało.
## Jak naprawić błędy wynikające ze sprawdzania poprawności kodu?
Większość błędów zgłoszonych w ramach weryfikacji można łatwo naprawić. Weźmy na przykład ten tag HTML:
[sourcecode:html]
<img src="cat.png">
[/sourcecode]
Generuje on błąd weryfikacji AMP zgłaszany przez narzędzia:
* Developer Console w przeglądarce
<amp-img alt="Błąd AMP: tag „img” może się pojawiać tylko jako element podrzędny tagu „noscript”.Czy chodziło Ci o „amp-img”?linia 11, kolumna 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive"></amp-img>
* Interfejs internetowy
<amp-img alt="Błąd AMP: tag „img” może się pojawiać tylko jako element podrzędny tagu „noscript”.Czy chodziło Ci o „amp-img”?linia 11, kolumna 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive"></amp-img>
* Rozszerzenie do przeglądarki
<amp-img alt="Błąd AMP: tag „img” może się pojawiać tylko jako element podrzędny tagu „noscript”.Czy chodziło Ci o „amp-img”?linia 11, kolumna 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive"></amp-img>
Każde z tych narzędzi podaje kilka informacji:
1. Lokalizacja (linia i kolumna) w dokumencie HTML, w której wystąpił
błąd. W niektórych interfejsach tę informację można kliknąć, by ją podświetlić w dokumencie. W tym przypadku problem pojawił się w linii 11, w kolumnie 2</li>
1. Linia tekstu opisującego błąd. W tym przypadku tekst wskazuje, że
używamy tagu `<img>`, a powinniśmy używać tagu `<amp-img>`.</li>
1. Link do odpowiedniego dokumentu z informacjami o błędzie. W tym przypadku dokumentacja dotyczy tagu `<amp-img>`. Nie wszystkie błędy generują linki do dokumentacji.
Czytając uważnie specyfikację, zauważamy, że w kodzie znajduje się tag `<img>` zamiast tagu `<amp-img>`.
Aby poznać pełną listę potencjalnych błędów, zapoznaj się z [przewodnikiem po błędach weryfikacji AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
Jeśli po dokładnym sprawdzeniu, wciąż masz problem, [zadaj pytanie](http://stackoverflow.com/questions/tagged/amp-html) – postaramy się pomóc.
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Mises en page compatibles
---
Dans le cas d'éléments, il suffit d'inclure le code `layout=responsive`.
[TOC]
## Valeurs autorisées pour l'attribut de mise en page
Par défaut, utilisez des mises en page responsives.
Voici la liste complète des valeurs autorisées pour l'attribut de mise en page :
<table>
<thead>
<tr>
<th class="col-twenty" data-th="Layout type">Type de mise en page</th>
<th class="col-twenty" data-th="Width/height required">Largeur/hauteur requise</th>
<th data-th="Behavior">Comportement</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-twenty" data-th="Layout type"><code>nodisplay</code></td>
<td class="col-twenty" data-th="Description">Non</td>
<td data-th="Behavior">Élément non affiché. Cette mise en page peut être appliquée à chaque élément AMP. Le composant n'occupe pas de place à l'écran, comme si son style d'affichage était inexistant. On considère que l'élément peut s'afficher de lui-même en cas d'action de l'utilisateur, par exemple <a href="/docs/reference/extended/amp-lightbox.html"><code>amp-lightbox</code></a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed</code></td>
<td class="col-twenty" data-th="Description">Oui</td>
<td data-th="Behavior">L'élément a une largeur et une hauteur fixes. Il ne s'adapte donc pas. Les seules exceptions sont les éléments <a href="/docs/reference/amp-pixel.html"><code>amp-pixel</code></a> et <a href="/docs/reference/extended/amp-audio.html"><code>amp-audio</code></a>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>responsive</code></td>
<td class="col-twenty" data-th="Description">Oui</td>
<td data-th="Behavior">Élément ajusté à la largeur de son élément conteneur. Redimensionnement automatique de la hauteur au format donné par les attributs de largeur et de hauteur. Cette mise en page fonctionne très bien pour la plupart des éléments AMP, y compris <a href="/docs/reference/amp-img.html"><code>amp-img</code></a> et <a href="/docs/reference/amp-video.html"><code>amp-video</code></a>. L'espace disponible dépend de l'élément parent et peut également être personnalisé en utilisant le CSS <code>max-width</code>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fixed-height</code></td>
<td class="col-twenty" data-th="Description">Hauteur seulement</td>
<td data-th="Behavior">L'élément prend l'espace qui lui est offert, mais sa hauteur reste inchangée. Cette mise en page fonctionne bien pour les éléments tels qu'<a href="/docs/reference/extended/amp-carousel.html"><code>amp-carousel</code></a>, impliquant un contenu positionné horizontalement. L'attribut <code>width</code> ne doit pas être présent ou doit être égal à <code>auto</code>.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>fill</code></td>
<td class="col-twenty" data-th="Description">Non</td>
<td data-th="Behavior">L'élément prend l'espace qui lui est offert, en termes de largeur et de hauteur. En d'autres termes, la mise en page d'un élément de remplissage correspond à son parent.</td>
</tr>
<tr>
<td class="col-twenty" data-th="Layout type"><code>container</code></td>
<td class="col-twenty" data-th="Description">Non</td>
<td data-th="Behavior">L'élément permet à ses enfants de définir sa taille, comme une balise <code>div</code> HTML standard. Le composant n'est pas censé avoir une mise en page propre. Il fonctionne comme un conteneur. Ses enfants sont affichés immédiatement.</td>
</tr>
</tbody>
</table>
### Que se passe-t-il si la largeur et la hauteur ne sont pas définies ?
Parfois, si `width` ou `height` ne sont pas spécifiés, l'exécution AMP peut utiliser les valeurs par défaut suivantes :
* [`amp-pixel`](/docs/reference/amp-pixel.html): la largeur et la hauteur par défaut sont de 0.
* [`amp-audio`](/docs/reference/extended/amp-audio.html): la largeur et la hauteur par défaut proviennent du navigateur.
### Que se passe-t-il si l'attribut de mise en page n'est pas défini ?
Le comportement de la mise en page est déterminé comme suit :
* Si `height` est présent et `width` est absent ou égal à `auto`, la mise en page `fixed-height` est utilisée.
* Si les attributs `width` ou `height` sont présents, ainsi que l'attribut `sizes`, la mise en page `responsive` est utilisée.
* Si les attributs `width` ou `height` sont présents, la mise en page `fixed` est utilisée.
* En l'absence de `width` et de `height`, la mise en page `container` est utilisée.
## Utiliser les attributs "@media" et "media"
Utilisez [`@media`](https://developer.mozilla.org/fr-FR/docs/Web/CSS/@media) pour contrôler la mise en page et le comportement de la page, comme sur n'importe quel autre site Web.
Lorsque la fenêtre du navigateur change de taille ou d'orientation, les requêtes média sont réévaluées, et les éléments sont cachés et présentés sur la base des nouveaux résultats.
Pour en savoir plus sur le contrôle de la mise en page grâce aux requêtes média, consultez [Utiliser des requêtes média CSS à des fins d'adaptabilité](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=fr).
L'attribut `media` constitue une fonctionnalité supplémentaire de responsive design disponible dans l'AMP.
Cet attribut peut être utilisé avec tous les éléments AMP ; il fonctionne comme les requêtes média de votre feuille de style globale, mais ne concerne qu'un élément spécifique sur une seule page.
Par exemple, voici deux images avec des requêtes média qui s'excluent mutuellement.
[sourcecode:html]
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width=466
height=355
layout="responsive" >
</amp-img>
[/sourcecode]
En fonction de la largeur de l'écran, l'une ou l'autre sera récupérée et affichée.
[sourcecode:html]
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width=527
height=193
layout="responsive" >
</amp-img>
[/sourcecode]
## Utiliser les attributs "srcset" et "sizes"
Utilisez l'attribut `srcset` pour contrôler les ressources d'un élément en fonction des différentes expressions de médias.
En particulier, utilisez-le pour toutes les balises [`amp-img`](/docs/reference/amp-img.html) pour indiquer les ressources d'images à utiliser en fonction des diverses tailles d'écran.
Dans cet exemple simple, `srcset` indique l'image à utiliser en fonction de la largeur de l'écran.
Le descripteur `w` indique au navigateur la largeur de chaque image de la liste :
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w >
</amp-img>
[/sourcecode]
**Remarque** : L'AMP accepte le descripteur `w` dans tous les navigateurs.
Pour en savoir plus sur la création d'images responsives à l'aide de l'attribut `srcset`, lisez [Using Responsive Images (Now)](http://alistapart.com/article/using-responsive-images-now) (Utiliser des images responsives (Maintenant) – en anglais).
Vous pouvez également utiliser l'attribut `sizes` avec `srcset`.
L'attribut `sizes` décrit comment calculer la taille de l'élément en fonction des expressions de médias.
Sur la base de la taille calculée de l'élément, le user-agent sélectionne la source la plus pertinente fournie par l'attribut `srcset`.
Prenons l'exemple suivant :
[sourcecode:html]
<amp-img
src="wide.jpg"
srcset="wide.jpg" 640w,
"narrow.jpg" 320w
sizes="(min-width: 650px) 50vw, 100vw" >
</amp-img>
[/sourcecode]
L'attribut `sizes` fait en sorte que la largeur de l'élément corresponde à 50 % de la taille de la fenêtre d'affichage quand cette dernière fait au moins 650 pixels.
Par exemple, si la fenêtre d'affichage fait 800 pixels, la largeur de l'élément est définie sur 400 pixels.
Le navigateur sélectionne alors la ressource `srcset` la plus proche de 400 pixels, en supposant que le ratio en pixels de l'appareil est de 1, ce qui donne dans le cas présent `narrow.jpg` (320 pixels).
**Important** : Lorsque l'attribut "sizes" est spécifié, avec une largeur et une hauteur, la mise en page par défaut est `responsive`.
Pour en savoir plus sur les attributs `sizes` et `srcset` par rapport aux requêtes média, lisez cet article de blog [Srcset et sizes](https://ericportis.com/posts/2014/srcset-sizes/).
## Inclure des espaces réservés et des créations de remplacement
### placeholder
L'élément comportant l'attribut `placeholder` fonctionne comme un espace réservé pour l'élément AMP parent.
L'élément `placeholder`, s'il est indiqué, doit être un enfant direct de l'élément AMP.
[sourcecode:html]
<amp-anim src="animated.gif" width=466 height=355 layout="responsive" >
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>
[/sourcecode]
Par défaut, l'espace réservé est immédiatement affiché pour l'élément AMP, même si les ressources de l'élément AMP n'ont pas été téléchargées ni initialisées.
Une fois prêt, l'élément AMP cache généralement son espace réservé et affiche le contenu.
**Remarque** : Il n'est pas nécessaire que l'espace réservé soit un élément AMP ; tout élément HTML peut faire office d'espace réservé.
### fallback
Utilisez l'attribut `fallback` pour indiquer le comportement de la création de remplacement pour tout élément non compatible avec le navigateur.
Par exemple, utilisez l'attribut `fallback` pour indiquer à l'utilisateur que le navigateur n'accepte pas une fonctionnalité en particulier :
[sourcecode:html]
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg" >
<div fallback>
<p>Your browser doesn’t support HTML5 video.</p>
</div>
</amp-video>
[/sourcecode]
L'attribut `fallback` peut concerner n'importe quel élément HTML, et pas seulement les éléments AMP.
Le cas échéant, l'élément `fallback` doit être un enfant direct de l'élément AMP.
### noloading
De nombreux éléments AMP peuvent afficher un "indicateur de chargement", animation basique montrant que l'élément n'a pas encore complètement chargé.
Il est possible de désactiver un tel comportement des éléments en ajoutant l'attribut `noloading`.
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Analytics: Dasar-Dasarnya
toc: true
---
Mulailah di sini untuk mempelajari dasar-dasar analisis AMP.
[TOC]
## Menggunakan amp-pixel atau amp-analytics?
AMP menyediakan dua komponen untuk memenuhi kebutuhan analisis dan pengukuran Anda:
[amp-pixel](/docs/reference/amp-pixel.html) dan
[amp-analytics](/docs/reference/extended/amp-analytics.html).
Kedua opsi ini mengirim data analisis ke titik akhir yang didefinisikan.
Jika Anda mencari perilaku seperti
[melacak piksel](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
komponen `amp-pixel` menyediakan pelacakan tampilan halaman dasar;
data tampilan halaman dikirim ke URL yang didefinisikan.
Sebagian integrasi dengan vendor bisa memanggil komponen ini,
yang mana dalam hal ini integrasi akan menetapkan titik akhir URL yang tepat.
Untuk sebagian besar solusi analisis, gunakan `amp-analytics`.
Pelacakan tampilan halaman juga bekerja dalam `amp-analytics`.
Namun Anda juga bisa melacak keterlibatan pengguna dengan segala tipe materi halaman,
termasuk klik pada tautan dan tombol.
Dan Anda bisa mengukur sejauh mana pada halaman pengguna telah menggulir,
entah pengguna itu terlibat dengan media sosial atau tidak, dan lainnya
(lihat
[Mendalami AMP Analytics](/docs/guides/analytics/deep_dive_analytics.html)).
Sebagai bagian dari pengintegrasian dengan platform,
penyedia telah menawarkan konfigurasi `amp-analytics` yang telah didefinisikan sebelumnya
sehingga mudah menangkap data dan mendorongnya ke alat pelacakan mereka.
Mengakses dokumentasi vendor akses dari
[spesifikasi amp-analytics](/docs/reference/extended/amp-analytics.html).
Anda sama-sama bisa menggunakan `amp-pixel` maupun `amp-analytics` di halaman Anda.
`amp-pixel` untuk pelacakan tampilan halaman sederhana,
`amp-analytics` untuk semua hal lainnya.
Anda juga bisa menambahkan beberapa bagian dari setiap tag.
Jika Anda bekerja dengan beberapa bagian penyedia analisis,
Anda akan membutuhkan satu tag per solusinya.
Ingatlah bahwa halaman AMP yang lebih simpel akan lebih baik bagi pengguna,
jadi jika Anda tidak memerlukan tag ekstra, jangan gunakan tag tersebut.
## Membuat konfigurasi analisis sederhana
Ketahui cara membuat konfigurasi
[amp-pixel](/docs/reference/amp-pixel.html) dan
[amp-analytics](/docs/reference/extended/amp-analytics.html) sederhana.
### Konfigurasi amp-pixel sederhana
Untuk membuat konfigurasi `amp-pixel` sederhana,
masukkan sesuatu seperti yang berikut ke dalam badan halaman AMP Anda:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
[/sourcecode]
Dalam contoh ini,
data tampilan halaman dikirim ke URL yang didefinisikan, bersama angka acak.
Variabel `RANDOM` merupakan satu dari banyak
[variabel penggantian dalam platform AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
Ketahui selengkapnya tentang
[Penggantian variabel](/docs/guides/analytics/analytics_basics.html#variable-substitution) di sini.
Komponen [amp-pixel](/docs/reference/amp-pixel.html)
adalah komponen bawaan,
jadi Anda tidak memerlukan deklarasi penyertaan seperti yang biasa dilakukan
untuk perluasan komponen AMP, termasuk `amp-analytics`.
Namun Anda harus menempatkan tag `amp-pixel` sedekat mungkin
dengan awal `<body>`.
Piksel pelacakan hanya akan dipicu ketika tag dengan sendirinya ditampilkan.
Jika `amp-pixel` diposisikan di dekat bagian bawah halaman,
maka ia tidak akan dipicu.
### Konfigurasi amp-analytics sederhana
Untuk membuat konfigurasi
[amp-analytics](/docs/reference/extended/amp-analytics.html) sederhana,
Anda harus terlebih dahulu menyertakan deklarasi `custom-element` ini
dalam `<head>` dari dokumen AMP (lihat juga
[Deklarasi penyertaan komponen](/docs/reference/extended.html#component-inclusion-declaration)):
[sourcecode:html]
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
[/sourcecode]
Contoh berikut serupa dengan [contoh `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
Setiap kali sebuah halaman terlihat,
kejadian pemicu terjadi, dan
mengirim data penayangan ke URL yang didefinisikan bersama dengan sebuah ID acak:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://foo.com/pixel?RANDOM",
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
Dalam contoh di atas, kita telah mendefinisikan permintaan yang disebut penayangan sebagai https://foo.com/pixel?RANDOM. Seperti yang telah didiskusikan sebelumnya, RANDOM diganti dengan sebuah angka acak, jadi permintaan itu sebenarnya akan terlihat seperti ini https://foo.com/pixel?0.23479283687235653498734.
Ketika halaman menjadi terlihat
(sebagaimana yang ditetapkan oleh penggunaan kata kunci pemicu `visible`),
sebuah kejadian terpicu dan permintaan `pageview` dikirim.
Atribut pemicu menentukan kapan permintaan penayangan dipicu.
Ketahui selengkapnya tentang [permintaan dan pemicu](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
## Penggantian variabel
Baik komponen [amp-pixel](/docs/reference/amp-pixel.html) maupun
komponen [amp-analytics](/docs/reference/extended/amp-analytics.html) sama-sama
memungkinkan semua penggantian variabel URL standar (lihat
[Penggantian Variabel AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
Dalam contoh berikut,
permintaan tampilan halaman dikirim ke URL,
bersama dengan URL kanonis dokumen AMP saat ini, judulnya, dan
[ID klien](/docs/guides/analytics/analytics_basics.html#user-identification):
[sourcecode:html]
<amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
[/sourcecode]
Karena kesederhanaannya,
tag `amp-pixel` bisa hanya menyertakan variabel yang didefinisikan oleh platform
atau yang bisa di-parse oleh waktu proses AMP dari halaman AMP.
Dalam contoh di atas,
platform mengisi terlebih dahulu nilai baik untuk
`canonicalURL` maupun `clientId(site-user-id)`.
Tag `amp-analytics` bisa menyertakan variabel yang sama dengan `amp-pixel`,
serta variabel yang didefinisikan secara unik di dalam konfigurasi tag.
Gunakan format `${varName}` dalam </string> permintaan untuk variabel yang didefinisikan oleh halaman
atau platform.
Tag `amp-analytics` akan mengganti template dengan nilai sebenarnya
pada saat pembentukan permintaan analisis (lihat juga
[Variabel yang didukung dalam amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
Dalam contoh `amp-analytics` berikut,
permintaan tampilan halaman dikirim ke URL,
dengan data tambahan yang diekstrak dari penggantian variabel,
sebagian disediakan oleh platform,
sebagian didefinisikan langsung pada barisnya,
di dalam konfigurasi `amp-analytics`:
[sourcecode:html]
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
},
"vars": {
"account": "ABC123",
},
"triggers": {
"someEvent": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My homepage",
}
}
}
}
</script>
</amp-analytics>
[/sourcecode]
Dalam contoh di atas,
variabel, `account` dan `title` didefinisikan
dalam konfigurasi `amp-analytics`.
Variabel `canonicalUrl` dan `clientId` tidak didefinisikan dalam konfigurasi,
sehingga nilai-nilainya diganti oleh platform.
**Penting:** Penggantian variabel fleksibel;
variabel yang sama bisa Anda definisikan di lokasi berbeda,
dan waktu proses AMP akan mem-parse nilai-nilai dalam urutan prioritas ini
(lihat [Pengurutan penggantian variabel] (/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
## Identifikasi pengguna
Situs web menggunakan cookie untuk menyimpan informasi yang spesifik bagi pengguna dalam browser.
Cookie bisa digunakan untuk memberi tahu bahwa pengguna sebelumnya telah mengunjungi situs.
Dalam AMP,
halaman bisa disajikan baik dari situs web penerbit maupun cache
(seperti Google AMP Cache).
Situs web penerbit dan cache kemungkinan memiliki domain yang berbeda,
Demi alasan keamanan,
browser bisa (dan sering kali akan) membatasi akses ke cookie domain lain
(lihat juga
[Pelacakan pengguna di seluruh asal](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
Secara default,
AMP akan mengelola penyediaan ID klien apakah halaman itu diakses dari situs web asal penerbit maupun melalui cache.
ID klien yang dihasilkan oleh AMP memiliki nilai `"amp-"`
diikuti oleh </string> acak yang dienkodekan `base64` dan tetap sama
untuk pengguna jika pengguna yang sama berkunjung kembali.
AMP mengelola pembacaan dan penulisan ID klien dalam semua hal.
Ini terutama menonjol dalam hal ketika halaman disajikan
melalui cache atau juga ketika ditampilkan di luar konteks penayangan
dari situs asal penerbit.
Dalam kondisi seperti ini, akses ke cookie situs penerbit tidak tersedia.
Ketika halaman AMP disajikan dari situs penerbit,
kerangka kerja ID klien yang digunakan AMP bisa diberi tahu mengenai cookie dukungan
yang harus dicari dan digunakan.
Dalam hal ini,
argumen `cid-scope-cookie-fallback-name` dari variabel `clientId`
ditafsirkan sebagai nama cookie.
Pemformatan bisa tampak baik sebagai
`CLIENT_ID(cid-scope-cookie-fallback-name)` maupun
`${clientId(cid-scope-cookie-fallback-name)}`.
Misalnya:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
[/sourcecode]
Jika AMP menemukan bahwa cookie ini telah diatur,
maka penggantian ID klien akan mengembalikan nilai cookie tersebut.
Jika AMP menemukan bahwa cookie ini tidak diatur,
maka AMP akan menghasilkan nilai dari bentuk `amp-` diikuti
oleh </string> acak yang dienkodekan base64.
Ketahui selengkapnya tentang penggantian ID klien
termasuk cara menambahkan ID pemberitahuan pengguna opsional, dalam
[Variabel yang didukung dalam analisis AMP](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
```