This is page 14 of 20. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.url(parentDoc.pod_path,%20locale=usedDoc.locale).path%7D%7D?page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Convalidare le pagine AMP
---
Il punto di forza di AMP non sta semplicemente nel fatto che velocizza le pagine, ma che le velocizza in modo tale da poter essere *convalidate*. In questo modo, terze parti quali Twitter, Instagram o la Ricerca Google possono scegliere di pubblicare le pagine AMP per gli utenti in modi sempre più interessanti.
## Come faccio a verificare se la mia è una pagina AMP valida?
Per convalidare un documento AMP esistono diversi modi che consentono di ottenere lo stesso risultato, quindi puoi utilizzare il metodo più adatto al tuo stile di sviluppo.
Oltre alla validità delle tue pagine AMP, potresti voler verificare che il tuo documento AMP sia [rilevabile](/docs/guides/discovery.html) per le piattaforme di terze parti.
### Console per sviluppatori del browser
Nello strumento di convalida AMP è integrata la libreria JS AMP, che è quindi subito disponibile in ogni pagina AMP. Per eseguire la convalida, procedi nel seguente modo:
* Apri la pagina AMP nel browser.
* Aggiungi "`#development=1`" all'URL, ad esempio `http://localhost:8000/released.amp.html#development=1`.
* Apri la [console Strumenti per sviluppatori di Chrome](https://developers.google.com/web/tools/chrome-devtools/debug/console/) e controlla se ci sono errori di convalida.
Gli errori della Console per sviluppatori saranno simili al seguente:
<amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" alt="Screenshot degli errori di convalida AMP nella console per sviluppatori di Chrome" layout="responsive"></amp-img>
### Interfaccia web
Lo strumento di convalida AMP può essere utilizzato come un'interfaccia web all'indirizzo [validator.ampproject.org](https://validator.ampproject.org/). In questa interfaccia gli errori vengono mostrati all'interno del codice sorgente HTML della pagina.
L'interfaccia è un editor interattivo: le modifiche apportate al codice sorgente HTML comportano una riconvalida interattiva.
<amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" alt="Screenshot di validator.ampproject.org con esempi di errori." layout="responsive"></amp-img>
### Estensione del browser
È possibile accedere allo strumento di convalida AMP direttamente dalla barra degli strumenti del browser utilizzando un'estensione del browser. Durante la navigazione, l'estensione convalida automaticamente ogni pagina AMP visitata e ti dà un'indicazione visiva della validità della pagina mostrando un'icona colorata.
<table>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" alt="Icona AMP rossa che indica un documento AMP non valido."></amp-img>
</td>
<td>Quando vengono riscontrati errori all'interno di una pagina AMP, l'icona dell'estensione viene visualizzata in rosso e viene indicato il numero di errori riscontrati.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" alt="Icona AMP verde che indica un documento AMP valido."></amp-img>
</td>
<td>Quando non vengono riscontrati errori all'interno di una pagina AMP, l'icona viene visualizzata in verde e viene indicato il numero di avvisi, se presenti.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" alt="Icona AMP blu che indica l'esistenza di una variante HTML AMP, accessibile facendo clic."></amp-img>
</td>
<td>Se la pagina non è in formato AMP, ma viene indicato che è disponibile una versione AMP, l'icona diventa un'icona di collegamento blu. Se si fa clic sull'estensione, il browser viene reindirizzato alla versione AMP.
</td>
</tr>
</table>
Estensione dello strumento di convalida AMP per [Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) e [Opera](https://addons.opera.com/it/extensions/details/amp-validator/?display=en).
### Strumento della riga di comando
Come prerequisito potresti dover installare <a href="https://docs.npmjs.com/getting-started/installing-node">Node.js con il relativo strumento di gestione dei pacchetti `npm` nel tuo sistema</a>.
Digita `npm install -g amphtml-validator` per installare lo [strumento della riga di comando per lo strumento di convalida HTML AMP](https://www.npmjs.com/package/amphtml-validator).
Ora convalidiamo una pagina HTML AMP esistente.
[sourcecode:console]
$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS
[/sourcecode]
Come prevedibile, questa è una pagina HTML AMP valida. Ora proviamo con una pagina non valida: [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Per eseguire il comando `amphtml-validator` puoi indicare l'URL della pagina o un nome di file locale. Scarica e salva [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) in un file, dopodiché esegui il comando seguente:
[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]
Il formato dei messaggi di errore è: nome del file, riga, colonna e messaggio, spesso seguito da un link che rimanda al riferimento HTML AMP. Alcuni editor, incluso Emacs (cerca il comando compile e la modalità di compilazione), sono in grado di interpretare questo formato e ti permettono di passare agli errori nel file originale.
Prova a iniziare a creare la tua pagina AMP utilizzando [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]
Lo strumento della riga di comando offre funzioni aggiuntive, tra cui la disattivazione del colore, la stampa di output JSON o l'esecuzione di una versione specifica del codice JavaScript dello strumento di convalida (per impostazione predefinita viene eseguito l'ultimo script pubblicato).
[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]
## Cosa succede se la mia pagina non è valida?
Lo strumento di convalida AMP non è pratico soltanto durante lo sviluppo, ma viene utilizzato anche dalle piattaforme come Twitter o Google che integrano le tue pagine AMP nei propri contenuti e risultati di ricerca. Inoltre, queste piattaforme in genere non richiedono le pagine direttamente al tuo server, ma utilizzano la cache AMP di Google, un servizio gratuito di memorizzazione nella cache delle pagine che vengono messe a disposizione di tutti e vengono caricate ancora più velocemente.
Se il servizio di convalida AMP rileva qualche problema con la tua pagina, questa non verrà rilevata e distribuita dai siti web di terze parti e non verrà visualizzata nella cache AMP di Google. Quindi non soltanto non usufruiresti dei vantaggi della velocità della cache, ma è probabile che la tua pagina non venga vista in molte posizioni. Sarebbe proprio un peccato, quindi assicuriamoci che non succeda.
## Come faccio a correggere gli errori di convalida?
La maggior parte degli errori di convalida è facile da correggere. Prova a utilizzare il seguente tag HTML:
[sourcecode:html]
<img src="cat.png">
[/sourcecode]
Questo genera il seguente errore di convalida AMP, mostrato nei vari strumenti che seguono:
* Console per sviluppatori del browser
<amp-img alt="Errore AMP: Il tag "img" può comparire solo come discendente del tag "noscript". Forse intendevi "amp-img"? riga 11, colonna 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive"></amp-img>
* Interfaccia web
<amp-img alt="Errore AMP: Il tag "img" può comparire solo come discendente del tag "noscript". Forse intendevi "amp-img"? riga 11, colonna 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive"></amp-img>
* Estensione del browser
<amp-img alt="Errore AMP: Il tag "img" può comparire solo come discendente del tag "noscript". Forse intendevi "amp-img"? riga 11, colonna 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive"></amp-img>
Ogni strumento fornisce diverse informazioni:
* La posizione (riga e colonna) nel documento HTML in cui si è verificato l'errore, selezionabile in alcune interfacce per evidenziare tale posizione. In questo esempio il problema si è verificato nella riga 11, colonna 2.
* Una riga di testo che descrive l'errore. In questo esempio il testo indica che abbiamo utilizzato un tag `<img>`, ma che invece avremmo dovuto utilizzare un tag `<amp-img>`.
* Un link che rimanda a un documento pertinente relativo all'errore; in questo esempio la documentazione relativa al tag `<amp-img>`. Non vengono generati link alla documentazione per tutti gli errori.
Rileggendo con attenzione la specifica, ci siamo accorti di avere utilizzato un tag `<img>`, quando invece avremmo dovuto utilizzare un tag `<amp-img>`.
Per comprendere meglio l'elenco completo di potenziali errori, leggi la [guida agli errori di convalida AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
Se dopo un'attenta valutazione hai ancora difficoltà, [pubblica una domanda](http://stackoverflow.com/questions/tagged/amp-html) e cercheremo di aiutarti.
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Validar páginas de AMP
---
La ventaja principal de AMP no es solo que aumenta la velocidad de tus páginas, sino que las hace rápidas de una forma que se puede *validar*. De este modo, las plataformas de terceros, como Twitter, Instagram o la Búsqueda de Google, pueden mostrar más predisposición a la hora de ofrecer páginas de AMP a los lectores de formas cada vez más interesantes.
## ¿Cómo puedo comprobar si mi página de AMP es válida?
Hay varias formas disponibles para validar un documento de AMP. Todas ellas
producen el mismo resultado, por lo que se puede utilizar la que más se ajuste
a tu estilo de desarrollo.
Además de la validación de AMP, también es posible que desees confirmar que tu documento de AMP es [visible](/docs/guides/discovery.html) para las plataformas de terceros.
### Developer Console para el navegador
El validador de AMP viene con la biblioteca AMP JS, por lo que está disponible en todas las páginas de AMP desde el primer momento. Para llevar a cabo la validación, sigue estos pasos:
* Abre la página de AMP en el navegador.
* Añade "`#development=1`" a la URL, por ejemplo,
`http://localhost:8000/released.amp.html#development=1`.
* Abre la [consola DevTools de Chrome](https://developers.google.com/web/tools/chrome-devtools/debug/console/) y comprueba si hay errores de validación.
Los errores se mostrarán en Developer Console de una forma similar a esta:
<amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" layout="responsive" alt="Grabación de pantalla de errores del validador de AMP en Developer Console de Google Chrome"></amp-img>
### Interfaz web
El validador de AMP se puede utilizar como una interfaz web
en [validator.ampproject.org](https://validator.ampproject.org/). Esta interfaz muestra los errores entre líneas, junto con el código fuente HTML de la página.
La interfaz es un editor interactivo: cambia al resultado del código fuente HTML en
una revalidación interactiva.
<amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" layout="responsive" alt="Grabación de pantalla de validator.ampproject.org con ejemplos de errores."></amp-img>
### Extensión del navegador
Se puede acceder al validador de AMP directamente desde la barra de herramientas del navegador utilizando
una extensión del navegador. Durante la navegación, se validarán automáticamente todas las páginas de AMP visitadas y se proporcionará una indicación visual de la validez de cada página en forma de un icono de color.
<table>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" alt="El icono rojo de AMP indica que el documento AMP no es válido."></amp-img>
</td>
<td>Si una página de AMP contiene errores, el icono de la extensión
se mostrará de color rojo y se indicará el número de errores detectados.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" alt="El icono verde de AMP indica que el documento AMP es válido."></amp-img>
</td>
<td>Si una página de AMP no contiene errores, el icono se mostrará de
color verde y se indicará el número de advertencias, si es que hay alguna.
</td>
</tr>
<tr>
<td>
<amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" alt="El icono azul de AMP indica la variante HTML de AMP si se hace clic."></amp-img>
</td>
<td>Si la página no es de AMP pero en ella se indica que hay una versión de AMP
disponible, el icono se mostrará de color azul con un icono de enlace. Al hacer clic en
la extensión, el navegador se redirigirá a la versión de AMP.
</td>
</tr>
</table>
Extensión del validador de AMP para
[Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) y [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
### Herramienta de línea de comandos
Como requisito previo, es posible que tengas que instalar <a href="https://docs.npmjs.com/getting-started/installing-node">Node.js con el administrador de paquetes
`npm` correspondiente en el sistema</a>.
Para instalar la [herramienta de línea de comandos de validación de AMP HTML](https://www.npmjs.com/package/amphtml-validator), introduce `npm install -g amphtml-validator`.
A continuación, vamos a validar una página AMP HTML real.
<div><pre><code>
$ amphtml-validator https://www.ampproject.org/
https://www.ampproject.org/: PASS
[/sourcecode]
Como era de esperar, esta página AMP HTML es válida. Vamos a intentarlo con una página que no lo sea: [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Para ejecutar el comando `amphtml-validator`, puedes proporcionar la dirección URL de la página o el nombre de un archivo local. Descarga y guarda [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) en un archivo y, a continuación, ejecútalo:
<div><pre><code>
$ 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]
El formato de los mensajes de error está compuesto por el nombre del archivo, la línea, la columna y el mensaje,
a menudo seguidos por un enlace a la referencia AMP HTML. Algunos editores, incluido Emacs (busca el comando de compilación y el modo de compilación), pueden interpretar este formato y te permiten saltar a los errores en el archivo original.
Plantéate utilizar [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html) como punto de partida para crear tu propia página de AMP:
<div><pre><code>
$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS
[/sourcecode]
La herramienta de línea de comandos ofrece funciones adicionales que incluyen la desconexión de la impresión en color, la salida de impresión JSON o la ejecución de una versión específica del validador de JavaScript (de forma predeterminada se ejecuta la última secuencia de comandos publicada).
<div><pre><code>
$ 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]
## ¿Qué ocurre si mi página no es válida?
El validador de AMP no está pensado solamente para facilitarte el desarrollo. También lo utilizan plataformas como Twitter o Google, que integran tus páginas de AMP en sus contenidos y resultados de búsqueda, y que por lo general, no solicitan las páginas directamente desde tu servidor, sino que hacen uso de la caché de AMP de Google. Este servicio es gratuito, permite almacenar en caché las páginas y las pone a disposición en todo el mundo para que se carguen aún más rápido.
Si el servicio de validación de AMP detecta que algo va mal con tu página, no estará visible ni se distribuirá en sitios web de terceros, y tampoco aparecerá en la caché de AMP de Google. Así pues, no solo se pierden los beneficios de velocidad de la memoria caché, sino que también es posible que tu página no se vea en muchos lugares. Sería una pena que esto ocurriera, así que vamos a asegurarnos de que no suceda.
## ¿Cómo puedo solucionar los errores de validación?
La mayoría de los errores de validación son fáciles de abordar y solucionar. Ten en cuenta esta etiqueta HTML:
[sourcecode:html]
<img src="cat.png">`
[/sourcecode]
Esta etiqueta genera el error de validación de AMP que se muestra en estas diferentes herramientas:
* Developer Console para el navegador
<amp-img alt="AMP error: The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? line 11, column 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696"></amp-img>
* Interfaz web
<amp-img alt="AMP error: The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? line 11, column 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676"></amp-img>
* Extensión del navegador
<amp-img alt="AMP error: The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? line 11, column 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724"></amp-img>
Cada herramienta ofrece varios fragmentos de información:
1. La ubicación (línea y columna) en el documento HTML en el que ha ocurrido
el error; es posible hacer clic en algunas interfaces para resaltar esa ubicación. En este
caso, el problema se produce en la línea 11, columna 2.</li>
1. Una línea de texto que describe el error. En este caso, el texto indica que
estamos utilizando una etiqueta `<img>`, cuando deberíamos haber utilizado una etiqueta `<amp-img>`.</li>
1. Un enlace a un documento relevante acerca del error. En este caso, la
documentación para la etiqueta `<amp-img>`. No todos los errores generan
enlaces de documentación.</li>
Al leer la especificación atentamente, nos damos cuenta de que estamos utilizando una etiqueta `<img>`, cuando deberíamos haber utilizado una etiqueta `<amp-img>`.
Para entender mejor la lista completa de los posibles errores,
consulta la [Guía de errores de validación de AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
Si sigues sin encontrar la solución después de evaluar los errores atentamente, [pregúntanos](http://stackoverflow.com/questions/tagged/amp-html) e intentaremos ayudarte.
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: "Analytics: Grundlagen"
---
Hier erfahren Sie mehr über die Grundlagen der AMP-Analyse.
[TOC]
## amp-pixel oder amp-analytics verwenden?
AMP bietet zwei Komponenten zur Erfüllung Ihrer Analyse- und Messanforderungen: [amp-pixel](/docs/reference/amp-pixel.html) und [amp-analytics](/docs/reference/extended/amp-analytics.html).
Bei beiden Optionen werden Analysedaten an einen festgelegten Endpunkt gesendet.
Wenn Sie ein Verhalten wie das eines einfachen [Tracking-Pixels](https://en.wikipedia.org/wiki/Web_beacon#Implementation) benötigen, bietet die `amp-pixel`-Komponente ein grundlegendes Seitenaufruf-Tracking. Die Seitenaufrufdaten werden an eine festgelegte URL gesendet. Bei einigen Anbieterintegrationen kann diese Komponente erforderlich sein. In diesem Fall stellt der Anbieter den genauen URL-Endpunkt bereit.
Für die meisten Analyselösungen empfiehlt sich die Verwendung von `amp-analytics`.
Das Seitenaufruf-Tracking funktioniert auch in `amp-analytics`.
Sie können aber auch die Nutzerinteraktionen mit jeder anderen Art von Seiteninhalt erfassen, unter anderem mit Klicks auf Links und Schaltflächen.
Außerdem können Sie z. B. messen, wie weit der Nutzer auf der Seite gescrollt und ob er mit sozialen Medien interagiert hat (siehe [Eingehende Betrachtung der AMP-Analyse](/docs/guides/analytics/deep_dive_analytics.html)).
Im Rahmen der Integration in die AMP-Plattform bieten Anbieter vordefinierte `amp-analytics`-Konfigurationen an, mit denen Daten leicht erfasst und an ihre Tracking-Tools übertragen werden können.
Sie finden die Anbieterdokumentation in der [amp-analytics-Spezifikation](/docs/reference/extended/amp-analytics.html).
Sie können auf Ihren Seiten sowohl `amp-pixel` als auch `amp-analytics` verwenden: `amp-pixel` für einfaches Seitenaufruf-Tracking und `amp-analytics` für alle anderen Zwecke.
Sie können jedes Tag mehrfach hinzufügen.
Wenn Sie mit mehreren Analyseanbietern zusammenarbeiten, benötigen Sie ein Tag pro Lösung.
Denken Sie daran, dass einfachere AMP-Seiten für Nutzer günstiger sind. Verwenden Sie zusätzliche Tags deshalb nur, wenn es wirklich nötig ist.
## Einfache Analysekonfiguration erstellen
Im Folgenden wird erläutert, wie Sie eine einfache Konfiguration für [amp-pixel](/docs/reference/amp-pixel.html) und [amp-analytics](/docs/reference/extended/amp-analytics.html) erstellen können.
### Einfache amp-pixel-Konfiguration
Wenn Sie eine einfache `amp-pixel`-Konfiguration erstellen möchten, fügen Sie ein Tag wie das folgende in den body-Abschnitt Ihrer AMP-Seite ein:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
[/sourcecode]
In diesem Beispiel werden die Seitenaufrufdaten zusammen mit einer Zufallszahl an die festgelegte URL gesendet.
Die `RANDOM`-Variable ist eine von vielen [Substitutionsvariablen in der AMP-Plattform](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
[Weitere Informationen zur Variablensubstitution](/docs/guides/analytics/analytics_basics.html#variable-substitution)
Die [amp-pixel-Komponente](/docs/reference/amp-pixel.html) ist bereits enthalten. Daher benötigen Sie keine Einschlussdeklaration wie bei den erweiterten AMP-Komponenten wie z. B. `amp-analytics`.
Sie sollten das `amp-pixel`-Tag aber möglichst nahe am Anfang des `amp-pizel`-Abschnitts platzieren.
Das Tracking-Pixel wird nur ausgelöst, wenn das entsprechende Tag erreicht wird.
Wenn sich das `<body>`-Tag im unteren Bereich der Seite befindet, wird es möglicherweise nicht ausgelöst.
### Einfache amp-analytics-Konfiguration
Zum Erstellen einer einfachen [amp-analytics-Konfiguration](/docs/reference/extended/amp-analytics.html) müssen Sie zunächst die folgende `custom-element`-Deklaration in den `<head>`-Abschnitt des AMP-Dokuments einschließen (siehe auch [Deklaration des Komponenteneinschlusses](/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]
Das folgende Beispiel ähnelt dem [`amp-pixel`-Beispiel](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration)</a>.
Immer wenn eine Seite sichtbar ist, kommt es zu einem Triggerereignis und die Seitenaufrufdaten werden zusammen mit einer zufälligen ID an eine festgelegte URL gesendet:
[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]
Im obigen Beispiel wurde eine Anforderung namens "pageview" als https://foo.com/pixel?RANDOM definiert. Wie bereits erläutert, wird RANDOM durch eine Zufallszahl ersetzt. Damit sieht die Anforderung letztlich ungefähr so aus: https://foo.com/pixel?0.23479283687235653498734.
Wenn die Seite sichtbar wird, wie es das Trigger-Keyword `visible` angibt, wird ein Ereignis ausgelöst und die `pageview`-Anforderung wird gesendet.
Das triggers-Attribut bestimmt, wann die pageview-Anforderung ausgelöst wird.
[Weitere Informationen zu Anforderungen und Triggern](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports)
## Variablensubstitution
Sowohl die [amp-pixel](/docs/reference/amp-pixel.html)- als auch die [amp-analytics-Komponente](/docs/reference/extended/amp-analytics.html) ermöglicht alle standardmäßigen URL-Variablensubstitutionen (siehe [AMP-HTML-Variablensubstitutionen](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
Im folgenden Beispiel wird die Seitenaufrufanforderung zusammen mit der kanonischen URL und dem Titel des aktuellen AMP-Dokuments und einer [Client-ID](/docs/guides/analytics/analytics_basics.html#user-identification) an die URL gesendet:
[sourcecode:html]
<amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
[/sourcecode]
Aufgrund seiner Einfachheit kann das `amp-pixel`-Tag nur Variablen enthalten, die von der Plattform definiert wurden oder die durch die AMP-Laufzeit von der AMP-Seite geparst werden können.
Im obigen Beispiel legt die Plattform die Werte sowohl für `canonicalURL` als auch für `clientId(site-user-id)` fest.
Das `amp-analytics`-Tag kann dieselben Variablen wie `amp-pixel` sowie speziell definierte Variablen innerhalb der Tag-Konfiguration enthalten.
Verwenden Sie das Format `${varName}` in einem Anforderungsstring für eine Seitenvariable oder eine von der Plattform definierte Variable.
Das `amp-analytics`-Tag ersetzt die Vorlage bei der Erstellung der Analyseanforderung durch den tatsächlichen Wert (siehe auch [Von der AMP-Analyse unterstützte Variablen](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
Im folgenden `amp-analytics`-Beispiel wird die Seitenaufrufanforderung mit zusätzlichen Daten an die URL gesendet, von denen einige aus Variablensubstitutionen extrahiert, einige durch die Plattform bereitgestellt und einige inline innerhalb der `amp-analytics`-Konfiguration definiert wurden:
[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]
Im obigen Beispiel werden die Variablen `account` und `title` in der `amp-analytics`-Konfiguration definiert.
Die Variablen `canonicalUrl` und `clientId` sind in der Konfiguration nicht definiert. Ihre Werte werden von der Plattform festgelegt.
**Wichtig:** Variablensubstitution ist flexibel. Dieselben Variablen können an verschiedenen Stellen definiert werden und die AMP-Laufzeit parst die Werte in der entsprechenden Reihenfolge (siehe [Reihenfolge der Variablensubstitution](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
## Nutzeridentifikation
Websites verwenden Cookies, um nutzerspezifische Informationen im Browser zu speichern.
Anhand von Cookies ist erkennbar, ob ein Nutzer eine Website schon einmal besucht hat.
In AMP können Seiten entweder von der Website eines Publishers oder aus einem Cache, wie z. B. dem Google-AMP-Cache, bereitgestellt werden.
Die Website des Publishers und der Cache gehören wahrscheinlich zu unterschiedlichen Domains.
Aus Sicherheitsgründen können Browser den Zugriff auf die Cookies einer anderen Domain beschränken und tun dies oft auch (siehe auch [Nutzer unabhängig von der Herkunft erfassen](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
Standardmäßig sorgt AMP für die Bereitstellung einer Client-ID, ob die Seite nun über die ursprüngliche Website des Publishers oder über einen Cache aufgerufen wird.
Die AMP-generierte Client-ID besteht aus `"amp-"` sowie einem zufälligen `base64`-codierten String und bleibt für einen Nutzer über seine Seitenaufrufe hinweg identisch.
In allen Fällen wird das Lesen und Schreiben der Client-ID durch AMP verwaltet.
Dies ist insbesondere dann von Bedeutung, wenn eine Seite über einen Cache bereitgestellt oder auf andere Weise außerhalb des Ansichtskontexts der ursprünglichen Website des Publishers angezeigt wird.
In diesem Fall besteht kein Zugriff auf die Cookies der Publisher-Website.
Wenn eine AMP-Seite über die Website eines Publishers bereitgestellt wird, kann das von AMP verwendete Client-ID-Framework auf ein Fallback-Cookie hingewiesen werden, das es suchen und verwenden soll.
In diesem Fall wird das `cid-scope-cookie-fallback-name`-Argument der `clientId`-Variable als Cookiename interpretiert.
Als Format ist sowohl `CLIENT_ID(cid-scope-cookie-fallback-name)` als auch `${clientId(cid-scope-cookie-fallback-name)}` möglich.
Beispiel:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
[/sourcecode]
Wenn AMP feststellt, dass dieses Cookie gesetzt wurde, gibt die Client-ID-Substitution den Wert des Cookies zurück.
Wenn AMP feststellt, dass das Cookie nicht gesetzt wurde, generiert AMP einen Wert, der aus `amp-` und einem zufälligen base64-codierten String besteht.
Weitere Informationen zur Client-ID-Substitution, einschließlich des Hinzufügens einer optionalen Nutzerbenachrichtigungs-ID, finden Sie unter [Von der AMP-Analyse unterstützte Variablen](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Analytics : les bases
toc: true
---
Commencez ici pour tout savoir sur les bases des analyses AMP.
[TOC]
## Utiliser amp-pixel ou amp-analytics ?
AMP fournit deux composants pour répondre à vos besoins d'analyse et de mesure :
[amp-pixel](/docs/reference/amp-pixel.html) et
[amp-analytics](/docs/reference/extended/amp-analytics.html).
Ces deux options envoient les données d'analyse à un point d'extrémité prédéfini.
Si vous recherchez des comportements comme un simple
[pixel de suivi](https://en.wikipedia.org/wiki/Web_beacon#Implementation)
le composant `amp-pixel` fournit un suivi de base des vues de page ;
les données sur les vues de page sont envoyées à une URL donnée.
Certaines intégrations avec un fournisseur peuvent appeler ce composant,
auquel cas elles indiqueront le point d'extrémité exact de l'URL.
Pour la plupart des solutions d'analyse, utilisez `amp-analytics`.
Le suivi des vues de page fonctionne également avec `amp-analytics`.
Ce composant vous permet aussi de suivre l'engagement des utilisateurs avec n'importe quel type de contenu sur les pages,
y compris les clics sur des liens et des boutons.
Vous pouvez également mesurer jusqu'où l'utilisateur a fait défiler la page,
savoir s'il a interagi ou non avec des réseaux sociaux et bien plus encore
(voir
[AMP Analytics dans le détail](/docs/guides/analytics/deep_dive_analytics.html)).
Dans le cadre de l'intégration avec la plateforme AMP,
des fournisseurs ont proposé des configurations `amp-analytics` prédéfinies,
de sorte à faciliter considérablement la capture des données et leur transmission à leurs outils de suivi.
Accédez à la documentation des fournisseurs depuis la
[spécification du composant amp-analytics](/docs/reference/extended/amp-analytics.html).
Dans vos pages, vous pouvez utiliser à la fois `amp-pixel` et `amp-analytics` :
`amp-pixel` pour un simple suivi des vues de page
et `amp-analytics` pour tout le reste.
Vous pouvez également ajouter chaque balise plusieurs fois.
Si vous travaillez avec plusieurs fournisseurs de solutions d'analyse,
vous aurez besoin d'une balise par solution.
Rappelez-vous que plus les pages AMP sont simples, mieux c'est pour les utilisateurs.
Donc si vous n'avez pas besoin de balises supplémentaires, ne les utilisez pas.
## Créer une configuration d'analyse simple
Découvrez comment créer une configuration
[amp-pixel](/docs/reference/amp-pixel.html) et
[amp-analytics](/docs/reference/extended/amp-analytics.html) simple.
### Configuration simple de la balise amp-pixel
Pour créer une configuration simple de la balise `amp-pixel`,
insérez un code du type suivant dans le corps de votre page AMP :
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
[/sourcecode]
Dans cet exemple,
les données sur les vues de page sont envoyées à l'URL définie, accompagnées d'un numéro aléatoire.
La variable `RANDOM` est l'une des nombreuses
[variables de substitution de la plateforme AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
En savoir plus sur la
[substitution des variables](/docs/guides/analytics/analytics_basics.html#variable-substitution).
Le composant [amp-pixel](/docs/reference/amp-pixel.html)
étant intégré,
vous n'avez pas besoin d'une déclaration d'inclusion comme avec
les composants étendus d'AMP, notamment `amp-analytics`.
Vous devez néanmoins placer la balise `amp-pixel` aussi près que possible
du début du corps de la page, c'est-à-dire de la balise `<body>`.
En effet, le pixel de suivi ne se déclenche que lorsque la balise est affichée.
Si la balise `amp-pixel` est positionnée près du bas de la page,
il pourrait ne pas se déclencher.
### Configuration simple de la balise amp-analytics
Pour créer une configuration simple de la balise
[amp-analytics](/docs/reference/extended/amp-analytics.html),
vous devez d'abord inclure la déclaration `custom-element`
après la balise `<head>` du document AMP (voir également
[Déclaration d'inclusion de composant](/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]
L'exemple suivant est similaire à l'[exemple `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
À chaque fois qu'une page est visible,
l'événement est déclenché et
envoie les données sur les vues de page à une URL définie, accompagnées d'un identifiant aléatoire :
[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]
Dans l'exemple ci-dessus, nous avons défini une requête appelée pageview sur https://foo.com/pixel?RANDOM. Comme nous l'avons indiqué plus tôt, RANDOM est remplacé par un numéro aléatoire. La requête ressemblera donc à https://foo.com/pixel?0.23479283687235653498734.
Lorsque la page devient visible
(tel que spécifié par l'utilisation du mot clé de déclenchement `visible`),
un événement est déclenché et la requête `pageview` est envoyée.
L'attribut triggers détermine à quel moment la requête pageview est déclenchée.
En savoir plus sur les [requêtes et déclencheurs](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
## Substitution de variables
Tant le composant [amp-pixel](/docs/reference/amp-pixel.html) que le composant
[amp-analytics](/docs/reference/extended/amp-analytics.html)
permettent toutes les substitutions de variable URL standard (voir
[Substitution de variable AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).).
Dans l'exemple suivant,
la requête pageview est envoyée à l'URL,
accompagnée de l'URL canonique du document AMP, de son titre et d'un
[ID client](/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]
En raison de sa simplicité,
la balise `amp-pixel` ne peut inclure que des variables définies par la plateforme
ou que l'exécution AMP peut analyser depuis la page AMP.
Dans l'exemple ci-dessus,
la plateforme fournit les valeurs à la fois pour
`canonicalURL` et pour `clientId(site-user-id)`.
La balise `amp-analytics` peut inclure les mêmes variables que la balise `amp-pixel`,
ainsi que des variables uniques définies dans la configuration de la balise.
Utilisez le format `${varName}` dans une chaîne de requête pour une variable
définie par la page ou la plateforme.
La balise `amp-analytics` va remplacer le modèle par sa valeur réelle
au moment de la construction de la demande d'analyse (voir également
[Variables prises en charge par la balise amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
Dans l'exemple suivant pour la balise `amp-analytics`,
la requête pageview est envoyée à l'URL
avec les données supplémentaires extraites des substitutions de variable,
certaines données fournies par la plateforme
et certaines données définies en ligne
dans la configuration de la balise `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]
Dans l'exemple ci-dessus,
les variables `account` et `title` sont définies
dans la configuration de la balise `amp-analytics`.
La variables `canonicalUrl` et `clientId` n'étant pas définies dans la configuration,
leurs valeurs sont substituées par la plateforme.
**Important :** La substitution des variables est flexible ;
vous pouvez avoir les mêmes variables définies à différentes endroits,
et l'exécution AMP analysera les valeurs dans leur ordre de priorité
(voir [Ordonnancement de la substitution des variables](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
## Identification des utilisateurs
Les sites Web utilisent des cookies pour stocker des informations spécifiques à un utilisateur dans le navigateur.
Les cookies peuvent servir à indiquer qu'un utilisateur a déjà visité un site Web.
Dans AMP,
les pages peuvent être fournies soit depuis le site Web d'un éditeur, soit depuis un cache
(comme Google AMP Cache).
Il est probable que le site Web de l'éditeur et le cache aient des domaines différents.
Pour des raisons de sécurité,
les navigateurs limitent souvent l'accès aux cookies d'un autre domaine
(voir également
[Suivi des utilisateurs de différentes origines](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
Par défaut,
AMP gère l'émission d'un ID client que l'on accède à la page depuis le site Web original de l'éditeur ou via un cache.
L'ID client généré par AMP est composé du préfixe `"amp-"`
suivi d'une chaîne aléatoire encodée`base64`, et reste le même
pour un utilisateur qui consulte plusieurs fois une même page.
AMP gère la lecture et l'écriture de l'ID client dans tous les cas.
Cela s'avère particulièrement utile lorsqu'une page est fournie
via un cache ou consultée en dehors du contexte d'affichage
du site Web original de l'éditeur.
Dans ce cas, l'accès aux cookies du site de l'éditeur n'est pas disponible.
Lorsqu'une page AMP est fournie à partir du site de l'éditeur,
le framework de l'ID client qu'utilise AMP peut être informé d'un cookie
de rappel à rechercher et à utiliser.
Dans ce cas,
l'argument `cid-scope-cookie-fallback-name` de la variable `clientId`
est interprété comme un nom de cookie.
Le format est soit
`CLIENT_ID(cid-scope-cookie-fallback-name)`, soit
`${clientId(cid-scope-cookie-fallback-name)}`.
Par exemple :
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
[/sourcecode]
Si AMP détecte que ce cookie est défini,
la substitution de l'ID client renvoie la valeur du cookie.
Si AMP détecte que ce cookie n'est pas défini,
il génère une valeur commençant par `amp-`,
suivi d'une chaîne aléatoire encodée base64.
Pour en savoir plus sur la substitution d'ID client,
notamment comment ajouter un ID facultatif de notification de l'utilisateur, voir
[Variables prises en charge dans les analyses AMP](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Analytics: i concetti di base
toc: true
---
Inizia da qui per approfondire i concetti di base dell’analisi AMP.
[TOC]
## È meglio utilizzare amp-pixel o amp-analytics?
AMP offre due componenti per soddisfare le esigenze relative all’analisi e alla valutazione:
[amp-pixel](/docs/reference/amp-pixel.html) e
[amp-analytics](/docs/reference/extended/amp-analytics.html).
Entrambe le opzioni inviano dati di analisi a un endpoint predefinito.
Se sei alla ricerca di un comportamento simile a quello di un semplice
[pixel di tracciamento](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
il componente `amp-pixel` offre il monitoraggio della visualizzazione di pagina di base
e l’invio dei dati sulle visualizzazioni a un URL specifico.
Alcune integrazioni con i fornitori possono richiedere questo componente,
in tal caso viene specificato l’esatto endpoint dell’URL.
Per la maggior parte delle soluzioni di analisi puoi usare `amp-analytics`.
Il monitoraggio della visualizzazione di pagina funziona anche in `amp-analytics`.
Tuttavia, puoi anche monitorare il coinvolgimento dell’utente con qualsiasi tipo di contenuto di pagina,
compresi i clic sui link e i pulsanti.
Inoltre, puoi determinare di quanto è avanzato l’utente con lo scorrimento della pagina,
se l’utente è impegnato o meno sui social media e tanto altro ancora
(vedi
[Immersione nel mondo di AMP Analytics](/docs/guides/analytics/deep_dive_analytics.html)).
Nell’ambito dell’integrazione con la piattaforma AMP,
i fornitori hanno offerto configurazioni `amp-analytics` predefinite
per agevolare l’acquisizione di dati e l’invio ai rispettivi strumenti di monitoraggio.
Puoi accedere alla documentazione dei fornitori dalla
[specifica amp-analytics](/docs/reference/extended/amp-analytics.html).
Nelle tue pagine puoi usare sia `amp-pixel` che `amp-analytics`:
usa `amp-pixel` per il semplice monitoraggio delle visualizzazioni della pagina
e `amp-analytics` per tutto il resto.
Puoi anche aggiungere multipli di ogni tag.
Se collabori con più fornitori di soluzioni di analisi,
avrai bisogno di un tag per soluzione.
Tieni presente che le pagine AMP più semplici sono migliori per gli utenti,
pertanto se non hai necessità di tag extra, non usarli.
## Crea una configurazione di analisi semplice
Scopri come creare una configurazione
[amp-pixel](/docs/reference/amp-pixel.html) e
[amp-analytics](/docs/reference/extended/amp-analytics.html) semplice.
### Configurazione amp-pixel semplice
Per creare una configurazione `amp-pixel` semplice,
inserisci qualcosa di simile alla seguente istruzione nel corpo della tua pagina AMP:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
[/sourcecode]
In questo esempio,
i dati di visualizzazione di pagina vengono inviati all’URL definito, unitamente a un numero casuale.
La variabile `RANDOM` è una delle tante
[variabili di sostituzione della piattaforma AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
Per ulteriori informazioni sulla
[Sostituzione delle variabili](/docs/guides/analytics/analytics_basics.html#variable-substitution) vai qui.
Il componente [amp-pixel](/docs/reference/amp-pixel.html)
è incorporato,
pertanto non avrai necessità di una dichiarazione di inclusione come
nel caso dei componenti estesi di AMP, tra cui `amp-analytics`.
Tuttavia, dovresti posizionare il tag `amp-pixel` il più vicino possibile
all’inizio di `<body>`.
Il pixel di tracciamento si attiva solo quando si rende visibile il tag stesso.
È possibile che `amp-pixel` non si attivi se è posizionato vicino
alla parte finale della pagina.
### Configurazione amp-analytics semplice
Per cerare una configurazione
[amp-analytics](/docs/reference/extended/amp-analytics.html) semplice,
devi prima includere questa dichiarazione `custom-element`
nell’`<head>` del documento AMP (vedi anche
[Dichiarazione di inclusione del componente](/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]
Il seguente esempio è simile all’[esempio `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
Ogni volta che una pagina è visibile,
l’evento di attivazione si attiva e
invia i dati sulla visualizzazione di pagina a un URL specifico unitamente a un ID casuale:
[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]
Nell’esempio sopra abbiamo definito una richiesta denominata pageview in modo che fosse https://foo.com/pixel?RANDOM. Come precedentemente indicato, RANDOM viene sostituito da un numero casuale, pertanto la richiesta finirà per avere il seguente aspetto https://foo.com/pixel?0.23479283687235653498734.
Quando la pagina diventa visibile
(come specificato dall’uso della parola chiave di attivazione `visible`),
si attiva un evento e viene inviata la richiesta `pageview`.
Gli attributi di attivazione determinano il momento in cui viene attivata la richiesta pageview.
Ottieni ulteriori informazioni su [richieste e attivazioni](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
## Sostituzione delle variabili
Entrambi i componenti [amp-pixel](/docs/reference/amp-pixel.html) e
[amp-analytics](/docs/reference/extended/amp-analytics.html)
consentono tutte le sostituzioni di variabili URL standard (vedi
[Sostituzioni di variabili HTML AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
Nel seguente esempio,
la richiesta di visualizzazione di pagina viene inviata all’URL,
unitamente all’attuale URL canonico del documento AMP, al relativo titolo e a un
[ID client](/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]
Grazie alla sua semplicità,
il tag `amp-pixel` può includere solo le variabili definite dalla piattaforma
o che la fase di runtime di AMP può analizzare dalla pagina AMP.
Nell’esempio sopra,
la piattaforma inserisce i valori sia per
`canonicalURL` che per `clientId(site-user-id)`.
Il tag `amp-analytics` può includere le stesse variabili di `amp-pixel`,
nonché variabili definite in modo univoco all’interno della configurazione dei tag.
Usa il formato `${varName}` in una stringa di richiesta per una variabile
definita da pagina o piattaforma.
Il `amp-analytics` tag sostituirà il modello con il suo valore effettivo
al momento della creazione della richiesta di analisi (vedi anche
[Variabili supportate in amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
Nel seguente esempio di `amp-analytics`,
la richiesta di visualizzazione di pagina viene inviata all’URL,
con ulteriori dati estratti dalle sostituzioni delle variabili,
alcuni forniti dalla piattaforma,
altri definiti nella parte incorporata,
nell’ambito della configurazione `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]
Nell’esempio sopra,
le variabili `account` e `title` sono definite
nella configurazione `amp-analytics`.
Le variabili `canonicalUrl` e `clientId` non sono definite nella configurazione,
pertanto i rispettivi valori vengono sostituiti dalla piattaforma.
**Importante** La sostituzione delle variabili è flessibile,
le stesse variabili possono essere definite in diverse posizioni
e la fase di runtime di AMP analizzerà i valori in questo ordine di precedenza
(vedi [Ordinamento della sostituzione delle variabili](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
## Identificazione dell’utente
I siti web usano i cookie per memorizzare le informazioni specifiche di un utente nel browser.
I cookie possono essere usati per indicare che un utente ha già visitato prima un sito.
In AMP,
le pagine possono essere distribuite dal sito web di un publisher o tramite una cache
(come la Google AMP Cache).
È probabile che il sito web del publisher e la cache abbiano domini diversi.
Per motivi di sicurezza,
i browser possono limitare l’accesso ai cookie di un altro dominio e spesso agiscono in tal senso
(vedi anche
[Monitoraggio degli utenti da diversi punti di origine](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
Per impostazione predefinita,
AMP gestisce l’assegnazione di un ID client sia nel caso di accesso alla pagina dal sito web originale dell’editore che tramite una cache.
L’ID client generato da AMP ha un valore di `"amp-"`
seguito da una stringa codificata `base64` casuale e resta lo stesso
per l’utente se lo stesso utente visita di nuovo la pagina.
AMP gestisce la lettura e la scrittura dell’ID client in tutti i casi.
Ciò è particolarmente evidente nel caso di una pagina distribuita
tramite una cache o altrimenti mostrata al di fuori del contesto di visualizzazione
del sito originale del publisher.
In tal caso non è possibile accedere ai cookie del sito del publisher.
Quando una pagina AMP viene distribuita dal sito di un publisher,
la struttura dell’ID client utilizzata da AMP può essere informata di un cookie di fallback
da cercare e utilizzare.
In questo caso,
l’argomento `cid-scope-cookie-fallback-name` della variabile `clientId`
viene interpretato come un nome di cookie.
La formattazione può presentarsi come
`CLIENT_ID(cid-scope-cookie-fallback-name)` o
`${clientId(cid-scope-cookie-fallback-name)}`.
Ad esempio:
[sourcecode:html]
<amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
[/sourcecode]
Se AMP rileva che questo cookie è impostato,
la sostituzione dell’ID client restituisce quindi il valore del cookie.
Se AMP rileva che questo cookie non è impostato,
AMP genera quindi un valore del modulo `amp-` seguito
da una stringa codificata base64 casuale.
Per ulteriori informazioni sulla sostituzione dell’ID client,
compreso il metodo per aggiungere un ID di notifica utente opzionale, vai alla sezione
[Variabili supportate in AMP Analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
hero:
title@: Il metodo di AMP per ottimizzare le prestazioni
subtitle@: |
Grazie alla combinazione tra seguenti ottimizzazioni, le pagine AMP sono così veloci da sembrare di essere caricate in pochi istanti:
<p>Se preferisci ascoltare anziché leggere, il seguente video realizzato da Malte Ubl, AMP engineering lead, offre una panoramica simile al contenuto delle seguenti sezioni.
points:
pointlist:
- title@: Consentire solo gli script asincroni
description@: |
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.
<p>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.
<p>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.
- title@: Definire le dimensioni di tutte le risorse in modo statico
description@: |
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.
<p>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.
- title@: Non consentire ai meccanismi delle estensioni di bloccare il rendering
description@: |
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.
<p>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à:
example: /content/includes/amp-iframe.md
- title@: Tenere lontano dalla fase critica qualsiasi codice JavaScript di terzi
description@: |
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.
<p>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.
<p>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.
- title@: Tutto il codice CSS deve essere in linea e di dimensioni limitate
description@: |
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.
<p>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.
- title@: L’attivazione dei font deve essere efficiente
id: font-triggering-must-be-efficient
description@: |
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.
<p>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.
- title@: Ridurre al minimo i ricalcoli di stile
description@: |
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.
<p>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/).
- title@: Eseguire solamente animazioni con accelerazione GPU
description@: |
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.
<p>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).
- title@: Dare priorità al caricamento delle risorse
description@: |
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.
<p>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.
<p>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.
- title@: Caricare le pagine in un attimo
description@: |
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.
<p>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.
<p>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.
<p>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).
- title@: Aiutare a rendere AMP ancora più veloce
description@: |
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/docs/guides/deploy/analytics_amp/deep_dive_analytics.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Deep Dive into AMP Analytics
$order: 1
toc: true
---
[TOC]
This guide dives deep into the
[amp-analytics component](/docs/reference/extended/amp-analytics.html),
breaking up a sample `amp-analytics` configuration into these key building blocks:
The remainder of this guide uses this configuration sample,
which tracks the page views and user clicks on links
and sends the analytics data to the third-party provider,
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/):
[sourcecode:html]
<amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"extraUrlParams": {
"cd1": "AMP"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
},
'transport': {
'beacon': false,
'xhrpost': false,
'image': true
}
}
</script>
</amp-analytics>
[/sourcecode]
**Note:** The above example code is to help you learn, but it's by no means a realistic sample. If you are working with analytics providers, it's likely that the above sample won't make sense; provider configurations remove complexity. Consult your analytics provider's documentation for sample configurations.
## Where to send analytics data: type attribute
AMP is designed to support two common patterns of data collection:
* Ingestion by a publisher-owned endpoint for in-house analytics systems.
* Ingestion by a vendor-owned endpoint for interoperability with a vendor solution
(for example, [Adobe Analytics](https://helpx.adobe.com/marketing-cloud/analytics.html), [Chartbeat](http://support.chartbeat.com/docs/), [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/)).
To send analytics data to an analytics provider,
include the `type` attribute in the `amp-analytics` tag and set its value
to the appropriate vendor, as defind in the
[amp-analytics specification](/docs/reference/extended/amp-analytics.html).
For example: `<amp-analytics type="googleanalytics">` sends analytics data
to the third-party analytics provider, Google Analytics.
To send data to a publisher-owned endpoint,
simply don’t include the `type` attribute;
the analytics data is sent to the defined endpoints for each
[request](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute).
Analytics vendor configurations are a quick way
to get started with `amp-analytics`.
You should consult your vendor’s documentation and
help resources for further guidance.
As previously mentioned,
the list of vendors who’ve already integrated with AMP, as well as links
to their specific documentation can be found in the
[amp-analytics specification](/docs/reference/extended/amp-analytics.html).
If you’re an analytics vendor,
learn more about
[integrating your own analytics configuration into AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
## Load remote configuration: config attribute
You don't have to include all of the configuration
for `amp-analytics` entirely on your AMP page.
Instead, you can can call out to a remote URL
for all or part of the configurations.
This allows you to do things like vary the configuration
based on a specific request.
If you as the publisher have control over the remote file,
you can do any server-side processing necessary
to construct the configuration data.
The first step to loading remote configurations is
to include the config attribute in the `amp-analytics` tag:
[sourcecode:html]
<amp-analytics config="https://example.com/analytics.account.config.json">
[/sourcecode]
The next step is to create the JSON content that lives in the remote URL.
In this simple example,
the configuration contained in the JSON object is just the variable value for the analytics account.
Example content in `https://example.com/analytics.account.config.json`:
[sourcecode:js]
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
}
}
[/sourcecode]
The final step is to make sure what’s in the remote file is pulled
into the appropriate place in the the `amp-analytics` configuration.
In both the `pageview` and `event` requests here,
the `account` variable value is automatically set
to the account value in the remote URL (`"account": "UA-XXXXX-Y"`):
[sourcecode:js]
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}
[/sourcecode]
**Important:** AMP doesn’t validate against multiple uses of the same variable.
Values get populated following a variable substitution order of preference,
and values in remote URLs are top of that order
(see [Variable substitution ordering](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
## Requests, triggers & transports
The `requests` attribute defines ‘what data gets sent’
(for example, `pageviews`, `events`),
and where that data gets sent (the URLs used to transmit data).
The `triggers` attribute describes when analytics data should be sent,
for example, when a user views a page, when a user clicks on a link.
The `transport` attribute specifies how to send a request,
more specifically, the protocol.
Read on to find out more about these configurations.
(You can also read about these configurations in the
[amp-analytics reference](/docs/reference/extended/amp-analytics.html).)
### What data gets sent: requests attribute
The `request-name` is used in the trigger configuration to specify
what request should be sent in response to a pariticular event.
The `request-value` is an `https` URL.
These values may include placeholder tokens
that can reference other requests or variables.
[sourcecode:js]
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}
[/sourcecode]
Some analytics providers (including Google Analytics)
have already provided configuration,
which you use via the `type` attribute.
If you are using an analytics provider,
you may not need to include `requests` information.
See your vendor documentation to find out
if `requests` need to be configured, and how.
#### Appending request URL: Extra URL Params
The [extraUrlParams](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#extra-url-params)
attribute specifies additional parameters to append to the query string of the request URL via the usual "&foo=baz" convention.
The `amp-analytics` example adds an additional parameter <code>cd1</code>
to the request and sets the parameter value to "AMP":
[sourcecode:js]
"extraUrlParams": {
"cd1": "AMP"
}
[/sourcecode]
### When data gets sent: triggers attribute
The `triggers` attribute describes when an analytics request should be sent.
It contains a key-value pair of trigger-name and trigger-configuration.
The trigger name can be any string comprised
of alphanumeric characters (a-zA-Z0-9).
For example,
the following `amp-analytics` element is configured to send a request to
`https://example.com/analytics` when the document is first loaded,
and each time an `a` tag is clicked:
[sourcecode:js]
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
[/sourcecode]
AMP supports the following trigger configurations:
<table>
<thead>
<tr>
<th data-th="Trigger Config" class="col-thirty">Trigger Config</th>
<th data-th="Description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Trigger Config"><code>on</code> (required)</td>
<td data-th="Description">The event to listener for. Valid values are <code>click</code>, <code>scroll</code>, <code>timer</code>, and <code>visible</code>.</td>
</tr>
<tr>
<td data-th="Trigger Config"><code>request</code> (required)</td>
<td data-th="Description">Name of the request to send (as specified in the <a href="/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute">requests</a>).</td>
</tr>
<tr>
<td data-th="Trigger Config"><code>vars</code></td>
<td data-th="Description">An object containing key-value pairs used to override <code>vars</code> defined in the top level config, or to specify <code>vars</code> unique to this trigger (see also <a href="/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering">Variable substitution ordering</a>).</td>
</tr>
<tr>
<td data-th="Trigger Config"><code>selector</code> (required when <code>on</code> set to <code>click</code>)</td>
<td data-th="Description">A CSS selector used to refine which elements should be tracked. Use value <code>*</code> to track all elements. This configuration is used on conjunction with the <code>click</code> trigger. Learn how to use selector to <a href="/docs/guides/analytics/use_cases.html#tracking-page-clicks">track page clicks</a> and <a href="/docs/guides/analytics/use_cases.html#tracking-social-interactions">social interactions</a>.</td>
</tr>
<tr>
<td data-th="Trigger Config"><code>scrollSpec</code> (required when <code>on</code> set to <code>scroll</code>)</td>
<td data-th="Description">Controls under which conditions when the page is scrolled the <code>scroll</code> event is fired. This object can contain <code>verticalBoundaries</code> and <code>horizontalBoundaries</code>. At least one of the two properties is required for a <code>scroll</code> event to fire. The values for both of the properties should be arrays of numbers containing the boundaries on which a scroll event is generated. See this example on <a href="/docs/guides/analytics/use_cases.html#tracking-scrolling">tracking scrolling</a>.</td>
</tr>
<tr>
<td data-th="Trigger Config"><code>timerSpec</code> (required when <code>on</code> is set to <code>timer</code>)</td>
<td data-th="Description">Controls when the <code>timer</code> event is fired. The timer will trigger immediately and then at a specified interval thereafter. This configuration is used on conjunction with the <code>timer</code> trigger.</td>
</tr>
</tbody>
</table>
**Important:** Triggers from a configuration with lower precedence are overridden
by triggers with the same names from a configuration with higher precedence
(see [Variable substitution ordering](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
### How data gets sent: transport attribute
The `transport` attribute specifies how to send a request.
The following three methods are enabled by default:
<table>
<thead>
<tr>
<th data-th="Transport Method" class="col-thirty">Transport Method</th>
<th data-th="Description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Transport Method"><code>beacon</code></td>
<td data-th="Description">Indicates <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> can be used to transmit the request. This will send a <code>POST</code> request, with credentials, and an empty body.</td>
</tr>
<tr>
<td data-th="Transport Method"><code>xhrpost</code></td>
<td data-th="Description">Indicates <code>XMLHttpRequest</code> can be used to transmit the request. This will send a <code>POST</code> request, with credentials, and an empty body.</td>
</tr>
<tr>
<td data-th="Transport Method"><code>image</code></td>
<td data-th="Description">Indicates the request can be sent by generating an <code>Image</code> tag. This will send a <code>GET</code> request.</td>
</tr>
</tbody>
</table>
Only one transport method gets used,
and it's the one with the highest precedence
that's enabled, permitted, and available.
The precedence is `beacon` > `xhrpost` > `image`.
If the client's user agent does not support a method,
the next highest precedence method enabled gets used.
Include the `transport` attribute in your configuration
only if you want to limit the transport options,
otherwise, you may stop requests.
In the example below,
`beacon` and `xhrpost` are set to false,
so they will not be used even though they have higher precedence than `image`.
If the client's user agent supports the `image` method,
then it will be used; otherwise, no request gets sent.
[sourcecode:js]
'transport': {
'beacon': false,
'xhrpost': false,
'image': true
}
[/sourcecode]
## Variable substitution ordering
AMP populates variables with values in an order of precendence:
1. Remote configurations (via `config`).
2. `vars` nested inside of a trigger within `triggers`.
3. `vars` at the top-level nested within `amp-analytics`.
4. Platform-provided values.
In this example, there’s a remote configuration,
variables defined at the top-level, in triggers, and at the platform level:
[sourcecode:html]
<amp-analytics config="http://example.com/config.json">
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
},
"vars": {
"account": "ABC123",
"title": "Homepage"
},
"triggers": {
"some-event": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My homepage",
"clientId": "my user"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
When the same `var` is defined in multiple locations,
the variable order of precendence sets its value once.
Thus, if the remote configuration defined `account` as UA-XXXXX-Y in the example above,
the values of various vars will be as follows:
<table>
<thead>
<tr>
<th data-th="var" class="col-thirty"><code>var</code></th>
<th data-th="Value">Value</th>
<th data-th="Defined By" class="col-thirty">Defined By</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="var"><code>canonicalUrl</code></td>
<td data-th="Value"><code>http://example.com/path/to/the/page</code></td>
<td data-th="Defined By">Platform</td>
</tr>
<tr>
<td data-th="var"><code>title</code></td>
<td data-th="Value">My homepage</td>
<td data-th="Defined By">Trigger</td>
</tr>
<tr>
<td data-th="var"><code>account</code></td>
<td data-th="Value"><code>UA-XXXXX-Y</code></td>
<td data-th="Defined By">Remote configuration</td>
</tr>
<tr>
<td data-th="var"><code>clientId</code></td>
<td data-th="Value">my user</td>
<td data-th="Defined By">Trigger</td>
</tr>
</tbody>
</table>
```
--------------------------------------------------------------------------------
/content/latest/blog/whats-in-an-amp-url.md:
--------------------------------------------------------------------------------
```markdown
---
class: post-blog post-detail
type: Blog
$title: What’s in an AMP URL?
id: whats-in-an-amp-url
author: amphtml
role:
origin: "https://amphtml.wordpress.com/2017/02/06/whats-in-an-amp-url/amp/"
excerpt: "The following was posted on the Google Developers Blog by Alex Fischer, Software Engineer, Google Search. TL;DR: Today, we’re adding a feature to the AMP integration in Google Search that allows users to access, copy, and share the canonical URL of an AMP document. But before diving deeper into the news, let’s take a step […]"
avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
date_data: 2017-02-06T11:12:42-08:00
$date: February 6, 2017
$parent: /content/latest/list-blog.html
components:
- social-share
---
<div class="amp-wp-article-content">
<p><em>The following was <a href="https://developers.googleblog.com/2017/02/whats-in-amp-url.html" target="_blank">posted on the Google Developers Blog</a> by Alex Fischer, Software Engineer, Google Search.</em></p>
<p><strong>TL;DR: Today, we’re adding a feature to the AMP integration in Google Search </strong><strong>that allows users to access, copy, and share the canonical URL of an AMP document. But before diving deeper into the news, let’s take a step back to elaborate more on URLs in the AMP world and how they relate to the speed benefits of AMP.</strong></p>
<p><strong>What’s in a URL? On the web, a lot – URLs and </strong><a href="https://tools.ietf.org/html/rfc6454"><strong>origins</strong></a><strong> represent, to some extent, trust and ownership of content. When you’re reading a New York Times article, a quick glimpse at the URL gives you a level of trust that what you’re reading represents the voice of the New York Times. Attribution, brand, and ownership are clear.</strong></p>
<p><strong>Recent product launches in different mobile apps and the recent launch of </strong><a href="https://search.googleblog.com/2015/12/amp-projects-fast-mobile-pages-coming.html"><strong>AMP in Google Search</strong></a><strong> have blurred this line a little. In this post, I’ll first try to explain the reasoning behind some of the technical decisions we made and make sense of the different kinds of AMP URLs that exist. I’ll then outline changes we are making to address the concerns around URLs. </strong></p>
<p><strong>To start with, AMP documents have three different kinds of URLs:</strong></p>
<ul>
<li>Original URL: The publisher’s document written in the AMP format
<pre><code>http://www.example.com/amp/doc.html
</code></pre>
</li>
<li>AMP Cache URL: The document served through an AMP Cache (e.g., all AMPs served by Google are served through the <a href="https://developers.google.com/amp/cache/">Google AMP Cache</a>). Most users will never see this URL.
<pre><code>https://www-example-com.cdn.ampproject.org/c/www.example.com/amp/doc.html</code></pre>
</li>
<li>Google AMP Viewer URL: The document displayed in an AMP viewer (e.g., when rendered on the search result page).
<pre><code>https://www.google.com/amp/www.example.com/amp.doc.html</code></pre>
</li>
</ul>
<p><div class="wp-image size-full wp-image-1051 aligncenter"><amp-img layout='responsive' width="970" height="676" src="https://amphtml.files.wordpress.com/2017/02/image1.png?w=660" srcset="https://amphtml.files.wordpress.com/2017/02/image1.png?w=660 660w, https://amphtml.files.wordpress.com/2017/02/image1.png?w=150 150w, https://amphtml.files.wordpress.com/2017/02/image1.png?w=300 300w, https://amphtml.files.wordpress.com/2017/02/image1.png?w=768 768w, https://amphtml.files.wordpress.com/2017/02/image1.png 970w" sizes="(max-width: 660px) 100vw, 660px"></amp-img><br />
Although having three different URLs with different origins for essentially the same content can be confusing, there are two main reasons why these different URLs exist: caching and pre-rendering. Both are large contributors to AMP’s speed, but require new URLs and I will elaborate on why that is.</p>
<h1><strong>AMP Cache URLs</strong></h1>
<p><strong>Let’s start with AMP Cache URLs. Paul Bakaus, a Google Developer Advocate for AMP, has an excellent post describing </strong><a href="https://medium.com/@pbakaus/why-amp-caches-exist-cd7938da2456"><strong>why AMP Caches exist</strong></a><strong>. Paul’s post goes into great detail describing the benefits of AMP Caches, but it doesn’t quite answer the question why they require new URLs. The answer to this question comes down to one of the design principles of AMP: build for easy adoption. AMP tries to solve some of the problems of the mobile web at scale, so its components must be easy to use for everyone. </strong></p>
<p><strong>There are a variety of options to get validation, proximity to users, and other benefits provided by AMP Caches. For a small site, however, that doesn’t manage its own DNS entries, doesn’t have engineering resources to push content through complicated APIs, or can’t pay for content delivery networks, a lot of these technologies are inaccessible. </strong></p>
<p><strong>For this reason, the Google AMP Cache works by means of a simple URL “transformation.” A webmaster only has to make their content available at some URL and the Google AMP Cache can then cache and serve the content through Google’s world-wide infrastructure through a new URL that mirrors and transforms the original. It’s as simple as that. Leveraging an AMP Cache using the original URL, on the other hand, would require the webmaster to modify their DNS records or reconfigure their name servers. While some sites do just that, the URL-based approach is easier to use for the vast majority of sites.</strong></p>
<h1><strong>AMP Viewer URLs</strong></h1>
<p><strong>In the previous section, </strong><strong>we learned about Google AMP Cache URLs — URLs that point to the cached version of an AMP document. But what about </strong><strong><a href="http://www.google.com/amp" rel="nofollow">http://www.google.com/amp</a></strong><strong> URLs? Why are they needed? These are “AMP Viewer” URLs and they exist because of pre-rendering.</strong></p>
<p><strong>AMP’s built-in support for privacy and resource-conscientious pre-rendering is rarely talked about and often misunderstood. AMP documents can be pre-rendered without setting off a cascade of resource fetches, without hogging up users’ CPU and memory, and without running any privacy-sensitive analytics code. This works regardless of whether the embedding application is a mobile web page or a native application. The need for new URLs, however, comes mostly from mobile web implementations, so I am using Google’s mobile search result page (SERP) as an illustrative example.</strong></p>
<h3><u><strong>How does pre-rendering work?</strong></u></h3>
<p><strong>When a user performs a Google search that returns AMP-enabled results, some of these results are pre-rendered behind the scenes. When the user clicks on a pre-rendered result, the AMP page loads instantly. </strong></p>
<p>Pre-rendering works by loading a hidden iframe on the embedding page (the search result page) with the content of the AMP page and an additional parameter that indicates that the AMP document is only being pre-rendered. The JavaScript component that handles the lifecycle of these iframes is called “AMP Viewer”.</p>
<center><strong><div class="wp-image wp-image-1052 aligncenter"><amp-img layout='responsive' width="970" height="1064" src="https://amphtml.files.wordpress.com/2017/02/image2.png?w=572&h=628" srcset="https://amphtml.files.wordpress.com/2017/02/image2.png?w=572&h=628 572w, https://amphtml.files.wordpress.com/2017/02/image2.png?w=137&h=150 137w, https://amphtml.files.wordpress.com/2017/02/image2.png?w=273&h=300 273w, https://amphtml.files.wordpress.com/2017/02/image2.png?w=768&h=842 768w, https://amphtml.files.wordpress.com/2017/02/image2.png 970w" sizes="(max-width: 572px) 100vw, 572px"></amp-img><br />
</strong><b><i>The AMP Viewer pre-renders an AMP document in a hidden iFrame.</i></b></center>
<p><strong>The user’s browser loads the document and the AMP runtime and starts rendering the AMP page. Since all other resources, such as images and embeds, are managed by the AMP runtime, nothing else is loaded at this point. The AMP runtime may decide to fetch some resources, but it will do so in a resource and privacy sensible way. </strong></p>
<p><strong>When a user clicks on the result, all the AMP Viewer has to do is show the iframe that the browser has already rendered and let the AMP runtime know that the AMP document is now visible.</strong></p>
<p><strong>As you can see, this operation is incredibly cheap – there is no network activity or hard navigation to a new page involved. This leads to a near-instant loading experience of the result. </strong></p>
<h3><u><strong>Where do google.com/amp URLs come from?</strong></u></h3>
<p><strong>All of the above happens while the user is still on the original page (in our example, that’s the search results page). </strong><strong>In other words, the user hasn’t gone to a different page; they have just viewed an iframe on the same page and so the browser doesn’t change the URL</strong><strong>. </strong></p>
<p><strong>We still want the URL in the browser to reflect the page that is displayed on the screen and make it easy for users to link to. When users hit refresh in their browser, they expect the same document to show up and not the underlying search result page. So the AMP viewer has to manually update this URL. This happens using the History API. This API allows the AMP Viewer to update the browser’s URL bar without doing a hard navigation.</strong></p>
<p><strong>The question is what URL the browser should be updated to. Ideally, this would be the URL of the result itself (e.g., </strong><strong><a href="http://www.example.com/amp/doc.html" rel="nofollow">http://www.example.com/amp/doc.html</a></strong><strong>); or the AMP Cache URL (e.g., </strong><strong>www-example-com.cdn.ampproject.org/www.example.com/amp/doc.html</strong><strong>). Unfortunately, it can’t be either of those. One of the main restrictions of the History API is that the new URL must be on the same origin as the original URL (</strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API"><strong>reference</strong></a><strong>). This is enforced by browsers (for </strong><a href="https://www.w3.org/TR/2011/WD-html5-20110113/history.html#the-history-interface"><strong>security reasons</strong></a><strong>), but it means that in Google Search, this URL has to be on the </strong><strong><a href="http://www.google.com" rel="nofollow">http://www.google.com</a></strong><strong> origin. </strong></p>
<h3><u><strong>Why do we show a header bar?</strong></u></h3>
<p><strong>The previous section explained restrictions on URLs that an AMP Viewer has to handle. These URLs, however, can be confusing and misleading. They can open up the doors to phishing attacks. If an AMP page showed a login page that looks like Google’s and the URL bar says </strong><strong><a href="http://www.google.com" rel="nofollow">http://www.google.com</a></strong><strong>, how would a user know that this page isn’t actually Google’s? That’s where the need for additional attribution comes in.</strong></p>
<p><strong>To provide appropriate attribution of content, every AMP Viewer must make it clear to users where the content that they’re looking at is coming from. And one way of accomplishing this is by adding a header bar that displays the “true” origin of a page.</strong></p>
<p><div class="wp-image wp-image-1050 aligncenter"><amp-img layout='responsive' width="817" height="593" src="https://amphtml.files.wordpress.com/2017/02/image3.png?w=624&h=453" srcset="https://amphtml.files.wordpress.com/2017/02/image3.png?w=624&h=453 624w, https://amphtml.files.wordpress.com/2017/02/image3.png?w=150&h=109 150w, https://amphtml.files.wordpress.com/2017/02/image3.png?w=300&h=218 300w, https://amphtml.files.wordpress.com/2017/02/image3.png?w=768&h=557 768w, https://amphtml.files.wordpress.com/2017/02/image3.png 817w" sizes="(max-width: 624px) 100vw, 624px"></amp-img></p>
<h1><strong>What’s next?</strong></h1>
<p><strong>I hope the previous sections made it clear why these different URLs exist and why there needs to be a header in every AMP viewer. We have heard how you feel about this approach and the importance of URLs. So what next? As you know, we want to be thoughtful in what we do and ensure that we don’t break the speed and performance users expect from AMP pages. </strong></p>
<p><strong>Since the launch of </strong><a href="https://amphtml.wordpress.com/2016/02/24/amping-up-in-google-search/"><strong>AMP in Google Search</strong></a><strong> in Feb 2016, we have taken the following steps:</strong></p>
<ul>
<li ><strong>All Google URLs (i.e., the Google AMP cache URL and the Google AMP viewer URL) reflect the original source of the content as best as possible:</strong><strong><br />
</strong></p>
<pre><strong>www.google.com/amp/</strong><b>www.example.com/amp/doc.html</b></pre>
</li>
<li ><strong>When users scroll down the page to read a document, the AMP viewer header bar hides, freeing up precious screen real-estate.</strong></li>
<li ><strong>When users visit a Google AMP viewer URL on a platform where the viewer is not available, we redirect them to the canonical page for the document.</strong></li>
</ul>
<p>In addition to the above, many users have requested a way to access, copy, and share the canonical URL of a document. Today, we’re adding support for this functionality in form of an anchor button in the AMP Viewer header on Google Search. This feature allows users to use their browser’s native share functionality by long-tapping on the link that is displayed.</p>
<p><div class="wp-image wp-image-1049 aligncenter"><amp-img layout='responsive' width="614" height="1064" src="https://amphtml.files.wordpress.com/2017/02/image4.png?w=457&h=792" srcset="https://amphtml.files.wordpress.com/2017/02/image4.png?w=457&h=792 457w, https://amphtml.files.wordpress.com/2017/02/image4.png?w=87&h=150 87w, https://amphtml.files.wordpress.com/2017/02/image4.png?w=173&h=300 173w, https://amphtml.files.wordpress.com/2017/02/image4.png 614w" sizes="(max-width: 457px) 100vw, 457px"></amp-img></p>
<p><strong>In the coming weeks, the Android Google app will share the original URL of a document when users tap on the app’s share button. This functionality is already available on the iOS Google app.</strong></p>
<p><strong>Lastly, we’re working on leveraging upcoming web platform APIs that allow us to improve this functionality even further. One such API is the </strong><a href="https://developers.google.com/web/updates/2016/10/navigator-share"><strong>Web Share API</strong></a><strong> that would allow AMP viewers to invoke the platform’s native sharing flow with the original URL rather than the AMP viewer URL.</strong></p>
<p><strong>We as Google have every intention in making the AMP experience as good as we can for both, users and publishers. A thriving ecosystem is very important to us and attribution, user trust, and ownership are important pieces of this ecosystem. I hope this blog post helps clear up the origin of the three URLs of AMP documents, their role in making AMP fast, and our efforts to further improve the AMP experience in Google Search. Lastly, an ecosystem can only flourish with your participation: give us </strong><a href="https://twitter.com/googledevs"><strong>feedback</strong></a><strong> and </strong><a href="https://github.com/ampproject/amphtml"><strong>get involved</strong></a><strong> with AMP.<br />
</strong><br />
<em><strong>Posted by Alex Fischer, Software Engineer, Google Search.</strong></em></p><br />
</div>
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Mendalami AMP Analytics
toc: true
---
[TOC]
Panduan ini mendalami
[komponen amp-analytics](/docs/reference/extended/amp-analytics.html),
menguraikan konfigurasi `amp-analytics` contoh ke dalam blok pembangun utama ini:
Bagian selanjutnya dari panduan ini memakai contoh konfigurasi ini,
yang melacak tampilan halaman dan klik pengguna pada tautan
dan mengirim data analisis ke penyedia pihak ketiga,
[Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/):
[sourcecode:html]
<amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"extraUrlParams": {
"cd1": "AMP"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
},
'transport': {
'beacon': false,
'xhrpost': false,
'image': true
}
}
</script>
</amp-analytics>
[/sourcecode]
**Catatan:** Kode contoh di atas adalah untuk membantu Anda belajar, namun bukan berarti contoh itu realistis. Jika Anda bekerja dengan penyedia analisis, ada kemungkinan bahwa sampel di atas tidak masuk akal, konfigurasi penyedia akan meniadakan kerumitan. Rujuklah dokumen penyedia analisis untuk melihat konfigurasi contoh.
## Tempat mengirim data analisis: atribut tipe
AMP didesain untuk mendukung dua pola umum pengumpulan data:
* Penyerapan oleh endpoint yang dipublikasikan pemilik untuk sistem analisis internal.
* Penyerapan oleh endpoint yang dimiliki oleh vendor untuk interoperabilitas dengan solusi vendor
(misalnya, [Adobe Analytics](https://helpx.adobe.com/marketing-cloud/analytics.html), [Chartbeat](http://support.chartbeat.com/docs/), [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/)).
Untuk mengirim data analisis ke penyedia analisis,
sertakan atribut `type` dalam tag `amp-analytics` dan atur nilainya
ke vendor yang sesuai, sebagaimana didefinisikan dalam
[spesifikasi amp-analytics](/docs/reference/extended/amp-analytics.html).
Misalnya: `<amp-analytics type="googleanalytics">` mengirim data analisis
ke penyedia analisis pihak ketiga, Google Analytics,
Untuk mengirim data ke endpoint yang dimiliki penerbit,
cukup jangan sertakan atribut `type`;
data analisis dikirim ke endpoint yang didefinisikan untuk masing-masing
[permintaan](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute).
Konfigurasi vendor Analytics merupakan cara cepat
untuk memulai `amp-analytics`.
Anda harus merujuk pada dokumentasi vendor dan
sumber daya bantuan untuk panduan lebih lanjut.
Sebagaimana yang dijelaskan sebelumnya,
daftar vendor yang sudah terintegrasi dengan AMP, serta tautan
ke dokumentasi spesifik bisa ditemukan dalam
[spesifikasi amp-analytics](/docs/reference/extended/amp-analytics.html).
Jika Anda adalah vendor analisis,
ketahui selengkapnya tentang
[mengintegrasikan konfigurasi analisis sendiri ke dalam AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
## Memuat konfigurasi jarak jauh: atribut config
Anda tidak harus menyertakan semua konfigurasi
untuk `amp-analytics` secara menyeluruh di halaman AMP Anda.
Sebaliknya, Anda bisa memanggil URL jarak jauh
untuk semua atau sebagian konfigurasi.
Hal ini memungkinkan Anda untuk melakukan berbagai hal seperti memvariasikan konfigurasi
berdasarkan permintaan spesifik
Jika Anda sebagai penerbit memiliki kontrol atas file jarak jauh,
Anda bisa melakukan pemrosesan sisi server yang diperlukan
untuk membuat data konfigurasi.
Langkah pertama untuk memuat konfigurasi jarak jauh adalah
menyertakan atribut config dalam tag `amp-analytics`:
[sourcecode:html]
<amp-analytics config="https://example.com/analytics.account.config.json">
[/sourcecode]
Langkah berikutnya adalah membuat materi JSON yang berada dalam URL jarak jauh.
Dalam contoh sederhana ini,
konfigurasi yang terkandung dalam objek JSON hanyalah merupakan nilai variabel untuk akun analisis.
Contoh materi dalam `https://example.com/analytics.account.config.json`:
[sourcecode:html]
{
"vars": {
"account": "UA-XXXXX-Y" // Replace with your property ID.
}
}
[/sourcecode]
Langkah terakhir adalah untuk memastikan apa yang diambil dari file jarak jauh
ke dalam tempat yang sesuai dalam konfigurasi `amp-analytics`.
Baik dalam permintaan `pageview` maupun `event` di sini,
nilai variabel `account` secara otomatis diatur
ke nilai akun dalam URL jarak jauh (`"account": "UA-XXXXX-Y"`):
[sourcecode:html]
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}
[/sourcecode]
**Penting:** AMP tidak memvalidasi terhadap lebih dari satu penggunaan dari variabel yang sama.
Nilai-nilai diisikan mengikuti urutan prioritas penggantian variabel,
dan nilai dalam URL jarak jauh berada di prioritas teratas dari urutan tersebut
(lihat [Pengurutan penggantian variabel](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
## Permintaan, pemicu, & transport
Atribut `requests` mendefinisikan 'data apa yang dikirimkan'
(misalnya, `pageviews`, `events`),
dan tempat data tersebut dikirimkan (URL yang digunakan untuk mentransmisikan data).
Atribut `triggers` menjelaskan kapan data analisis harus dikirimkan,
misalnya, ketika pengguna melihat halaman, ketika pengguna mengeklik tautan.
Atribut `transport` menetapkan cara mengirim permintaan,
atau secara lebih spesifik lagi, protokolnya.
Teruskan membaca untuk mengetahui selengkapnya tentang konfigurasi ini.
(Anda juga bisa membaca tentang konfigurasi ini dalam
[referensi amp-analytics](/docs/reference/extended/amp-analytics.html).)
### Data apa yang dikirimkan: meminta atribut
`request-name` digunakan dalam konfigurasi pemicu untuk menetapkan
permintaan apa yang harus dikirim sebagai respons terhadap suatu kejadian tertentu.
`request-value` merupakan URL `https`.
Nilai-nilai ini bisa meliputi token placeholder
yang bisa merujuk permintaan atau variabel lain.
[sourcecode:html]
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}
[/sourcecode]
Beberapa penyedia analisis (termasuk Google Analytics)
sudah memberikan konfigurasi,
yang Anda gunakan lewat atribut `type`.
Jika Anda menggunakan penyedia analisis,
Anda tidak perlu menyertakan informasi `requests`.
Lihat dokumentasi vendor untuk mengetahui
jika `requests` perlu dikonfigurasi, dan cara melakukannya.
#### Menambahkan URL permintaan: Extra URL Params
Atribut [extraUrlParams](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#extra-url-params)
atribut menetapkan parameter tambahan untuk ditambahkan ke </string> kueri dari URL permintaan lewat konvensi "&foo=baz" yang biasa.
Contoh `amp-analytics` menambahkan parameter tambahan <code>cd1</code>
ke permintaan dan mengatur nilai parameter ke "AMP":
[sourcecode:html]
"extraUrlParams": {
"cd1": "AMP"
}
[/sourcecode]
### Ketika data dikirimkan: memicu atribut
Atribut `triggers` menjelaskan kapan permintaan analisis harus dikirimkan.
Atribut ini berisi pasangan nilai-kunci dari nama pemicu dan konfigurasi pemicu.
Nama pemicu bisa berupa sembarang </string> yang terdiri
karakter alfanumerik (a-zA-Z0-9).
Misalnya,
elemen `amp-analytics` berikut dikonfigurasi untuk mengirim permintaan ke
`https://example.com/analytics` ketika dokumen dimuat pertama kali,
dan setiap kali tag `a` diklik:
[sourcecode:html]
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "42",
"eventLabel": "clicked on a link"
}
}
}
[/sourcecode]
AMP mendukung konfigurasi pemicu berikut:
<table>
<thead>
<tr>
<th data-th="Trigger Config" class="col-thirty">Konfigurasi Pemicu</th>
<th data-th="Description">Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Trigger Config"><code>on</code> (diperlukan)</td>
<td data-th="Description">Kejadian untuk pendengar. Nilai yang valid adalah <code>click</code>, <code>scroll</code>, <code>timer</code>, dan <code>visible</code>.</td>
</tr>
<tr>
<td data-th="Trigger Config"><code>request</code> (diperlukan)</td>
<td data-th="Description">Nama permintaan untuk dikirim (seperti yang ditetapkan dalam <a href="/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute">permintaan</a>).</td>
</tr>
<tr>
<td data-th="Trigger Config"><code>vars</code></td>
<td data-th="Description">Objek yang berisi pasangan nilai-kunci yang digunakan untuk mengganti <code>vars</code> didefinisikan dalam config di tingkat teratas, atau untuk menetapkan <code>vars</code> sebagai unik bagi pemicu ini (lihat juga <a href="/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering">Pengurutan penggantian variabel</a>).</td>
</tr>
<tr>
<td data-th="Trigger Config"><code>selector</code> (diperlukan ketika <code>on</code> diatur ke <code>click</code>)</td>
<td data-th="Description">Pemilih CSS digunakan untuk menyaring elemen yang harus dilacak. Gunakan nilai <code>*</code> untuk melacak semua elemen. Konfigurasi ini digunakan bersama pemicu <code>click</code>. Ketahui cara menggunakan pemilih untuk <a href="/docs/guides/analytics/use_cases.html#tracking-page-clicks">melacak klik halaman</a> dan <a href="/docs/guides/analytics/use_cases.html#tracking-social-interactions">interaksi sosial</a>.</td>
</tr>
<tr>
<td data-th="Trigger Config"><code>scrollSpec</code> (diperlukan ketika <code>on</code> diatur ke <code>scroll</code>)</td>
<td data-th="Description">Mengontrol berdasarkan kondisi ketika halaman digulirkan kejadian <code>scroll</code> akan dipicu. Objek ini bisa berisi <code>verticalBoundaries</code> dan <code>horizontalBoundaries</code>. Sekurangnya satu dari dua properti diperlukan agar kejadian <code>scroll</code> dipicu. Nilai-nilai untuk kedua properti tersebut harus larik angkat yang berisi batasan sebuah kejadian gulir akan dihasilkan. Lihat contoh ini dalam <a href="/docs/guides/analytics/use_cases.html#tracking-scrolling">melacak pengguliran</a>.</td>
</tr>
<tr>
<td data-th="Trigger Config"><code>timerSpec</code> (diperlukan ketika <code>on</code> diatur ke <code>timer</code>)</td>
<td data-th="Description">Mengontrol ketika kejadian <code>timer</code> dipicu. Timer akan langsung dipicu dan kemudian pada interval yang telah ditetapkan. Konfigurasi ini digunakan bersama pemicu <code>timer</code>.</td>
</tr>
</tbody>
</table>
**Penting:** Pemicu dari konfigurasi yang berprioritas lebih rendah dikesampingkan
oleh pemicu dengan nama yang sama dari konfigurasi dengan prioritas lebih tinggi
(lihat [Pengurutan penggantian variabel](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
### Bagaimana data dikirimkan: atribut transport
Atribut `transport` menetapkan cara mengirim permintaan.
Ketiga metode berikut ini diaktifkan secara default:
<table>
<thead>
<tr>
<th data-th="Transport Method" class="col-thirty">Metode Transport</th>
<th data-th="Description">Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Transport Method"><code>beacon</code></td>
<td data-th="Description">Menunjukkan <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> bisa digunakan untuk mentransmisikan permintaan. Ini akan mengirimkan permintaan <code>POST</code>, dengan kredensial, dan bagian badan yang kosong.</td>
</tr>
<tr>
<td data-th="Transport Method"><code>xhrpost</code></td>
<td data-th="Description">Menunjukkan <code>XMLHttpRequest</code> bisa digunakan untuk mentransmisikan permintaan tersebut. Ini akan mengirimkan permintaan <code>POST</code>, dengan kredensial, dan badan teks yang kosong.</td>
</tr>
<tr>
<td data-th="Transport Method"><code>image</code></td>
<td data-th="Description">Menunjukkan permintaan bisa dikirimkan dengan menghasilkan tag <code>Image</code>. Ini akan mengirimkan permintaan <code>GET</code>.</td>
</tr>
</tbody>
</table>
Hanya satu metode transport yang digunakan,
dan hanya yang memiliki prioritas lebih tinggi
yang diaktifkan, diizinkan, dan tersedia.
Prioritasnya adalah `beacon` > `xhrpost` > `image`.
Jika agen-pengguna klien tidak mendukung sebuah metode,
metode prioritas tertinggi berikutnya yang diaktifkan akan digunakan.
Sertakan atribut `transport` dalam konfigurasi Anda
hanya jika Anda ingin membatasi opsi transport,
jika tidak, Anda bisa menghentikan permintaan.
Dalam contoh di bawah ini,
`beacon` dan `xhrpost` diatur ke false,
sehingga tidak akan digunakan meski prioritasnya lebih tinggi daripada `image`.
Jika agen-pengguna klien mendukung metode `image`,
maka ia akan digunakan; jika tidak, tidak ada permintaan yang akan dikirimkan.
[sourcecode:html]
'transport': {
'beacon': false,
'xhrpost': false,
'image': true
}
[/sourcecode]
## Pengurutan penggantian variabel
AMP mengisi variabel dengan nilai berdasarkan urutan prioritas:
1. Konfigurasi jarak jauh (lewat `config`).
2. `vars` disarangkan di dalam pemicu di dalam `triggers`.
3. `vars` di tingkat teratas disarangkan di dalam `amp-analytics`.
4. Nilai yang disediakan oleh platform.
Dalam contoh ini, ada konfigurasi jarak jauh,
variabel yang didefinisikan di tingkat teratas, dalam pemicu, dan di tingkat platform:
[sourcecode:html]
<amp-analytics config="http://example.com/config.json">
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
},
"vars": {
"account": "ABC123",
"title": "Homepage"
},
"triggers": {
"some-event": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My homepage",
"clientId": "my user"
}
}
}
</script>
</amp-analytics>
[/sourcecode]
Ketika `var` yang sama didefinisikan di lebih dari satu lokasi,
urutan prioritas variabel mengatur nilainya satu kali.
Sehingga jika dalam contoh di atas konfigurasi jarak jauh mendefinisikan `account` sebagai UA-XXXXX-Y,
maka nilai dari berbagai vars akan menjadi sebagai berikut:
<table>
<thead>
<tr>
<th data-th="var" class="col-thirty"><code>var</code></th>
<th data-th="Value">Nilai</th>
<th data-th="Defined By" class="col-thirty">Didefinisikan Oleh</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="var"><code>canonicalUrl</code></td>
<td data-th="Value"><code>http://example.com/path/to/the/page</code></td>
<td data-th="Defined By">Platform</td>
</tr>
<tr>
<td data-th="var"><code>title</code></td>
<td data-th="Value">My homepage</td>
<td data-th="Defined By">Pemicu</td>
</tr>
<tr>
<td data-th="var"><code>account</code></td>
<td data-th="Value"><code>UA-XXXXX-Y</code></td>
<td data-th="Defined By">Konfigurasi jarak jauh</td>
</tr>
<tr>
<td data-th="var"><code>clientId</code></td>
<td data-th="Value">my user</td>
<td data-th="Defined By">Pemicu</td>
</tr>
</tbody>
</table>
```
--------------------------------------------------------------------------------
/content/pages/how-it-works.html:
--------------------------------------------------------------------------------
```html
---
$title: How it works
$view: /views/blank.html
---
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Accelerated Mobile Pages – A new approach to web performance</title>
<link rel="canonical" href="https://www.ampproject.org/how-it-works/">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Droid+Serif' rel='stylesheet' type='text/css'>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0.js" async></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<style amp-custom>
body {
margin: 0;
font-family: 'Open Sans';
}
.brand-logo {
font-family: Georgia, 'Droid Serif', serif;
}
.amp {
font-size: 3em;
}
.ad-container {
display: flex;
justify-content: center;
}
.content-container p {
line-height: 28px;
margin: 32px 0;
}
body > header {
border: 0 solid #f4f4f4;
border-bottom-width: 1px;
font-size: 1.4rem;
}
header,
.article-body {
padding: 15px;
}
.lightbox {
background: #222;
}
.full-bleed {
margin: 0 -15px;
}
.lightbox-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.lightbox-content p {
color: #fff;
padding: 15px;
}
.lightbox amp-img {
width: 100%;
}
figure {
margin: 0;
}
figcaption {
color: #6f757a;
padding: 15px 0;
font-size: .9em;
}
.author {
display: flex;
align-items: center;
background: #f4f4f4;
padding: 0 15px;
font-size: .8em;
border: solid #dcdcdc;
border-width: 1px 0;
}
.header-time {
color: #a8a3ae;
font-family: 'Roboto', sans-serif;
font-size: 12px;
}
.author p {
margin: 5px;
}
.byline {
font-family: 'Roboto', sans-serif;
display: inline-block;
}
.byline p {
line-height: normal;
}
.byline .brand {
color: #6f757a;
}
.standfirst {
color: #6f757a;
}
.twitter {
text-decoration: none;
}
#author-avatar {
margin: 10px;
border: 5px solid #fff;
width: 50px;
height: 50px;
border-radius: 50%;
}
h1 {
margin: 5px 0;
font-weight: normal;
}
p:before {
content: '';
width: 14em;
display: block;
overflow: hidden;
}
footer {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
background: #f4f4f4;
}
hr {
margin: 0;
}
amp-img {
background-color: #f4f4f4;
}
h2 {
margin-top: 2em;
margin-bottom: 2em;
font-family: Georgia, 'Droid Serif', serif;
font-size: 1.3em;
text-align: center;
}
code {
color: green;
}
@media screen and (min-width: 767px) {
main, body > header {
margin: 0 10%;
}
}
@media screen and (min-width: 900px) {
main, body > header {
margin: 0 18%;
}
}
</style>
</head>
<body>
<amp-analytics type="googleanalytics" id="analytics-ga">
<script type="application/json">
{
"vars": {
"account": "UA-67833617-1"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<header>
<div class="brand-logo">
Accelerated Mobile Pages
</div>
</header>
<main role="main">
<article>
<div class="content-container">
<header>
<h1 itemprop="headline">A new approach to web performance</h1>
<time class="header-time" itemprop="datePublished"
datetime="2015-10-01 07:30">October 7, 2015</time>
<p class="standfirst">
Web performance is not unexplored territory for the tech community: <a href="http://www.webperformance.com/library/reading.html">books</a> have been written about it, many <a href="https://stevesouders.com/talks.php">talks</a> have been given – there is even an entire <a href="http://velocityconf.com/">conference series</a> dedicated to the topic. However, users still frequently see poor web performance in the wild, particularly on mobile devices. Consumption of news articles, and similar relatively static content, is often painfully slow, with pages taking a long time to load. Even after text becomes visible, pages continue to build up over many seconds, as ads and images come into display. The result is an often jarring experience of janky scrolling and users needlessly losing their reading position.
</p>
<p class="standfirst">
Over the last several months, discussions between publishers and technology companies began in earnest about the need to improve the entire mobile content ecosystem for everyone – publishers, consumer platforms, creators, and users. We asked ourselves, how can we improve this problem? In some ways, the trend nowadays is to switch to native apps on mobile, but we have read those books, and seen those presentations, and we know that the web can be fast if best practices are followed. To make the web fast at scale, we want to make it easier to create documents that are fast-by-default.
</p>
</header>
<div class="author">
<!-- This is the only AMP custom element in this article. Images are resources and thus subject to AMP's resource loading. -->
<amp-img src="/static/img/malte.jpg" id="author-avatar" placeholder
height="50" width="50" alt="Malte Ubl">
</amp-img>
<div class="byline">
<p>
by <span itemscope itemtype="http://schema.org/Person"
itemprop="author"><b>Malte Ubl</b>
<a class="twitter" href="https://twitter.com/cramforce">
@cramforce</a></span>
</p>
<p class="brand">AMP Project Tech Lead<p>
</div>
</div>
<div class="article-body" itemprop="articleBody">
<p>
This is a really hard problem to solve, so we decided to reduce scope. The web today is many things: an application platform, an e-commerce platform, a content platform, a gaming platform, and so much more. We decided to focus entirely on static content as it lends itself to more radical optimization approaches that are easier to apply across the board.
</p>
<p>
We began to experiment with an idea: could we develop a restricted subset of the things we’d use from HTML, that's both fast and expressive, so that documents would always load and render with reliable performance? That experiment has culminated in a promising proof of concept we call <a href="https://www.ampproject.org/">Accelerated Mobile Pages (AMP)</a>. AMP HTML is built on existing web technologies, and the documents written in it render in all modern web browsers and web views. In fact, this page is, itself, an AMP HTML document.
</p>
<h2>The page you are currently reading is an AMP HTML document.</h2>
<p>
We think AMP HTML is promising, but we know it's not complete. We are <a href="https://github.com/ampproject/amphtml">sharing our proof-of-concept on GitHub</a> to start a conversation about how to make static content on the web fast. We want to collaborate with the entire web community to develop this promising idea into something more real, sharing our techniques, ideas, and code.
</p>
<p>
One thing we realized early on is that many performance issues are caused by the integration of multiple JavaScript libraries, tools, embeds, etc. into a page. This isn’t saying that JavaScript immediately leads to bad performance, but once arbitrary JavaScript is in play, most bets are off because anything could happen at any time and it is hard to make any type of performance guarantee. With this in mind we made the tough decision that AMP HTML documents would not include any author-written JavaScript, nor any third-party scripts.
</p>
<p>
JavaScript is the core building block for advanced web apps, but for static content it may not always be required: for a headline, some text and an image you do not need JS. Looking further into the content being created on the web nowadays, there are, however, things like lightboxes, various embeds, polls, quizzes and other interactive features that cannot easily be implemented without JavaScript. But the web platform has a great solution: <a href="http://www.html5rocks.com/en/tutorials/webcomponents/customelements/">custom elements</a> and <a href="http://webcomponents.org/">web components</a>. AMP components may have JavaScript under the hood, but it is coordinated with other AMP components, so its composition into the page doesn’t cause performance degradation. If AMP HTML provided the right custom elements, we might be able to get rid of arbitrary JavaScript for these documents altogether.
</p>
<h2>AMP HTML loves CSS!</h2>
<p>
So, AMP HTML comes with strong limitations on JS. What about CSS? AMP HTML loves CSS! We do add some <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#stylesheets">best practice enforcement</a>, but we do want AMP HTML documents to look like their authors intended them to, and so allowing extensive styling is core to the platform.
</p>
<p>
Ads and analytics – while critical for publishers – are a big part of the performance problem and so they must be a big part of the solution. Sites often deploy many analytics providers. Ad serving is also a complicated ecosystem. Embedding an ad or analytics often implies giving up control of what eventually happens to a site because they can typically inject any JavaScript they want into pages. AMP HTML does not allow this. We realize that both ads and analytics are an important element of monetization on the web, and so we need to support them: our goal is to realign monetization with great user experience.
</p>
<p>
AMP HTML is taking the following approach to analytics: so-called “tracking pixels” can be embedded into AMP documents as long as they don’t use JavaScript. They typically come with a <code>noscript</code> version that makes this easy. More advanced analytics are currently not supported. Our vision is to deploy a single, unified, auditable, high performance, open source analytics library with AMP HTML that can report to various existing analytics provider backends, so it is possible to use the existing ecosystem without overloading a page with analytics software.
</p>
<p>
We’ve taken first steps to make ads in AMP HTML better, but we aren’t done yet. AMP HTML doesn’t allow JavaScript so ads cannot be directly embedded – instead they live in sandboxed iframes with no access to the primary document. Relying on iframes solves some of the worst performance pitfalls with ads, in particular with respect to <code>document.write</code>. We also prioritize ads lower during loading than other content and optimize load timing to avoid jank. Ads in AMP files can still be heavyweight, so there is still a lot of work to do for us.
</p>
<h2>AMP HTML is pretty fast.</h2>
<p>
So, how fast is AMP HTML? Pretty fast. In a sample of pages our early partners created we are seeing performance improvements measured through <a href="https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index">Speed Index</a> between 15% and 85%. This was measured with a simulated 3G connection and a simulated Nexus 5 device. The best part is you don't need to be a performance expert to get this; best practices are baked right in. And as we optimize AMP HTML in the future, all pages benefit.
</p>
<p>
But how do we get from good to, let’s say, instant? We’ll cheat :) AMP documents are from the ground up designed to be efficiently pre-renderable. Browsers have long supported pre-rendering through the <code><link rel=prerender></code> tag, but they need to be conservative about this mechanism because prerendering can be expensive. With AMP HTML we added the ability to tell a document: render yourself, but only as far as what is visible above the fold and only elements which are not CPU intensive to minimize the cost of pre-rendering. With this mechanism in place, referrers of AMP document can initiate rendering of docs before the user acts much more aggressively, so that in many cases the document will be done rendering by the time the user clicks.
</p>
<p>
With all of these techniques in place, AMP HTML documents can be loaded with a small set of HTTP requests: the document itself, custom fonts (if used) and what we call the AMP JavaScript library that implements the AMP custom elements and resource loading.
</p>
<p>
Our goal with AMP HTML is reliable performance, so we designed it to be easily cacheable by content delivery networks (CDNs). Google is offering a service that delivers AMP HTML documents given their URL through its CDN. Others can use this service or make their own or serve AMP HTML pages from a plain-old-web-server.
</p>
<h2>Resources must declare their sizing up-front</h2>
<p>
This brings us to the final topic that makes AMP HTML unique: all resource loading is controlled by the AMP library and, more importantly, resources must declare their sizing up-front. Document authors have to state resource sizes explicitly. This doesn’t mean that resources can’t be responsive – they can be, but their aspect ratio or dimensions needs to be inferable from the HTML alone. This means that after initial layout, an AMP document does not change until user action. An ad at the top of the page can’t suddenly say: “I want to be 200 pixels high instead of 50.” This dramatically reduces jank and prevents users from losing their place in the document. All custom elements are subject to this restriction. Placement on the screen can be reserved while their implementations download asynchronously. This gets us lazy loading with zero visual jank.
</p>
<p>
To summarize: AMP HTML is a specialized subset of HTML with custom elements that provides reliable performance and instant loading of static content. Nothing about the project is set in stone. We are sharing an early version of the <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md">AMP HTML spec</a> as well as a <a href="https://github.com/ampproject/amphtml">prototype implementation on GitHub</a> and we are looking forward to collaborating with the community on all aspects of the project. We expect there are still low (or not so low) hanging fruit for performance optimization that we missed, so if you are an expert in web performance or just want to dig in we’d love your help. Also, if you happen to know a lot about publishing documents on the internet we’d love your input: Maybe some of our restrictions are a bit too drastic for the things you work on. We’d love to hear about those cases, so we can thoughtfully extend the capabilities of AMP HTML while keeping pages lean and fast.<br> <a href="https://github.com/ampproject/amphtml">See you over on GitHub!</a>
</p>
</div>
</div>
</article>
</main>
<footer>
<div class="amp"> ⚡</div>
</footer>
</body>
</html>
```