This is page 18 of 24. Use http://codebase.md/cloudflare/docs/imgs/%7B%7Bg.url(parentDoc.pod_path,%20locale=usedDoc.locale).path%7D%7D?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Więcej o analityce AMP
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | Ten przewodnik zawiera szczegółowe omówienie
9 | [komponentu amp-analytics](/docs/reference/extended/amp-analytics.html),
10 | dzieląc przykładową konfigurację z elementem `amp-analytics` na następujące kluczowe bloki:
11 |
12 | Podstawą przewodnika jest przykładowa konfiguracja,
13 | która monitoruje wyświetlenia strony i kliknięcia linków przez użytkownika
14 | oraz wysyła dane analityczne do niezależnego dostawcy
15 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/):
16 |
17 | [sourcecode:html]
18 | <amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
19 | <script type="application/json">
20 | {
21 | "requests": {
22 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
23 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
24 | },
25 | "vars": {
26 | "account": "ABC123"
27 | },
28 | "extraUrlParams": {
29 | "cd1": "AMP"
30 | },
31 | "triggers": {
32 | "trackPageview": {
33 | "on": "visible",
34 | "request": "pageview"
35 | },
36 | "trackAnchorClicks": {
37 | "on": "click",
38 | "selector": "a",
39 | "request": "event",
40 | "vars": {
41 | "eventId": "42",
42 | "eventLabel": "clicked on a link"
43 | }
44 | }
45 | },
46 | 'transport': {
47 | 'beacon': false,
48 | 'xhrpost': false,
49 | 'image': true
50 | }
51 | }
52 | </script>
53 | </amp-analytics>
54 | [/sourcecode]
55 |
56 | **Uwaga:** Powyższy kod przykładowy ma za zadanie pomoc w nauce, ale nie jest on w żadnym razie przykładem realistycznym. W przypadku współpracy z dostawcami usług analitycznych prawdopodobne jest, że powyższy przykład nie ma sensu; konfiguracje dostawców eliminują złożoność. Sprawdź informacje na temat przykładowych konfiguracji w dokumentacji dostawcy.
57 |
58 | ## Gdzie wysyłać dane analityczne: atrybut type
59 |
60 | AMP zaprojektowano do obsługi dwóch typowych wzorców gromadzenia danych:
61 |
62 | * Przyswajanie w należącym do wydawcy punkcie końcowym na potrzeby wewnętrznych systemów analitycznych.
63 | * Przyswajanie w punkcie końcowym należącym do dostawcy w celu zapewnienia współdziałania z rozwiązaniem dostawcy
64 | (na przykład [Adobe Analytics](https://helpx.adobe.com/marketing-cloud/analytics.html), [Chartbeat](http://support.chartbeat.com/docs/), [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/)).
65 |
66 | W celu wysłania danych analitycznych do dostawcy usług analitycznych
67 | dołącz atrybut `type` w znaczniku `amp-analytics` i ustaw jego wartość,
68 | aby odpowiadała konkretnemu dostawcy, zgodnie z definicją w
69 | [specyfikacji elementu amp-analytics](/docs/reference/extended/amp-analytics.html).
70 |
71 | Na przykład element `<amp-analytics type="googleanalytics">` wysyła dane analityczne
72 | do niezależnego dostawcy usług analitycznych Google Analytics.
73 | Aby wysłać dane do punktu końcowego należącego do wydawcy,
74 | wystarczy po prostu nie dołączać atrybutu `type`;
75 | dane analityczne będą wysyłane do punktów końcowych zdefiniowanych dla każdego
76 | [żądania](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute).
77 |
78 | Konfiguracje dostawców usług analitycznych stanowią szybką metodę
79 | rozpoczęcia korzystania z elementu `amp-analytics`.
80 | Dodatkowych informacji należy szukać w dokumentacji dostawcy
81 | i zasobach pomocy.
82 | Jak wspomniano wcześniej,
83 | listę dostawców, którzy już zintegrowali swoje systemy z AMP, a także linki
84 | do ich dokumentacji, można znaleźć w
85 | [specyfikacji elementu amp-analytics](/docs/reference/extended/amp-analytics.html).
86 |
87 | Dostawcy usług analitycznych mogą
88 | dowiedzieć się więcej o
89 | [integracji własnej konfiguracji analitycznej z AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
90 |
91 | ## Ładowanie konfiguracji zdalnej: atrybut config
92 |
93 | Nie ma potrzeby dołączania całej konfiguracji
94 | elementu `amp-analytics` na stronie AMP.
95 | Zamiast tego można wywołać zdalny adres URL
96 | z całą konfiguracją lub jej częścią.
97 |
98 | Umożliwia to na przykład zmienianie konfiguracji
99 | w zależności od konkretnego żądania.
100 | Jeśli jesteś wydawcą i masz kontrolę nad plikiem zdalnym,
101 | możesz wykonać dowolne przetwarzanie po stronie serwera niezbędne
102 | do skonstruowania danych konfiguracji.
103 |
104 | Pierwszy krok do załadowania zdalnych konfiguracji
105 | to dołączenie atrybutu config do znacznika `amp-analytics`:
106 |
107 | [sourcecode:html]
108 | <amp-analytics config="https://example.com/analytics.account.config.json">
109 | [/sourcecode]
110 |
111 | Następny krok to utworzenie treści JSON funkcjonującej pod zdalnym adresem URL.
112 | W tym prostym przykładzie
113 | konfiguracja zawarta w obiekcie JSON to tylko wartość zmiennej dla konta analitycznego.
114 |
115 | Przykładowa treść w obiekcie `https://example.com/analytics.account.config.json`:
116 |
117 | [sourcecode:html]
118 | {
119 | "vars": {
120 | "account": "UA-XXXXX-Y" // Replace with your property ID.
121 | }
122 | }
123 | [/sourcecode]
124 |
125 | Ostatni krok to upewnienie się, które dane z pliku zdalnego są wyciągane
126 | do odpowiedniego miejsca w konfiguracji elementu `amp-analytics`.
127 | W obu żądaniach `pageview` i `event`
128 | wartości zmiennej`account` jest automatycznie nadawana
129 | wartość konta w zdalnym adresie URL (`"account": "UA-XXXXX-Y"`):
130 |
131 | [sourcecode:html]
132 | "requests": {
133 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
134 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
135 | }
136 | [/sourcecode]
137 |
138 | **Ważne:** AMP nie sprawdza poprawności dla wielu wystąpień tej samej zmiennej.
139 | Wartości są zapełniane zgodnie z preferowaną kolejnością podstawiania zmiennych,
140 | a wartości w zdalnych adresach URL są na początku tej kolejności
141 | (zobacz [Kolejność podstawiania zmiennych](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
142 |
143 | ## Żądania, wyzwalacze i transporty
144 |
145 | Atrybut `requests` definiuje wysyłane dane
146 | (na przykład `pageviews`, `events`)
147 | oraz miejsce docelowe dla wysyłanych danych (adresy URL używane do transmisji danych).
148 |
149 | Atrybut `triggers` określa moment wysłania danych analitycznych,
150 | na przykład kiedy użytkownik wyświetli stronę lub kiedy kliknie link.
151 |
152 | Atrybut `transport` określa sposób wysłania żądania,
153 | a dokładniej — protokół.
154 |
155 | Czytaj dalej, aby dowiedzieć się więcej o tych konfiguracjach.
156 | (O tych konfiguracjach możesz także przeczytać w części
157 | [Informacje uzupełniające o elemencie amp-analytics](/docs/reference/extended/amp-analytics.html).)
158 |
159 | ### Dane do wysłania: atrybut requests
160 |
161 | Atrybut `request-name` jest używany w konfiguracji wyzwalania do określania,
162 | które żądanie powinno zostać wysłane w odpowiedzi na konkretne zdarzenie.
163 | Atrybut `request-value` to adres URL w protokole `https`.
164 | Te wartości mogą zawierać tokeny zmiennej,
165 | które mogą odwoływać się do innych żądań lub zmiennych.
166 |
167 | [sourcecode:html]
168 | "requests": {
169 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
170 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
171 | }
172 | [/sourcecode]
173 |
174 | Niektórzy dostawcy usług analitycznych (w tym Google Analytics)
175 | już udostępnili konfigurację,
176 | której używa się za pośrednictwem atrybutu `type`.
177 | W przypadku korzystania z dostawcy usług analitycznych
178 | dołączanie informacji `requests` może nie być konieczne.
179 | Informacje o tym, czy konfigurowanie atrybutu
180 | `requests` jest konieczne, można znaleźć w dokumentacji dostawcy.
181 |
182 | #### Dołączanie adresu URL żądania: Dodatkowe parametry adresu URL
183 |
184 | Atrybut [extraUrlParams](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#extra-url-params)
185 | określa dodatkowe parametry dołączane do ciągu znaków zapytania adresu URL żądania przy użyciu zwykłej konwencji „&foo=baz”.
186 |
187 | Przykład z elementem `amp-analytics` wprowadza dodatkowy parametr <code>cd1</code>
188 | w żądaniu i nadaje mu wartość „AMP”:
189 |
190 | [sourcecode:html]
191 | "extraUrlParams": {
192 | "cd1": "AMP"
193 | }
194 | [/sourcecode]
195 |
196 | ### Moment wysłania danych: atrybut triggers
197 |
198 | Atrybut `triggers` określa moment, w którym ma zostać wysłane żądanie analityczne.
199 | Zawiera on parę klucz-wartość z nazwą wyzwalacza i konfiguracją wyzwalacza.
200 | Nazwa wyzwalacza może być dowolnym łańcuchem
201 | znaków alfanumerycznych (a-z A-Z 0-9).
202 |
203 | Na przykład
204 | następujący element `amp-analytics` jest skonfigurowany do wysyłania żądania na adres
205 | `https://example.com/analytics`, kiedy dokument jest ładowany po raz pierwszy,
206 | i za każdym razem, kiedy zostanie kliknięty znacznik `a`:
207 |
208 | [sourcecode:html]
209 | "triggers": {
210 | "trackPageview": {
211 | "on": "visible",
212 | "request": "pageview"
213 | },
214 | "trackAnchorClicks": {
215 | "on": "click",
216 | "selector": "a",
217 | "request": "event",
218 | "vars": {
219 | "eventId": "42",
220 | "eventLabel": "clicked on a link"
221 | }
222 | }
223 | }
224 | [/sourcecode]
225 |
226 | AMP obsługuje następujące konfiguracje wyzwalacza:
227 |
228 | <table>
229 | <thead>
230 | <tr>
231 | <th data-th="Trigger Config" class="col-thirty">Konfiguracja wyzwalacza</th>
232 | <th data-th="Description">Opis</th>
233 | </tr>
234 | </thead>
235 | <tbody>
236 | <tr>
237 | <td data-th="Trigger Config"><code>on</code> (wymagane)</td>
238 | <td data-th="Description">Nasłuchiwane zdarzenie. Poprawne wartości to <code>click</code>, <code>scroll</code>, <code>timer</code> i <code>visible</code>.</td>
239 | </tr>
240 | <tr>
241 | <td data-th="Trigger Config"><code>request</code> (wymagane)</td>
242 | <td data-th="Description">Nazwa żądania do wysłania (określona atrybutem <a href="/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute">requests</a>).</td>
243 | </tr>
244 | <tr>
245 | <td data-th="Trigger Config"><code>vars</code></td>
246 | <td data-th="Description">Obiekt zawierający pary klucz-wartość używany do zastąpienia deklaracji <code>vars</code> w konfiguracji najwyższego poziomu lub do określenia deklaracji <code>vars</code> właściwej tylko dla tego wyzwalacza (zobacz też <a href="/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering">Kolejność podstawiania zmiennych</a>).</td>
247 | </tr>
248 | <tr>
249 | <td data-th="Trigger Config"><code>selector</code> (wymagane, gdy parametr <code>on</code> ma wartość <code>click</code>)</td>
250 | <td data-th="Description">Selektor CSS używany do precyzowania elementów, które mają być monitorowane. Użyj wartości <code>*</code>, aby monitorować wszystkie elementy. Ta konfiguracja jest używana w połączeniu z wyzwalaczem <code>click</code>. Dowiedz się, jak używać selektora do <a href="/docs/guides/analytics/use_cases.html#tracking-page-clicks">monitorowania kliknięć na stronie</a> oraz <a href="/docs/guides/analytics/use_cases.html#tracking-social-interactions">interakcji społecznościowych</a>.</td>
251 | </tr>
252 | <tr>
253 | <td data-th="Trigger Config"><code>scrollSpec</code> (wymagane, gdy parametr <code>on</code> ma wartość <code>scroll</code>)</td>
254 | <td data-th="Description">Steruje okolicznościami wyzwolenia zdarzenia <code>scroll</code> podczas przewijania strony. Ten obiekt może zawierać właściwości <code>verticalBoundaries</code> i <code>horizontalBoundaries</code>. Co najmniej jedna z nich jest wymagana do wyzwolenia zdarzenia <code>scroll</code>. Wartości obydwu właściwości powinny być tablicami liczb zawierającymi granice, po przekroczeniu których generowane jest zdarzenie przewijania. Zobacz przykład dotyczący <a href="/docs/guides/analytics/use_cases.html#tracking-scrolling">monitorowania przewijania</a>.</td>
255 | </tr>
256 | <tr>
257 | <td data-th="Trigger Config"><code>timerSpec</code> (wymagane, gdy parametr <code>on</code> ma wartość <code>timer</code>)</td>
258 | <td data-th="Description">Steruje momentem wyzwolenia zdarzenia <code>timer</code>. Licznik czasu zostanie wyzwolony natychmiast, a następnie będzie wyzwalany z określonym interwałem. Ta konfiguracja jest używana w połączeniu z wyzwalaczem <code>timer</code>.</td>
259 | </tr>
260 | </tbody>
261 | </table>
262 |
263 | **Ważne:** Wyzwalacze z konfiguracji o niższym priorytecie są przesłaniane
264 | przez wyzwalacze o tych samych nazwach z konfiguracji o wyższym priorytecie
265 | (zobacz [Kolejność podstawiania zmiennych](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
266 |
267 | ### Sposób wysyłania danych: atrybut transport
268 |
269 | Atrybut `transport` określa sposób wysłania żądania.
270 | Domyślnie są włączone trzy następujące metody:
271 |
272 | <table>
273 | <thead>
274 | <tr>
275 | <th data-th="Transport Method" class="col-thirty">Metoda transportu</th>
276 | <th data-th="Description">Opis</th>
277 | </tr>
278 | </thead>
279 | <tbody>
280 | <tr>
281 | <td data-th="Transport Method"><code>beacon</code></td>
282 | <td data-th="Description">Wskazuje możliwość użycia metody <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> do transmisji żądania. Spowoduje to wysłanie żądania <code>POST</code> z danymi logowania i pustą treścią.</td>
283 | </tr>
284 | <tr>
285 | <td data-th="Transport Method"><code>xhrpost</code></td>
286 | <td data-th="Description">Wskazuje możliwość użycia żądania <code>XMLHttpRequest</code> do transmisji żądania. Spowoduje to wysłanie żądania <code>POST</code> z danymi logowania i pustą treścią.</td>
287 | </tr>
288 | <tr>
289 | <td data-th="Transport Method"><code>image</code></td>
290 | <td data-th="Description">Wskazuje możliwość wysłania żądania przez wygenerowanie znacznika <code>Image</code>. Spowoduje to wysłanie żądania <code>GET</code>.</td>
291 | </tr>
292 | </tbody>
293 | </table>
294 |
295 | Używana jest tylko jedna metoda transportu:
296 | ta z najwyższym priorytetem
297 | , która jest włączona, dozwolona i dostępna.
298 | Priorytet jest następujący `beacon` > `xhrpost` > `image`.
299 | Jeśli agent użytkownika klienta nie obsługuje metody,
300 | używana jest następna włączona metoda o najwyższym priorytecie.
301 |
302 | Atrybut `transport` należy dołączać do swojej konfiguracji
303 | tylko wtedy, gdy chce się ograniczyć opcje transportu,
304 | w przeciwnym razie można zatrzymać żądania.
305 |
306 | W przykładzie powyżej
307 | metody `beacon` i `xhrpost` mają wartość false,
308 | więc nie będą używane, pomimo że mają wyższy priorytet niż metoda `image`.
309 | Jeśli agent użytkownika klienta obsługuje metodę `image`,
310 | zostanie ona użyta. W przeciwnym razie żadne żądanie nie zostanie wysłane.
311 |
312 | [sourcecode:html]
313 | 'transport': {
314 | 'beacon': false,
315 | 'xhrpost': false,
316 | 'image': true
317 | }
318 | [/sourcecode]
319 |
320 | ## Kolejność podstawiania zmiennych
321 |
322 | AMP podstawia wartości za zmienne w następującej kolejności:
323 |
324 | 1. Konfiguracje zdalne (atrybut `config`).
325 | 2. Deklaracje `vars` zagnieżdżone wewnątrz wyzwalacza w atrybucie `triggers`.
326 | 3. Deklaracje `vars` na najwyższym poziomie zagnieżdżone w elemencie `amp-analytics`.
327 | 4. Wartości podane przez platformę.
328 |
329 | W tym przykładzie występuje konfiguracja zdalna,
330 | zmienne zdefiniowane na najwyższym poziomie, w wyzwalaczach i na poziomie platformy:
331 |
332 | [sourcecode:html]
333 | <amp-analytics config="http://example.com/config.json">
334 | <script type="application/json">
335 | {
336 | "requests": {
337 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
338 | },
339 | "vars": {
340 | "account": "ABC123",
341 | "title": "Homepage"
342 | },
343 | "triggers": {
344 | "some-event": {
345 | "on": "visible",
346 | "request": "pageview",
347 | "vars": {
348 | "title": "My homepage",
349 | "clientId": "my user"
350 | }
351 | }
352 | }
353 | </script>
354 | </amp-analytics>
355 | [/sourcecode]
356 |
357 | Gdy ten sam element `var` jest zdefiniowany w wielu miejscach,
358 | pierwszeństwo zmiennych powoduje, że jego wartość jest ustawiana tylko raz.
359 | Oznacza to, że jeśli w konfiguracji zdalnej element `account` zdefiniowano jako UA-XXXXX-Y w przykładzie powyżej,
360 | wartości różnych elementów var będą następujące:
361 |
362 | <table>
363 | <thead>
364 | <tr>
365 | <th data-th="var" class="col-thirty"><code>var</code></th>
366 | <th data-th="Value">Wartość</th>
367 | <th data-th="Defined By" class="col-thirty">Definiowana przez</th>
368 | </tr>
369 | </thead>
370 | <tbody>
371 | <tr>
372 | <td data-th="var"><code>canonicalUrl</code></td>
373 | <td data-th="Value"><code>http://example.com/path/to/the/page</code></td>
374 | <td data-th="Defined By">Platforma</td>
375 | </tr>
376 | <tr>
377 | <td data-th="var"><code>title</code></td>
378 | <td data-th="Value">My homepage</td>
379 | <td data-th="Defined By">Wyzwalacz</td>
380 | </tr>
381 | <tr>
382 | <td data-th="var"><code>account</code></td>
383 | <td data-th="Value"><code>UA-XXXXX-Y</code></td>
384 | <td data-th="Defined By">Konfiguracja zdalna</td>
385 | </tr>
386 | <tr>
387 | <td data-th="var"><code>clientId</code></td>
388 | <td data-th="Value">my user</td>
389 | <td data-th="Defined By">Wyzwalacz</td>
390 | </tr>
391 | </tbody>
392 | </table>
393 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Análisis profundo de AMP Analytics
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | En esta guía se analiza en detalle el
9 | [componente amp-analytics](/docs/reference/extended/amp-analytics.html)
10 | a través del desglose de una configuración de `amp-analytics` de ejemplo en los siguientes componentes fundamentales:
11 |
12 | En el resto de la guía se usa esta configuración de ejemplo,
13 | con la cual se realiza un seguimiento de las vistas de página y los clics de los usuario en diferentes vínculos,
14 | y se envían los datos del análisis al proveedor externo,
15 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/):
16 |
17 | [sourcecode:html]
18 | <amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
19 | <script type="application/json">
20 | {
21 | "requests": {
22 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
23 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
24 | },
25 | "vars": {
26 | "account": "ABC123"
27 | },
28 | "extraUrlParams": {
29 | "cd1": "AMP"
30 | },
31 | "triggers": {
32 | "trackPageview": {
33 | "on": "visible",
34 | "request": "pageview"
35 | },
36 | "trackAnchorClicks": {
37 | "on": "click",
38 | "selector": "a",
39 | "request": "event",
40 | "vars": {
41 | "eventId": "42",
42 | "eventLabel": "clicked on a link"
43 | }
44 | }
45 | },
46 | 'transport': {
47 | 'beacon': false,
48 | 'xhrpost': false,
49 | 'image': true
50 | }
51 | }
52 | </script>
53 | </amp-analytics>
54 | [/sourcecode]
55 |
56 | **Nota:** El código de ejemplo anterior está pensado para facilitar el aprendizaje, pero no se apoya en la realidad. Si trabajas con proveedores de herramientas de análisis, es probable que el ejemplo no tenga sentido. Las configuraciones de proveedores eliminan la complejidad. Consulta la documentación de tu proveedor de herramientas de análisis para obtener configuraciones de ejemplo.
57 |
58 | ## A dónde deben enviarse los datos de análisis: atributo “type”
59 |
60 | AMP está diseñado para admitir dos patrones comunes de recopilación de datos:
61 |
62 | * ingesta de un terminal del editor para sistemas de análisis internos;
63 | * ingesta de un terminal del proveedor para la interoperabilidad con una solución del proveedor
64 | (por ejemplo, [Adobe Analytics](https://helpx.adobe.com/marketing-cloud/analytics.html), [Chartbeat](http://support.chartbeat.com/docs/), [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/)).
65 |
66 | Para enviar datos del análisis a un proveedor de herramientas de análisis,
67 | incluye el atributo `type` en la etiqueta `amp-analytics` y define su valor
68 | para el proveedor correspondiente, como se define en la
69 | [especificación de amp-analytics](/docs/reference/extended/amp-analytics.html).
70 |
71 | Por ejemplo: `<amp-analytics type="googleanalytics">` envía datos de análisis
72 | al proveedor de herramientas de análisis externo, Google Analytics.
73 | Para enviar datos a un terminal del editor,
74 | simplemente no incluyas el atributo `type`;
75 | los datos del análisis se envían a los terminales definidos para cada
76 | [solicitud](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute).
77 |
78 | Las configuraciones del proveedor de herramientas de análisis permiten dar rápidamente
79 | los primeros pasos con `amp-analytics`.
80 | Consulta la documentación y los recursos de ayuda
81 | de tu proveedor para obtener información adicional.
82 | Como se mencionó antes,
83 | puedes encontrar la lista de proveedores que ya realizaron la integración con AMP y también los vínculos
84 | a su documentación específica en la
85 | [especificación de amp-analytics](/docs/reference/extended/amp-analytics.html).
86 |
87 | Si eres proveedor de herramientas de análisis,
88 | puedes obtener más información acerca de la
89 | [integración de tu propia configuración de análisis en AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
90 |
91 | ## Carga de la configuración remota: atributo config
92 |
93 | No necesitas incluir la configuración completa de
94 | `amp-analytics` en tu página de AMP.
95 | Como alternativa, puedes llamar a una URL remota
96 | para obtener todas las configuraciones o parte de ellas.
97 |
98 | Esto te permite realizar acciones como modificar la configuración
99 | en función de una solicitud específica.
100 | Si como editor tienes control sobre el archivo remoto,
101 | puedes realizar cualquier procesamiento en el servidor que sea necesario
102 | para estructurar los datos de configuración.
103 |
104 | El primer paso para cargar una configuración remota es
105 | incluir el atributo config en la etiqueta `amp-analytics`:
106 |
107 | [sourcecode:html]
108 | <amp-analytics config="https://example.com/analytics.account.config.json">
109 | [/sourcecode]
110 |
111 | El siguiente paso es crear contenido JSON que se aloje en la URL remota.
112 | En este ejemplo sencillo,
113 | la configuración contenida en el objeto JSON corresponde solo al valor de la variable para la cuenta de análisis.
114 |
115 | Ejemplo de contenido en `https://example.com/analytics.account.config.json`:
116 |
117 | [sourcecode:html]
118 | {
119 | "vars": {
120 | "account": "UA-XXXXX-Y" // Replace with your property ID.
121 | }
122 | }
123 | [/sourcecode]
124 |
125 | El paso final es asegurarte de que los datos del archivo remoto se extraigan
126 | a la ubicación correcta en la configuración de `amp-analytics`.
127 | En las solicitudes `pageview` y `event`,
128 | el valor de la variable `account` se define automáticamente
129 | en el valor de la cuenta de la URL remota (`"account": "UA-XXXXX-Y"`):
130 |
131 | [sourcecode:html]
132 | "requests": {
133 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
134 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
135 | }
136 | [/sourcecode]
137 |
138 | **Importante:** AMP no valida usos múltiples de la misma variable.
139 | Los valores se completan siguiendo un orden de preferencia de sustitución de variables
140 | y los valores en las direcciones URL remotas son los primeros en ese orden
141 | (consulta [Orden de sustitución de variables](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
142 |
143 | ## Atributos requests, triggers y transport
144 |
145 | El atributo `requests` define “los datos que se enviarán”
146 | (por ejemplo, `pageviews`, `events`)
147 | y el destino del envío (las direcciones URL empleadas para transmitir datos).
148 |
149 | El atributo `triggers` describe el momento en que se deben enviar los datos del análisis;
150 | por ejemplo, cuando un usuario visualiza una página o cuando un usuario hace clic en un vínculo.
151 |
152 | El atributo `transport` especifica la manera de enviar una solicitud.
153 | Dicho de una manera más específica, el protocolo.
154 |
155 | Continúa leyendo para obtener más información acerca de estas configuraciones.
156 | (También puedes hacerlo en la
157 | [referencia de amp-analytics](/docs/reference/extended/amp-analytics.html)).
158 |
159 | ### Qué datos se envían: atributo requests
160 |
161 | `request-name` se usa en la configuración del disparador para especificar
162 | la solicitud que se debe enviar en respuesta a un evento específico.
163 | `request-value` es una URL `https`.
164 | Estos valores pueden incluir tokens de marcadores de posición
165 | que pueden hacer referencia a otras solicitudes o variables.
166 |
167 | [sourcecode:html]
168 | "requests": {
169 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
170 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
171 | }
172 | [/sourcecode]
173 |
174 | Algunos proveedores de herramientas de análisis (incluido Google Analytics)
175 | ya han proporcionado configuraciones
176 | que tú usas a través del atributo `type`.
177 | Si usas un proveedor de herramientas analíticas,
178 | es posible que no necesites incluir información de `requests`.
179 | Consulta la documentación de tu proveedor para averiguar
180 | si se debe configurar `requests` y la manera de hacerlo.
181 |
182 | #### Cómo anexar una URL de solicitud: Parámetros de URL adicionales
183 |
184 | El atributo [extraUrlParams](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#extra-url-params)
185 | especifica parámetros adicionales para anexar a la cadena de consulta de la URL de consulta a través de la convención habitual "&foo=baz".
186 |
187 | En el ejemplo de `amp-analytics` se agrega un parámetro adicional <code>cd1</code>
188 | a la solicitud y se establece el valor del parámetro en "AMP":
189 |
190 | [sourcecode:html]
191 | "extraUrlParams": {
192 | "cd1": "AMP"
193 | }
194 | [/sourcecode]
195 |
196 | ### Cuándo se envían los datos: atributo triggers
197 |
198 | El atributo `triggers` describe cuándo se debe enviar una solicitud de análisis.
199 | Contiene un par de valores claves: nombre y configuración del disparador.
200 | El nombre del disparador puede ser cualquier cadena compuesta
201 | por caracteres alfanuméricos (a-zA-Z0-9).
202 |
203 | El siguiente
204 | elemento `amp-analytics`, por ejemplo, se configura para enviar una solicitud a
205 | `https://example.com/analytics` cuando el documento se carga por primera vez
206 | y cada vez que se hace clic en una etiqueta `a`:
207 |
208 | [sourcecode:html]
209 | "triggers": {
210 | "trackPageview": {
211 | "on": "visible",
212 | "request": "pageview"
213 | },
214 | "trackAnchorClicks": {
215 | "on": "click",
216 | "selector": "a",
217 | "request": "event",
218 | "vars": {
219 | "eventId": "42",
220 | "eventLabel": "clicked on a link"
221 | }
222 | }
223 | }
224 | [/sourcecode]
225 |
226 | AMP admite las siguientes configuraciones de disparadores:
227 |
228 | <table>
229 | <thead>
230 | <tr>
231 | <th data-th="Trigger Config" class="col-thirty">Config. del disparador</th>
232 | <th data-th="Description">Descripción</th>
233 | </tr>
234 | </thead>
235 | <tbody>
236 | <tr>
237 | <td data-th="Trigger Config"><code>on</code> (obligatorio)</td>
238 | <td data-th="Description">Evento que se debe recibir. Los valores válidos son <code>click</code>, <code>scroll</code>, <code>timer</code> y <code>visible</code>.</td>
239 | </tr>
240 | <tr>
241 | <td data-th="Trigger Config"><code>request</code> (obligatorio)</td>
242 | <td data-th="Description">Nombre de la solicitud que se enviará (según se especifica en las solicitudes<a href="/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute"></a>).</td>
243 | </tr>
244 | <tr>
245 | <td data-th="Trigger Config"><code>vars</code></td>
246 | <td data-th="Description">Objeto que contiene pares de valores claves usados para sobrescribir <code>vars</code> definidos en la configuración de nivel superior o para especificar<code>vars</code> exclusivos de este disparador (consulta también<a href="/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering">Orden de sustitución de variables</a>).</td>
247 | </tr>
248 | <tr>
249 | <td data-th="Trigger Config"><code>selector</code> (obligatorio cuando <code>on</code> se fija en <code>click</code>)</td>
250 | <td data-th="Description">Selector de CSS usado para definir con precisión los elementos que deben someterse a seguimiento. Usa el valor <code>*</code> para realizar un seguimiento de todos los elementos. Esta configuración se usa junto con el disparador <code>click</code>. Obtén información acerca de cómo usar el selector para <a href="/docs/guides/analytics/use_cases.html#tracking-page-clicks">realizar un seguimiento de los clics de páginas</a> y las <a href="/docs/guides/analytics/use_cases.html#tracking-social-interactions">interacciones sociales</a>.</td>
251 | </tr>
252 | <tr>
253 | <td data-th="Trigger Config"><code>scrollSpec</code> (obligatorio cuando <code>on</code> se fija en <code>scroll</code>)</td>
254 | <td data-th="Description">Controla las condiciones bajo las cuales se activa el evento <code>scroll</code> cuando se desplaza la página. Este objeto puede contener <code>verticalBoundaries</code> y <code>horizontalBoundaries</code>. Al menos una de las dos propiedades es obligatoria para que se active un evento <code>scroll</code>. Los valores para ambas propiedades deben ser arreglos de números que contengan los límites conforme a los cuales se genera un evento de desplazamiento. Consulta este ejemplo en <a href="/docs/guides/analytics/use_cases.html#tracking-scrolling">Seguimiento del desplazamiento</a>.</td>
255 | </tr>
256 | <tr>
257 | <td data-th="Trigger Config"><code>timerSpec</code> (obligatorio cuando <code>on</code> se fija en <code>timer</code>)</td>
258 | <td data-th="Description">Controla el momento en que se activa el evento <code>timer</code>. El temporizador se activará de inmediato y, en adelante, a intervalos especificados. Esta configuración se usa junto con el elemento de activación <code>timer</code>.</td>
259 | </tr>
260 | </tbody>
261 | </table>
262 |
263 | **Importante:** Los disparadores de una configuración con menor precedencia se sobrescriben
264 | con disparadores que tienen los mismos nombres de una configuración con mayor precedencia
265 | (consulta [Orden de sustitución de variables](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
266 |
267 | ### Cómo se envían los datos: atributo transport
268 |
269 | El atributo `transport` especifica la manera de enviar una solicitud.
270 | De forma predeterminada, están habilitados los siguientes tres métodos:
271 |
272 | <table>
273 | <thead>
274 | <tr>
275 | <th data-th="Transport Method" class="col-thirty">Método de transport</th>
276 | <th data-th="Description">Descripción</th>
277 | </tr>
278 | </thead>
279 | <tbody>
280 | <tr>
281 | <td data-th="Transport Method"><code>beacon</code></td>
282 | <td data-th="Description">Indica que se puede usar <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> para transmitir la solicitud. Enviará una solicitud <code>POST</code> con credenciales y un cuerpo vacío.</td>
283 | </tr>
284 | <tr>
285 | <td data-th="Transport Method"><code>xhrpost</code></td>
286 | <td data-th="Description">Indica que se puede usar <code>XMLHttpRequest</code> para transmitir la solicitud. Enviará una solicitud <code>POST</code> con credenciales y un cuerpo vacío.</td>
287 | </tr>
288 | <tr>
289 | <td data-th="Transport Method"><code>image</code></td>
290 | <td data-th="Description">Indica que la solicitud se puede enviar al generar una etiqueta <code>Image</code>. Esto enviará una solicitud <code>GET</code>.</td>
291 | </tr>
292 | </tbody>
293 | </table>
294 |
295 | Solo se usa un método de transporte;
296 | es el de mayor precedencia
297 | que esté habilitado, permitido y disponible.
298 | La precedencia es `beacon` > `xhrpost` > `image`.
299 | Si el agente de usuario del cliente no admite un método,
300 | se usa el método de mayor precedencia que sigue.
301 |
302 | Incluye el atributo `transport` en tu configuración
303 | solo si deseas limitar las opciones de transporte;
304 | de lo contrario, podrías detener las solicitudes.
305 |
306 | En el ejemplo siguiente,
307 | `beacon` y `xhrpost` se fijan en false
308 | para no usarse aunque tengan mayor precedencia que `image`.
309 | Si el agente de usuario del cliente admite el método `image`,
310 | es el que se usará; de lo contrario, no se enviarán solicitudes.
311 |
312 | [sourcecode:html]
313 | 'transport': {
314 | 'beacon': false,
315 | 'xhrpost': false,
316 | 'image': true
317 | }
318 | [/sourcecode]
319 |
320 | ## Orden de sustitución de variables
321 |
322 | AMP completa variables con valores en orden de precedencia:
323 |
324 | 1. Configuraciones remotas (a través de `config`).
325 | 2. `vars` anidados dentro de un disparador en `triggers`.
326 | 3. `vars` del nivel superior anidados en `amp-analytics`.
327 | 4. Valores proporcionados por la plataforma.
328 |
329 | En este ejemplo hay una configuración remota,
330 | variables definidas en el nivel superior, en disparadores y en el nivel de la plataforma:
331 |
332 | [sourcecode:html]
333 | <amp-analytics config="http://example.com/config.json">
334 | <script type="application/json">
335 | {
336 | "requests": {
337 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
338 | },
339 | "vars": {
340 | "account": "ABC123",
341 | "title": "Homepage"
342 | },
343 | "triggers": {
344 | "some-event": {
345 | "on": "visible",
346 | "request": "pageview",
347 | "vars": {
348 | "title": "My homepage",
349 | "clientId": "my user"
350 | }
351 | }
352 | }
353 | </script>
354 | </amp-analytics>
355 | [/sourcecode]
356 |
357 | Cuando se define el mismo `var` en múltiples ubicaciones,
358 | el orden de precedencia de la variable establece su valor una vez.
359 | De esta manera, si la configuración remota definió `account` como UA-XXXXX-Y en el ejemplo anterior,
360 | los valores de diferentes vars serán los siguientes:
361 |
362 | <table>
363 | <thead>
364 | <tr>
365 | <th data-th="var" class="col-thirty"><code>var</code></th>
366 | <th data-th="Value">Valor</th>
367 | <th data-th="Defined By" class="col-thirty">Definido por</th>
368 | </tr>
369 | </thead>
370 | <tbody>
371 | <tr>
372 | <td data-th="var"><code>canonicalUrl</code></td>
373 | <td data-th="Value"><code>http://example.com/path/to/the/page</code></td>
374 | <td data-th="Defined By">Plataforma</td>
375 | </tr>
376 | <tr>
377 | <td data-th="var"><code>title</code></td>
378 | <td data-th="Value">My homepage</td>
379 | <td data-th="Defined By">Disparador</td>
380 | </tr>
381 | <tr>
382 | <td data-th="var"><code>account</code></td>
383 | <td data-th="Value"><code>UA-XXXXX-Y</code></td>
384 | <td data-th="Defined By">Configuración remota</td>
385 | </tr>
386 | <tr>
387 | <td data-th="var"><code>clientId</code></td>
388 | <td data-th="Value">my user</td>
389 | <td data-th="Defined By">Disparador</td>
390 | </tr>
391 | </tbody>
392 | </table>
393 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Eingehende Betrachtung der AMP-Analyse
3 | ---
4 |
5 | In dieser Anleitung wird genauer auf die [amp-analytics-Komponente](/docs/reference/extended/amp-analytics.html) eingegangen. Dabei wird eine `amp-analytics`-Beispielkonfiguration in die folgenden Grundbausteine unterteilt:
6 |
7 | [TOC]
8 |
9 | Im übrigen Teil dieser Anleitung wird das folgende Konfigurationsbeispiel verwendet, mit dem Seitenaufrufe und Nutzerklicks auf Links erfasst und die Analysedaten an den Drittanbieter [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/) gesendet werden:
10 |
11 | [sourcecode:html]
12 | <amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
13 | <script type="application/json">
14 | {
15 | "requests": {
16 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
17 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
18 | },
19 | "vars": {
20 | "account": "ABC123"
21 | },
22 | "extraUrlParams": {
23 | "cd1": "AMP"
24 | },
25 | "triggers": {
26 | "trackPageview": {
27 | "on": "visible",
28 | "request": "pageview"
29 | },
30 | "trackAnchorClicks": {
31 | "on": "click",
32 | "selector": "a",
33 | "request": "event",
34 | "vars": {
35 | "eventId": "42",
36 | "eventLabel": "clicked on a link"
37 | }
38 | }
39 | },
40 | 'transport': {
41 | 'beacon': false,
42 | 'xhrpost': false,
43 | 'image': true
44 | }
45 | }
46 | </script>
47 | </amp-analytics>
48 | [/sourcecode]
49 |
50 | **Hinweis:** Der obige Beispielcode ist als Lernhilfe gedacht und stellt kein realistisches Anwendungsbeispiel dar. Wenn Sie mit Analyseanbietern zusammenarbeiten, ist das obige Beispiel wahrscheinlich nicht sinnvoll. Anbieterkonfigurationen verringern die Komplexität. Weitere Beispielkonfigurationen können Sie wahrscheinlich der Dokumentation des Analyseanbieters entnehmen.
51 |
52 | ## Ziel für das Senden der Analysedaten: type-Attribut
53 |
54 | AMP wurde entwickelt, zwei gebräuchliche Muster der Datenerfassung zu unterstützen:
55 |
56 | * Aufnahme durch einen Publisher-Endpunkt für interne Analysesysteme
57 | * Aufnahme durch einen Anbieterendpunkt für die Interoperabilität mit einer Anbieterlösung wie z. B. [Adobe Analytics](https://helpx.adobe.com/marketing-cloud/analytics.html), [Chartbeat](http://support.chartbeat.com/docs/) oder [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/)
58 |
59 | Wenn Sie Analysedaten an einen Analyseanbieter senden möchten, schließen Sie das `type`-Attribut in das `amp-analytics`-Tag ein und legen Sie als Wert den gewünschten Anbieter fest, wie in der [amp-analytics-Spezifikation](/docs/reference/extended/amp-analytics.html) beschrieben.
60 |
61 | Mit `<amp-analytics type="googleanalytics">` werden beispielsweise Analysedaten an den Analysedrittanbieter Google Analytics gesendet.
62 | Wenn Sie Daten an einen Publisher-Endpunkt senden möchten, schließen Sie einfach nicht das `type`-Attribut ein. Die Analysedaten werden dann an die für die jeweilige [Anforderung](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute) festgelegten Endpunkte gesendet.
63 |
64 | Konfigurationen von Analyseanbietern ermöglichen einen schnellen Einstieg in die Verwendung von `amp-analytics`.
65 | Weitere Informationen finden Sie in der Dokumentation und den Hilferessourcen Ihres Anbieters.
66 | Eine Liste der Anbieter, die in AMP integriert werden können, sowie Links zur entsprechenden Dokumentation finden Sie wie bereits erwähnt in der [amp-analytics-Spezifikation](/docs/reference/extended/amp-analytics.html).
67 |
68 | Wenn Sie selbst Analyseanbieter sind, können Sie [hier mehr über die Integration Ihrer eigenen Analysekonfiguration in AMP-HTML erfahren](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
69 |
70 | ## Remote-Konfiguration laden: config-Attribut
71 |
72 | Sie brauchen nicht die gesamte Konfiguration für `amp-analytics` auf Ihrer AMP-Seite einzuschließen.
73 | Stattdessen können Sie die Konfigurationen vollständig oder teilweise von einer Remote-URL abrufen.
74 |
75 | Dies ermöglicht Ihnen beispielsweise, die Konfiguration in Abhängigkeit von der jeweiligen Anforderung zu variieren. Wenn Sie als Publisher die Kontrolle über die Remote-Datei haben, können Sie die serverseitige Verarbeitung vornehmen, die für die Erstellung der Konfigurationsdaten erforderlich ist.
76 |
77 | Der erste Schritt zum Laden von Remote-Konfigurationen besteht darin, das config-Attribut in das `amp-analytics`-Tag einzuschließen:
78 |
79 | [sourcecode:html]
80 | <amp-analytics config="https://example.com/analytics.account.config.json">
81 | [/sourcecode]
82 |
83 | Im nächsten Schritt erstellen Sie den JSON-Inhalt unter der Remote-URL. In diesem einfachen Beispiel umfasst die im JSON-Objekt enthaltene Konfiguration lediglich den Variablenwert für das Analysekonto.
84 |
85 | Beispielinhalt in `https://example.com/analytics.account.config.json`:
86 |
87 | [sourcecode:js]
88 | {
89 | "vars": {
90 | "account": "UA-XXXXX-Y" // Replace with your property ID.
91 | }
92 | }
93 | [/sourcecode]
94 |
95 | Im letzten Schritt sorgen Sie dafür, dass der Inhalt der Remote-Datei an der richtigen Stelle in der `amp-analytics`-Konfiguration platziert wird.
96 | Sowohl in der `pageview`- als auch in der `event`-Anforderung wird hier der `account`-Variablenwert automatisch auf den Kontowert in der Remote-URL (`"account": "UA-XXXXX-Y"`) gesetzt:
97 |
98 | [sourcecode:js]
99 | "requests": {
100 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
101 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
102 | }
103 | [/sourcecode]
104 |
105 | **Wichtig:** AMP prüft nicht, ob dieselbe Variable mehrfach verwendet wird.
106 | Werte werden in einer bestimmten Reihenfolge der Variablensubstitution festgelegt und Werte in Remote-URLs stehen am Anfang dieser Reihenfolge (siehe [Reihenfolge der Variablensubstitution](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
107 |
108 | ## Anforderungen, Trigger und Transporte
109 |
110 | Mit dem `requests`-Attribut wird festgelegt, welche Daten (z. B. `pageviews` und `events`) wohin (an welche URLs) gesendet werden.
111 |
112 | Mit dem `triggers`-Attribut wird beschrieben, wann Analysedaten gesendet werden sollen, z. B. wenn ein Nutzer eine Seite aufruft oder wenn er auf einen Link klickt.
113 |
114 | Mit dem `transport`-Attribut wird angegeben, wie eine Anforderung gesendet wird, also das konkrete Protokoll.
115 |
116 | Im Folgenden wird näher auf diese Konfigurationen eingegangen.
117 | Außerdem finden Sie weitere Informationen in der [amp-analytics-Referenz](/docs/reference/extended/amp-analytics.html).
118 |
119 | ### Art der gesendeten Daten: requests-Attribut
120 |
121 | Mit `request-name` wird in der Triggerkonfiguration angegeben, welche Anforderung als Antwort auf ein bestimmtes Ereignis gesendet werden soll.
122 | `request-value` ist eine `https`-URL. Diese Werte können Platzhaltertoken enthalten, die auf weitere Anforderungen oder Variablen verweisen.
123 |
124 | [sourcecode:js]
125 | "requests": {
126 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
127 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
128 | }
129 | [/sourcecode]
130 |
131 | Einige Analyseanbieter, einschließlich Google Analytics, haben bereits eine Konfiguration bereitgestellt, die Sie mithilfe des `type`-Attributs verwenden können.
132 | Wenn Sie einen Analyseanbieter verwenden, brauchen Sie möglicherweise keine `requests`-Informationen anzugeben.
133 | Ob und wie `requests` konfiguriert werden muss, entnehmen Sie der Anbieterdokumentation.
134 |
135 | #### Anforderungs-URL anhängen: zusätzliche URL-Parameter
136 |
137 | Mit dem Attribut [extraUrlParams](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#extra-url-params) werden zusätzliche Parameter angegeben, die über die gewohnte "&foo=baz"-Konvention an den Abfragestring der Anforderungs-URL angehängt werden.
138 |
139 | Im `amp-analytics`-Beispiel wird der Anforderung ein zusätzlicher Parameter `cdl` hinzugefügt und der Parameterwert auf "AMP" gesetzt:
140 |
141 | [sourcecode:js]
142 | "extraUrlParams": {
143 | "cd1": "AMP"
144 | }
145 | [/sourcecode]
146 |
147 | ### Bedingungen für das Senden von Daten: triggers-Attribut
148 |
149 | Über das `triggers`-Attribut wird angegeben, wann eine Analyseanforderung gesendet werden soll.
150 | Es enthält ein Schlüssel/Wert-Paar aus Triggername und Triggerkonfiguration.
151 | Der Triggername kann ein beliebiger String aus alphanumerischen Zeichen (a–z, A–Z, 0–9) sein.
152 |
153 | Das folgende `amp-analytics`-Element sorgt z. B. dafür, dass beim ersten Laden des Dokuments und bei jedem Klick auf ein `https://example.com/analytics`-Tag eine Anforderung an `a` gesendet wird:
154 |
155 | [sourcecode:js]
156 | "triggers": {
157 | "trackPageview": {
158 | "on": "visible",
159 | "request": "pageview"
160 | },
161 | "trackAnchorClicks": {
162 | "on": "click",
163 | "selector": "a",
164 | "request": "event",
165 | "vars": {
166 | "eventId": "42",
167 | "eventLabel": "clicked on a link"
168 | }
169 | }
170 | }
171 | [/sourcecode]
172 |
173 | AMP unterstützt die folgenden Triggerkonfigurationen:
174 |
175 | <table>
176 | <thead>
177 | <tr>
178 | <th class="col-thirty" data-th="Trigger Config">Trigger-konfiguration</th>
179 | <th data-th="Description">Beschreibung</th>
180 | </tr>
181 | </thead>
182 | <tbody>
183 | <tr>
184 | <td data-th="Trigger Config"><code>on</code> (erforderlich)</td>
185 | <td data-th="Description">Das Ereignis, auf das gewartet wird. Gültige Werte sind <code>click</code>, <code>scroll</code>, <code>timer</code> und <code>visible</code>.</td>
186 | </tr>
187 | <tr>
188 | <td data-th="Trigger Config"><code>request</code> (erforderlich)</td>
189 | <td data-th="Description">Name der zu sendenden Anforderung, wie unter [Anforderungen](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute) angegeben</td>
190 | </tr>
191 | <tr>
192 | <td data-th="Trigger Config"><code>vars</code></td>
193 | <td data-th="Description">Ein Objekt, das Schlüssel/Wert-Paare enthält, mit denen in der Konfiguration oberster Ebene festgelegte <code>vars</code>-Variablen überschrieben oder spezifische <code>vars</code>-Variablen für diesen Trigger angegeben werden (siehe auch [Reihenfolge der Variablensubstitution](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering))</td>
194 | </tr>
195 | <tr>
196 | <td data-th="Trigger Config"><code>selector</code> (erforderlich, wenn <coe>on</code> auf <code>click</code> gesetzt ist)</td>
197 | <td data-th="Description">Ein CSS-Selektor dient zur genaueren Angabe der zu erfassenden Elemente. Bei Verwendung von <code>*</code> werden alle Elemente erfasst. Diese Konfiguration wird in Verbindung mit dem <code>click</code>-Trigger eingesetzt. [Informationen zur Verwendung des Selektors zum Erfassen von Seitenklicks](/docs/guides/analytics/use_cases.html#tracking-page-clicks) und von [Interaktionen über soziale Netzwerke](/docs/guides/analytics/use_cases.html#tracking-social-interactions)</td>
198 | </tr>
199 | <tr>
200 | <td data-th="Trigger Config"><code>scrollSpec</code> (erforderlich, wenn <code>on</code> auf <code>scroll</code> gesetzt ist)</td>
201 | <td data-th="Description">Hiermit wird festgelegt, unter welchen Bedingungen beim Scrollen auf der Seite das <code>scroll</code>-Ereignis ausgelöst wird. Dieses Objekt kann <code>verticalBoundaries</code> und <code>horizontalBoundaries</code> enthalten. Für das Auslösen eines <code>scroll</code>-Ereignisses ist mindestens eine der zwei Eigenschaften erforderlich. Bei den Werten für beide Eigenschaften sollte es sich um Arrays von Zahlen handeln, die die Grenzen angeben, bei denen ein scroll-Ereignis generiert wird. [Beispiel zum Erfassen des Scrollens](/docs/guides/analytics/use_cases.html#tracking-scrolling)</td>
202 | </tr>
203 | <tr>
204 | <td data-th="Trigger Config"><code>timerSpec</code> (erforderlich, wenn <code>on</code> auf <code>timer</code> gesetzt ist)</td>
205 | <td data-th="Description">Hiermit wird festgelegt, wann das <code>timer</code>-Ereignis ausgelöst wird. Der Timer wird sofort und anschließend nach Ablauf eines angegebenen Intervalls ausgelöst. Diese Konfiguration wird in Verbindung mit dem <code>timer</code>-Trigger verwendet.</td>
206 | </tr>
207 | </tbody>
208 | </table>
209 |
210 | **Wichtig:** Trigger aus einer Konfiguration mit einer niedrigeren Priorität werden von gleichnamigen Triggern aus einer Konfiguration höherer Priorität überschrieben (siehe [Reihenfolge der Variablensubstitution](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
211 |
212 | ### Methode für das Senden von Daten: transport-Attribut
213 |
214 | Mit dem `transport`-Attribut wird angegeben, wie eine Anforderung gesendet wird. Standardmäßig sind die drei folgenden Methoden aktiviert:
215 |
216 | <table>
217 | <thead>
218 | <tr>
219 | <th class="col-thirty" data-th="Transport Method">Transport-methode</th>
220 | <th data-th="Description">Beschreibung</th>
221 | </tr>
222 | </thead>
223 | <tbody>
224 | <tr>
225 | <td data-th="Transport Method"><code>beacon</code></td>
226 | <td data-th="Description">Hiermit wird angegeben, dass die Anforderung mittels [navigator.sendBeacon](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) übertragen werden kann. Dadurch wird eine <code>POST</code>-Anforderung mit Anmeldedaten und einem leeren body-Abschnitt gesendet.</td>
227 | </tr>
228 | <tr>
229 | <td data-th="Transport Method"><code>xhrpost</code></td>
230 | <td data-th="Description">Hiermit wird angegeben, dass die Anforderung mittels <code>XMLHttpRequest</code> übertragen werden kann. Dadurch wird eine <code>POST</code>-Anforderung mit Anmeldedaten und einem leeren body-Abschnitt gesendet.</td>
231 | </tr>
232 | <tr>
233 | <td data-th="Transport Method"><code>image</code></td>
234 | <td data-th="Description">Hiermit wird angegeben, dass die Anforderung durch Generieren eines <code>Image</code>-Tags gesendet werden kann. Dadurch wird eine <code>GET</code>-Anforderung gesendet.</td>
235 | </tr>
236 | </tbody>
237 | </table>
238 |
239 | Es wird nur eine einzige Transportmethode verwendet, und zwar jene mit der höchsten Priorität, die aktiviert, zulässig und verfügbar wird.
240 | Die Prioritätsreihenfolge lautet `beacon` > `xhrpost` > `image`.
241 | Wenn der User-Agent des Kunden eine Methode nicht unterstützt, wird die aktivierte Methode mit der höchsten verfügbaren Priorität verwendet.
242 |
243 | Schließen Sie das `transport`-Attribut nur dann in Ihre Konfiguration ein, wenn Sie die Transportoptionen beschränken möchten. Andernfalls könnten Anforderungen unterbunden werden.
244 |
245 | Im unten stehenden Beispiel sind `beacon` und `xhrpost` auf "false" gesetzt und werden daher nicht verwendet, obwohl sie eine höhere Priorität als `image` haben.
246 | Wenn der User-Agent des Kunden die `image`-Methode unterstützt, wird sie auch verwendet. Andernfalls wird keine Anforderung gesendet.
247 |
248 | [sourcecode:js]
249 | 'transport': {
250 | 'beacon': false,
251 | 'xhrpost': false,
252 | 'image': true
253 | }
254 | [/sourcecode]
255 |
256 | ## Reihenfolge der Variablensubstitution
257 |
258 | AMP legt Werte für die Variablen entsprechend der Prioritätsreihenfolge fest:
259 |
260 | 1. Remote-Konfigurationen (über `config`)
261 | 2. `vars`-Variablen, die in einen Trigger innerhalb von `triggers` eingebettet sind
262 | 3. `vars`-Variablen oberster Ebene, die in `amp-analytics` eingebettet sind
263 | 4. Von der Plattform bereitgestellte Werte
264 |
265 | In diesem Beispiel gibt es eine Remote-Konfiguration sowie Variablen, die auf oberster Ebene, in Triggern und auf Plattformebene festgelegt sind:
266 |
267 | [sourcecode:html]
268 | <amp-analytics config="http://example.com/config.json">
269 | <script type="application/json">
270 | {
271 | "requests": {
272 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
273 | },
274 | "vars": {
275 | "account": "ABC123",
276 | "title": "Homepage"
277 | },
278 | "triggers": {
279 | "some-event": {
280 | "on": "visible",
281 | "request": "pageview",
282 | "vars": {
283 | "title": "My homepage",
284 | "clientId": "my user"
285 | }
286 | }
287 | }
288 | </script>
289 | </amp-analytics>
290 | [/sourcecode]
291 |
292 | Wenn dieselbe `var`-Variable an mehreren Stellen festgelegt wird, entscheidet die Prioritätsreihenfolge der Variablen über ihren Wert.
293 | Wenn also im obigen Beispiel in der Remote-Konfiguration für `account` der Wert UA-XXXXX-Y festgelegt wird, haben die Variablen die folgenden Werte:
294 |
295 | <table>
296 | <thead>
297 | <tr>
298 | <th class="col-thirty" data-th="var"><code>var</code></th>
299 | <th data-th="Value">Wert</th>
300 | <th class="col-thirty" data-th="Defined By">Definiert durch</th>
301 | </tr>
302 | </thead>
303 | <tbody>
304 | <tr>
305 | <td data-th="var"><code>canonicalUrl</code></td>
306 | <td data-th="Value"><code>http://example.com/path/to/the/page</code></td>
307 | <td data-th="Defined By">Plattform</td>
308 | </tr>
309 | <tr>
310 | <td data-th="var"><code>title</code></td>
311 | <td data-th="Value">My homepage</td>
312 | <td data-th="Defined By">Trigger</td>
313 | </tr>
314 | <tr>
315 | <td data-th="var"><code>account</code></td>
316 | <td data-th="Value"><code>UA-XXXXX-Y</code></td>
317 | <td data-th="Defined By">Remote-Konfiguration</td>
318 | </tr>
319 | <tr>
320 | <td data-th="var"><code>clientId</code></td>
321 | <td data-th="Value">my user</td>
322 | <td data-th="Defined By">Trigger</td>
323 | </tr>
324 | </tbody>
325 | </table>
326 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Immersione nel mondo di AMP Analytics
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | Questa guida si addentra nella sfera del
9 | [componente amp-analytics](/docs/reference/extended/amp-analytics.html),
10 | scomponendo una configurazione campione di `amp-analytics` in questi blocchi predefiniti:
11 |
12 | Il resto di questa guida usa il campione di configurazione,
13 | che consente di monitorare le visualizzazioni di pagina e i clic dell’utente sui link
14 | e inviare i dati di analisi al fornitore di terze parti,
15 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/):
16 |
17 | [sourcecode:html]
18 | <amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
19 | <script type="application/json">
20 | {
21 | "requests": {
22 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
23 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
24 | },
25 | "vars": {
26 | "account": "ABC123"
27 | },
28 | "extraUrlParams": {
29 | "cd1": "AMP"
30 | },
31 | "triggers": {
32 | "trackPageview": {
33 | "on": "visible",
34 | "request": "pageview"
35 | },
36 | "trackAnchorClicks": {
37 | "on": "click",
38 | "selector": "a",
39 | "request": "event",
40 | "vars": {
41 | "eventId": "42",
42 | "eventLabel": "clicked on a link"
43 | }
44 | }
45 | },
46 | 'transport': {
47 | 'beacon': false,
48 | 'xhrpost': false,
49 | 'image': true
50 | }
51 | }
52 | </script>
53 | </amp-analytics>
54 | [/sourcecode]
55 |
56 | **Nota:** il codice dell’esempio sopra è stato creato per aiutarti a capire ma non costituisce assolutamente un campione realistico. Se collabori con fornitori di strumenti di analisi, è probabile che il campione sopra non abbia senso, in quanto le configurazioni dei fornitori eliminano le complessità. Per le configurazioni di esempio fai riferimento alla documentazione del tuo fornitore di strumenti di analisi.
57 |
58 | ## Dove inviare i dati di analisi: attributo type
59 |
60 | AMP è progettato per supportare due modelli diffusi di raccolta dati:
61 |
62 | * Inserimento da un endpoint di proprietà di un publisher per i sistemi di analisi interni.
63 | * Inserimento da un endpoint di proprietà di un fornitore per l’interoperabilità con la soluzione del fornitore
64 | (ad esempio, [Adobe Analytics](https://helpx.adobe.com/marketing-cloud/analytics.html), [Chartbeat](http://support.chartbeat.com/docs/), [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/)).
65 |
66 | Per inviare i dati dell’analisi a un fornitore di strumenti di analisi,
67 | includi l’attributo `type` nel tag `amp-analytics` e imposta il suo valore
68 | per il fornitore pertinente, come definito nella
69 | [specifica amp-analytics](/docs/reference/extended/amp-analytics.html).
70 |
71 | Ad esempio: `<amp-analytics type="googleanalytics">` invia i dati di analisi
72 | al fornitore di strumenti di analisi di terze parti, Google Analytics.
73 | Per inviare i dati a un endpoint di proprietà di un publisher
74 | è sufficiente non includere l’attributo `type`,
75 | i dati di analisi vengono quindi inviati agli endpoint definiti per ciascuna
76 | [richiesta](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute).
77 |
78 | Le configurazioni del fornitore di strumenti di analisi costituiscono un sistema rapido
79 | per iniziare a lavorare con `amp-analytics`.
80 | Per ulteriori informazioni è opportuno consultare la documentazione
81 | e le risorse di riferimento rese disponibili dal fornitore.
82 | Come precedentemente indicato,
83 | l’elenco di fornitori che hanno già incluso l’integrazione con AMP, nonché i link
84 | alla rispettiva documentazione specifica sono reperibili nella
85 | [specifica amp-analytics](/docs/reference/extended/amp-analytics.html).
86 |
87 | Se sei un fornitore di strumenti di analisi,
88 | ottieni ulteriori informazioni sull’
89 | [integrazione della tua configurazione di analisi personale in HTML AMP](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
90 |
91 | ## Caricamento della configurazione remota: attributo config
92 |
93 | Non hai bisogno di includere tutta la
94 | configurazione per `amp-analytics` nella tua pagina AMP.
95 | Al contrario, puoi richiamare un URL remoto
96 | per la totalità o per parte delle configurazioni.
97 |
98 | Questo ti consente di eseguire operazioni come la modifica
99 | della configurazione in base a una richiesta specifica.
100 | Se in quanto editore hai il controllo sul file remoto,
101 | puoi eseguire qualsiasi operazione di elaborazione necessaria sul lato server
102 | per costruire i dati di configurazione.
103 |
104 | Il primo passo per caricare le configurazioni remote
105 | è quello di includere l’attributo config nel tag `amp-analytics`:
106 |
107 | [sourcecode:html]
108 | <amp-analytics config="https://example.com/analytics.account.config.json">
109 | [/sourcecode]
110 |
111 | Il passo successivo è quello di creare il contenuto JSON che risiede nell’URL remoto.
112 | In questo semplice esempio,
113 | la configurazione contenuta nell’oggetto JSON è semplicemente il valore della variabile per l’account di analisi.
114 |
115 | Contenuto di esempio in `https://example.com/analytics.account.config.json`:
116 |
117 | [sourcecode:html]
118 | {
119 | "vars": {
120 | "account": "UA-XXXXX-Y" // Replace with your property ID.
121 | }
122 | }
123 | [/sourcecode]
124 |
125 | Il passo finale è quello di verificare che il contenuto del file remoto sia
126 | inserito nel punto corretto nella configurazione `amp-analytics`.
127 | Qui, in entrambe le richieste `pageview` e `event`,
128 | il valore della variabile `account` è automaticamente impostato
129 | sul valore dell’account nell’URL remoto (`"account": "UA-XXXXX-Y"`):
130 |
131 | [sourcecode:html]
132 | "requests": {
133 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
134 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
135 | }
136 | [/sourcecode]
137 |
138 | **Importante.** AMP non consente la convalida rispetto a più usi della stessa variabile.
139 | I valori vengono inseriti seguendo un ordine di preferenza di sostituzione delle variabili
140 | e i valori negli URL remoti sono all’inizio di tale ordine
141 | (vedi [Ordinamento della sostituzione delle variabili](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
142 |
143 | ## Richieste, attivazioni e trasferimenti
144 |
145 | L’attributo `requests` definisce ‘quali dati vengono inviati’
146 | (ad esempio, `pageviews`, `events`)
147 | e dove vengono inviati (gli URL utilizzati per trasmettere i dati).
148 |
149 | L’attributo `triggers` indica quando devono essere inviati i dati di analisi,
150 | ad esempio, quando un utente visualizza una pagina o quando un utente fa clic su un link.
151 |
152 | L’attributo `transport` specifica come inviare una richiesta,
153 | più in particolare, il protocollo.
154 |
155 | Più avanti puoi ottenere ulteriori informazioni su queste configurazioni
156 | (puoi anche approfondire queste configurazioni nel
157 | [riferimento amp-analytics](/docs/reference/extended/amp-analytics.html)).
158 |
159 | ### Quali dati vengono inviati: attributo requests
160 |
161 | Il valore `request-name` viene utilizzato nella configurazione di attivazione per specificare
162 | quale richiesta deve essere inviata in risposta a un particolare evento.
163 | Il valore `request-value` è un URL `https`.
164 | Questi valori possono includere token segnaposto
165 | che fanno riferimento ad altre richieste o variabili.
166 |
167 | [sourcecode:html]
168 | "requests": {
169 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
170 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
171 | }
172 | [/sourcecode]
173 |
174 | Alcuni fornitori di strumenti di analisi (compreso Google Analytics)
175 | hanno già fornito la configurazione
176 | da utilizzare tramite l’attributo `type`.
177 | Se stai usando un fornitore di strumenti di analisi,
178 | è possibile che non sia necessario includere le informazioni `requests`.
179 | Fai riferimento alla documentazione del tuo fornitore per
180 | sapere se occorre configurare l’attributo `requests` ed eventualmente come configurarlo.
181 |
182 | #### Aggiunta di URL di richiesta: Extra URL Params
183 |
184 | L’attributo [extraUrlParams](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#extra-url-params)
185 | specifica i parametri supplementari da aggiungere alla stringa di query dell’URL di richiesta tramite la solita convenzione "&foo=baz".
186 |
187 | L’esempio `amp-analytics` aggiunge un ulteriore parametro <code>cd1</code>
188 | alla richiesta e imposta il valore del parametro su "AMP":
189 |
190 | [sourcecode:html]
191 | "extraUrlParams": {
192 | "cd1": "AMP"
193 | }
194 | [/sourcecode]
195 |
196 | ### Quando vengono inviati i dati: attributo triggers
197 |
198 | L’attributo `triggers` descrive quando deve essere inviata una richiesta di analisi.
199 | Contiene una coppia chiave-valore di nome-trigger e configurazione-trigger.
200 | Il nome trigger può essere qualsiasi stringa costituita da
201 | caratteri alfanumerici (a-zA-Z0-9).
202 |
203 | Ad esempio,
204 | il seguente elemento `amp-analytics` è configurato per inviare una richiesta a
205 | `https://example.com/analytics` quando il documento viene caricato per la prima volta
206 | e ogni volta che viene fatto clic su un tag `a`:
207 |
208 | [sourcecode:html]
209 | "triggers": {
210 | "trackPageview": {
211 | "on": "visible",
212 | "request": "pageview"
213 | },
214 | "trackAnchorClicks": {
215 | "on": "click",
216 | "selector": "a",
217 | "request": "event",
218 | "vars": {
219 | "eventId": "42",
220 | "eventLabel": "clicked on a link"
221 | }
222 | }
223 | }
224 | [/sourcecode]
225 |
226 | AMP supporta le seguenti configurazioni di attivazione:
227 |
228 | <table>
229 | <thead>
230 | <tr>
231 | <th data-th="Trigger Config" class="col-thirty">Trigger Config</th>
232 | <th data-th="Description">Descrizione</th>
233 | </tr>
234 | </thead>
235 | <tbody>
236 | <tr>
237 | <td data-th="Trigger Config"><code>on</code> (obbligatorio)</td>
238 | <td data-th="Description">L’evento per cui invocare il listener. I valori validi sono <code>click</code>, <code>scroll</code>, <code>timer</code> e <code>visible</code>.</td>
239 | </tr>
240 | <tr>
241 | <td data-th="Trigger Config"><code>request</code> (obbligatorio)</td>
242 | <td data-th="Description">Nome della richiesta da inviare (come specificato nelle <a href="/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute">richieste</a>).</td>
243 | </tr>
244 | <tr>
245 | <td data-th="Trigger Config"><code>vars</code></td>
246 | <td data-th="Description">Un oggetto contenente le coppie chiave-valore usate per eseguire l’override delle <code>vars</code> definite nella configurazione di primo livello o per specificare <code>vars</code> univoche a questo trigger (vedi anche <a href="/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering">Ordinamento della sostituzione delle variabili</a>).</td>
247 | </tr>
248 | <tr>
249 | <td data-th="Trigger Config"><code>selector</code> (obbligatorio quando <code>on</code> è impostato su <code>click</code>)</td>
250 | <td data-th="Description">Un selettore CSS utilizzato per definire meglio quali elementi devono essere monitorati. Usa il valore <code>*</code> per monitorare tutti gli elementi. Questa configurazione viene utilizzata insieme al trigger <code>click</code>. Scopri come usare il selettore per <a href="/docs/guides/analytics/use_cases.html#tracking-page-clicks">monitorare i clic di pagina</a> e per le <a href="/docs/guides/analytics/use_cases.html#tracking-social-interactions">interazioni sui social</a>.</td>
251 | </tr>
252 | <tr>
253 | <td data-th="Trigger Config"><code>scrollSpec</code> (obbligatorio quando <code>on</code> è impostato su <code>scroll</code>)</td>
254 | <td data-th="Description">Controlla in base a quali condizioni viene attivato l’evento <code>scroll</code> quando l’utente scorre la pagina. Questo oggetto può contenere <code>verticalBoundaries</code> e <code>horizontalBoundaries</code>. Per l’attivazione di un evento <code>scroll</code> è necessaria almeno una delle due proprietà. I valori per entrambe le proprietà devono essere serie di numeri contenenti i limiti entro i quali viene generato un evento di scorrimento. Vedi questo esempio sul <a href="/docs/guides/analytics/use_cases.html#tracking-scrolling">monitoraggio dello scorrimento</a>.</td>
255 | </tr>
256 | <tr>
257 | <td data-th="Trigger Config"><code>timerSpec</code> (obbligatorio quando <code>on</code> è impostato su <code>timer</code>)</td>
258 | <td data-th="Description">Controlla quando viene attivato l’evento <code>timer</code>. Il timer si attiva immediatamente e successivamente a intervalli specifici. Questa configurazione viene utilizzata insieme al trigger <code>timer</code>.</td>
259 | </tr>
260 | </tbody>
261 | </table>
262 |
263 | **Importante:** i trigger di una configurazione con precedenza più bassa vengono ignorati
264 | dai trigger con lo stesso nome di una configurazione con una precedenza più alta
265 | (vedi [Ordinamento della sostituzione delle variabili](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
266 |
267 | ### Come vengono inviati i dati: attributo transport
268 |
269 | L’attributo `transport` specifica come inviare una richiesta.
270 | I seguenti tre metodi sono abilitati per impostazione predefinita:
271 |
272 | <table>
273 | <thead>
274 | <tr>
275 | <th data-th="Transport Method" class="col-thirty">Metodo di trasferimento</th>
276 | <th data-th="Description">Descrizione</th>
277 | </tr>
278 | </thead>
279 | <tbody>
280 | <tr>
281 | <td data-th="Transport Method"><code>beacon</code></td>
282 | <td data-th="Description">Indica che <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> può essere utilizzato per trasmettere la richiesta. Viene inviata una richiesta <code>POST</code>, completa di credenziali, con il corpo del testo vuoto.</td>
283 | </tr>
284 | <tr>
285 | <td data-th="Transport Method"><code>xhrpost</code></td>
286 | <td data-th="Description">Indica che <code>XMLHttpRequest</code> può essere utilizzato per trasmettere la richiesta. Viene inviata una richiesta <code>POST</code>, completa di credenziali, con il corpo del testo vuoto.</td>
287 | </tr>
288 | <tr>
289 | <td data-th="Transport Method"><code>image</code></td>
290 | <td data-th="Description">Indica che la richiesta può essere inviata generando un tag <code>Image</code>. Questo invia una richiesta <code>GET</code>.</td>
291 | </tr>
292 | </tbody>
293 | </table>
294 |
295 | Viene utilizzato solo un metodo di trasferimento
296 | ed è quello abilitato, consentito e disponibile
297 | con la precedenza più alta.
298 | La precedenza è `beacon` > `xhrpost` > `image`.
299 | Se l’agente utente del client non supporta un metodo,
300 | viene utilizzato il metodo successivo abilitato con la precedenza più alta.
301 |
302 | Include l’attributo `transport` nella configurazione
303 | solo se si desidera limitare le opzioni di trasferimento,
304 | in caso contrario si possono interrompere le richieste.
305 |
306 | Nell’esempio di seguito,
307 | `beacon` e `xhrpost` sono impostati su false,
308 | in modo tale da non essere utilizzati anche se hanno una precedenza più alta rispetto a `image`.
309 | Se l’agente utente del client supporta il metodo `image`,
310 | verrà utilizzato, in contrario non sarà inviata alcuna richiesta.
311 |
312 | [sourcecode:html]
313 | 'transport': {
314 | 'beacon': false,
315 | 'xhrpost': false,
316 | 'image': true
317 | }
318 | [/sourcecode]
319 |
320 | ## Ordinamento della sostituzione delle variabili
321 |
322 | AMP inserisce le variabili con i valori in ordine di precedenza:
323 |
324 | 1. Configurazioni remote (tramite `config`).
325 | 2. `vars` nidificate all’interno di un trigger in `triggers`.
326 | 3. `vars` al primo livello nidificate in `amp-analytics`.
327 | 4. Valori forniti dalla piattaforma.
328 |
329 | In questo esempio sono presenti una configurazione remota,
330 | variabili definite al primo livello, nei trigger e a livello della piattaforma:
331 |
332 | [sourcecode:html]
333 | <amp-analytics config="http://example.com/config.json">
334 | <script type="application/json">
335 | {
336 | "requests": {
337 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
338 | },
339 | "vars": {
340 | "account": "ABC123",
341 | "title": "Homepage"
342 | },
343 | "triggers": {
344 | "some-event": {
345 | "on": "visible",
346 | "request": "pageview",
347 | "vars": {
348 | "title": "My homepage",
349 | "clientId": "my user"
350 | }
351 | }
352 | }
353 | </script>
354 | </amp-analytics>
355 | [/sourcecode]
356 |
357 | Quando la stessa `var` è definita in più posizioni,
358 | l’ordine delle variabili di precedenza ne imposta il valore una volta.
359 | Pertanto, se la configurazione remota definiva `account` come UA-XXXXX-Y nell’esempio sopra,
360 | i valori delle diverse vars saranno come indicato di seguito:
361 |
362 | <table>
363 | <thead>
364 | <tr>
365 | <th data-th="var" class="col-thirty"><code>var</code></th>
366 | <th data-th="Value">Valore</th>
367 | <th data-th="Defined By" class="col-thirty">Definito da</th>
368 | </tr>
369 | </thead>
370 | <tbody>
371 | <tr>
372 | <td data-th="var"><code>canonicalUrl</code></td>
373 | <td data-th="Value"><code>http://example.com/path/to/the/page</code></td>
374 | <td data-th="Defined By">Piattaforma</td>
375 | </tr>
376 | <tr>
377 | <td data-th="var"><code>title</code></td>
378 | <td data-th="Value">My homepage</td>
379 | <td data-th="Defined By">Trigger</td>
380 | </tr>
381 | <tr>
382 | <td data-th="var"><code>account</code></td>
383 | <td data-th="Value"><code>UA-XXXXX-Y</code></td>
384 | <td data-th="Defined By">Configurazione remota</td>
385 | </tr>
386 | <tr>
387 | <td data-th="var"><code>clientId</code></td>
388 | <td data-th="Value">my user</td>
389 | <td data-th="Defined By">Trigger</td>
390 | </tr>
391 | </tbody>
392 | </table>
393 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: AMP Analytics dans le détail
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | Ce guide propose une analyse détaillée du
9 | [composant amp-analytics](/docs/reference/extended/amp-analytics.html),
10 | en divisant un exemple de configuration de la balise `amp-analytics` en quatre catégories principales :
11 |
12 | Le reste de ce guide utilise cet exemple de configuration
13 | qui effectue le suivi des vues de page et des clics des utilisateurs sur des liens,
14 | et envoie les données d'analyse à un fournisseur tiers,
15 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/):
16 |
17 | [sourcecode:html]
18 | <amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
19 | <script type="application/json">
20 | {
21 | "requests": {
22 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
23 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
24 | },
25 | "vars": {
26 | "account": "ABC123"
27 | },
28 | "extraUrlParams": {
29 | "cd1": "AMP"
30 | },
31 | "triggers": {
32 | "trackPageview": {
33 | "on": "visible",
34 | "request": "pageview"
35 | },
36 | "trackAnchorClicks": {
37 | "on": "click",
38 | "selector": "a",
39 | "request": "event",
40 | "vars": {
41 | "eventId": "42",
42 | "eventLabel": "clicked on a link"
43 | }
44 | }
45 | },
46 | 'transport': {
47 | 'beacon': false,
48 | 'xhrpost': false,
49 | 'image': true
50 | }
51 | }
52 | </script>
53 | </amp-analytics>
54 | [/sourcecode]
55 |
56 | **Remarque :** Le code illustré ci-dessus est fourni à titre d'exemple pour vous aider à apprendre, mais il ne constitue en rien un exemple réaliste. Si vous travaillez avec des fournisseurs de solutions d'analyse, il est probable que cet exemple n'ait pas de sens ; les configurations du fournisseur simplifieront les choses. Pour obtenir des exemples de configuration de votre fournisseur, consultez sa documentation.
57 |
58 | ## Où envoyer les données d'analyse : l'attribut type
59 |
60 | AMP est conçu pour prendre en charge deux modèles courants de collecte des données :
61 |
62 | * L'ingestion par un point d'extrémité appartenant à un éditeur pour les systèmes d'analyse interne
63 | * L'ingestion par un point d'extrémité appartenant à un fournisseur aux fins d'interopérabilité avec la solution du fournisseur
64 | (par exemple, [Adobe Analytics](https://helpx.adobe.com/marketing-cloud/analytics.html), [Chartbeat](http://support.chartbeat.com/docs/) ou encore [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/))
65 |
66 | Pour envoyer des données d'analyse à un fournisseur de solutions d'analyse,
67 | incluez l'attribut `type` dans la balise `amp-analytics`,
68 | et définissez sa valeur sur le fournisseur approprié, tel que défini dans la
69 | [spécification du composant amp-analytics](/docs/reference/extended/amp-analytics.html).
70 |
71 | Par exemple, `<amp-analytics type="googleanalytics">` envoie les données d'analyse
72 | au fournisseur de solutions d'analyse tiers Google Analytics.
73 | Pour envoyer les données à un point d'extrémité appartenant à l'éditeur,
74 | il vous suffit de ne pas inclure l'attribut `type` ;
75 | les données d'analyse sont envoyées aux points d'extrémité définis pour chaque
76 | [requête](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute).
77 |
78 | Les configurations des fournisseurs de solutions d'analyse constituent
79 | un bon point de départ pour commencer avec le composant `amp-analytics`.
80 | Pour en savoir plus, consultez la documentation et
81 | les ressources d'aide de votre fournisseur.
82 | Comme nous l'avons déjà indiqué,
83 | la liste des fournisseurs qui proposent déjà une intégration AMP ainsi que des liens
84 | vers leurs ressources respectives sont disponibles dans la
85 | [spécification du composant amp-analytics](/docs/reference/extended/amp-analytics.html).
86 |
87 | Si vous êtes un fournisseur de solutions d'analyse,
88 | découvrez comment
89 | [intégrer votre propre configuration d'analyse dans AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
90 |
91 | ## Charger une configuration distante : l'attribut config
92 |
93 | Il n'est pas nécessaire d'inclure toutes les configurations
94 | de `amp-analytics` dans votre page AMP.
95 | En lieu et place, vous pouvez appeler une URL distante
96 | pour tout ou partie des configurations.
97 |
98 | Cela vous permet entre autres de faire varier la configuration
99 | en fonction d'une requête spécifique.
100 | Si, en tant qu'éditeur, vous avez le contrôle du fichier distant,
101 | vous pouvez effectuer tout traitement nécessaire côté serveur
102 | pour créer les données de configuration.
103 |
104 | Pour charger les configurations distantes, la première étape consiste à
105 | inclure l'attribut config dans la balise `amp-analytics` :
106 |
107 | [sourcecode:html]
108 | <amp-analytics config="https://example.com/analytics.account.config.json">
109 | [/sourcecode]
110 |
111 | L'étape suivante consiste à créer le contenu JSON qui réside dans l'URL distante.
112 | Dans cet exemple simple,
113 | la configuration contenue dans l'objet JSON est juste la valeur de variable due compte d'analyse.
114 |
115 | Exemple de contenu dans `https://example.com/analytics.account.config.json` :
116 |
117 | [sourcecode:html]
118 | {
119 | "vars": {
120 | "account": "UA-XXXXX-Y" // Replace with your property ID.
121 | }
122 | }
123 | [/sourcecode]
124 |
125 | La dernière étape consiste à vous assurer que ce qui se trouve dans le fichier distant
126 | est inséré à l'endroit approprié dans la configuration de `amp-analytics`.
127 | Dans les requêtes `pageview` et `event` de cet exemple,
128 | la valeur de la variable `account` est automatiquement
129 | définie sur la valeur du compte indiqué dans l'URL distante (`"account": "UA-XXXXX-Y"`) :
130 |
131 | [sourcecode:html]
132 | "requests": {
133 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
134 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
135 | }
136 | [/sourcecode]
137 |
138 | **Important :** AMP ne valide pas les usages multiples d'une même variable.
139 | Les valeurs sont renseignées en fonction d'un ordre de préférence de substitution des variables,
140 | et les valeurs indiquées dans les URL distantes sont en première position
141 | (voir [Ordonnancement de la substitution des variables](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
142 |
143 | ## Les attributs requests, triggers et transport
144 |
145 | L'attribut `requests` détermine quelles données sont envoyées
146 | (par exemple `pageviews` ou `events`)
147 | et où ces données sont envoyées (les URL utilisées pour transmettre les données).
148 |
149 | L'attribut `triggers` indique à quel moment les données d'analyse doivent être envoyées,
150 | par exemple lorsqu'un utilisateur affiche une page ou clique sur un lien.
151 |
152 | L'attribut `transport` indique comment envoyer une requête,
153 | et plus spécifiquement le protocole.
154 |
155 | Lisez la suite pour en savoir plus sur ces configurations.
156 | (Vous pourrez également en apprendre davantage sur ces configurations dans la
157 | [référence sur amp-analytics](/docs/reference/extended/amp-analytics.html).)
158 |
159 | ### Quelles données sont envoyées : l'attribut requests
160 |
161 | La valeur `request-name` est utilisée dans la configuration du déclencheur pour déterminer
162 | quelle requête envoyer en réponse à un événement en particulier.
163 | La valeur `request-value` est une URL `https`.
164 | Ces valeurs peuvent inclure des jetons d'espace réservé
165 | pouvant renvoyer à d'autres requêtes ou variables.
166 |
167 | [sourcecode:html]
168 | "requests": {
169 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
170 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
171 | }
172 | [/sourcecode]
173 |
174 | Certains fournisseurs de solutions d'analyse (notamment Google Analytics)
175 | ont déjà fourni une configuration,
176 | que vous utilisez via l'attribut `type`.
177 | Si vous utilisez un fournisseur de solutions d'analyse,
178 | il se peut que vous n'ayez pas besoin d'inclure l'information `requests`.
179 | Reportez-vous à la documentation de votre fournisseur pour savoir
180 | si l'attribut `requests` doit être configuré et, le cas échéant, comment le configurer.
181 |
182 | #### Ajout d'une URL de requête : Attribut extraUrlParams
183 |
184 | L'attribut [extraUrlParams](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#extra-url-params)
185 | spécifie des paramètres additionnels à ajouter à la chaîne de requête de l'URL de requête via la convention usuelle « &foo=baz ».
186 |
187 | L'exemple `amp-analytics` ajoute un paramètre additionnel <code>cd1</code>
188 | à la requête et définit la valeur de ce paramètre sur « AMP » :
189 |
190 | [sourcecode:html]
191 | "extraUrlParams": {
192 | "cd1": "AMP"
193 | }
194 | [/sourcecode]
195 |
196 | ### Lorsque les données sont envoyées : l'attribut triggers
197 |
198 | L'attribut `triggers` indique le moment auquel une requête d'analyse doit être envoyée.
199 | Il contient une paire clé/valeur précisant le nom et la configuration du déclencheur.
200 | Le nom du déclencheur peut être n'importe quelle chaîne composée
201 | de caractères alphanumériques (a-zA-Z0-9).
202 |
203 | Par exemple,
204 | le composant `amp-analytics` suivant est configuré pour envoyer une requête à
205 | `https://example.com/analytics` lorsque le document est chargé pour la première fois
206 | et à chaque fois que l'on clique sur la balise `a` :
207 |
208 | [sourcecode:html]
209 | "triggers": {
210 | "trackPageview": {
211 | "on": "visible",
212 | "request": "pageview"
213 | },
214 | "trackAnchorClicks": {
215 | "on": "click",
216 | "selector": "a",
217 | "request": "event",
218 | "vars": {
219 | "eventId": "42",
220 | "eventLabel": "clicked on a link"
221 | }
222 | }
223 | }
224 | [/sourcecode]
225 |
226 | AMP prend en charge les configurations suivantes pour le déclencheur :
227 |
228 | <table>
229 | <thead>
230 | <tr>
231 | <th data-th="Trigger Config" class="col-thirty">Configuration du déclencheur</th>
232 | <th data-th="Description">Description</th>
233 | </tr>
234 | </thead>
235 | <tbody>
236 | <tr>
237 | <td data-th="Trigger Config"><code>on</code> (obligatoire)</td>
238 | <td data-th="Description">Événement à écouter. Les valeurs valides sont <code>click</code>, <code>scroll</code>, <code>timer</code> et <code>visible</code>.</td>
239 | </tr>
240 | <tr>
241 | <td data-th="Trigger Config"><code>request</code> (obligatoire)</td>
242 | <td data-th="Description">Nom de la requête à envoyer (tel que spécifié dans les requêtes <a href="/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute"></a>).</td>
243 | </tr>
244 | <tr>
245 | <td data-th="Trigger Config"><code>vars</code></td>
246 | <td data-th="Description">Objet contenant des paires clé/valeur utilisé pour remplacer la valeur <code>vars</code> dans la configuration de premier niveau ou pour spécifier une valeur <code>vars</code> unique à ce déclencheur (voir également <a href="/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering">Ordonnancement de la substitution des variables</a>).</td>
247 | </tr>
248 | <tr>
249 | <td data-th="Trigger Config"><code>selector</code> (obligatoire lorsque <code>on</code> est défini sur <code>click</code>)</td>
250 | <td data-th="Description">Sélecteur CSS utilisé pour définir plus précisément les éléments à suivre. Utilisez la valeur <code>*</code> pour suivre tous les éléments. Cette configuration est utilisée conjointement avec le déclencheur <code>click</code>. Découvrez comment utiliser le sélecteur pour <a href="/docs/guides/analytics/use_cases.html#tracking-page-clicks">suivre les clics sur une page</a> et les <a href="/docs/guides/analytics/use_cases.html#tracking-social-interactions">interactions sociales</a>.</td>
251 | </tr>
252 | <tr>
253 | <td data-th="Trigger Config"><code>scrollSpec</code> (obligatoire lorsque <code>on</code> est défini sur <code>scroll</code>)</td>
254 | <td data-th="Description">Définit les conditions en fonction desquelles l'événement <code>scroll</code> est déclenché lorsque l'on fait défiler la page. Cet objet peut contenir les propriétés <code>verticalBoundaries</code> et <code>horizontalBoundaries</code>. Au moins l'une des deux propriétés est obligatoire pour qu'un événement <code>scroll</code> soit déclenché. Les valeurs de chacune des propriétés doivent être des ensembles de nombres contenant les limites pour lesquelles un événement scroll est généré. Voir cet exemple sur le <a href="/docs/guides/analytics/use_cases.html#tracking-scrolling">suivi du défilement</a>.</td>
255 | </tr>
256 | <tr>
257 | <td data-th="Trigger Config"><code>timerSpec</code> (obligatoire lorsque <code>on</code> est défini sur <code>timer</code>)</td>
258 | <td data-th="Description">Définit les conditions en fonction desquelles l'événement <code>timer</code> est déclenché. L'événement timer est déclenché immédiatement, puis à un intervalle spécifié. Cette configuration est utilisée conjointement avec le déclencheur <code>timer</code>.</td>
259 | </tr>
260 | </tbody>
261 | </table>
262 |
263 | **Important :** Les déclencheurs d'une configuration dont la priorité est inférieure sont annulés
264 | par les déclencheurs du même nom dont la priorité est supérieure
265 | (voir [Ordonnancement de la substitution des variables](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
266 |
267 | ### Comment les données sont envoyées : l'attribut transport
268 |
269 | L'attribut `transport` indique comment envoyer une requête.
270 | Les trois modes suivants sont activés par défaut :
271 |
272 | <table>
273 | <thead>
274 | <tr>
275 | <th data-th="Transport Method" class="col-thirty">Mode de transport</th>
276 | <th data-th="Description">Description</th>
277 | </tr>
278 | </thead>
279 | <tbody>
280 | <tr>
281 | <td data-th="Transport Method"><code>beacon</code></td>
282 | <td data-th="Description">Indique qu'il est possible d'utiliser <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> pour transmettre la requête. Cela envoie une requête <code>POST</code> avec des identifiants et une section body vide.</td>
283 | </tr>
284 | <tr>
285 | <td data-th="Transport Method"><code>xhrpost</code></td>
286 | <td data-th="Description">Indique qu'il est possible d'utiliser <code>XMLHttpRequest</code> pour transmettre la requête. Cela envoie une requête <code>POST</code> avec des identifiants et une section body vide.</td>
287 | </tr>
288 | <tr>
289 | <td data-th="Transport Method"><code>image</code></td>
290 | <td data-th="Description">Indique que la requête peut être envoyée en générant une balise <code>Image</code>. Cela envoie une requête <code>GET</code>.</td>
291 | </tr>
292 | </tbody>
293 | </table>
294 |
295 | Un seul mode de transport est utilisé :
296 | celui qui est activé, autorisé, disponible
297 | et dont la priorité est la plus haute.
298 | La priorité est `beacon` > `xhrpost` > `image`.
299 | Si l'user-agent du client ne prend pas en charge un mode,
300 | c'est le mode suivant dans l'ordre de priorité qui est utilisé.
301 |
302 | N'incluez l'attribut `transport` dans votre configuration
303 | que si vous souhaitez limiter les options de transport.
304 | Vous risquez sinon d'arrêter les requêtes.
305 |
306 | Dans l'exemple ci-dessous,
307 | `beacon` et `xhrpost` sont définis sur false.
308 | Ils ne seront donc pas utilisés même si leur priorité est supérieure à celle du mode `image`.
309 | Si l'user-agent du client prend en charge le mode `image`,
310 | il sera utilisé. Sinon, aucune requête n'est envoyée.
311 |
312 | [sourcecode:html]
313 | 'transport': {
314 | 'beacon': false,
315 | 'xhrpost': false,
316 | 'image': true
317 | }
318 | [/sourcecode]
319 |
320 | ## Ordonnancement de la substitution des variables
321 |
322 | AMP renseigne les valeurs des variables dans l'ordre de priorité suivant :
323 |
324 | 1. Configurations distantes (via `config`).
325 | 2. `vars` imbriqué dans un déclencheur dans `triggers`.
326 | 3. `vars` au niveau supérieur imbriqué dans `amp-analytics`.
327 | 4. Valeurs fournies par la plateforme.
328 |
329 | Dans cet exemple, nous avons une configuration distante,
330 | des variables définies au niveau supérieur dans triggers et des valeurs au niveau de la plateforme :
331 |
332 | [sourcecode:html]
333 | <amp-analytics config="http://example.com/config.json">
334 | <script type="application/json">
335 | {
336 | "requests": {
337 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
338 | },
339 | "vars": {
340 | "account": "ABC123",
341 | "title": "Homepage"
342 | },
343 | "triggers": {
344 | "some-event": {
345 | "on": "visible",
346 | "request": "pageview",
347 | "vars": {
348 | "title": "My homepage",
349 | "clientId": "my user"
350 | }
351 | }
352 | }
353 | </script>
354 | </amp-analytics>
355 | [/sourcecode]
356 |
357 | Lorsque le même `var` est défini à plusieurs endroits,
358 | l'ordre de priorité de la variable définit sa valeur une fois.
359 | Ainsi, si la configuration distante définit `account` sur UA-XXXXX-Y, comme dans l'exemple ci-dessus,
360 | les valeurs des différentes occurrences de vars sont les suivantes :
361 |
362 | <table>
363 | <thead>
364 | <tr>
365 | <th data-th="var" class="col-thirty"><code>var</code></th>
366 | <th data-th="Value">Valeur</th>
367 | <th data-th="Defined By" class="col-thirty">Défini par</th>
368 | </tr>
369 | </thead>
370 | <tbody>
371 | <tr>
372 | <td data-th="var"><code>canonicalUrl</code></td>
373 | <td data-th="Value"><code>http://example.com/path/to/the/page</code></td>
374 | <td data-th="Defined By">Plateforme</td>
375 | </tr>
376 | <tr>
377 | <td data-th="var"><code>title</code></td>
378 | <td data-th="Value">My homepage</td>
379 | <td data-th="Defined By">Déclencheur</td>
380 | </tr>
381 | <tr>
382 | <td data-th="var"><code>account</code></td>
383 | <td data-th="Value"><code>UA-XXXXX-Y</code></td>
384 | <td data-th="Defined By">Configuration distante</td>
385 | </tr>
386 | <tr>
387 | <td data-th="var"><code>clientId</code></td>
388 | <td data-th="Value">my user</td>
389 | <td data-th="Defined By">Déclencheur</td>
390 | </tr>
391 | </tbody>
392 | </table>
393 |
```
--------------------------------------------------------------------------------
/content/latest/blog/why-amp-caches-exist.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | class: post-blog post-detail
3 | type: Blog
4 | $title: Why AMP Caches exist
5 | id: why-amp-caches-exist
6 | author: Paul Bakaus
7 | role: AMP Developer Advocate, Google
8 | origin: "https://amphtml.wordpress.com/2017/01/13/why-amp-caches-exist/amp/"
9 | excerpt: "The following was posted on Medium by Paul Bakaus, AMP Developer Advocate, Google. Caches are a fundamental piece of the Accelerated Mobile Pages (AMP) Project, yet one of the most misunderstood components. Every day, developers ask us why they can’t just get their AMP pages onto some AMP surfaces (e.g. Google) without linking through the […]"
10 | avatar: https://www.gravatar.com/avatar/9a2d68554d8d1655a3fb3e2a50aee909
11 | date_data: 2017-01-13T12:19:43-08:00
12 | $date: January 13, 2017
13 | $parent: /content/latest/list-blog.html
14 |
15 | components:
16 | - social-share
17 | ---
18 |
19 | <div class="amp-wp-article-content">
20 | <p><em>The following was <a href="https://medium.com/@pbakaus/why-amp-caches-exist-cd7938da2456#.u99e695t5" target="_blank">posted on Medium</a> by Paul Bakaus, AMP Developer Advocate, Google.</em></p>
21 | <p><span style="font-weight:400;">Caches are a fundamental piece of the Accelerated Mobile Pages (AMP) Project, yet one of the most misunderstood components. Every day, developers ask us why they can’t just get their AMP pages onto some AMP surfaces (e.g. Google) without linking through the cache. Some worry about the cache model breaking the origin model of the web, others worry about analytics attribution and canonical link sharing, and even others worry about their pages being hosted on servers out of their control. Let’s look at all of these, and understand why the caches exist.</span></p>
22 | <p><span style="font-weight:400;">While AMP Caches introduce some trade-offs, they do work in the user’s favor to ensure a consistently fast and user-friendly experience. The caches are designed to:</span></p>
23 | <ul>
24 | <li style="font-weight:400;"><span style="font-weight:400;">Ensure that all AMP pages are actually valid AMP.</span></li>
25 | <li style="font-weight:400;"><span style="font-weight:400;">Allow AMP pages to be preloaded efficiently and safely.</span></li>
26 | <li style="font-weight:400;"><span style="font-weight:400;">Do a myriad of additional user-beneficial performance optimizations to content.</span></li>
27 | </ul>
28 | <p><span style="font-weight:400;">But first:</span></p>
29 | <h2><span style="font-weight:400;">The Basics: Analytics attribution and link sharing</span></h2>
30 | <p><span style="font-weight:400;">Even though the AMP Cache model doesn’t follow the </span><a href="https://tools.ietf.org/html/rfc6454"><span style="font-weight:400;">origin model</span></a><span style="font-weight:400;"> (serving your page from your own domain), we attribute all traffic to you, the publisher. Through the </span><a href="https://www.ampproject.org/docs/reference/components/amp-analytics"><span style="font-weight:400;"><amp-analytics></span></a><span style="font-weight:400;"> tag, AMP supports a growing number of analytics providers (</span><a href="https://www.ampproject.org/docs/reference/components/amp-analytics#analytics-vendors"><span style="font-weight:400;">26 to date</span></a> and growing<span style="font-weight:400;">!), to make sure you can measure your success and the traffic is correctly attributed.</span></p>
31 | <p><span style="font-weight:400;">When I ask users and developers about why they want to “click-through” to the canonical page from a cached AMP result, the answer is often about link sharing. And granted, it’s annoying to copy a google.com URL instead of the canonical URL. However, the issue isn’t as large of a problem as you’d think: Google amends its cached AMP search results with Schema.org and OpenGraph metadata, so posting the link to any platform that honors these should result in the canonical URL being shared. That being said, there are more opportunities to improve the sharing flow. In native web-views, one could share the canonical directly if the app supports it, and, based on users’ feedback, the team at Google is working on enabling easy access to the canonical URL on all its surfaces.</span></p>
32 | <p><span style="font-weight:400;">With these cleared up, let’s dig a little deeper.</span></p>
33 | <h2><span style="font-weight:400;">When the label says AMP, you get AMP</span></h2>
34 | <p><span style="font-weight:400;">The AMP Project consists of an ecosystem that depends on strict validation, ensuring that very high performance and quality bars are met. One version of a validator can be used during development, but the AMP Cache ensures the validity at the last stage, when presenting content to the user.</span></p>
35 | <p><span style="font-weight:400;">When an AMP page is requested from an AMP Cache for the first time, said cache validates the document first, and won’t offer it to the user if it detects problems. Platforms integrating with AMP (e.g. Bing, Pinterest, Google) can choose to send traffic directly to the AMP page on the origin or optionally to an AMP Cache, but validity can only be guaranteed when served from the cache. </span><b>It ensures that when users see the AMP label, they’ll almost always get a fast and user friendly experience</b><span style="font-weight:400;">. (Unless you find a way to make a slow-but-valid AMP page, which is hard, but not impossible… I’m looking at you, big web fonts).</span></p>
36 | <h2><span style="font-weight:400;">Pre-rendering is a bigger deal than you think</span></h2>
37 | <p><span style="font-weight:400;">If you take anything away from this post, it’s that pre-rendering, especially the variant in AMP, greatly outweighs any speed gains you could theoretically get by hosting directly from an origin server. Even if the origin server is closer to your users, which would shave off a few milliseconds — rare but possible — pre-rendering will almost certainly drive the most impact.</span></p>
38 | <h3><span style="font-weight:400;">Perceived as much faster</span></h3>
39 | <p><span style="font-weight:400;">In fact, pre-rendering can often save you seconds, not milliseconds. The impact of pre-rendering, as opposed to the various other performance optimizations in the AMP JS library, can be pretty dramatic, and contributes largely to the “instant-feel” experience.</span></p>
40 | <h2><img data-attachment-id="919" data-permalink="https://amphtml.wordpress.com/2017/01/13/why-amp-caches-exist/cache_post/" data-orig-file="https://amphtml.files.wordpress.com/2017/01/cache_post.png?w=660" data-orig-size="633,218" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="cache_post" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/01/cache_post.png?w=660?w=300" data-large-file="https://amphtml.files.wordpress.com/2017/01/cache_post.png?w=660?w=633" class="alignnone size-full wp-image-919" src="https://amphtml.files.wordpress.com/2017/01/cache_post.png?w=660" alt="cache_post" srcset="https://amphtml.files.wordpress.com/2017/01/cache_post.png 633w, https://amphtml.files.wordpress.com/2017/01/cache_post.png?w=150 150w, https://amphtml.files.wordpress.com/2017/01/cache_post.png?w=300 300w" sizes="(max-width: 633px) 100vw, 633px" /></h2>
41 | <h3><span style="font-weight:400;">Very efficient compared to full pre-rendering</span></h3>
42 | <p><span style="font-weight:400;">If that was the whole story, we could just as easily pre-render AMP pages from their origin servers. If we did, we couldn’t guarantee that a page is valid AMP on the origin, and valid AMP is critically important for the custom pre-rendering the AMP JS library provides: Pre-rendering in AMP, as opposed to just pre-rendering an entire page through something like </span><a href="https://en.wikipedia.org/wiki/Link_prefetching"><span style="font-weight:400;">link prefetching</span></a><span style="font-weight:400;">, also limits the use of the users’ bandwidth, CPU and battery!</span></p>
43 | <p><span style="font-weight:400;">Valid AMP documents behave “cooperatively” during the pre-render stage: Only assets in the first viewport get preloaded, and no third-party scripts get executed. This results in a much cheaper, less bandwidth and CPU-intensive preload, allowing platforms to prerender not just the first, but a few of the AMP pages a user will likely click on.</span></p>
44 | <h3><span style="font-weight:400;">Safe to embed</span></h3>
45 | <p><span style="font-weight:400;">Because AMP Caches can’t rely on browser pre-rendering (see the section above), normal navigation from page to page doesn’t work. So in the AMP caching model, a page needs to be opened inline on a platform page. AMP Caches ensure that the requested AMP page can do that safely:</span></p>
46 | <ul>
47 | <li style="font-weight:400;"><span style="font-weight:400;">Validator ensures no </span><a href="https://en.wikipedia.org/wiki/Cross-site_scripting"><span style="font-weight:400;">Cross-Site Scripting</span></a><span style="font-weight:400;"> (XSS) in main document.</span></li>
48 | <li style="font-weight:400;"><span style="font-weight:400;">On top of the validator, the AMP Cache parses and then re-serializes the document in an unambiguous fashion (this means that it does not rely on HTML5 error correction). This ensures that browser parsing bugs and differences cannot lead to XSS.</span></li>
49 | <li style="font-weight:400;"><span style="font-weight:400;">The cache applies a </span><a href="https://developer.chrome.com/extensions/contentSecurityPolicy"><span style="font-weight:400;">Content Security Policy</span></a><span style="font-weight:400;"> (CSP). This provides additional defense-in-depth against XSS attacks.</span></li>
50 | </ul>
51 | <h3><span style="font-weight:400;">Additional privacy</span></h3>
52 | <p><span style="font-weight:400;">In addition, the AMP Caches remove one important potential privacy issue from the pre-render: When you do a search on a content platform preloading AMP pages on the result page, none of the preloaded AMP pages will ever know about the fact that they’ve been preloaded.</span></p>
53 | <p><span style="font-weight:400;">Think about it this way: Say I search for “breakfast burrito”. If you know me well, you know I obviously searched for </span><a href="https://www.youtube.com/watch?v=prPjpwsGiws"><span style="font-weight:400;">Parry Gripp’s song</span></a><span style="font-weight:400;"> with the same name. But the search result page also shows me a couple of AMP search results from fast food chains that sell actual breakfast burritos. For the next month, I wouldn’t want to see actual breakfast burritos everywhere even though I didn’t click on these links (even though…maybe I do…mhh..), and an advertiser wouldn’t want to waste dollars on me for pointless re-marketing ads on all the burritos. Since AMP hides the preload from the publisher of the AMP page and related third parties, it’s a win win scenario for users and advertisers.</span></p>
54 | <h2><span style="font-weight:400;">Auto-optimizations that often result in dramatic speed increase</span></h2>
55 | <p><span style="font-weight:400;">The AMP Cache started out with all of the above, but has since added a number of transformative transformations (heh) to its feature roster. Among those optimizations:</span></p>
56 | <ul>
57 | <li style="font-weight:400;"><span style="font-weight:400;">Consistent, fast and free content delivery network for all content (not just big publishers).</span></li>
58 | <li style="font-weight:400;"><span style="font-weight:400;">Optimizes HTML through measures such as bringing scripts into the ideal order, removing duplicate script tags and removing unnecessary quotes and whitespace.</span></li>
59 | <li style="font-weight:400;"><span style="font-weight:400;">Rewrites JavaScript URLs to have infinite cache time.</span></li>
60 | <li style="font-weight:400;"><a href="https://developers.googleblog.com/2017/01/google-amp-cache-amp-lite-and-need-for.html"><span style="font-weight:400;">Optimizes images</span></a><span style="font-weight:400;"> (a 40% average bandwidth improvement!)</span></li>
61 | </ul>
62 | <p><span style="font-weight:400;">On the image compression side alone, Google, through its cache, is doing lossless (without </span><i><span style="font-weight:400;">any</span></i><span style="font-weight:400;"> visual change, e.g. removes EXIF data) and lossy (without </span><i><span style="font-weight:400;">noticeable</span></i><span style="font-weight:400;"> visual change) compression. In addition, it converts images to WebP for browsers that support it and automatically generates srcset attributes (so-called responsive images) if they’re not already available, generating and showing correctly sized images to each device. </span></p>
63 | <h2><span style="font-weight:400;">Isn’t there a better way of doing this?</span></h2>
64 | <p><span style="font-weight:400;">Look, I hear you. The provider of an AMP Cache is mirroring your content. It’s an important role and comes with great responsibility. If the cache provider were to do something truly stupid, like inserting obnoxious ads into every AMP page, AMP would stop being a viable solution for publishers, and thus wither away.</span></p>
65 | <p><span style="font-weight:400;">Remember, AMP has been created together with publishers, as a means to make the mobile web better for publishers, users and platforms. It’s why the AMP team has released </span><a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md"><span style="font-weight:400;">strict guidelines</span></a><span style="font-weight:400;"> for AMP Caches. To give you two interesting excerpts, the guidelines state that your content needs to provide “a faithful visual and UX reproduction of source document”, and cache providers must pledge that they will keep URLs working indefinitely, even after the cache itself may be decommissioned. These, and many more rules, ensure that a cache doesn’t mess with your content.</span></p>
66 | <p><span style="font-weight:400;">Most importantly, there’s plenty of room for more than one AMP Cache – in fact, Cloudflare </span><a href="https://blog.cloudflare.com/accelerated-mobile/"><span style="font-weight:400;">just announced</span></a><span style="font-weight:400;"> their own! With these </span><a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md"><span style="font-weight:400;">AMP Cache guidelines</span></a><span style="font-weight:400;"> released, other infrastructure companies are welcome to create new AMP Caches, as long as they follow the rules. It’s then up to the platform integrating AMP to pick their favorite cache.</span></p>
67 | <h2><span style="font-weight:400;">From cache to web standards?</span></h2>
68 | <p><span style="font-weight:400;">You just read about all the wins and trade-offs the AMP Caches do to provide an instant-feeling, and user friendly mobile web experience. What if we could get to many of the same awesome optimizations without the trade-offs, and without involving a cache at all?</span></p>
69 | <p><span style="font-weight:400;">Personally, I dream of future, still-to-be-invented web standards that would allow us to get there – to move beyond cache models (like a static layout system to know how a page will look like before any assets are loaded). </span></p>
70 | <p><span style="font-weight:400;">In 2016, we’ve done our first baby steps with the </span><a href="https://timkadlec.com/2016/02/a-standardized-alternative-to-amp/"><span style="font-weight:400;">CPP</span></a><span style="font-weight:400;">, which turned into the </span><a href="https://github.com/WICG/feature-policy"><span style="font-weight:400;">Feature Policy</span></a><span style="font-weight:400;">: A way of saying things like “I disallow document.write on my site, and any third parties in any iframes that get loaded”. More advanced concepts like static layouting and safe prerendering require far-fetching changes to the web platform, but hey – just like forward time travel, it’s not impossible, just very, very difficult <img src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f642.png" alt="🙂" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span></p>
71 | <p><span style="font-weight:400;">Join me in figuring this out by getting in touch on </span><a href="https://twitter.com/pbakaus"><span style="font-weight:400;">Twitter</span></a><span style="font-weight:400;"> or </span><a href="https://docs.google.com/a/google.com/forms/d/e/1FAIpQLSd83J2IZA6cdR6jPwABGsJE8YL4pkypAbKMGgUZZriU7Qu6Tg/viewform?fbzx=4406980310789882877"><span style="font-weight:400;">Slack</span></a><span style="font-weight:400;">, and know that I’ll always have an open ear for your questions, ideas and concerns. Onwards!</span></p>
72 | <p></p><br /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/amphtml.wordpress.com/910/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/amphtml.wordpress.com/910/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=amphtml.wordpress.com&blog=102788268&post=910&subd=amphtml&ref=&feed=1" width="1" height="1" />
73 | </div>
74 |
75 |
```