This is page 16 of 24. Use http://codebase.md/cloudflare/docs/imgs/%7B%7B%20localized_doc.url.path%20%7D%7D?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Analytics: aspectos básicos
3 | toc: true
4 | ---
5 |
6 | Comienza aquí para informarte acerca de los aspectos básicos del análisis de AMP.
7 |
8 | [TOC]
9 |
10 | ## ¿amp-pixel o amp-analytics?
11 |
12 | AMP proporciona dos componentes para satisfacer tus necesidades en términos de análisis y medición:
13 | [amp-pixel](/docs/reference/amp-pixel.html) y
14 | [amp-analytics](/docs/reference/extended/amp-analytics.html).
15 | Ambas opciones envían datos del análisis a un terminal definido.
16 |
17 | Si buscas un comportamiento, como un simple
18 | [píxel de seguimiento](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
19 | el componente `amp-pixel` proporciona seguimiento básico de las vistas de la página y
20 | los datos de vista de la página se envían a una dirección URL definida.
21 | Algunas integraciones con un proveedor pueden llamar a este componente,
22 | en cuyo caso especificarán el terminal de URL exacto.
23 |
24 | Para la mayoría de las soluciones de análisis, usa `amp-analytics`.
25 | El seguimiento de vistas de páginas también funciona en `amp-analytics`.
26 | Sin embargo, también puedes realizar un seguimiento de la captación de usuarios con cualquier tipo de contenido de la página,
27 | incluidos los clics en vínculos y botones.
28 | A su vez, puedes obtener una medición del punto hasta el cual el usuario navegó en la página y
29 | si usó o no redes sociales, entre otras alternativas
30 | (consulta
31 | [Análisis profundo de AMP Analytics](/docs/guides/analytics/deep_dive_analytics.html)).
32 |
33 | Como parte de la integración con la plataforma de AMP,
34 | los proveedores han ofrecido configuraciones de `amp-analytics` predefinidas
35 | a fin de que resulte fácil capturar datos y enviarlos a sus herramientas de seguimiento.
36 | Accede a documentación del proveedor desde la
37 | [especificación de amp-analytics](/docs/reference/extended/amp-analytics.html).
38 |
39 | En tus páginas puedes usar `amp-pixel` y `amp-analytics`:
40 | `amp-pixel` para un seguimiento de vistas de página simple
41 | y`amp-analytics` para todo lo demás.
42 | También puedes agregar múltiplos de cada etiqueta.
43 | Si trabajas con varios proveedores de herramientas de análisis,
44 | necesitarás una etiqueta por solución.
45 | Recuerda que las páginas AMP más simples son mejores para los usuarios.
46 | Por lo tanto, si no necesitas etiquetas adicionales no las uses.
47 |
48 | ## Crea una configuración de análisis simple
49 |
50 | Aprende a crear una configuración simple para
51 | [amp-pixel](/docs/reference/amp-pixel.html) y
52 | [amp-analytics](/docs/reference/extended/amp-analytics.html).
53 |
54 | ### Configuración simple de amp-pixel
55 |
56 | Para crear una configuración simple de `amp-pixel`,
57 | inserta algo como lo siguiente en el cuerpo de tu página AMP:
58 |
59 | [sourcecode:html]
60 | <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
61 | [/sourcecode]
62 |
63 | En este ejemplo,
64 | los datos de las vistas de página se envían a la dirección URL definida junto con un número aleatorio.
65 | La variable `RANDOM` es una de muchas
66 | [variables de sustitución en la plataforma AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
67 | Obtén más información sobre la
68 | [Sustitución de variables](/docs/guides/analytics/analytics_basics.html#variable-substitution) aquí.
69 |
70 | El componente [amp-pixel](/docs/reference/amp-pixel.html)
71 | está integrado,
72 | por lo que no necesitas una declaración de inclusión como la que se requiere
73 | para los componentes ampliados de AMP, incluido `amp-analytics`.
74 | Sin embargo, debes colocar la etiqueta `amp-pixel` tan cerca como sea posible
75 | del inicio de tu `<body>`.
76 | El píxel de seguimiento solo se activará cuando aparezca la etiqueta.
77 | Si `amp-pixel` se posiciona cerca de la parte inferior de la página,
78 | es posible que no se active.
79 |
80 | ### Configuración simple de amp-analytics
81 |
82 | Si deseas crear una configuración simple para
83 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
84 | primero debes incluir esta declaración de `custom-element`
85 | en el `<head>` del documento de AMP (consulta también la sección de
86 | [declaración de inclusión de componentes](/docs/reference/extended.html#component-inclusion-declaration)):
87 |
88 | [sourcecode:html]
89 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
90 | [/sourcecode]
91 |
92 | El siguiente ejemplo es similar al [ejemplo de `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
93 | Cada vez que una página es visible,
94 | el evento desencadenante se activa y
95 | envía los datos de vista de página a una dirección URL definida junto con un Id. aleatorio:
96 |
97 | [sourcecode:html]
98 | <amp-analytics>
99 | <script type="application/json">
100 | {
101 | "requests": {
102 | "pageview": "https://foo.com/pixel?RANDOM",
103 | },
104 | "triggers": {
105 | "trackPageview": {
106 | "on": "visible",
107 | "request": "pageview"
108 | }
109 | }
110 | }
111 | </script>
112 | </amp-analytics>
113 | [/sourcecode]
114 |
115 | En el ejemplo anterior, definimos una solicitud llamada “pageview” para que sea https://foo.com/pixel?RANDOM. Como se indicó antes, RANDOM se reemplaza por un número aleatorio, de modo que el aspecto final de la solicitud será el siguiente: https://foo.com/pixel?0.23479283687235653498734.
116 |
117 | Cuando la página es visible
118 | (según se especifique con la palabra clave de activación `visible`),
119 | se activa un evento y se envía la solicitud de `pageview`.
120 | El atributo triggers determina cuándo se debe activar la solicitud de vistas de página.
121 | Obtén más información acerca de los atributos [requests y triggers](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
122 |
123 | ## Sustitución de variables
124 |
125 | Los componentes [amp-pixel](/docs/reference/amp-pixel.html) y
126 | [amp-analytics](/docs/reference/extended/amp-analytics.html)
127 | permiten todas las sustituciones de variables de URL estándares (consulta
128 | [Sustitución de variables de AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
129 | En el ejemplo siguiente,
130 | se envía la solicitud de vistas de página a la URL
131 | junto con la URL canónica del documento de AMP actual, su título y un
132 | [Id. de cliente](/docs/guides/analytics/analytics_basics.html#user-identification):
133 |
134 | [sourcecode:html]
135 | <amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
136 | [/sourcecode]
137 |
138 | Debido a su simpleza,
139 | la etiqueta `amp-pixel` solo puede incluir variables definidas por la plataforma
140 | o que el tiempo de ejecución de AMP pueda analizar desde la página AMP.
141 | En el ejemplo anterior,
142 | la plataforma completa los valores para
143 | `canonicalURL` y `clientId(site-user-id)`.
144 | La etiqueta `amp-analytics` puede incluir las mismas variables que`amp-pixel`,
145 | o bien variables exclusivas dentro de la configuración de la etiqueta.
146 |
147 | Usa el formato `${varName}` en una cadena de solicitud de una página
148 | o una variable definida por la plataforma.
149 | La etiqueta `amp-analytics` reemplazará la plantilla por su valor real
150 | al crearse la solicitud de análisis (consulta también
151 | [Variables admitidas en amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
152 |
153 | En el siguiente ejemplo de `amp-analytics`,
154 | la solicitud de vistas de página se envía a la URL
155 | con datos adicionales extraídos de las sustituciones de variables,
156 | algunos proporcionados por la plataforma y
157 | otros definidos en línea,
158 | dentro de la configuración de `amp-analytics`:
159 |
160 | [sourcecode:html]
161 | <amp-analytics>
162 | <script type="application/json">
163 | {
164 | "requests": {
165 | "pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
166 | },
167 | "vars": {
168 | "account": "ABC123",
169 | },
170 | "triggers": {
171 | "someEvent": {
172 | "on": "visible",
173 | "request": "pageview",
174 | "vars": {
175 | "title": "My homepage",
176 | }
177 | }
178 | }
179 | }
180 | </script>
181 | </amp-analytics>
182 | [/sourcecode]
183 |
184 | En el ejemplo anterior,
185 | las variables `account` y `title` se definen
186 | en la configuración de `amp-analytics`.
187 | Las variables `canonicalUrl` y `clientId` no se definen en la configuración,
188 | por lo cual la plataforma reemplaza sus valores.
189 |
190 | **Importante:** La sustitución de variables es flexible.
191 | Puedes definir las mismas variables en diferentes ubicaciones,
192 | y el tiempo de ejecución de AMP analizará los valores en ese orden de precedencia
193 | (consulta [Orden de sustitución de variables](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
194 |
195 | ## Identificación de usuarios
196 |
197 | Los sitios web usan cookies para almacenar en el navegador información específica de un usuario.
198 | Las cookies se pueden usar para indicar que un usuario visitó un sitio con anterioridad.
199 | En AMP,
200 | las páginas pueden provenir del sitio web de un editor o de un caché
201 | (como el Google AMP Cache).
202 | El sitio web del editor y el caché posiblemente tengan dominios diferentes.
203 | Por motivos de seguridad,
204 | los navegadores pueden limitar el acceso a las cookies de otro dominio
205 | y a menudo lo harán (consulta también
206 | [Seguimiento de usuarios en diferentes orígenes](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
207 |
208 | De forma predeterminada,
209 | AMP administrará el suministro de un Id. de cliente, ya sea para acceder a la página desde el sitio web original de un editor o a través de un caché.
210 | El Id. de cliente generado por AMP tiene un valor `"amp-"`
211 | seguido por una cadena `base64` codificada y se mantiene igual
212 | para el usuario si vuelve a visitar la página.
213 |
214 | AMP administra la lectura y escritura del Id. de cliente en todos los casos.
215 | Esto es particularmente evidente cuando se accede a una página
216 | a través de un caché o se la muestra fuera del contexto de visualización
217 | del sitio original del editor.
218 | En esa circunstancia, no es posible acceder a las cookies del sitio del editor.
219 |
220 | Cuando se accede a una página AMP desde el sitio de un editor,
221 | es posible notificar al framework del Id. de cliente que usa AMP sobre una cookie de reserva
222 | que se puede buscar y usar.
223 | En este caso,
224 | el argumento `cid-scope-cookie-fallback-name` de la variable `clientId`
225 | se interpreta como un nombre de cookie.
226 | El formato puede ser de
227 | `CLIENT_ID(cid-scope-cookie-fallback-name)` o
228 | `${clientId(cid-scope-cookie-fallback-name)}`.
229 |
230 | Por ejemplo:
231 |
232 | [sourcecode:html]
233 | <amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
234 | [/sourcecode]
235 |
236 | Si AMP detecta que esa cookie está definida,
237 | la sustitución de Id. de cliente devolverá el valor de esta.
238 | Si AMP detecta que la cookie no está definida,
239 | AMP generará un valor con la forma `amp-` seguido
240 | por una cadena base64 aleatoria codificada.
241 |
242 | Obtén más información acerca de la sustitución de Id. de cliente,
243 | incluida la manera de agregar un Id. de notificación de usuario opcional, en
244 | [Variables admitidas en AMP Analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
245 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
1 | hero:
2 | title@: Cómo AMP acelera el rendimiento
3 | subtitle@: |
4 | La combinación de las siguientes optimizaciones hace que las páginas AMP se carguen de manera casi instantánea:
5 | <p>Si prefieres escuchar antes que leer, en el siguiente video realizado por Malte Ubl, responsable de ingeniería de AMP, se ofrece información general similar a la que encontrarás en los párrafos que aparecen a continuación.
6 |
7 | points:
8 | pointlist:
9 | - title@: Se permiten únicamente scripts asíncronos
10 | description@: |
11 | JavaScript es poderoso:
12 | puede modificar casi todos los aspectos de la página,
13 | pero también puede bloquear la construcción del DOM y demorar la representación de la página
14 | (consulta también [Añadir interactividad con JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
15 | Para evitar que JavaScript demore la representación de páginas,
16 | AMP solo permite JavaScript asíncrono.
17 | <p>Las páginas AMP no pueden incluir JavaScript de autor.
18 | En lugar de JavaScript,
19 | para el control de las funciones de las páginas interactivas se emplean elementos de AMP personalizados.
20 | Es posible que los elementos de AMP personalizados tengan ocultos rasgos de JavaScript,
21 | pero están diseñados cuidadosamente para no tener efectos negativos en el rendimiento.
22 | <p>Si bien se permite contenido JS de terceros en iframes,
23 | este no puede bloquear la representación.
24 | Por ejemplo, si en el contenido JS de terceros se usa la
25 | [API `document.write`, totalmente contraproducente para el rendimiento](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
26 | no se bloqueará la representación de la página principal.
27 | - title@: Se ordenan estáticamente los recursos
28 | description@: |
29 | Los recursos externos, como las imágenes, los anuncios o los iframes, deben establecer su tamaño en HTML
30 | para que las páginas AMP puedan determinar el tamaño y la posición de cada elemento antes de que se descarguen los recursos.
31 | El sistema AMP carga el diseño de una página sin esperar que se descarguen recursos.
32 | <p>Las páginas AMP desacoplan el diseño del documento del diseño del recurso.
33 | Solo se necesita una solicitud HTTP para diseñar por completo el documento completo
34 | ([y las fuentes](#font-triggering-must-be-efficient)).
35 | Dado que las páginas AMP están optimizadas para evitar recálculos de estilo y diseños pesados en el navegador,
36 | no se llevará a cabo ninguna instancia de rediseño cuando se carguen los recursos.
37 | - title@: No se permite que los mecanismos de extensión bloqueen la representación
38 | description@: |
39 | El sistema AMP no permite que los mecanismos de extensión bloqueen la representación de páginas.
40 | Admite extensiones para recursos como
41 | [lightbox](/docs/reference/extended/amp-lightbox.html),
42 | [inserciones de Instagram](/docs/reference/extended/amp-instagram.html),
43 | [tuits](/docs/reference/extended/amp-twitter.html), etc.
44 | Si bien estos recursos necesitan de solicitudes HTTP adicionales,
45 | estas no bloquean el diseño ni la representación de páginas.
46 | <p>Todas las páginas en las que se use un script personalizado deben indicarle al sistema AMP
47 | que eventualmente tendrá una etiqueta personalizada.
48 | Por ejemplo, el script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
49 | le indica que habrá una etiqueta `amp-iframe`.
50 | Las páginas AMP crean el cuadro de iframe antes de determinar lo que incluirá:
51 | example: /content/includes/amp-iframe.md
52 | - title@: Se mantiene el contenido JavaScript de terceros lejos de la ruta de acceso crítica
53 | description@: |
54 | En el contenido JS de terceros generalmente se aplica carga de JS sincrónica y
55 | también se implementa `document.write` en más scripts de sincronización.
56 | Por ejemplo, si tienes cinco anuncios y cada uno de ellos tiene tres cargas sincrónicas
57 | con una conexión de latencia de 1 segundo,
58 | tendrás 15 segundos de carga solo para el contenido JS.
59 | <p>Las páginas AMP permiten JavaScript de terceros, pero solo en iframes de espacio aislado.
60 | Si se restringen a los iframes, no pueden bloquear la ejecución de la página principal.
61 | Incluso si activan varios recálculos de estilo,
62 | sus minúsculos iframes tienen muy poco del DOM.
63 | <p>Los recálculos de estilo y los diseños son típicos del tamaño del DOM.
64 | Por lo tanto, los recálculos de iframe son muy rápidos en comparación
65 | con el recálculo de estilos y el diseño para la página.
66 | - title@: Los elementos de CSS deben estar alineados y su tamaño debe estar limitado
67 | description@: |
68 | Los elementos de CSS bloquean toda representación y la carga de páginas, y su tamaño tiende a aumentar.
69 | En páginas HTML de AMP, solo se permiten los estilos en línea.
70 | Esto elimina una o, a menudo, más solicitudes HTTP de la ruta de acceso de representación crítica
71 | en comparación con la mayoría de páginas web.
72 | <p>Además, la hoja de estilo en línea tiene un tamaño máximo de 50 kilobytes.
73 | Si bien este tamaño es suficiente para páginas muy sofisticadas,
74 | es necesario que el autor de la página realice un mantenimiento de CSS adecuado.
75 | - title@: La activación de fuentes debe ser eficaz
76 | id: font-triggering-must-be-efficient
77 | description@: |
78 | Las fuentes web son muy grandes. Por lo tanto, la
79 | [optimización de fuentes web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
80 | es crucial para el rendimiento.
81 | En una página típica que tiene algunos scripts sincrónicos y algunas hojas de estilo externas,
82 | el navegador aguarda para comenzar a descargar estas fuentes enormes hasta que todo esto suceda.
83 | <p>El sistema de AMP declara cero solicitudes HTTP hasta que las fuentes comienzan a descargarse.
84 | Esto solo es posible porque todo el contenido JS en AMP tiene el atributo asíncrono
85 | y porque solo se permiten hojas de estilo en línea;
86 | no hay solicitudes HTTP que impidan que el navegador descargue las fuentes.
87 | - title@: Se minimizan los recálculos de estilo
88 | description@: |
89 | Siempre que se mide algo se activan recálculos de estilo que resultan pesados,
90 | ya que el navegador debe diseñar la página completa.
91 | En páginas AMP, todas las lecturas del DOM tienen lugar antes que las escrituras.
92 | Esto garantiza el valor máximo de un recálculo de estilos por cuadro.
93 | <p>Puedes obtener más información sobre el impacto de los recálculos de estilo y diseño en
94 | [Rendimiento de la representación](https://developers.google.com/web/fundamentals/performance/rendering/).
95 | - title@: Solo se ejecutan animaciones con aceleración por GPU
96 | description@: |
97 | La única forma de lograr optimizaciones rápidas es ejecutarlas en la GPU.
98 | La GPU reconoce capas, identifica los procedimientos para llevar a cabo tareas en estos diseños
99 | y puede moverlos y atenuarlos, pero no puede actualizar el diseño de la página.
100 | Deriva la tarea al navegador, y eso no es conveniente.
101 | <p>Las reglas para CSS relacionado con la animación garantizan que la GPU pueda acelerar las animaciones.
102 | Específicamente, el sistema de AMP solo permite realizar animaciones y transiciones en transformación y opacidad
103 | para que no se necesite el diseño de la página.
104 | Obtén más información sobre el
105 | [Uso de los cambios en las propiedades transform y opacity para las animaciones](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
106 | - title@: Se prioriza la carga de recursos
107 | description@: |
108 | El sistema de AMP controla todas las descargas de recursos. Prioriza la carga de recursos,
109 | ya que carga solo lo que es necesario y realiza capturas previas de recursos de carga diferida.
110 | <p>Cuando descarga recursos, optimiza las descargas
111 | para que se descarguen primero los recursos actuales más importantes.
112 | Las imágenes y los anuncios solo se descargan si es probable que el usuario los vea,
113 | en la parte superior de la página, o se desplace rápidamente hacia ellos.
114 | <p>El sistema de AMP también realiza capturas previas de recursos de carga diferida.
115 | Los recursos se cargan lo más tarde posible, pero su captura previa se produce lo más pronto posible.
116 | De esa manera, los objetos se cargan muy rápido, pero el CPU solo se usa
117 | cuando se muestran los recursos ante el usuario.
118 | - title@: Las páginas se cargan al instante
119 | description@: |
120 | La nueva [API de preconexión](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
121 | se usa mucho para garantizar que las solicitudes HTTP sean lo más rápidas posible cuando se crean.
122 | De esta forma,
123 | una página se puede representar antes de que el usuario especifique explícitamente que quiere dirigirse hacia ella.
124 | La página puede estar disponible cuando el usuario la seleccione,
125 | lo cual hará que se cargue al instante.
126 | <p>Si bien la representación previa puede aplicarse a todo el contenido web,
127 | también es posible que ocupe muchos recursos de ancho de banda y CPU. El sistema de AMP está optimizado para propiciar una reducción en ambos factores. Para la representación previa solo se descargan los recursos que están en la parte superior de la página
128 | y no se representan los objetos que puedan ser pesados en términos de uso de CPU.
129 | <p>Cuando los documentos de AMP se representan previamente para la carga instantánea,
130 | solo se descargan los recursos que están en la parte superior de la página.
131 | A su vez, aquellos recursos que bajo las mismas circunstancias pudieran
132 | implicar una alta exigencia para el CPU (como iframes de terceros) no se descargarán.
133 | <p>Obtén más información sobre la
134 | [razón por la cual AMP HTML no aprovecha en su totalidad el escáner de precarga](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
135 | - title@: Se agiliza el sistema de AMP
136 | description@: |
137 | El sistema de AMP es de código abierto.
138 | Necesitamos tu ayuda para que sea aún más rápido.
139 | Entérate de [cómo contribuir](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Analityka: podstawy
3 | toc: true
4 | ---
5 |
6 | Zacznij tutaj, aby poznać podstawy analityki AMP.
7 |
8 | [TOC]
9 |
10 | ## Używać elementów amp-pixel czy amp-analytics?
11 |
12 | AMP udostępnia dwa komponenty spełniające potrzeby w zakresie analityki i pomiarów:
13 | [amp-pixel](/docs/reference/amp-pixel.html) i
14 | [amp-analytics](/docs/reference/extended/amp-analytics.html).
15 | Oba elementy wysyłają dane analityczne do zdefiniowanego punktu końcowego.
16 |
17 | Jeśli oczekujesz zachowania takiego jak w przypadku prostego
18 | [piksela śledzącego](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
19 | komponent `amp-pixel` umożliwia podstawowe monitorowanie wyświetleń strony;
20 | dane o wyświetleniach strony są wysyłane na zdefiniowany adres URL.
21 | W niektórych integracjach z dostawcą ten komponent może być wywoływany,
22 | wówczas zostaje określony dokładny punkt końcowy adresu URL.
23 |
24 | Na potrzeby większości rozwiązań analitycznych należy używać elementu `amp-analytics`.
25 | Także w komponencie `amp-analytics` działa monitorowanie wyświetleń stron.
26 | Można jednak dodatkowo monitorować czynności użytkowników dla dowolnego typu treści na stronie,
27 | w tym kliknięcia linków i przycisków.
28 | Można również zmierzyć, jak daleko użytkownik przewinął stronę,
29 | czy użytkownik korzystał z mediów społecznościowych i nie tylko
30 | (zobacz
31 | [Więcej o analityce AMP](/docs/guides/analytics/deep_dive_analytics.html)).
32 |
33 | W ramach integracji z platformą AMP
34 | dostawcy oferują wstępnie zdefiniowane konfiguracje `amp-analytics`,
35 | co ułatwia przechwytywanie danych i przekazywanie ich do narzędzi monitorowania.
36 | Dokumentacja dla dostawców jest dostępna w
37 | [specyfikacji elementu amp-analytics](/docs/reference/extended/amp-analytics.html).
38 |
39 | Na swoich stronach można używać zarówno elementu `amp-pixel`, jak i `amp-analytics`:
40 | `amp-pixel` do prostego śledzenia wyświetleń strony,
41 | a `amp-analytics` do wszystkiego innego.
42 | Każdy znacznik można dodawać wiele razy.
43 | W przypadku korzystania z wielu dostawców usług analitycznych
44 | potrzebny będzie jeden znacznik dla każdego rozwiązania.
45 | Warto pamiętać, że prostsze strony AMP są lepsze dla użytkowników,
46 | dlatego jeśli dodatkowe znaczniki nie są potrzebne, nie należy ich używać.
47 |
48 | ## Tworzenie prostej konfiguracji analitycznej
49 |
50 | Dowiedz się, jak utworzyć prostą konfigurację z elementami
51 | [amp-pixel](/docs/reference/amp-pixel.html) i
52 | [amp-analytics](/docs/reference/extended/amp-analytics.html).
53 |
54 | ### Prosta konfiguracja z elementem amp-pixel
55 |
56 | W celu utworzenia prostej konfiguracji z elementem `amp-pixel`
57 | wstaw wiersz podobny do poniższego w treści swojej strony AMP:
58 |
59 | [sourcecode:html]
60 | <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
61 | [/sourcecode]
62 |
63 | W tym przykładzie
64 | dane o wyświetleniu strony są przesyłane na zdefiniowany adres URL wraz z losową liczbą.
65 | Zmienna `RANDOM` to jedna z wielu
66 | [zmiennych podstawiania na platformie AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
67 | Więcej informacji o podstawianiu zmiennych można znaleźć
68 | [tutaj](/docs/guides/analytics/analytics_basics.html#variable-substitution).
69 |
70 | Komponent [amp-pixel](/docs/reference/amp-pixel.html)
71 | jest wbudowany,
72 | dlatego nie jest potrzebna deklaracja włączenia jak w przypadku
73 | komponentów rozszerzonych AMP, w tym `amp-analytics`.
74 | Jednak znacznik `amp-pixel` należy umieścić możliwie blisko
75 | początku sekcji `<body>`.
76 | Piksel monitorowania zostanie wyzwolony tylko wtedy, gdy sam znacznik zostanie wyświetlony.
77 | Jeśli znacznik `amp-pixel` zostanie umieszczony u dołu strony,
78 | może nie zostać wyzwolony.
79 |
80 | ### Prosta konfiguracja z elementem amp-analytics
81 |
82 | Aby utworzyć prostą konfigurację z elementem
83 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
84 | należy najpierw włączyć deklarację `custom-element`
85 | w sekcji `<head>` dokumentu AMP (zobacz też
86 | [Deklaracja włączenia komponentu](/docs/reference/extended.html#component-inclusion-declaration)):
87 |
88 | [sourcecode:html]
89 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
90 | [/sourcecode]
91 |
92 | Poniższy przykład jest podobny do [przykładu z elementem `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
93 | Podczas każdego wyświetlenia strony
94 | uruchamiane jest zdarzenie wyzwalacza, które
95 | wysyła dane o wyświetleniu strony na zdefiniowany adres URL wraz z losowym identyfikatorem:
96 |
97 | [sourcecode:html]
98 | <amp-analytics>
99 | <script type="application/json">
100 | {
101 | "requests": {
102 | "pageview": "https://foo.com/pixel?RANDOM",
103 | },
104 | "triggers": {
105 | "trackPageview": {
106 | "on": "visible",
107 | "request": "pageview"
108 | }
109 | }
110 | }
111 | </script>
112 | </amp-analytics>
113 | [/sourcecode]
114 |
115 | W przykładzie powyżej zostało zdefiniowane żądanie o nazwie pageview jako https://foo.com/pixel?RANDOM. Jak wspomniano wcześniej za zmienną RANDOM jest podstawiana losowa liczba, więc ostatecznie żądanie będzie wyglądać następująco https://foo.com/pixel?0.23479283687235653498734.
116 |
117 | Kiedy strona stanie się widoczna
118 | (zgodnie z użytym słowem kluczowym wyzwalacza `visible`),
119 | zdarzenie zostanie wyzwolone i żądanie `pageview` zostanie wysłane.
120 | Atrybut triggers określa moment wyzwolenia żądania pageview.
121 | Dowiedz się więcej o [żądaniach i wyzwalaczach](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
122 |
123 | ## Podstawianie zmiennych
124 |
125 | Zarówno komponent [amp-pixel](/docs/reference/amp-pixel.html), jak i
126 | [amp-analytics](/docs/reference/extended/amp-analytics.html)
127 | zezwalają na wszystkie standardowe podstawienia zmiennych URL (zobacz
128 | [Podstawienia zmiennych AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
129 | W poniższym przykładzie
130 | żądanie pageview jest wysyłane na adres URL
131 | wraz z bieżącym kanonicznym adresem URL dokumentu AMP, jego tytułem i
132 | [identyfikatorem klienta](/docs/guides/analytics/analytics_basics.html#user-identification):
133 |
134 | [sourcecode:html]
135 | <amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
136 | [/sourcecode]
137 |
138 | Ze względu na swoją prostotę,
139 | znacznik `amp-pixel` może zawierać tylko zmienne zdefiniowane przez platformę
140 | lub takie, które środowisko wykonawcze AMP może zanalizować składniowo na podstawie strony AMP.
141 | W przykładzie powyżej
142 | platforma wypełnia wartości zmiennych
143 | `canonicalURL` i `clientId(site-user-id)`.
144 | Znacznik `amp-analytics` może zawierać te same zmienne co znacznik `amp-pixel`,
145 | a także niepowtarzalnie zdefiniowane zmienne wewnątrz konfiguracji znacznika.
146 |
147 | W przypadku zmiennej definiowanej na stronie lub na platformie
148 | należy użyć formatu `${varName}` w ciągu znaków żądania.
149 | Znacznik `amp-analytics` zastąpi szablon rzeczywistą wartością
150 | w czasie konstruowania żądania analitycznego (zobacz też
151 | [Zmienne obsługiwane w elemencie amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
152 |
153 | W poniższym przykładzie z elementem `amp-analytics`
154 | żądanie pageview jest wysyłane na adres URL
155 | wraz z dodatkowymi danymi wyodrębnionymi z podstawień zmiennych,
156 | niektórymi podanymi przez platformę,
157 | niektórymi zdefiniowanymi
158 | w konfiguracji elementu`amp-analytics`:
159 |
160 | [sourcecode:html]
161 | <amp-analytics>
162 | <script type="application/json">
163 | {
164 | "requests": {
165 | "pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
166 | },
167 | "vars": {
168 | "account": "ABC123",
169 | },
170 | "triggers": {
171 | "someEvent": {
172 | "on": "visible",
173 | "request": "pageview",
174 | "vars": {
175 | "title": "My homepage",
176 | }
177 | }
178 | }
179 | }
180 | </script>
181 | </amp-analytics>
182 | [/sourcecode]
183 |
184 | W przykładzie powyżej
185 | w konfiguracji elementu `amp-analytics` zdefiniowano
186 | zmienne `account` i `title`.
187 | Zmienne `canonicalUrl` i `clientId` nie są zdefiniowane w konfiguracji,
188 | więc ich wartości są podstawiane przez platformę.
189 |
190 | **Ważne:** Podstawianie zmiennych jest elastyczne;
191 | te same zmienne mogą być zdefiniowane w różnych miejscach,
192 | a środowisko wykonawcze AMP zanalizuje wartości w tej kolejności pierwszeństwa
193 | (zobacz [Kolejność podstawiania zmiennych](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
194 |
195 | ## Identyfikacja użytkowników
196 |
197 | Strony internetowe używają plików cookie do przechowywania w przeglądarce informacji właściwych dla użytkownika.
198 | Na podstawie plików cookie może powiedzieć, czy użytkownik odwiedził witrynę wcześniej.
199 | W przypadku AMP
200 | strony mogą być udostępniane ze strony wydawcy lub z pamięci podręcznej
201 | (takiej jak Google AMP Cache).
202 | Najprawdopodobniej strona wydawcy i pamięć podręczna mają różne domeny.
203 | Ze względów bezpieczeństwa
204 | przeglądarki mogą (i często z tego korzystają) ograniczać dostęp do plików cookie z innych domen
205 | (zobacz też
206 | [Monitorowanie użytkowników w różnych domenach](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
207 |
208 | Domyślnie
209 | AMP obsłuży skonfigurowanie identyfikatora klienta niezależnie od tego, czy dostęp do strony jest uzyskiwany przez stronę wydawcy, czy przez pamięć podręczną.
210 | Identyfikator klienta wygenerowany przez AMP ma wartość składającą się z przedrostka `"amp-"`
211 | i losowego ciągu znaków w kodowaniu `base64` i zawsze pozostaje taki sam
212 | dla użytkownika, jeśli ten sam użytkownik ponownie odwiedzi stronę.
213 |
214 | AMP zarządza odczytem i zapisem identyfikatora klienta we wszystkich klasach.
215 | Jest to szczególnie zauważalne w przypadku, gdy strona jest udostępniana
216 | przez pamięć podręczną lub w inny sposób pokazana poza kontekstem wyświetlania
217 | w oryginalnej witrynie wydawcy.
218 | W tych okolicznościach dostęp do plików cookie z witryny wydawcy jest niemożliwy.
219 |
220 | Gdy strona AMP jest udostępniana z witryny wydawcy,
221 | używana przez AMP struktura identyfikatora klienta może uzyskać informacje o zapasowym pliku cookie
222 | w celu znalezienia go i użycia.
223 | W tym przypadku
224 | argument `cid-scope-cookie-fallback-name` zmiennej `clientId`
225 | jest interpretowany jako nazwa pliku cookie.
226 | Możliwe są dwie opcje formatowania:
227 | `CLIENT_ID(cid-scope-cookie-fallback-name)` lub
228 | `${clientId(cid-scope-cookie-fallback-name)}`.
229 |
230 | Na przykład:
231 |
232 | [sourcecode:html]
233 | <amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
234 | [/sourcecode]
235 |
236 | Jeśli AMP wykryje, że ten plik cookie został ustawiony,
237 | podstawienie identyfikatora klienta spowoduje wyświetlenie wartości pliku cookie.
238 | Jeśli AMP wykryje, że plik cookie nie został ustawiony,
239 | AMP wygeneruje wartość złożoną z przedrostka `amp-`
240 | i losowego ciągu znaków w kodowaniu base64.
241 |
242 | Więcej informacji o podstawianiu identyfikatora klienta,
243 | w tym o dodawaniu opcjonalnego identyfikatora powiadomienia użytkownika, można znaleźć w temacie
244 | [Zmienne obsługiwane w analityce AMP](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
245 |
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: AMP-Seiten überprüfen
3 | ---
4 | [TOC]
5 |
6 | Das Besondere an AMP ist nicht einfach, dass es Ihre Seiten schnell macht, sondern dass es dies auf eine Weise tut, die *validiert* werden kann. Dadurch ist es für Drittanbieter wie z. B. Twitter, Instagram oder die Google-Suche attraktiv, AMP-Seiten für Leser auf zunehmend interessantere Weise bereitzustellen.
7 |
8 | ## Wie kann ich prüfen, ob meine AMP-Seite gültig ist?
9 |
10 | Es gibt verschiedene Möglichkeiten zur Überprüfung eines AMP-Dokuments. Sie alle führen zum selben Ergebnis. Wählen Sie also einfach jene, die am besten zu Ihrem Entwicklungsstil passt.
11 |
12 | Neben der AMP-Gültigkeit ist es für Sie vielleicht auch sinnvoll zu prüfen, ob Ihr AMP-Dokument auf Drittanbieterplattformen [auffindbar](/docs/guides/discovery.html) ist.
13 |
14 | ### Entwicklerkonsole des Browsers
15 |
16 | Das AMP-Validierungstool wird zusammen mit der AMP-JS-Bibliothek bereitgestellt, sodass diese standardmäßig auf jeder AMP-Seite verfügbar ist. So validieren Sie Ihre AMP-Seite:
17 |
18 | 1. Öffnen Sie Ihre AMP-Seite im Browser.
19 | 1. Hängen Sie "`#development=1`" an die URL an, z. B. `http://localhost:8080/released.amp.html#development=1`.
20 | 1. Öffnen Sie die [Chrome Developer Tools-Konsole](https://developers.google.com/web/tools/chrome-devtools/debug/console/) und prüfen Sie, ob Validierungsfehler vorliegen.
21 |
22 | Fehler sehen in der Developer Console etwa so aus:
23 |
24 | <amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" layout="responsive" alt="Screenshot der Chrome-Entwicklerkonsole mit vom AMP-Validierungstool gefundenen Fehlern"></amp-img>
25 |
26 |
27 | ### Weboberfläche
28 |
29 | Das AMP-Validierungstool kann unter [validator.ampproject.org](https://validator.ampproject.org/) als Weboberfläche verwendet werden. In dieser Benutzeroberfläche werden Fehler inline im HTML-Quellcode der Seite angezeigt.
30 | Es handelt sich dabei um einen interaktiven Editor: Bei Änderungen am HTML-Quellcode wird erneut eine interaktive Überprüfung durchgeführt.
31 |
32 | <amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" layout="responsive" alt="Screenshot von validator.ampproject.org mit Fehlerbeispielen"></amp-img>
33 |
34 |
35 | ### Browsererweiterung
36 |
37 | Mithilfe einer Browsererweiterung kann direkt über die Symbolleiste Ihres Browsers auf das AMP-Validierungstool zugegriffen werden. Während Sie surfen, überprüft es automatisch jede aufgerufene AMP-Seite und gibt über ein farbiges Symbol an, ob die Seite gültig ist.
38 |
39 | <table>
40 | <tr>
41 | <td>
42 | <amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" layout="fixed" alt="Rotes AMP-Symbol zur Kennzeichnung eines ungültigen AMP-Dokuments">
43 | </amp-img>
44 | </td>
45 | <td>Wenn eine AMP-Seite Fehler aufweist, wird das Symbol der Erweiterung in Rot zusammen mit der Anzahl der gefundenen Fehler angezeigt.
46 | </td>
47 | </tr>
48 | <tr>
49 | <td>
50 | <amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" layout="fixed" alt="Gelbes AMP-Symbol zur Kennzeichnung eines gültigen AMP-Dokuments">
51 | </amp-img>
52 | </td>
53 | <td>Bei einer fehlerfreien AMP-Seite erscheint das Symbol in Grün und es wird gegebenenfalls die Anzahl der Warnungen angegeben.
54 | </td>
55 | </tr>
56 | <tr>
57 | <td>
58 | <amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" layout="fixed" alt="Blaues AMP-Symbol zur Kennzeichnung einer AMP-HTML-Variante im Fall eines Klicks">
59 | </amp-img>
60 | </td>
61 | <td>Wenn es sich nicht um eine AMP-Seite handelt, aber die Webseite mitteilt, dass eine AMP-Version verfügbar ist, erscheint das Symbol in Blau zusammen mit einem Linksymbol, über das die AMP-Version aufgerufen werden kann.
62 | </td>
63 | </tr>
64 | </table>
65 |
66 | [Browsererweiterung für das AMP-Validierungstool für Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) und [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/)
67 |
68 | ### Befehlszeilentool
69 |
70 | Es kann erforderlich sein, dass Sie <a href="https://docs.npmjs.com/getting-started/installing-node">auf Ihrem System Node.js mit seinem Paketmanager `npm` installieren</a>.
71 |
72 | Wenn Sie das [Befehlszeilentool des AMP-HTML-Validierungstools](https://www.npmjs.com/package/amphtml-validator) installieren möchten, geben Sie `npm install -g amphtml-validator` ein.
73 |
74 | Als Nächstes wird eine echte AMP-HTML-Seite validiert:
75 |
76 | [sourcecode:console]
77 | $ amphtml-validator https://www.ampproject.org/
78 | https://www.ampproject.org/: PASS
79 | [/sourcecode]
80 |
81 | Wie zu erwarten, handelt es sich bei dieser Seite um gültiges AMP-HTML. Deshalb wird nun die Überprüfung mit einer Seite wiederholt, die nicht gültig ist: [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Zur Ausführung des Befehls `amphtml-validator` können Sie entweder die URL der Seite oder den Namen einer lokalen Datei bereitstellen. Laden Sie [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) als Datei herunter und führen Sie Folgendes aus:
82 |
83 | [sourcecode:console]
84 | $ amphtml-validator several_errors.html
85 | several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
86 | several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
87 | 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)
88 | 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)
89 | ...
90 | [/sourcecode]
91 |
92 | Das Format der Fehlermeldungen besteht aus Dateiname, Zeile, Spalte sowie der eigentlichen Meldung, oft gefolgt von einem Link zur AMP-HTML-Referenz. Manche Editoren, einschließlich Emacs (siehe Kompilierbefehl und Kompilierungsmodus), können dieses Format interpretieren und Ihnen ermöglichen, zu den Fehlern in der Originaldatei zu springen.
93 |
94 | Ein guter Ausgangspunkt zum Erstellen einer eigenen AMP-Seite ist z. B. [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html):
95 |
96 | [sourcecode:console]
97 | $ amphtml-validator minimum_valid_amp.html
98 | minimum_valid_amp.html: PASS
99 | [/sourcecode]
100 |
101 | Das Befehlszeilentool bietet zusätzliche Funktionen wie das Deaktivieren der Farbe, das Drucken der JSON-Ausgabe oder das Ausführen einer bestimmten Version des JavaScript-Codes des Validierungstools. Standardmäßig wird das neueste veröffentlichte Skript ausgeführt.
102 |
103 | [sourcecode:console]
104 | $ amphtml-validator --help
105 |
106 | Usage: index [options] <fileOrUrlOrMinus...>
107 |
108 | Validates the files or urls provided as arguments. If "-" is
109 | specified, reads from stdin instead.
110 |
111 | Options:
112 |
113 | -h, --help output usage information
114 | -V, --version output the version number
115 | --validator_js <fileOrUrl> The Validator Javascript.
116 | Latest published version by default, or
117 | dist/validator_minified.js (built with build.py)
118 | for development.
119 | --format <color|text|json> How to format the output.
120 | "color" displays errors/warnings/success in
121 | red/orange/green.
122 | "text" avoids color (e.g., useful in terminals not
123 | supporting color).
124 | "json" emits json corresponding to the ValidationResult
125 | message in validator.proto.
126 | [/sourcecode]
127 |
128 | ## Was geschieht, wenn meine Seite ungültig ist?
129 |
130 | Das AMP-Validierungstool ist nicht nur ein praktisches Hilfsmittel bei der Entwicklung. Es wird auch von Plattformen wie Twitter und Google verwendet, die Ihre AMP-Seiten in ihre Inhalte und Suchergebnisse integrieren. Meist fordern sie die Seiten nicht direkt von Ihrem Server an, sondern verwenden den Google-AMP-Cache. Dies ist ein kostenloser Dienst, mit dem Ihre Seiten im Cache gespeichert und überall auf der Welt bereitgestellt werden, damit sie noch schneller geladen werden können.
131 |
132 | Wenn der AMP-Validierungsdienst erkennt, dass Ihre Seite fehlerhaft ist, wird sie von Drittanbieterwebsites nicht gefunden und bereitgestellt und erscheint nicht im Google-AMP-Cache. Damit entgehen Ihnen nicht nur die Geschwindigkeitsvorteile des Caches, sondern Ihre Seite ist wahrscheinlich auch an vielen anderen Stellen nicht sichtbar. Darum sollten Fehler unbedingt vermieden werden.
133 |
134 | ## Wie behebe ich Validierungsfehler?
135 |
136 | Die meisten Validierungsfehler können leicht behoben werden. Sehen Sie sich dieses HTML-Tag an:
137 |
138 | [sourcecode:html]
139 | <img src="cat.png">
140 | [/sourcecode]
141 |
142 | Es verursacht einen AMP-Validierungsfehler, der in verschiedenen Tools wie folgt angezeigt wird:
143 |
144 | * Entwicklerkonsole des Browsers
145 | <amp-img alt="Das Tag "img" ist nur als Nachfolgerelement des Tags "noscript" zulässig.Meinten Sie "amp-img"? Zeile 11, Spalte 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive">
146 | </amp-img>
147 |
148 | * Weboberfläche
149 | <amp-img alt="Das Tag "img" ist nur als Nachfolgerelement des Tags "noscript" zulässig.Meinten Sie "amp-img"? Zeile 11, Spalte 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive">
150 | </amp-img>
151 |
152 | * Browsererweiterung
153 | <amp-img alt="Das Tag "img" ist nur als Nachfolgerelement des Tags "noscript" zulässig.Meinten Sie "amp-img"? Zeile 11, Spalte 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive">
154 | </amp-img>
155 |
156 | Jedes dieser Tools stellt diverse Informationen bereit:
157 |
158 | 1. Die Position des Fehlers im HTML-Dokument in Form von Zeile und Spalte. In manchen Benutzeroberflächen kann die Stelle durch Klicken darauf hervorgehoben werden. In diesem Fall tritt das Problem in Zeile 11, Spalte 2 auf.
159 | 1. Eine Textzeile zur Beschreibung des Fehlers. In diesem Fall weist der Text darauf hin, dass fälschlicherweise ein `<img>`-Tag statt eines `<amp-img>`-Tags verwendet wird.
160 | 1. Ein Link zu einem für den Fehler relevanten Dokument. In diesem Fall ist dies die Dokumentation zum `<amp-img>`-Tag. Es werden aber nicht für alle Fehler Dokumentationslinks bereitgestellt.
161 |
162 | Beim genauen Nachlesen der Spezifikation erkennen wir, dass wir versehentlich ein `<img>`-Tag statt eines `<amp-img>`-Tags verwendet haben.
163 |
164 | Ausführliche Informationen zur vollständigen Liste potenzieller Fehler finden Sie im [Leitfaden zu AMP-Validierungsfehlern](https://www.ampproject.org/docs/reference/validation_errors.html).
165 | Wenn Sie aber auch trotz sorgfältiger Untersuchung des Problems nicht weiterkommen, [fragen Sie uns](http://stackoverflow.com/questions/tagged/amp-html). Wir sind Ihnen gern behilflich.
166 |
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Valider les pages AMP
3 | ---
4 |
5 | La principale force de l'AMP n'est pas seulement d'accélérer le chargement de vos pages. Sa particularité est de permettre de *valider* cette vitesse. Ainsi, cela peut inciter des tierces parties telles que Twitter, Instagram ou la recherche Google à proposer à leurs lecteurs des pages AMP de façon toujours plus intéressante.
6 |
7 | ## Comment puis-je vérifier si ma page AMP est valide ?
8 |
9 | Il existe plusieurs façons de valider un document AMP. Elles produiront toutes le même résultat. Vous pouvez donc utiliser la plus adaptée à votre style de développement.
10 |
11 | En plus d'être valide, votre document AMP doit également être [visible](/docs/guides/discovery.html) par les plates-formes tierces.
12 |
13 | ### Developer Console dans le navigateur
14 |
15 | Le validateur AMP est intégré à la bibliothèque JavaScript AMP. Il est donc disponible instantanément sur chaque page AMP. Pour procéder à la validation :
16 |
17 | * Ouvrez votre page AMP dans votre navigateur.
18 | * Ajoutez "`#development=1`" à l'URL, par exemple, `http://localhost:8000/released.amp.html#development=1`.
19 | * Ouvrez la [console des outils pour les développeurs Chrome](https://developers.google.com/web/tools/chrome-devtools/debug/console/) et vérifiez les erreurs de validation.
20 |
21 | Les erreurs sont présentées de la façon suivante dans la Developer Console :
22 |
23 | <amp-img src="/static/img/docs/validator_errors.png" width="713" height="243" layout="responsive" alt="Capture d'écran des erreurs du validateur AMP dans la Developer Console Chrome"></amp-img>
24 |
25 |
26 | ### Interface Web
27 |
28 | Le validateur AMP peut être utilisé comme interface Web sur [validator.ampproject.org](https://validator.ampproject.org/). Cette interface affiche les erreurs à côté du code source HTML de la page.
29 | L'interface est un éditeur interactif : les modifications apportées au code HTML source entraînent une nouvelle validation interactive.
30 |
31 | <amp-img src="/static/img/docs/validator_web_ui.png" width="660" height="507" layout="responsive" alt="Capture d'écran de validator.ampproject.org avec des exemples d'erreurs."></amp-img>
32 |
33 |
34 | ### Extension du navigateur
35 |
36 | Le validateur AMP est accessible directement à partir de la barre d'outils de votre navigateur en utilisant une extension dans le navigateur. Au fil de votre navigation, l'extension valide automatiquement chaque page AMP consultée et vous indique sous forme d'icône de couleur la validité de la page.
37 |
38 | <table>
39 | <tr>
40 | <td>
41 | <amp-img src="/static/img/docs/validator_icon_invalid.png" width="20" height="20" alt="Icône AMP rouge indiquant un document AMP incorrect."></amp-img>
42 |
43 | </td>
44 | <td>Si la page AMP comporte des erreurs, l'icône de l'extension concernée s'affiche en rouge et indique le nombre d'erreurs trouvées.
45 | </td>
46 | </tr>
47 | <tr>
48 | <td>
49 | <amp-img src="/static/img/docs/validator_icon_valid.png" width="20" height="20" alt="Icône AMP verte indiquant un document AMP valide."></amp-img>
50 |
51 | </td>
52 | <td>Si la page AMP ne comporte pas d'erreur, l'icône s'affiche en vert et, le cas échéant, indique le nombre d'avertissements.
53 | </td>
54 | </tr>
55 | <tr>
56 | <td>
57 | <amp-img src="/static/img/docs/validator_icon_link.png" width="20" height="20" alt="Icône AMP bleue indiquant une variante AMP HTML si l'on clique dessus."></amp-img>
58 |
59 | </td>
60 | <td>Si une version AMP d'une page standard est disponible, l'icône s'affiche en bleu, avec une icône de lien. Il suffit de cliquer sur l'extension pour être redirigé vers la version AMP de la page dans le navigateur.
61 | </td>
62 | </tr>
63 | </table>
64 |
65 | Extension du validateur AMP pour [Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) et [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
66 |
67 | ### Outil de ligne de commande
68 |
69 | Vous devez installer au préalable <a href="https://docs.npmjs.com/getting-started/installing-node">Node.js et son gestionnaire de package `npm` sur votre système</a>.
70 |
71 | Pour installer l'[outil de ligne de commande du validateur AMP HTML](https://www.npmjs.com/package/amphtml-validator), saisissez `npm install -g amphtml-validator`.
72 |
73 | Validons à présent une véritable page AMP HTML.
74 |
75 | [sourcecode:console]
76 | $ amphtml-validator https://www.ampproject.org/
77 | https://www.ampproject.org/: PASS
78 | [/sourcecode]
79 |
80 | Cette page AMP HTML est valide. Rien de surprenant à cela. Intéressons-nous à présent à une page incorrecte : [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html). Pour exécuter la commande `amphtml-validator`, vous pouvez fournir l'URL de la page ou un nom de fichier local. Téléchargez et enregistrez [several_errors.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/several_errors.html) dans un fichier, puis exécutez :
81 |
82 | [sourcecode:console]
83 | $ amphtml-validator several_errors.html
84 | several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
85 | several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
86 | 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)
87 | 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)
88 | ...
89 | [/sourcecode]
90 |
91 | Le format des messages d'erreur comprend le nom du fichier, la ligne, la colonne et le message, le tout étant souvent suivi d'un lien vers la référence AMP HTML. Certains éditeurs, y compris Emacs (cherchez la commande de compilation et le mode de compilation), peuvent interpréter ce format et vous permettre d'accéder directement aux erreurs dans le fichier original.
92 |
93 | Un bon point de départ pour créer votre propre page AMP consiste à utiliser [minimum_valid_amp.html](https://raw.githubusercontent.com/ampproject/amphtml/master/validator/testdata/feature_tests/minimum_valid_amp.html) :
94 |
95 | [sourcecode:console]
96 | $ amphtml-validator minimum_valid_amp.html
97 | minimum_valid_amp.html: PASS
98 | [/sourcecode]
99 |
100 | L'outil de ligne de commande offre des fonctionnalités supplémentaires, y compris la désactivation de la couleur, l'impression d'une sortie JSON ou l'exécution d'une version spécifique du validateur JavaScript (par défaut, il exécute le dernier script publié).
101 |
102 | [sourcecode:console]
103 | $ amphtml-validator --help
104 |
105 | Usage: index [options] <fileOrUrlOrMinus...>
106 |
107 | Validates the files or urls provided as arguments. If "-" is
108 | specified, reads from stdin instead.
109 |
110 | Options:
111 |
112 | -h, --help output usage information
113 | -V, --version output the version number
114 | --validator_js <fileOrUrl> The Validator Javascript.
115 | Latest published version by default, or
116 | dist/validator_minified.js (built with build.py)
117 | for development.
118 | --format <color|text|json> How to format the output.
119 | "color" displays errors/warnings/success in
120 | red/orange/green.
121 | "text" avoids color (e.g., useful in terminals not
122 | supporting color).
123 | "json" emits json corresponding to the ValidationResult
124 | message in validator.proto.
125 | [/sourcecode]
126 |
127 | ## Que se passe-t-il si ma page n'est pas valide ?
128 |
129 | Le validateur AMP n'est pas seulement un outil pratique qui vous est destiné durant le développement. Il est également utilisé par des plates-formes comme Twitter ou Google qui intègrent vos pages AMP dans leur contenu et leurs résultats de recherche. Qui plus est, ces plates-formes ne demandent généralement pas à accéder à vos pages depuis votre serveur, mais elles utilisent le cache AMP Google, un service gratuit qui met en cache vos pages et les rend disponibles dans le monde entier, pour qu'elles se chargent encore plus vite.
130 |
131 | Si le service de validation AMP détecte que votre page présente un problème, elle ne sera pas visible, ne sera pas diffusée par des sites Web tiers et ne s'affichera pas dans le cache AMP Google. Ainsi, non seulement vous perdrez les avantages du cache en termes de vitesse, mais votre page risque de ne pas s'afficher à de nombreux endroits. Ce serait dommage, alors assurons-nous que cela ne se produira pas.
132 |
133 | ## Comment puis-je corriger les erreurs de validation ?
134 |
135 | Il est facile d'identifier et de corriger la plupart des erreurs de validation. Prenez cette balise HTML :
136 |
137 | [sourcecode:html]
138 | <img src="cat.png">
139 | [/sourcecode]
140 |
141 | Elle génère cette erreur de validation AMP, présentée dans ces différents outils :
142 |
143 | * Developer Console dans le navigateur
144 | <amp-img alt="Erreur AMP : la balise "img" ne peut s'afficher que comme descendante de la balise "noscript".Vouliez-vous dire "amp-img" ?ligne 11, colonne 2" height="30" src="/static/img/docs/validator_console_imgerror.png" width="696" layout="responsive"></amp-img>
145 |
146 | * Interface Web
147 | <amp-img alt="Erreur AMP : la balise "img" ne peut s'afficher que comme descendante de la balise "noscript".Vouliez-vous dire "amp-img" ?ligne 11, colonne 2" height="58" src="/static/img/docs/validator_webui_imgerror.png" width="676" layout="responsive"></amp-img>
148 |
149 | * Extension du navigateur
150 | <amp-img alt="Erreur AMP : la balise "img" ne peut s'afficher que comme descendante de la balise "noscript".Vouliez-vous dire "amp-img" ?ligne 11, colonne 2" height="108" src="/static/img/docs/validator_extension_imgerror.png" width="724" layout="responsive"></amp-img>
151 |
152 | Chaque outil donne plusieurs informations :
153 |
154 | * L'endroit (ligne et colonne) où l'erreur est survenue dans le document HTML. Certaines interfaces permettent de cliquer dessus pour mettre en surbrillance cet endroit. Dans le cas présent, le problème se trouve à la ligne 11, colonne 2.
155 | * Une ligne de texte décrivant l'erreur. Dans le cas présent, le texte indique que nous utilisons une balise `<img>`, alors que nous aurions dû utiliser une balise `<amp-img>`.
156 | * Un lien vers un document pertinent à propos de l'erreur. Dans le cas présent, il s'agit de la documentation concernant la balise `<amp-img>`. Toutes les erreurs ne génèrent pas de liens vers la documentation connexe.
157 |
158 | En relisant attentivement la spécification, nous réalisons que nous utilisons une balise `<img>` au lieu d'une balise `<amp-img>`.
159 |
160 | Pour mieux comprendre la liste complète des erreurs potentielles, consultez le [guide des erreurs de validation AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
161 | Si vous êtes toujours bloqué après un examen minutieux du guide, [posez-nous votre question](http://stackoverflow.com/questions/tagged/amp-html) et nous essaierons de vous aider.
162 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
1 | hero:
2 | title@: Accélération de la performance avec AMP
3 | subtitle@: |
4 | La combinaison de toutes les optimisations suivantes est la raison pour laquelle les pages AMP sont tellement rapides qu'elles semblent se charger instantanément :
5 | <p>Si vous préférez l'écoute à la lecture, la vidéo suivante présentée par l'ingénieur AMP en chef, Malte Ubl, aborde les mêmes informations que les paragraphes suivants.
6 |
7 | points:
8 | pointlist:
9 | - title@: Autoriser uniquement les scripts asynchrones
10 | description@: |
11 | JavaScript est puissant.
12 | Il peut modifier pratiquement tous les aspects de la page,
13 | mais aussi bloquer la construction DOM et retarder le rendu de la page
14 | (voir aussi [Ajouter l'interactivité avec JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
15 | Pour empêcher JavaScript de retarder le rendu de la page,
16 | AMP autorise uniquement les scripts JavaScript asynchrones.
17 | <p>Les pages AMP ne peuvent inclure aucun autre JavaScript rédigé.
18 | Plutôt que d'utiliser JavaScript,
19 | les fonctions de page interactives sont traitées dans des éléments AMP personnalisés.
20 | Les éléments AMP personnalisés peuvent intégrer du JavaScript,
21 | mais ils sont conçus de sorte à ne pas impacter la performance.
22 | <p>Même si des scripts JS tiers sont autorisés dans les iframes,
23 | ils ne peuvent pas bloquer le rendu.
24 | Par exemple, si un script JS tiers utilise l'
25 | [API `document.write` à fort impact négatif sur la performance](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
26 | il ne bloque pas le rendu de la page principale.
27 | - title@: Dimensionner toutes les ressources de manière statique
28 | description@: |
29 | Les ressources externes, comme les images, les publicités ou les iframes, doivent déclarer leur taille dans le code HTML
30 | pour permettre à AMP de déterminer la taille et la position de chaque élément avant leur téléchargement.
31 | AMP charge la disposition de la page sans attendre le téléchargement des ressources.
32 | <p>AMP dissocie la disposition des documents de celle des ressources.
33 | Une seule requête HTTP est nécessaire pour mettre en page le document entier
34 | ([+ les polices](#font-triggering-must-be-efficient)).
35 | Dans la mesure où AMP est optimisé pour éviter les coûteux recalculs de style et dispositions dans le navigateur,
36 | aucune re-disposition n'est nécessaire lors du chargement des ressources.
37 | - title@: Empêcher les mécanismes d'extension de bloquer le rendu
38 | description@: |
39 | AMP empêche les mécanismes d'extension de bloquer le rendu des pages.
40 | AMP prend en charge les extensions d'objets tels que les
41 | [mosaïques](/docs/reference/extended/amp-lightbox.html), les
42 | [intégrations Instagram](/docs/reference/extended/amp-instagram.html), les
43 | [tweets](/docs/reference/extended/amp-twitter.html), etc.
44 | Même si ces extensions exigent des requêtes HTTP supplémentaires,
45 | ces dernières ne bloquent ni la mise en page ni le rendu des pages.
46 | <p>Toute page qui utilise un script personnalisé doit indiquer au système AMP
47 | qu'elle contiendra ultérieurement une balise personnalisée.
48 | Par exemple, le script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
49 | indique au système qu'il y aura une balise `amp-iframe`.
50 | AMP crée le cadre iframe avant même de savoir ce qu'il contiendra :
51 | example: /content/includes/amp-iframe.md
52 | - title@: Écarter le JavaScript tiers du processus principal
53 | description@: |
54 | Le script JS tiers aime utiliser le chargement JS synchrone.
55 | Il aime également appliquer `document.write` à d'autres scripts synchrones.
56 | Par exemple, si vous avez cinq publicités, chacune exécutant
57 | trois chargements synchrones avec une connexion
58 | d'une latence d'une seconde, le chargement JS prend à lui seul 15 secondes.
59 | <p>Les pages AMP autorisent le JavaScript tiers, mais seulement dans des iframes placés en sandbox.
60 | Limité aux iframes, ces scripts ne peuvent pas bloquer l'exécution de la page principale.
61 | Même s'ils déclenchent plusieurs recalculs de style,
62 | le DOM de leurs iframes minuscules est très réduit.
63 | <p>Les recalculs de style et les dispositions dépendent de la taille du DOM ;
64 | aussi, les recalculs d'iframe sont très rapides
65 | comparés aux recalculs de styles et à la disposition de la page.
66 | - title@: Tout le style CSS doit être en ligne et limité en taille
67 | description@: |
68 | Le CSS bloque tout le rendu. Il bloque le chargement des pages et a tendance à « gonfler ».
69 | Dans les pages AMP HTML, seuls les styles en ligne sont autorisés.
70 | Une ou souvent plusieurs requêtes HTTP sont ainsi supprimées du processus de rendu principal,
71 | par rapport à la plupart des pages Web.
72 | <p>De plus, la taille des feuilles de style en ligne est limitée à 50 Ko maximum.
73 | Même si cette taille est suffisante pour les pages très complexes,
74 | le créateur de la page doit malgré tout appliquer un style CSS propre.
75 | - title@: Le déclenchement de police doit être efficace
76 | id: font-triggering-must-be-efficient
77 | description@: |
78 | Les polices Web étant très volumineuses,
79 | l'[optimisation des polices Web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
80 | est essentielle pour la performance.
81 | Sur une page standard ne contenant que peu de scripts synchrones et de feuilles de style externes,
82 | le navigateur doit attendre sans fin le téléchargement de ces énormes polices.
83 | <p>Le système AMP ne déclare aucune requête HTTP avant le début du téléchargement des polices.
84 | En effet, tous les scripts JS dans AMP contiennent l'attribut « asynch »
85 | et seules les feuilles de style en ligne sont autorisées.
86 | Aucune requête HTTP n'empêche donc le navigateur de télécharger les polices.
87 | - title@: Réduire au minimum les recalculs de style
88 | description@: |
89 | Dès lors que vous effectuez des mesures, de coûteux recalculs de style sont exécutés
90 | car le navigateur doit définir la disposition de la page entière.
91 | Dans les pages AMP, toutes les lectures DOM se produisent avant toutes les écritures.
92 | Ainsi, un seul recalcul de style maximum est effectué par cadre.
93 | <p>Pour en savoir plus sur l'impact des recalculs de style et de disposition, voir
94 | [performances de rendu](https://developers.google.com/web/fundamentals/performance/rendering/).
95 | - title@: Exécuter uniquement les animations accélérées par GPU
96 | description@: |
97 | La seule façon d'obtenir des optimisations rapides, c'est de les exécuter sur le GPU.
98 | Le GPU connaît les couches, il sait comment exécuter certaines choses sur ces couches,
99 | il peut les déplacer, il peut les diminuer, mais il ne peut pas actualiser
100 | la disposition de la page. Il laisse cette tâche au navigateur, ce qui n'est pas une bonne chose.
101 | <p>Les règles concernant le CSS lié aux animations garantissent que ces dernières peuvent être accélérées par GPU.
102 | Tout particulièrement, AMP autorise les animations et transitions uniquement sur les propriétés transform et opacity
103 | ; aucune disposition de la page n'est ainsi requise.
104 | En savoir plus sur
105 | l'[utilisation des propriétés transform et opacity pour les changements sur les animations](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
106 | - title@: Hiérarchiser le chargement des ressources
107 | description@: |
108 | AMP contrôle tous les téléchargements de ressources : il hiérarchise
109 | le chargement, ne chargeant que ce qui est nécessaire, et pré-extrait les ressources les plus lentes à charger.
110 | <p>Lorsqu'AMP télécharge des ressources, il optimise ces téléchargements
111 | de sorte que les ressources actuellement les plus importantes soient téléchargées en premier lieu.
112 | Les images et publicités ne sont téléchargées que si elles seront vues par l'utilisateur,
113 | dans la partie au-dessus de la ligne de flottaison, ou si l'utilisateur fera défiler rapidement la page pour y accéder.
114 | <p>De plus, AMP pré-extrait les ressources les plus lentes à charger.
115 | Les ressources sont chargées le plus tard possible, mais pré-extraites le plus tôt possible.
116 | De cette façon, le chargement est très rapide ; le processeur
117 | n'est utilisé que lorsque les ressources sont effectivement affichées aux utilisateurs.
118 | - title@: Charger les pages instantanément
119 | description@: |
120 | La nouvelle [API de pré-connexion](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
121 | est largement utilisée pour garantir des requêtes HTTP aussi rapides que possible dès leur lancement.
122 | Ainsi,
123 | une page peut être rendue avant même que l'utilisateur n'indique explicitement qu'il aimerait y accéder.
124 | La page peut être déjà disponible avant l'instant où l'utilisateur la sélectionne effectivement,
125 | ce qui permet un chargement instantané.
126 | <p>Alors que tout contenu Web peut être pré-rendu,
127 | il peut également consommer une grande quantité de bande passante et de ressources du processeur. AMP est optimisé pour limiter ces deux facteurs. Le pré-rendu permet de télécharger uniquement les ressources situées
128 | dans la partie au-dessus de la ligne de flottaison et n'inclut pas les éléments gourmands en processeur.
129 | <p>Lorsque les documents AMP sont pré-rendus pour un chargement instantané,
130 | seules les ressources situées dans la partie au-dessus de la ligne de flottaison sont effectivement téléchargées.
131 | Lorsque les documents AMP sont pré-rendus pour un chargement instantané,
132 | les ressources susceptibles d'utiliser une grande quantité de ressources du processeur (telles que les iframes tiers) ne sont pas téléchargées.
133 | <p>En savoir plus sur
134 | les [raisons pour lesquelles AMP HTML n'exploite pas pleinement le scanner de pré-chargement](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
135 | - title@: Contribuer à l'accélération d'AMP
136 | description@: |
137 | AMP est une initiative open-source.
138 | Nous avons besoin de votre aide pour rendre AMP encore plus rapide.
139 | Découvrez [comment contribuer](/docs/support/contribute.html).
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Convalidare le pagine AMP
3 | ---
4 |
5 | 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.
6 |
7 | ## Come faccio a verificare se la mia è una pagina AMP valida?
8 |
9 | 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.
10 |
11 | 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.
12 |
13 | ### Console per sviluppatori del browser
14 |
15 | 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:
16 |
17 | * Apri la pagina AMP nel browser.
18 | * Aggiungi "`#development=1`" all'URL, ad esempio `http://localhost:8000/released.amp.html#development=1`.
19 | * 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.
20 |
21 | Gli errori della Console per sviluppatori saranno simili al seguente:
22 |
23 | <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>
24 |
25 |
26 | ### Interfaccia web
27 |
28 | 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.
29 | L'interfaccia è un editor interattivo: le modifiche apportate al codice sorgente HTML comportano una riconvalida interattiva.
30 |
31 | <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>
32 |
33 |
34 | ### Estensione del browser
35 |
36 | È 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.
37 |
38 | <table>
39 | <tr>
40 | <td>
41 | <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>
42 |
43 | </td>
44 | <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.
45 | </td>
46 | </tr>
47 | <tr>
48 | <td>
49 | <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>
50 |
51 | </td>
52 | <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.
53 | </td>
54 | </tr>
55 | <tr>
56 | <td>
57 | <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>
58 |
59 | </td>
60 | <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.
61 | </td>
62 | </tr>
63 | </table>
64 |
65 | 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).
66 |
67 | ### Strumento della riga di comando
68 |
69 | 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>.
70 |
71 | 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).
72 |
73 | Ora convalidiamo una pagina HTML AMP esistente.
74 |
75 | [sourcecode:console]
76 | $ amphtml-validator https://www.ampproject.org/
77 | https://www.ampproject.org/: PASS
78 | [/sourcecode]
79 |
80 | 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:
81 |
82 | [sourcecode:console]
83 | $ amphtml-validator several_errors.html
84 | several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
85 | several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
86 | 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)
87 | 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)
88 | ...
89 | [/sourcecode]
90 |
91 | 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.
92 |
93 | 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):
94 |
95 | [sourcecode:console]
96 | $ amphtml-validator minimum_valid_amp.html
97 | minimum_valid_amp.html: PASS
98 | [/sourcecode]
99 |
100 | 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).
101 |
102 | [sourcecode:console]
103 | $ amphtml-validator --help
104 |
105 | Usage: index [options] <fileOrUrlOrMinus...>
106 |
107 | Validates the files or urls provided as arguments. If "-" is
108 | specified, reads from stdin instead.
109 |
110 | Options:
111 |
112 | -h, --help output usage information
113 | -V, --version output the version number
114 | --validator_js <fileOrUrl> The Validator Javascript.
115 | Latest published version by default, or
116 | dist/validator_minified.js (built with build.py)
117 | for development.
118 | --format <color|text|json> How to format the output.
119 | "color" displays errors/warnings/success in
120 | red/orange/green.
121 | "text" avoids color (e.g., useful in terminals not
122 | supporting color).
123 | "json" emits json corresponding to the ValidationResult
124 | message in validator.proto.
125 | [/sourcecode]
126 |
127 | ## Cosa succede se la mia pagina non è valida?
128 |
129 | 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.
130 |
131 | 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.
132 |
133 | ## Come faccio a correggere gli errori di convalida?
134 |
135 | La maggior parte degli errori di convalida è facile da correggere. Prova a utilizzare il seguente tag HTML:
136 |
137 | [sourcecode:html]
138 | <img src="cat.png">
139 | [/sourcecode]
140 |
141 | Questo genera il seguente errore di convalida AMP, mostrato nei vari strumenti che seguono:
142 |
143 | * Console per sviluppatori del browser
144 | <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>
145 |
146 | * Interfaccia web
147 | <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>
148 |
149 | * Estensione del browser
150 | <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>
151 |
152 | Ogni strumento fornisce diverse informazioni:
153 |
154 | * 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.
155 | * 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>`.
156 | * 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.
157 |
158 | Rileggendo con attenzione la specifica, ci siamo accorti di avere utilizzato un tag `<img>`, quando invece avremmo dovuto utilizzare un tag `<amp-img>`.
159 |
160 | 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).
161 | Se dopo un'attenta valutazione hai ancora difficoltà, [pubblica una domanda](http://stackoverflow.com/questions/tagged/amp-html) e cercheremo di aiutarti.
162 |
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Validar páginas de AMP
3 | ---
4 |
5 | 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.
6 |
7 | ## ¿Cómo puedo comprobar si mi página de AMP es válida?
8 |
9 | Hay varias formas disponibles para validar un documento de AMP. Todas ellas
10 | producen el mismo resultado, por lo que se puede utilizar la que más se ajuste
11 | a tu estilo de desarrollo.
12 |
13 | 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.
14 |
15 | ### Developer Console para el navegador
16 |
17 | 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:
18 |
19 | * Abre la página de AMP en el navegador.
20 | * Añade "`#development=1`" a la URL, por ejemplo,
21 | `http://localhost:8000/released.amp.html#development=1`.
22 | * Abre la [consola DevTools de Chrome](https://developers.google.com/web/tools/chrome-devtools/debug/console/) y comprueba si hay errores de validación.
23 |
24 | Los errores se mostrarán en Developer Console de una forma similar a esta:
25 |
26 | <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>
27 |
28 |
29 | ### Interfaz web
30 |
31 | El validador de AMP se puede utilizar como una interfaz web
32 | 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.
33 | La interfaz es un editor interactivo: cambia al resultado del código fuente HTML en
34 | una revalidación interactiva.
35 |
36 | <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>
37 |
38 |
39 | ### Extensión del navegador
40 |
41 | Se puede acceder al validador de AMP directamente desde la barra de herramientas del navegador utilizando
42 | 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.
43 |
44 | <table>
45 | <tr>
46 | <td>
47 | <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>
48 |
49 | </td>
50 | <td>Si una página de AMP contiene errores, el icono de la extensión
51 | se mostrará de color rojo y se indicará el número de errores detectados.
52 | </td>
53 | </tr>
54 | <tr>
55 | <td>
56 | <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>
57 |
58 | </td>
59 | <td>Si una página de AMP no contiene errores, el icono se mostrará de
60 | color verde y se indicará el número de advertencias, si es que hay alguna.
61 | </td>
62 | </tr>
63 | <tr>
64 | <td>
65 | <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>
66 |
67 | </td>
68 | <td>Si la página no es de AMP pero en ella se indica que hay una versión de AMP
69 | disponible, el icono se mostrará de color azul con un icono de enlace. Al hacer clic en
70 | la extensión, el navegador se redirigirá a la versión de AMP.
71 | </td>
72 | </tr>
73 | </table>
74 |
75 | Extensión del validador de AMP para
76 | [Chrome](https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc) y [Opera](https://addons.opera.com/en-gb/extensions/details/amp-validator/).
77 |
78 | ### Herramienta de línea de comandos
79 |
80 | 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
81 | `npm` correspondiente en el sistema</a>.
82 |
83 | 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`.
84 |
85 | A continuación, vamos a validar una página AMP HTML real.
86 |
87 | <div><pre><code>
88 | $ amphtml-validator https://www.ampproject.org/
89 | https://www.ampproject.org/: PASS
90 | [/sourcecode]
91 |
92 | 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:
93 |
94 | <div><pre><code>
95 | $ amphtml-validator several_errors.html
96 | several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
97 | several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
98 | 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)
99 | 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)
100 | ...
101 | [/sourcecode]
102 |
103 | El formato de los mensajes de error está compuesto por el nombre del archivo, la línea, la columna y el mensaje,
104 | 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.
105 |
106 | 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:
107 |
108 | <div><pre><code>
109 | $ amphtml-validator minimum_valid_amp.html
110 | minimum_valid_amp.html: PASS
111 | [/sourcecode]
112 |
113 | 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).
114 |
115 | <div><pre><code>
116 | $ amphtml-validator --help
117 |
118 | Usage: index [options] <fileOrUrlOrMinus...>
119 |
120 | Validates the files or urls provided as arguments. If "-" is
121 | specified, reads from stdin instead.
122 |
123 | Options:
124 |
125 | -h, --help output usage information
126 | -V, --version output the version number
127 | --validator_js <fileOrUrl> The Validator Javascript.
128 | Latest published version by default, or
129 | dist/validator_minified.js (built with build.py)
130 | for development.
131 | --format <color|text|json> How to format the output.
132 | "color" displays errors/warnings/success in
133 | red/orange/green.
134 | "text" avoids color (e.g., useful in terminals not
135 | supporting color).
136 | "json" emits json corresponding to the ValidationResult
137 | message in validator.proto.
138 | [/sourcecode]
139 |
140 | ## ¿Qué ocurre si mi página no es válida?
141 |
142 | 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.
143 |
144 | 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.
145 |
146 | ## ¿Cómo puedo solucionar los errores de validación?
147 |
148 | La mayoría de los errores de validación son fáciles de abordar y solucionar. Ten en cuenta esta etiqueta HTML:
149 |
150 | [sourcecode:html]
151 | <img src="cat.png">`
152 | [/sourcecode]
153 |
154 | Esta etiqueta genera el error de validación de AMP que se muestra en estas diferentes herramientas:
155 |
156 | * Developer Console para el navegador
157 | <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>
158 |
159 | * Interfaz web
160 | <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>
161 |
162 | * Extensión del navegador
163 | <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>
164 |
165 | Cada herramienta ofrece varios fragmentos de información:
166 |
167 | 1. La ubicación (línea y columna) en el documento HTML en el que ha ocurrido
168 | el error; es posible hacer clic en algunas interfaces para resaltar esa ubicación. En este
169 | caso, el problema se produce en la línea 11, columna 2.</li>
170 | 1. Una línea de texto que describe el error. En este caso, el texto indica que
171 | estamos utilizando una etiqueta `<img>`, cuando deberíamos haber utilizado una etiqueta `<amp-img>`.</li>
172 | 1. Un enlace a un documento relevante acerca del error. En este caso, la
173 | documentación para la etiqueta `<amp-img>`. No todos los errores generan
174 | enlaces de documentación.</li>
175 |
176 | 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>`.
177 |
178 | Para entender mejor la lista completa de los posibles errores,
179 | consulta la [Guía de errores de validación de AMP](https://www.ampproject.org/docs/reference/validation_errors.html).
180 | 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.
181 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: "Analytics: Grundlagen"
3 | ---
4 |
5 | Hier erfahren Sie mehr über die Grundlagen der AMP-Analyse.
6 |
7 | [TOC]
8 |
9 | ## amp-pixel oder amp-analytics verwenden?
10 |
11 | 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).
12 | Bei beiden Optionen werden Analysedaten an einen festgelegten Endpunkt gesendet.
13 |
14 | 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.
15 |
16 | Für die meisten Analyselösungen empfiehlt sich die Verwendung von `amp-analytics`.
17 | Das Seitenaufruf-Tracking funktioniert auch in `amp-analytics`.
18 | Sie können aber auch die Nutzerinteraktionen mit jeder anderen Art von Seiteninhalt erfassen, unter anderem mit Klicks auf Links und Schaltflächen.
19 | 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)).
20 |
21 | 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.
22 | Sie finden die Anbieterdokumentation in der [amp-analytics-Spezifikation](/docs/reference/extended/amp-analytics.html).
23 |
24 | 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.
25 | Sie können jedes Tag mehrfach hinzufügen.
26 | Wenn Sie mit mehreren Analyseanbietern zusammenarbeiten, benötigen Sie ein Tag pro Lösung.
27 | 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.
28 |
29 | ## Einfache Analysekonfiguration erstellen
30 |
31 | 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.
32 |
33 | ### Einfache amp-pixel-Konfiguration
34 |
35 | 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:
36 |
37 | [sourcecode:html]
38 | <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
39 | [/sourcecode]
40 |
41 | In diesem Beispiel werden die Seitenaufrufdaten zusammen mit einer Zufallszahl an die festgelegte URL gesendet.
42 | Die `RANDOM`-Variable ist eine von vielen [Substitutionsvariablen in der AMP-Plattform](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
43 | [Weitere Informationen zur Variablensubstitution](/docs/guides/analytics/analytics_basics.html#variable-substitution)
44 |
45 | 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`.
46 | Sie sollten das `amp-pixel`-Tag aber möglichst nahe am Anfang des `amp-pizel`-Abschnitts platzieren.
47 | Das Tracking-Pixel wird nur ausgelöst, wenn das entsprechende Tag erreicht wird.
48 | Wenn sich das `<body>`-Tag im unteren Bereich der Seite befindet, wird es möglicherweise nicht ausgelöst.
49 |
50 | ### Einfache amp-analytics-Konfiguration
51 |
52 | 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)):
53 |
54 | [sourcecode:html]
55 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
56 | [/sourcecode]
57 |
58 | Das folgende Beispiel ähnelt dem [`amp-pixel`-Beispiel](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration)</a>.
59 | 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:
60 |
61 | [sourcecode:html]
62 | <amp-analytics>
63 | <script type="application/json">
64 | {
65 | "requests": {
66 | "pageview": "https://foo.com/pixel?RANDOM",
67 | },
68 | "triggers": {
69 | "trackPageview": {
70 | "on": "visible",
71 | "request": "pageview"
72 | }
73 | }
74 | }
75 | </script>
76 | </amp-analytics>
77 | [/sourcecode]
78 |
79 | 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.
80 |
81 | Wenn die Seite sichtbar wird, wie es das Trigger-Keyword `visible` angibt, wird ein Ereignis ausgelöst und die `pageview`-Anforderung wird gesendet.
82 | Das triggers-Attribut bestimmt, wann die pageview-Anforderung ausgelöst wird.
83 | [Weitere Informationen zu Anforderungen und Triggern](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports)
84 |
85 | ## Variablensubstitution
86 |
87 | 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)).
88 | 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:
89 |
90 | [sourcecode:html]
91 | <amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
92 | [/sourcecode]
93 |
94 | 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.
95 | Im obigen Beispiel legt die Plattform die Werte sowohl für `canonicalURL` als auch für `clientId(site-user-id)` fest.
96 | Das `amp-analytics`-Tag kann dieselben Variablen wie `amp-pixel` sowie speziell definierte Variablen innerhalb der Tag-Konfiguration enthalten.
97 |
98 | Verwenden Sie das Format `${varName}` in einem Anforderungsstring für eine Seitenvariable oder eine von der Plattform definierte Variable.
99 | 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)).
100 |
101 | 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:
102 |
103 | [sourcecode:html]
104 | <amp-analytics>
105 | <script type="application/json">
106 | {
107 | "requests": {
108 | "pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
109 | },
110 | "vars": {
111 | "account": "ABC123",
112 | },
113 | "triggers": {
114 | "someEvent": {
115 | "on": "visible",
116 | "request": "pageview",
117 | "vars": {
118 | "title": "My homepage",
119 | }
120 | }
121 | }
122 | }
123 | </script>
124 | </amp-analytics>
125 | [/sourcecode]
126 |
127 | Im obigen Beispiel werden die Variablen `account` und `title` in der `amp-analytics`-Konfiguration definiert.
128 | Die Variablen `canonicalUrl` und `clientId` sind in der Konfiguration nicht definiert. Ihre Werte werden von der Plattform festgelegt.
129 |
130 | **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)).
131 |
132 | ## Nutzeridentifikation
133 |
134 | Websites verwenden Cookies, um nutzerspezifische Informationen im Browser zu speichern.
135 | Anhand von Cookies ist erkennbar, ob ein Nutzer eine Website schon einmal besucht hat.
136 | In AMP können Seiten entweder von der Website eines Publishers oder aus einem Cache, wie z. B. dem Google-AMP-Cache, bereitgestellt werden.
137 | Die Website des Publishers und der Cache gehören wahrscheinlich zu unterschiedlichen Domains.
138 | 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)).
139 |
140 | 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.
141 | 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.
142 |
143 | In allen Fällen wird das Lesen und Schreiben der Client-ID durch AMP verwaltet.
144 | 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.
145 | In diesem Fall besteht kein Zugriff auf die Cookies der Publisher-Website.
146 |
147 | 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.
148 | In diesem Fall wird das `cid-scope-cookie-fallback-name`-Argument der `clientId`-Variable als Cookiename interpretiert.
149 | Als Format ist sowohl `CLIENT_ID(cid-scope-cookie-fallback-name)` als auch `${clientId(cid-scope-cookie-fallback-name)}` möglich.
150 |
151 | Beispiel:
152 |
153 | [sourcecode:html]
154 | <amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
155 | [/sourcecode]
156 |
157 | Wenn AMP feststellt, dass dieses Cookie gesetzt wurde, gibt die Client-ID-Substitution den Wert des Cookies zurück.
158 | Wenn AMP feststellt, dass das Cookie nicht gesetzt wurde, generiert AMP einen Wert, der aus `amp-` und einem zufälligen base64-codierten String besteht.
159 |
160 | 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).
161 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Analytics : les bases
3 | toc: true
4 | ---
5 |
6 | Commencez ici pour tout savoir sur les bases des analyses AMP.
7 |
8 | [TOC]
9 |
10 | ## Utiliser amp-pixel ou amp-analytics ?
11 |
12 | AMP fournit deux composants pour répondre à vos besoins d'analyse et de mesure :
13 | [amp-pixel](/docs/reference/amp-pixel.html) et
14 | [amp-analytics](/docs/reference/extended/amp-analytics.html).
15 | Ces deux options envoient les données d'analyse à un point d'extrémité prédéfini.
16 |
17 | Si vous recherchez des comportements comme un simple
18 | [pixel de suivi](https://en.wikipedia.org/wiki/Web_beacon#Implementation)
19 | le composant `amp-pixel` fournit un suivi de base des vues de page ;
20 | les données sur les vues de page sont envoyées à une URL donnée.
21 | Certaines intégrations avec un fournisseur peuvent appeler ce composant,
22 | auquel cas elles indiqueront le point d'extrémité exact de l'URL.
23 |
24 | Pour la plupart des solutions d'analyse, utilisez `amp-analytics`.
25 | Le suivi des vues de page fonctionne également avec `amp-analytics`.
26 | Ce composant vous permet aussi de suivre l'engagement des utilisateurs avec n'importe quel type de contenu sur les pages,
27 | y compris les clics sur des liens et des boutons.
28 | Vous pouvez également mesurer jusqu'où l'utilisateur a fait défiler la page,
29 | savoir s'il a interagi ou non avec des réseaux sociaux et bien plus encore
30 | (voir
31 | [AMP Analytics dans le détail](/docs/guides/analytics/deep_dive_analytics.html)).
32 |
33 | Dans le cadre de l'intégration avec la plateforme AMP,
34 | des fournisseurs ont proposé des configurations `amp-analytics` prédéfinies,
35 | de sorte à faciliter considérablement la capture des données et leur transmission à leurs outils de suivi.
36 | Accédez à la documentation des fournisseurs depuis la
37 | [spécification du composant amp-analytics](/docs/reference/extended/amp-analytics.html).
38 |
39 | Dans vos pages, vous pouvez utiliser à la fois `amp-pixel` et `amp-analytics` :
40 | `amp-pixel` pour un simple suivi des vues de page
41 | et `amp-analytics` pour tout le reste.
42 | Vous pouvez également ajouter chaque balise plusieurs fois.
43 | Si vous travaillez avec plusieurs fournisseurs de solutions d'analyse,
44 | vous aurez besoin d'une balise par solution.
45 | Rappelez-vous que plus les pages AMP sont simples, mieux c'est pour les utilisateurs.
46 | Donc si vous n'avez pas besoin de balises supplémentaires, ne les utilisez pas.
47 |
48 | ## Créer une configuration d'analyse simple
49 |
50 | Découvrez comment créer une configuration
51 | [amp-pixel](/docs/reference/amp-pixel.html) et
52 | [amp-analytics](/docs/reference/extended/amp-analytics.html) simple.
53 |
54 | ### Configuration simple de la balise amp-pixel
55 |
56 | Pour créer une configuration simple de la balise `amp-pixel`,
57 | insérez un code du type suivant dans le corps de votre page AMP :
58 |
59 | [sourcecode:html]
60 | <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
61 | [/sourcecode]
62 |
63 | Dans cet exemple,
64 | les données sur les vues de page sont envoyées à l'URL définie, accompagnées d'un numéro aléatoire.
65 | La variable `RANDOM` est l'une des nombreuses
66 | [variables de substitution de la plateforme AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
67 | En savoir plus sur la
68 | [substitution des variables](/docs/guides/analytics/analytics_basics.html#variable-substitution).
69 |
70 | Le composant [amp-pixel](/docs/reference/amp-pixel.html)
71 | étant intégré,
72 | vous n'avez pas besoin d'une déclaration d'inclusion comme avec
73 | les composants étendus d'AMP, notamment `amp-analytics`.
74 | Vous devez néanmoins placer la balise `amp-pixel` aussi près que possible
75 | du début du corps de la page, c'est-à-dire de la balise `<body>`.
76 | En effet, le pixel de suivi ne se déclenche que lorsque la balise est affichée.
77 | Si la balise `amp-pixel` est positionnée près du bas de la page,
78 | il pourrait ne pas se déclencher.
79 |
80 | ### Configuration simple de la balise amp-analytics
81 |
82 | Pour créer une configuration simple de la balise
83 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
84 | vous devez d'abord inclure la déclaration `custom-element`
85 | après la balise `<head>` du document AMP (voir également
86 | [Déclaration d'inclusion de composant](/docs/reference/extended.html#component-inclusion-declaration)) :
87 |
88 | [sourcecode:html]
89 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
90 | [/sourcecode]
91 |
92 | L'exemple suivant est similaire à l'[exemple `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
93 | À chaque fois qu'une page est visible,
94 | l'événement est déclenché et
95 | envoie les données sur les vues de page à une URL définie, accompagnées d'un identifiant aléatoire :
96 |
97 | [sourcecode:html]
98 | <amp-analytics>
99 | <script type="application/json">
100 | {
101 | "requests": {
102 | "pageview": "https://foo.com/pixel?RANDOM",
103 | },
104 | "triggers": {
105 | "trackPageview": {
106 | "on": "visible",
107 | "request": "pageview"
108 | }
109 | }
110 | }
111 | </script>
112 | </amp-analytics>
113 | [/sourcecode]
114 |
115 | 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.
116 |
117 | Lorsque la page devient visible
118 | (tel que spécifié par l'utilisation du mot clé de déclenchement `visible`),
119 | un événement est déclenché et la requête `pageview` est envoyée.
120 | L'attribut triggers détermine à quel moment la requête pageview est déclenchée.
121 | En savoir plus sur les [requêtes et déclencheurs](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
122 |
123 | ## Substitution de variables
124 |
125 | Tant le composant [amp-pixel](/docs/reference/amp-pixel.html) que le composant
126 | [amp-analytics](/docs/reference/extended/amp-analytics.html)
127 | permettent toutes les substitutions de variable URL standard (voir
128 | [Substitution de variable AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).).
129 | Dans l'exemple suivant,
130 | la requête pageview est envoyée à l'URL,
131 | accompagnée de l'URL canonique du document AMP, de son titre et d'un
132 | [ID client](/docs/guides/analytics/analytics_basics.html#user-identification) :
133 |
134 | [sourcecode:html]
135 | <amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
136 | [/sourcecode]
137 |
138 | En raison de sa simplicité,
139 | la balise `amp-pixel` ne peut inclure que des variables définies par la plateforme
140 | ou que l'exécution AMP peut analyser depuis la page AMP.
141 | Dans l'exemple ci-dessus,
142 | la plateforme fournit les valeurs à la fois pour
143 | `canonicalURL` et pour `clientId(site-user-id)`.
144 | La balise `amp-analytics` peut inclure les mêmes variables que la balise `amp-pixel`,
145 | ainsi que des variables uniques définies dans la configuration de la balise.
146 |
147 | Utilisez le format `${varName}` dans une chaîne de requête pour une variable
148 | définie par la page ou la plateforme.
149 | La balise `amp-analytics` va remplacer le modèle par sa valeur réelle
150 | au moment de la construction de la demande d'analyse (voir également
151 | [Variables prises en charge par la balise amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
152 |
153 | Dans l'exemple suivant pour la balise `amp-analytics`,
154 | la requête pageview est envoyée à l'URL
155 | avec les données supplémentaires extraites des substitutions de variable,
156 | certaines données fournies par la plateforme
157 | et certaines données définies en ligne
158 | dans la configuration de la balise `amp-analytics` :
159 |
160 | [sourcecode:html]
161 | <amp-analytics>
162 | <script type="application/json">
163 | {
164 | "requests": {
165 | "pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
166 | },
167 | "vars": {
168 | "account": "ABC123",
169 | },
170 | "triggers": {
171 | "someEvent": {
172 | "on": "visible",
173 | "request": "pageview",
174 | "vars": {
175 | "title": "My homepage",
176 | }
177 | }
178 | }
179 | }
180 | </script>
181 | </amp-analytics>
182 | [/sourcecode]
183 |
184 | Dans l'exemple ci-dessus,
185 | les variables `account` et `title` sont définies
186 | dans la configuration de la balise `amp-analytics`.
187 | La variables `canonicalUrl` et `clientId` n'étant pas définies dans la configuration,
188 | leurs valeurs sont substituées par la plateforme.
189 |
190 | **Important :** La substitution des variables est flexible ;
191 | vous pouvez avoir les mêmes variables définies à différentes endroits,
192 | et l'exécution AMP analysera les valeurs dans leur ordre de priorité
193 | (voir [Ordonnancement de la substitution des variables](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
194 |
195 | ## Identification des utilisateurs
196 |
197 | Les sites Web utilisent des cookies pour stocker des informations spécifiques à un utilisateur dans le navigateur.
198 | Les cookies peuvent servir à indiquer qu'un utilisateur a déjà visité un site Web.
199 | Dans AMP,
200 | les pages peuvent être fournies soit depuis le site Web d'un éditeur, soit depuis un cache
201 | (comme Google AMP Cache).
202 | Il est probable que le site Web de l'éditeur et le cache aient des domaines différents.
203 | Pour des raisons de sécurité,
204 | les navigateurs limitent souvent l'accès aux cookies d'un autre domaine
205 | (voir également
206 | [Suivi des utilisateurs de différentes origines](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
207 |
208 | Par défaut,
209 | 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.
210 | L'ID client généré par AMP est composé du préfixe `"amp-"`
211 | suivi d'une chaîne aléatoire encodée`base64`, et reste le même
212 | pour un utilisateur qui consulte plusieurs fois une même page.
213 |
214 | AMP gère la lecture et l'écriture de l'ID client dans tous les cas.
215 | Cela s'avère particulièrement utile lorsqu'une page est fournie
216 | via un cache ou consultée en dehors du contexte d'affichage
217 | du site Web original de l'éditeur.
218 | Dans ce cas, l'accès aux cookies du site de l'éditeur n'est pas disponible.
219 |
220 | Lorsqu'une page AMP est fournie à partir du site de l'éditeur,
221 | le framework de l'ID client qu'utilise AMP peut être informé d'un cookie
222 | de rappel à rechercher et à utiliser.
223 | Dans ce cas,
224 | l'argument `cid-scope-cookie-fallback-name` de la variable `clientId`
225 | est interprété comme un nom de cookie.
226 | Le format est soit
227 | `CLIENT_ID(cid-scope-cookie-fallback-name)`, soit
228 | `${clientId(cid-scope-cookie-fallback-name)}`.
229 |
230 | Par exemple :
231 |
232 | [sourcecode:html]
233 | <amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
234 | [/sourcecode]
235 |
236 | Si AMP détecte que ce cookie est défini,
237 | la substitution de l'ID client renvoie la valeur du cookie.
238 | Si AMP détecte que ce cookie n'est pas défini,
239 | il génère une valeur commençant par `amp-`,
240 | suivi d'une chaîne aléatoire encodée base64.
241 |
242 | Pour en savoir plus sur la substitution d'ID client,
243 | notamment comment ajouter un ID facultatif de notification de l'utilisateur, voir
244 | [Variables prises en charge dans les analyses AMP](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
245 |
```