This is page 17 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: Analytics: i concetti di base
3 | toc: true
4 | ---
5 |
6 | Inizia da qui per approfondire i concetti di base dell’analisi AMP.
7 |
8 | [TOC]
9 |
10 | ## È meglio utilizzare amp-pixel o amp-analytics?
11 |
12 | AMP offre due componenti per soddisfare le esigenze relative all’analisi e alla valutazione:
13 | [amp-pixel](/docs/reference/amp-pixel.html) e
14 | [amp-analytics](/docs/reference/extended/amp-analytics.html).
15 | Entrambe le opzioni inviano dati di analisi a un endpoint predefinito.
16 |
17 | Se sei alla ricerca di un comportamento simile a quello di un semplice
18 | [pixel di tracciamento](https://en.wikipedia.org/wiki/Web_beacon#Implementation),
19 | il componente `amp-pixel` offre il monitoraggio della visualizzazione di pagina di base
20 | e l’invio dei dati sulle visualizzazioni a un URL specifico.
21 | Alcune integrazioni con i fornitori possono richiedere questo componente,
22 | in tal caso viene specificato l’esatto endpoint dell’URL.
23 |
24 | Per la maggior parte delle soluzioni di analisi puoi usare `amp-analytics`.
25 | Il monitoraggio della visualizzazione di pagina funziona anche in `amp-analytics`.
26 | Tuttavia, puoi anche monitorare il coinvolgimento dell’utente con qualsiasi tipo di contenuto di pagina,
27 | compresi i clic sui link e i pulsanti.
28 | Inoltre, puoi determinare di quanto è avanzato l’utente con lo scorrimento della pagina,
29 | se l’utente è impegnato o meno sui social media e tanto altro ancora
30 | (vedi
31 | [Immersione nel mondo di AMP Analytics](/docs/guides/analytics/deep_dive_analytics.html)).
32 |
33 | Nell’ambito dell’integrazione con la piattaforma AMP,
34 | i fornitori hanno offerto configurazioni `amp-analytics` predefinite
35 | per agevolare l’acquisizione di dati e l’invio ai rispettivi strumenti di monitoraggio.
36 | Puoi accedere alla documentazione dei fornitori dalla
37 | [specifica amp-analytics](/docs/reference/extended/amp-analytics.html).
38 |
39 | Nelle tue pagine puoi usare sia `amp-pixel` che `amp-analytics`:
40 | usa `amp-pixel` per il semplice monitoraggio delle visualizzazioni della pagina
41 | e `amp-analytics` per tutto il resto.
42 | Puoi anche aggiungere multipli di ogni tag.
43 | Se collabori con più fornitori di soluzioni di analisi,
44 | avrai bisogno di un tag per soluzione.
45 | Tieni presente che le pagine AMP più semplici sono migliori per gli utenti,
46 | pertanto se non hai necessità di tag extra, non usarli.
47 |
48 | ## Crea una configurazione di analisi semplice
49 |
50 | Scopri come creare una configurazione
51 | [amp-pixel](/docs/reference/amp-pixel.html) e
52 | [amp-analytics](/docs/reference/extended/amp-analytics.html) semplice.
53 |
54 | ### Configurazione amp-pixel semplice
55 |
56 | Per creare una configurazione `amp-pixel` semplice,
57 | inserisci qualcosa di simile alla seguente istruzione nel corpo della tua pagina AMP:
58 |
59 | [sourcecode:html]
60 | <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
61 | [/sourcecode]
62 |
63 | In questo esempio,
64 | i dati di visualizzazione di pagina vengono inviati all’URL definito, unitamente a un numero casuale.
65 | La variabile `RANDOM` è una delle tante
66 | [variabili di sostituzione della piattaforma AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md).
67 | Per ulteriori informazioni sulla
68 | [Sostituzione delle variabili](/docs/guides/analytics/analytics_basics.html#variable-substitution) vai qui.
69 |
70 | Il componente [amp-pixel](/docs/reference/amp-pixel.html)
71 | è incorporato,
72 | pertanto non avrai necessità di una dichiarazione di inclusione come
73 | nel caso dei componenti estesi di AMP, tra cui `amp-analytics`.
74 | Tuttavia, dovresti posizionare il tag `amp-pixel` il più vicino possibile
75 | all’inizio di `<body>`.
76 | Il pixel di tracciamento si attiva solo quando si rende visibile il tag stesso.
77 | È possibile che `amp-pixel` non si attivi se è posizionato vicino
78 | alla parte finale della pagina.
79 |
80 | ### Configurazione amp-analytics semplice
81 |
82 | Per cerare una configurazione
83 | [amp-analytics](/docs/reference/extended/amp-analytics.html) semplice,
84 | devi prima includere questa dichiarazione `custom-element`
85 | nell’`<head>` del documento AMP (vedi anche
86 | [Dichiarazione di inclusione del componente](/docs/reference/extended.html#component-inclusion-declaration)):
87 |
88 | [sourcecode:html]
89 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
90 | [/sourcecode]
91 |
92 | Il seguente esempio è simile all’[esempio `amp-pixel`](/docs/guides/analytics/analytics_basics.html#simple-amp-pixel-configuration).
93 | Ogni volta che una pagina è visibile,
94 | l’evento di attivazione si attiva e
95 | invia i dati sulla visualizzazione di pagina a un URL specifico unitamente a un ID casuale:
96 |
97 | [sourcecode:html]
98 | <amp-analytics>
99 | <script type="application/json">
100 | {
101 | "requests": {
102 | "pageview": "https://foo.com/pixel?RANDOM",
103 | },
104 | "triggers": {
105 | "trackPageview": {
106 | "on": "visible",
107 | "request": "pageview"
108 | }
109 | }
110 | }
111 | </script>
112 | </amp-analytics>
113 | [/sourcecode]
114 |
115 | Nell’esempio sopra abbiamo definito una richiesta denominata pageview in modo che fosse https://foo.com/pixel?RANDOM. Come precedentemente indicato, RANDOM viene sostituito da un numero casuale, pertanto la richiesta finirà per avere il seguente aspetto https://foo.com/pixel?0.23479283687235653498734.
116 |
117 | Quando la pagina diventa visibile
118 | (come specificato dall’uso della parola chiave di attivazione `visible`),
119 | si attiva un evento e viene inviata la richiesta `pageview`.
120 | Gli attributi di attivazione determinano il momento in cui viene attivata la richiesta pageview.
121 | Ottieni ulteriori informazioni su [richieste e attivazioni](/docs/guides/analytics/deep_dive_analytics.html#requests-triggers--transports).
122 |
123 | ## Sostituzione delle variabili
124 |
125 | Entrambi i componenti [amp-pixel](/docs/reference/amp-pixel.html) e
126 | [amp-analytics](/docs/reference/extended/amp-analytics.html)
127 | consentono tutte le sostituzioni di variabili URL standard (vedi
128 | [Sostituzioni di variabili HTML AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md)).
129 | Nel seguente esempio,
130 | la richiesta di visualizzazione di pagina viene inviata all’URL,
131 | unitamente all’attuale URL canonico del documento AMP, al relativo titolo e a un
132 | [ID client](/docs/guides/analytics/analytics_basics.html#user-identification):
133 |
134 | [sourcecode:html]
135 | <amp-pixel src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"></amp-pixel>
136 | [/sourcecode]
137 |
138 | Grazie alla sua semplicità,
139 | il tag `amp-pixel` può includere solo le variabili definite dalla piattaforma
140 | o che la fase di runtime di AMP può analizzare dalla pagina AMP.
141 | Nell’esempio sopra,
142 | la piattaforma inserisce i valori sia per
143 | `canonicalURL` che per `clientId(site-user-id)`.
144 | Il tag `amp-analytics` può includere le stesse variabili di `amp-pixel`,
145 | nonché variabili definite in modo univoco all’interno della configurazione dei tag.
146 |
147 | Usa il formato `${varName}` in una stringa di richiesta per una variabile
148 | definita da pagina o piattaforma.
149 | Il `amp-analytics` tag sostituirà il modello con il suo valore effettivo
150 | al momento della creazione della richiesta di analisi (vedi anche
151 | [Variabili supportate in amp-analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md)).
152 |
153 | Nel seguente esempio di `amp-analytics`,
154 | la richiesta di visualizzazione di pagina viene inviata all’URL,
155 | con ulteriori dati estratti dalle sostituzioni delle variabili,
156 | alcuni forniti dalla piattaforma,
157 | altri definiti nella parte incorporata,
158 | nell’ambito della configurazione `amp-analytics`:
159 |
160 | [sourcecode:html]
161 | <amp-analytics>
162 | <script type="application/json">
163 | {
164 | "requests": {
165 | "pageview":"https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}",
166 | },
167 | "vars": {
168 | "account": "ABC123",
169 | },
170 | "triggers": {
171 | "someEvent": {
172 | "on": "visible",
173 | "request": "pageview",
174 | "vars": {
175 | "title": "My homepage",
176 | }
177 | }
178 | }
179 | }
180 | </script>
181 | </amp-analytics>
182 | [/sourcecode]
183 |
184 | Nell’esempio sopra,
185 | le variabili `account` e `title` sono definite
186 | nella configurazione `amp-analytics`.
187 | Le variabili `canonicalUrl` e `clientId` non sono definite nella configurazione,
188 | pertanto i rispettivi valori vengono sostituiti dalla piattaforma.
189 |
190 | **Importante** La sostituzione delle variabili è flessibile,
191 | le stesse variabili possono essere definite in diverse posizioni
192 | e la fase di runtime di AMP analizzerà i valori in questo ordine di precedenza
193 | (vedi [Ordinamento della sostituzione delle variabili](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
194 |
195 | ## Identificazione dell’utente
196 |
197 | I siti web usano i cookie per memorizzare le informazioni specifiche di un utente nel browser.
198 | I cookie possono essere usati per indicare che un utente ha già visitato prima un sito.
199 | In AMP,
200 | le pagine possono essere distribuite dal sito web di un publisher o tramite una cache
201 | (come la Google AMP Cache).
202 | È probabile che il sito web del publisher e la cache abbiano domini diversi.
203 | Per motivi di sicurezza,
204 | i browser possono limitare l’accesso ai cookie di un altro dominio e spesso agiscono in tal senso
205 | (vedi anche
206 | [Monitoraggio degli utenti da diversi punti di origine](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/cross-origin-tracking.md)).
207 |
208 | Per impostazione predefinita,
209 | AMP gestisce l’assegnazione di un ID client sia nel caso di accesso alla pagina dal sito web originale dell’editore che tramite una cache.
210 | L’ID client generato da AMP ha un valore di `"amp-"`
211 | seguito da una stringa codificata `base64` casuale e resta lo stesso
212 | per l’utente se lo stesso utente visita di nuovo la pagina.
213 |
214 | AMP gestisce la lettura e la scrittura dell’ID client in tutti i casi.
215 | Ciò è particolarmente evidente nel caso di una pagina distribuita
216 | tramite una cache o altrimenti mostrata al di fuori del contesto di visualizzazione
217 | del sito originale del publisher.
218 | In tal caso non è possibile accedere ai cookie del sito del publisher.
219 |
220 | Quando una pagina AMP viene distribuita dal sito di un publisher,
221 | la struttura dell’ID client utilizzata da AMP può essere informata di un cookie di fallback
222 | da cercare e utilizzare.
223 | In questo caso,
224 | l’argomento `cid-scope-cookie-fallback-name` della variabile `clientId`
225 | viene interpretato come un nome di cookie.
226 | La formattazione può presentarsi come
227 | `CLIENT_ID(cid-scope-cookie-fallback-name)` o
228 | `${clientId(cid-scope-cookie-fallback-name)}`.
229 |
230 | Ad esempio:
231 |
232 | [sourcecode:html]
233 | <amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"></amp-pixel>
234 | [/sourcecode]
235 |
236 | Se AMP rileva che questo cookie è impostato,
237 | la sostituzione dell’ID client restituisce quindi il valore del cookie.
238 | Se AMP rileva che questo cookie non è impostato,
239 | AMP genera quindi un valore del modulo `amp-` seguito
240 | da una stringa codificata base64 casuale.
241 |
242 | Per ulteriori informazioni sulla sostituzione dell’ID client,
243 | compreso il metodo per aggiungere un ID di notifica utente opzionale, vai alla sezione
244 | [Variabili supportate in AMP Analytics](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md).
245 |
```
--------------------------------------------------------------------------------
/content/learn/[email protected]:
--------------------------------------------------------------------------------
```yaml
1 | hero:
2 | title@: Il metodo di AMP per ottimizzare le prestazioni
3 | subtitle@: |
4 | Grazie alla combinazione tra seguenti ottimizzazioni, le pagine AMP sono così veloci da sembrare di essere caricate in pochi istanti:
5 | <p>Se preferisci ascoltare anziché leggere, il seguente video realizzato da Malte Ubl, AMP engineering lead, offre una panoramica simile al contenuto delle seguenti sezioni.
6 |
7 | points:
8 | pointlist:
9 | - title@: Consentire solo gli script asincroni
10 | description@: |
11 | JavaScript è potente,
12 | può modificare praticamente qualsiasi aspetto della pagina,
13 | ma può anche bloccare la costruzione DOM e ritardare il rendering della pagina
14 | (vedi anche [Aggiunta di interattività con JavaScript](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript)).
15 | Per impedire che JavaScript ritardi il rendering della pagina,
16 | AMP consente solo JavaScript asincrono.
17 | <p>Le pagine AMP non possono includere JavaScript scritto dall’autore.
18 | Anziché utilizzare JavaScript,
19 | le funzioni interattive della pagina vengono gestite in elementi AMP personalizzati.
20 | Gli elementi AMP personalizzati possono contenere JavaScript che funzionano dietro le quinte
21 | e sono attentamente progettati per garantire che non provochino cali delle performance.
22 | <p>Benché il codice JavaScript di terzi sia consentito in iframe,
23 | non può bloccare il rendering.
24 | Ad esempio, se il codice JavaScript di terzi utilizza l’
25 | [API `document.write` pessima amica delle prestazioni](http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/),
26 | non blocca il rendering della pagina principale.
27 | - title@: Definire le dimensioni di tutte le risorse in modo statico
28 | description@: |
29 | Le risorse esterne come le immagini, gli annunci o iframe devono dichiarare le proprie dimensioni nell’HTML
30 | affinché AMP possa determinare le dimensioni e la posizione di ciascun elemento prima che le risorse vengano scaricate.
31 | AMP carica il layout della pagina senza attendere il download di alcuna risorsa.
32 | <p>AMP separa il layout del documento da quello delle risorse.
33 | Per il layout dell’intero documento ([e dei font](#font-triggering-must-be-efficient)) è necessaria solamente una richiesta HTTP
34 | .
35 | Dal momento che AMP è ottimizzato per evitare dispendiosi ricalcoli di stile e layout nel browser,
36 | non è necessario rielaborare i layout al caricamento delle risorse.
37 | - title@: Non consentire ai meccanismi delle estensioni di bloccare il rendering
38 | description@: |
39 | AMP non consente ai meccanismi delle estensioni di bloccare il rendering della pagina.
40 | AMP supporta le estensioni per componenti come
41 | [lightbox](/docs/reference/extended/amp-lightbox.html),
42 | [incorporamenti instagram](/docs/reference/extended/amp-instagram.html),
43 | [tweet](/docs/reference/extended/amp-twitter.html) e così via.
44 | Benché questi avanzino ulteriori richieste HTTP,
45 | tali richieste non bloccano il layout e il rendering della pagina.
46 | <p>Tutte le pagine che utilizzano uno script personalizzato devono indicare al sistema AMP
47 | che prima o poi avrà un tag personalizzato.
48 | Ad esempio, lo script [`amp-iframe`](/docs/reference/extended/amp-iframe.html)
49 | indica al sistema che ci sarà un tag `amp-iframe`.
50 | AMP crea la casella dell’iframe prima ancora di sapere cosa conterrà:
51 | example: /content/includes/amp-iframe.md
52 | - title@: Tenere lontano dalla fase critica qualsiasi codice JavaScript di terzi
53 | description@: |
54 | Al codice JavaScript di terzi piace usare il caricamento JS sincrono.
55 | Ama anche usare `document.write` per creare più script sincroni.
56 | Ad esempio, se hai cinque annunci e ognuno di essi esegue tre caricamenti sincroni
57 | con una latenza di connessione di 1 secondo,
58 | ti ritrovi con 15 secondi di tempo di caricamento solo per il caricamento JS.
59 | <p>Le pagine AMP consentono codice JavaScript di terzi ma solo in iframe in modalità sandbox.
60 | Circoscrivendo questo codice agli iframe gli viene impedito di bloccare l’esecuzione della pagina principale.
61 | Anche se attiva più ricalcoli di stile,
62 | i rispettivi piccoli iframe hanno DOM molto limitati.
63 | <p>I ricalcoli di stile e i layout sono tipici delle dimensioni DOM,
64 | pertanto i ricalcoli degli iframe sono molto veloci rispetto
65 | alle operazioni di ricalcolo degli stili e dei layout per la pagina.
66 | - title@: Tutto il codice CSS deve essere in linea e di dimensioni limitate
67 | description@: |
68 | Il codice CSS blocca tutto il rendering, interrompe il caricamento delle pagine e tende a gonfiarsi.
69 | Nelle pagine HTML AMP sono consentiti solo gli stili incorporati.
70 | Questo elimina una o spesso più richieste HTTP dalla fase di rendering critica
71 | rispetto a quanto accade nella maggior parte delle pagine web.
72 | <p>Inoltre, il foglio di stile incorporato ha una dimensione massima di 50 kilobyte.
73 | Sebbene queste dimensioni siano sufficienti per pagine più complesse,
74 | impone comunque all’autore della pagina di adottare una buona dose di moderazione nell’uso del codice CSS.
75 | - title@: L’attivazione dei font deve essere efficiente
76 | id: font-triggering-must-be-efficient
77 | description@: |
78 | I font web sono particolarmente grandi, per cui
79 | l’[ottimizzazione dei font web](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization)
80 | è fondamentale per le performance.
81 | In una pagina tipica dotata di alcuni script sincroni e di alcuni fogli di stile esterni,
82 | il browser attende il completamento di tali operazioni per iniziare il download dei font di grandi dimensioni.
83 | <p>Il sistema AMP dichiara zero richieste HTTP fino a quando non inizia il download dei font.
84 | Questo è possibile solamente perché tutto il codice JS in AMP ha l’attributo asincrono
85 | e perché sono consentiti solo i fogli di stile incorporati,
86 | non ci sono richieste HTTP che impediscono al browser di scaricare i font.
87 | - title@: Ridurre al minimo i ricalcoli di stile
88 | description@: |
89 | Ogni volta che misuri qualcosa si attivano dispendiosi ricalcoli di stile
90 | in quanto il browser deve elaborare il layout dell’intera pagina.
91 | Nelle pagine AMP, tutte le operazioni di lettura DOM vengono eseguite prima di tutte quelle di scrittura.
92 | In questo modo si garantisce un massimo di un ricalcolo di stili per frame.
93 | <p>Per ulteriori informazioni sull’impatto dei ricalcoli di stile e layout consulta la sezione sulle
94 | [performance del rendering](https://developers.google.com/web/fundamentals/performance/rendering/).
95 | - title@: Eseguire solamente animazioni con accelerazione GPU
96 | description@: |
97 | L’unico modo per avere ottimizzazioni veloci è quello di eseguirle sulla GPU.
98 | La GPU è cosciente dei livelli, sa come eseguire alcune operazioni su questi livelli,
99 | è in grado di spostarli o applicare una dissolvenza su di essi ma non può aggiornare il layout della pagina,
100 | passa perciò il compito al browser e questa non è una buona idea.
101 | <p>Le regole per il codice CSS correlato alle animazioni garantiscono che queste possano usufruire dell’accelerazione GPU.
102 | In particolare, AMP consente solamente l’animazione e la transizione su trasformazione e opacità
103 | per cui il layout della pagina non è necessario.
104 | Consulta ulteriori informazioni sull’
105 | [utilizzo delle variazioni di trasformazione e opacità per le animazioni](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count).
106 | - title@: Dare priorità al caricamento delle risorse
107 | description@: |
108 | AMP controlla tutti i download delle risorse: assegna la priorità al caricamento delle risorse,
109 | caricando solo ciò che è necessario, ed esegue la prelettura delle risorse di tipo lazy-load.
110 | <p>Quando AMP scarica le risorse, ottimizza i download
111 | in modo tale che vengano scaricate prima le risorse attualmente più importanti.
112 | Le immagini e gli annunci vengono scaricati solo se ci sono probabilità che vengano visualizzati dall’utente,
113 | nella parte visibile della pagina (above the fold), o se ci sono probabilità che l’utente scorra rapidamente su di esse.
114 | <p>AMP esegue anche la prelettura delle risorse di tipo lazy-load, ovvero quelle che non vengono caricate finché non richieste.
115 | Le risorse vengono caricate con il maggior ritardo possibile, ma la loro prelettura viene eseguita il prima possibile.
116 | In tal modo i componenti vengono caricati molto rapidamente ma la CPU viene utilizzata unicamente
117 | quando le risorse vengono effettivamente mostrate agli utenti.
118 | - title@: Caricare le pagine in un attimo
119 | description@: |
120 | La nuova [API preconnect](http://www.w3.org/TR/resource-hints/#dfn-preconnect)
121 | viene utilizzata intensamente per garantire che le richieste HTTP vengano completate il più rapidamente possibile.
122 | Grazie a questo,
123 | il rendering della pagina può essere eseguito prima che l’utente dichiari in modo esplicito che vorrebbe navigare verso di essa e
124 | la pagina potrebbe essere già disponibile nel momento in cui l’utente la seleziona effettivamente,
125 | con conseguente caricamento istantaneo.
126 | <p>Sebbene il prerendering possa applicarsi a tutto il contenuto web,
127 | può anche consumare una grande quantità di larghezza di banda e CPU. AMP è ottimizzato per limitare al minimo entrambi questi fattori. Il prerendering scarica unicamente le risorse più visibili della pagina (above the fold)
128 | e non esegue il rendering di elementi che potrebbero essere dispendiosi in termini di uso della CPU.
129 | <p>Quando viene eseguito il prerendering dei documenti AMP per il caricamento istantaneo,
130 | vengono effettivamente scaricate solo le risorse visibili della pagina (above the fold).
131 | Quando viene eseguito il prerendering dei documenti AMP per il caricamento istantaneo,
132 | le risorse che potrebbero pesare in modo eccessivo sulla CPU (come iframe di terzi) non vengono scaricate.
133 | <p>Scopri
134 | [perché HTML AMP non sfrutta appieno la funzione di scansione di precaricamento](https://medium.com/@cramforce/why-amp-html-does-not-take-full-advantage-of-the-preload-scanner-7e7f788aa94e).
135 | - title@: Aiutare a rendere AMP ancora più veloce
136 | description@: |
137 | AMP è una specifica open source.
138 | Ci serve il tuo aiuto per rendere AMP ancora più veloce.
139 | Scopri [come dare il tuo contributo](/docs/support/contribute.html).
140 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/deep_dive_analytics.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Deep Dive into AMP Analytics
3 | $order: 1
4 | toc: true
5 | ---
6 | [TOC]
7 |
8 |
9 | This guide dives deep into the
10 | [amp-analytics component](/docs/reference/extended/amp-analytics.html),
11 | breaking up a sample `amp-analytics` configuration into these key building blocks:
12 |
13 | The remainder of this guide uses this configuration sample,
14 | which tracks the page views and user clicks on links
15 | and sends the analytics data to the third-party provider,
16 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/):
17 |
18 | [sourcecode:html]
19 | <amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json">
20 | <script type="application/json">
21 | {
22 | "requests": {
23 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
24 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
25 | },
26 | "vars": {
27 | "account": "ABC123"
28 | },
29 | "extraUrlParams": {
30 | "cd1": "AMP"
31 | },
32 | "triggers": {
33 | "trackPageview": {
34 | "on": "visible",
35 | "request": "pageview"
36 | },
37 | "trackAnchorClicks": {
38 | "on": "click",
39 | "selector": "a",
40 | "request": "event",
41 | "vars": {
42 | "eventId": "42",
43 | "eventLabel": "clicked on a link"
44 | }
45 | }
46 | },
47 | 'transport': {
48 | 'beacon': false,
49 | 'xhrpost': false,
50 | 'image': true
51 | }
52 | }
53 | </script>
54 | </amp-analytics>
55 | [/sourcecode]
56 |
57 | **Note:** The above example code is to help you learn, but it's by no means a realistic sample. If you are working with analytics providers, it's likely that the above sample won't make sense; provider configurations remove complexity. Consult your analytics provider's documentation for sample configurations.
58 |
59 | ## Where to send analytics data: type attribute
60 |
61 | AMP is designed to support two common patterns of data collection:
62 |
63 | * Ingestion by a publisher-owned endpoint for in-house analytics systems.
64 | * Ingestion by a vendor-owned endpoint for interoperability with a vendor solution
65 | (for example, [Adobe Analytics](https://helpx.adobe.com/marketing-cloud/analytics.html), [Chartbeat](http://support.chartbeat.com/docs/), [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/)).
66 |
67 | To send analytics data to an analytics provider,
68 | include the `type` attribute in the `amp-analytics` tag and set its value
69 | to the appropriate vendor, as defind in the
70 | [amp-analytics specification](/docs/reference/extended/amp-analytics.html).
71 |
72 | For example: `<amp-analytics type="googleanalytics">` sends analytics data
73 | to the third-party analytics provider, Google Analytics.
74 | To send data to a publisher-owned endpoint,
75 | simply don’t include the `type` attribute;
76 | the analytics data is sent to the defined endpoints for each
77 | [request](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute).
78 |
79 | Analytics vendor configurations are a quick way
80 | to get started with `amp-analytics`.
81 | You should consult your vendor’s documentation and
82 | help resources for further guidance.
83 | As previously mentioned,
84 | the list of vendors who’ve already integrated with AMP, as well as links
85 | to their specific documentation can be found in the
86 | [amp-analytics specification](/docs/reference/extended/amp-analytics.html).
87 |
88 | If you’re an analytics vendor,
89 | learn more about
90 | [integrating your own analytics configuration into AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
91 |
92 | ## Load remote configuration: config attribute
93 |
94 | You don't have to include all of the configuration
95 | for `amp-analytics` entirely on your AMP page.
96 | Instead, you can can call out to a remote URL
97 | for all or part of the configurations.
98 |
99 | This allows you to do things like vary the configuration
100 | based on a specific request.
101 | If you as the publisher have control over the remote file,
102 | you can do any server-side processing necessary
103 | to construct the configuration data.
104 |
105 | The first step to loading remote configurations is
106 | to include the config attribute in the `amp-analytics` tag:
107 |
108 | [sourcecode:html]
109 | <amp-analytics config="https://example.com/analytics.account.config.json">
110 | [/sourcecode]
111 |
112 | The next step is to create the JSON content that lives in the remote URL.
113 | In this simple example,
114 | the configuration contained in the JSON object is just the variable value for the analytics account.
115 |
116 | Example content in `https://example.com/analytics.account.config.json`:
117 |
118 | [sourcecode:js]
119 | {
120 | "vars": {
121 | "account": "UA-XXXXX-Y" // Replace with your property ID.
122 | }
123 | }
124 | [/sourcecode]
125 |
126 | The final step is to make sure what’s in the remote file is pulled
127 | into the appropriate place in the the `amp-analytics` configuration.
128 | In both the `pageview` and `event` requests here,
129 | the `account` variable value is automatically set
130 | to the account value in the remote URL (`"account": "UA-XXXXX-Y"`):
131 |
132 | [sourcecode:js]
133 | "requests": {
134 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
135 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
136 | }
137 | [/sourcecode]
138 |
139 | **Important:** AMP doesn’t validate against multiple uses of the same variable.
140 | Values get populated following a variable substitution order of preference,
141 | and values in remote URLs are top of that order
142 | (see [Variable substitution ordering](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
143 |
144 | ## Requests, triggers & transports
145 |
146 | The `requests` attribute defines ‘what data gets sent’
147 | (for example, `pageviews`, `events`),
148 | and where that data gets sent (the URLs used to transmit data).
149 |
150 | The `triggers` attribute describes when analytics data should be sent,
151 | for example, when a user views a page, when a user clicks on a link.
152 |
153 | The `transport` attribute specifies how to send a request,
154 | more specifically, the protocol.
155 |
156 | Read on to find out more about these configurations.
157 | (You can also read about these configurations in the
158 | [amp-analytics reference](/docs/reference/extended/amp-analytics.html).)
159 |
160 | ### What data gets sent: requests attribute
161 |
162 | The `request-name` is used in the trigger configuration to specify
163 | what request should be sent in response to a pariticular event.
164 | The `request-value` is an `https` URL.
165 | These values may include placeholder tokens
166 | that can reference other requests or variables.
167 |
168 | [sourcecode:js]
169 | "requests": {
170 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
171 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
172 | }
173 | [/sourcecode]
174 |
175 | Some analytics providers (including Google Analytics)
176 | have already provided configuration,
177 | which you use via the `type` attribute.
178 | If you are using an analytics provider,
179 | you may not need to include `requests` information.
180 | See your vendor documentation to find out
181 | if `requests` need to be configured, and how.
182 |
183 | #### Appending request URL: Extra URL Params
184 |
185 | The [extraUrlParams](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#extra-url-params)
186 | attribute specifies additional parameters to append to the query string of the request URL via the usual "&foo=baz" convention.
187 |
188 | The `amp-analytics` example adds an additional parameter <code>cd1</code>
189 | to the request and sets the parameter value to "AMP":
190 |
191 | [sourcecode:js]
192 | "extraUrlParams": {
193 | "cd1": "AMP"
194 | }
195 | [/sourcecode]
196 |
197 | ### When data gets sent: triggers attribute
198 |
199 | The `triggers` attribute describes when an analytics request should be sent.
200 | It contains a key-value pair of trigger-name and trigger-configuration.
201 | The trigger name can be any string comprised
202 | of alphanumeric characters (a-zA-Z0-9).
203 |
204 | For example,
205 | the following `amp-analytics` element is configured to send a request to
206 | `https://example.com/analytics` when the document is first loaded,
207 | and each time an `a` tag is clicked:
208 |
209 | [sourcecode:js]
210 | "triggers": {
211 | "trackPageview": {
212 | "on": "visible",
213 | "request": "pageview"
214 | },
215 | "trackAnchorClicks": {
216 | "on": "click",
217 | "selector": "a",
218 | "request": "event",
219 | "vars": {
220 | "eventId": "42",
221 | "eventLabel": "clicked on a link"
222 | }
223 | }
224 | }
225 | [/sourcecode]
226 |
227 | AMP supports the following trigger configurations:
228 |
229 | <table>
230 | <thead>
231 | <tr>
232 | <th data-th="Trigger Config" class="col-thirty">Trigger Config</th>
233 | <th data-th="Description">Description</th>
234 | </tr>
235 | </thead>
236 | <tbody>
237 | <tr>
238 | <td data-th="Trigger Config"><code>on</code> (required)</td>
239 | <td data-th="Description">The event to listener for. Valid values are <code>click</code>, <code>scroll</code>, <code>timer</code>, and <code>visible</code>.</td>
240 | </tr>
241 | <tr>
242 | <td data-th="Trigger Config"><code>request</code> (required)</td>
243 | <td data-th="Description">Name of the request to send (as specified in the <a href="/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute">requests</a>).</td>
244 | </tr>
245 | <tr>
246 | <td data-th="Trigger Config"><code>vars</code></td>
247 | <td data-th="Description">An object containing key-value pairs used to override <code>vars</code> defined in the top level config, or to specify <code>vars</code> unique to this trigger (see also <a href="/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering">Variable substitution ordering</a>).</td>
248 | </tr>
249 | <tr>
250 | <td data-th="Trigger Config"><code>selector</code> (required when <code>on</code> set to <code>click</code>)</td>
251 | <td data-th="Description">A CSS selector used to refine which elements should be tracked. Use value <code>*</code> to track all elements. This configuration is used on conjunction with the <code>click</code> trigger. Learn how to use selector to <a href="/docs/guides/analytics/use_cases.html#tracking-page-clicks">track page clicks</a> and <a href="/docs/guides/analytics/use_cases.html#tracking-social-interactions">social interactions</a>.</td>
252 | </tr>
253 | <tr>
254 | <td data-th="Trigger Config"><code>scrollSpec</code> (required when <code>on</code> set to <code>scroll</code>)</td>
255 | <td data-th="Description">Controls under which conditions when the page is scrolled the <code>scroll</code> event is fired. This object can contain <code>verticalBoundaries</code> and <code>horizontalBoundaries</code>. At least one of the two properties is required for a <code>scroll</code> event to fire. The values for both of the properties should be arrays of numbers containing the boundaries on which a scroll event is generated. See this example on <a href="/docs/guides/analytics/use_cases.html#tracking-scrolling">tracking scrolling</a>.</td>
256 | </tr>
257 | <tr>
258 | <td data-th="Trigger Config"><code>timerSpec</code> (required when <code>on</code> is set to <code>timer</code>)</td>
259 | <td data-th="Description">Controls when the <code>timer</code> event is fired. The timer will trigger immediately and then at a specified interval thereafter. This configuration is used on conjunction with the <code>timer</code> trigger.</td>
260 | </tr>
261 | </tbody>
262 | </table>
263 |
264 | **Important:** Triggers from a configuration with lower precedence are overridden
265 | by triggers with the same names from a configuration with higher precedence
266 | (see [Variable substitution ordering](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
267 |
268 | ### How data gets sent: transport attribute
269 |
270 | The `transport` attribute specifies how to send a request.
271 | The following three methods are enabled by default:
272 |
273 | <table>
274 | <thead>
275 | <tr>
276 | <th data-th="Transport Method" class="col-thirty">Transport Method</th>
277 | <th data-th="Description">Description</th>
278 | </tr>
279 | </thead>
280 | <tbody>
281 | <tr>
282 | <td data-th="Transport Method"><code>beacon</code></td>
283 | <td data-th="Description">Indicates <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> can be used to transmit the request. This will send a <code>POST</code> request, with credentials, and an empty body.</td>
284 | </tr>
285 | <tr>
286 | <td data-th="Transport Method"><code>xhrpost</code></td>
287 | <td data-th="Description">Indicates <code>XMLHttpRequest</code> can be used to transmit the request. This will send a <code>POST</code> request, with credentials, and an empty body.</td>
288 | </tr>
289 | <tr>
290 | <td data-th="Transport Method"><code>image</code></td>
291 | <td data-th="Description">Indicates the request can be sent by generating an <code>Image</code> tag. This will send a <code>GET</code> request.</td>
292 | </tr>
293 | </tbody>
294 | </table>
295 |
296 | Only one transport method gets used,
297 | and it's the one with the highest precedence
298 | that's enabled, permitted, and available.
299 | The precedence is `beacon` > `xhrpost` > `image`.
300 | If the client's user agent does not support a method,
301 | the next highest precedence method enabled gets used.
302 |
303 | Include the `transport` attribute in your configuration
304 | only if you want to limit the transport options,
305 | otherwise, you may stop requests.
306 |
307 | In the example below,
308 | `beacon` and `xhrpost` are set to false,
309 | so they will not be used even though they have higher precedence than `image`.
310 | If the client's user agent supports the `image` method,
311 | then it will be used; otherwise, no request gets sent.
312 |
313 | [sourcecode:js]
314 | 'transport': {
315 | 'beacon': false,
316 | 'xhrpost': false,
317 | 'image': true
318 | }
319 | [/sourcecode]
320 |
321 | ## Variable substitution ordering
322 |
323 | AMP populates variables with values in an order of precendence:
324 |
325 | 1. Remote configurations (via `config`).
326 | 2. `vars` nested inside of a trigger within `triggers`.
327 | 3. `vars` at the top-level nested within `amp-analytics`.
328 | 4. Platform-provided values.
329 |
330 | In this example, there’s a remote configuration,
331 | variables defined at the top-level, in triggers, and at the platform level:
332 |
333 | [sourcecode:html]
334 | <amp-analytics config="http://example.com/config.json">
335 | <script type="application/json">
336 | {
337 | "requests": {
338 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
339 | },
340 | "vars": {
341 | "account": "ABC123",
342 | "title": "Homepage"
343 | },
344 | "triggers": {
345 | "some-event": {
346 | "on": "visible",
347 | "request": "pageview",
348 | "vars": {
349 | "title": "My homepage",
350 | "clientId": "my user"
351 | }
352 | }
353 | }
354 | </script>
355 | </amp-analytics>
356 | [/sourcecode]
357 |
358 | When the same `var` is defined in multiple locations,
359 | the variable order of precendence sets its value once.
360 | Thus, if the remote configuration defined `account` as UA-XXXXX-Y in the example above,
361 | the values of various vars will be as follows:
362 |
363 | <table>
364 | <thead>
365 | <tr>
366 | <th data-th="var" class="col-thirty"><code>var</code></th>
367 | <th data-th="Value">Value</th>
368 | <th data-th="Defined By" class="col-thirty">Defined By</th>
369 | </tr>
370 | </thead>
371 | <tbody>
372 | <tr>
373 | <td data-th="var"><code>canonicalUrl</code></td>
374 | <td data-th="Value"><code>http://example.com/path/to/the/page</code></td>
375 | <td data-th="Defined By">Platform</td>
376 | </tr>
377 | <tr>
378 | <td data-th="var"><code>title</code></td>
379 | <td data-th="Value">My homepage</td>
380 | <td data-th="Defined By">Trigger</td>
381 | </tr>
382 | <tr>
383 | <td data-th="var"><code>account</code></td>
384 | <td data-th="Value"><code>UA-XXXXX-Y</code></td>
385 | <td data-th="Defined By">Remote configuration</td>
386 | </tr>
387 | <tr>
388 | <td data-th="var"><code>clientId</code></td>
389 | <td data-th="Value">my user</td>
390 | <td data-th="Defined By">Trigger</td>
391 | </tr>
392 | </tbody>
393 | </table>
394 |
```
--------------------------------------------------------------------------------
/content/latest/blog/whats-in-an-amp-url.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | class: post-blog post-detail
3 | type: Blog
4 | $title: What’s in an AMP URL?
5 | id: whats-in-an-amp-url
6 | author: amphtml
7 | role:
8 | origin: "https://amphtml.wordpress.com/2017/02/06/whats-in-an-amp-url/amp/"
9 | excerpt: "The following was posted on the Google Developers Blog by Alex Fischer, Software Engineer, Google Search. TL;DR: Today, we’re adding a feature to the AMP integration in Google Search that allows users to access, copy, and share the canonical URL of an AMP document. But before diving deeper into the news, let’s take a step […]"
10 | avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
11 | date_data: 2017-02-06T11:12:42-08:00
12 | $date: February 6, 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://developers.googleblog.com/2017/02/whats-in-amp-url.html" target="_blank">posted on the Google Developers Blog</a> by Alex Fischer, Software Engineer, Google Search.</em></p>
21 | <p><strong>TL;DR: Today, we’re adding a feature to the AMP integration in Google Search </strong><strong>that allows users to access, copy, and share the canonical URL of an AMP document. But before diving deeper into the news, let’s take a step back to elaborate more on URLs in the AMP world and how they relate to the speed benefits of AMP.</strong></p>
22 | <p><strong>What’s in a URL? On the web, a lot – URLs and </strong><a href="https://tools.ietf.org/html/rfc6454"><strong>origins</strong></a><strong> represent, to some extent, trust and ownership of content. When you’re reading a New York Times article, a quick glimpse at the URL gives you a level of trust that what you’re reading represents the voice of the New York Times. Attribution, brand, and ownership are clear.</strong></p>
23 | <p><strong>Recent product launches in different mobile apps and the recent launch of </strong><a href="https://search.googleblog.com/2015/12/amp-projects-fast-mobile-pages-coming.html"><strong>AMP in Google Search</strong></a><strong> have blurred this line a little. In this post, I’ll first try to explain the reasoning behind some of the technical decisions we made and make sense of the different kinds of AMP URLs that exist. I’ll then outline changes we are making to address the concerns around URLs. </strong></p>
24 | <p><strong>To start with, AMP documents have three different kinds of URLs:</strong></p>
25 | <ul>
26 | <li>Original URL: The publisher’s document written in the AMP format
27 | <pre><code>http://www.example.com/amp/doc.html
28 | </code></pre>
29 | </li>
30 | <li>AMP Cache URL: The document served through an AMP Cache (e.g., all AMPs served by Google are served through the <a href="https://developers.google.com/amp/cache/">Google AMP Cache</a>). Most users will never see this URL.
31 | <pre><code>https://www-example-com.cdn.ampproject.org/c/www.example.com/amp/doc.html</code></pre>
32 | </li>
33 | <li>Google AMP Viewer URL: The document displayed in an AMP viewer (e.g., when rendered on the search result page).
34 | <pre><code>https://www.google.com/amp/www.example.com/amp.doc.html</code></pre>
35 | </li>
36 | </ul>
37 | <p><div class="wp-image size-full wp-image-1051 aligncenter"><amp-img layout='responsive' width="970" height="676" src="https://amphtml.files.wordpress.com/2017/02/image1.png?w=660" srcset="https://amphtml.files.wordpress.com/2017/02/image1.png?w=660 660w, https://amphtml.files.wordpress.com/2017/02/image1.png?w=150 150w, https://amphtml.files.wordpress.com/2017/02/image1.png?w=300 300w, https://amphtml.files.wordpress.com/2017/02/image1.png?w=768 768w, https://amphtml.files.wordpress.com/2017/02/image1.png 970w" sizes="(max-width: 660px) 100vw, 660px"></amp-img><br />
38 | Although having three different URLs with different origins for essentially the same content can be confusing, there are two main reasons why these different URLs exist: caching and pre-rendering. Both are large contributors to AMP’s speed, but require new URLs and I will elaborate on why that is.</p>
39 | <h1><strong>AMP Cache URLs</strong></h1>
40 | <p><strong>Let’s start with AMP Cache URLs. Paul Bakaus, a Google Developer Advocate for AMP, has an excellent post describing </strong><a href="https://medium.com/@pbakaus/why-amp-caches-exist-cd7938da2456"><strong>why AMP Caches exist</strong></a><strong>. Paul’s post goes into great detail describing the benefits of AMP Caches, but it doesn’t quite answer the question why they require new URLs. The answer to this question comes down to one of the design principles of AMP: build for easy adoption. AMP tries to solve some of the problems of the mobile web at scale, so its components must be easy to use for everyone. </strong></p>
41 | <p><strong>There are a variety of options to get validation, proximity to users, and other benefits provided by AMP Caches. For a small site, however, that doesn’t manage its own DNS entries, doesn’t have engineering resources to push content through complicated APIs, or can’t pay for content delivery networks, a lot of these technologies are inaccessible. </strong></p>
42 | <p><strong>For this reason, the Google AMP Cache works by means of a simple URL “transformation.” A webmaster only has to make their content available at some URL and the Google AMP Cache can then cache and serve the content through Google’s world-wide infrastructure through a new URL that mirrors and transforms the original. It’s as simple as that. Leveraging an AMP Cache using the original URL, on the other hand, would require the webmaster to modify their DNS records or reconfigure their name servers. While some sites do just that, the URL-based approach is easier to use for the vast majority of sites.</strong></p>
43 | <h1><strong>AMP Viewer URLs</strong></h1>
44 | <p><strong>In the previous section, </strong><strong>we learned about Google AMP Cache URLs — URLs that point to the cached version of an AMP document. But what about </strong><strong><a href="http://www.google.com/amp" rel="nofollow">http://www.google.com/amp</a></strong><strong> URLs? Why are they needed? These are “AMP Viewer” URLs and they exist because of pre-rendering.</strong></p>
45 | <p><strong>AMP’s built-in support for privacy and resource-conscientious pre-rendering is rarely talked about and often misunderstood. AMP documents can be pre-rendered without setting off a cascade of resource fetches, without hogging up users’ CPU and memory, and without running any privacy-sensitive analytics code. This works regardless of whether the embedding application is a mobile web page or a native application. The need for new URLs, however, comes mostly from mobile web implementations, so I am using Google’s mobile search result page (SERP) as an illustrative example.</strong></p>
46 | <h3><u><strong>How does pre-rendering work?</strong></u></h3>
47 | <p><strong>When a user performs a Google search that returns AMP-enabled results, some of these results are pre-rendered behind the scenes. When the user clicks on a pre-rendered result, the AMP page loads instantly. </strong></p>
48 | <p>Pre-rendering works by loading a hidden iframe on the embedding page (the search result page) with the content of the AMP page and an additional parameter that indicates that the AMP document is only being pre-rendered. The JavaScript component that handles the lifecycle of these iframes is called “AMP Viewer”.</p>
49 | <center><strong><div class="wp-image wp-image-1052 aligncenter"><amp-img layout='responsive' width="970" height="1064" src="https://amphtml.files.wordpress.com/2017/02/image2.png?w=572&h=628" srcset="https://amphtml.files.wordpress.com/2017/02/image2.png?w=572&h=628 572w, https://amphtml.files.wordpress.com/2017/02/image2.png?w=137&h=150 137w, https://amphtml.files.wordpress.com/2017/02/image2.png?w=273&h=300 273w, https://amphtml.files.wordpress.com/2017/02/image2.png?w=768&h=842 768w, https://amphtml.files.wordpress.com/2017/02/image2.png 970w" sizes="(max-width: 572px) 100vw, 572px"></amp-img><br />
50 | </strong><b><i>The AMP Viewer pre-renders an AMP document in a hidden iFrame.</i></b></center>
51 | <p><strong>The user’s browser loads the document and the AMP runtime and starts rendering the AMP page. Since all other resources, such as images and embeds, are managed by the AMP runtime, nothing else is loaded at this point. The AMP runtime may decide to fetch some resources, but it will do so in a resource and privacy sensible way. </strong></p>
52 | <p><strong>When a user clicks on the result, all the AMP Viewer has to do is show the iframe that the browser has already rendered and let the AMP runtime know that the AMP document is now visible.</strong></p>
53 | <p><strong>As you can see, this operation is incredibly cheap – there is no network activity or hard navigation to a new page involved. This leads to a near-instant loading experience of the result. </strong></p>
54 | <h3><u><strong>Where do google.com/amp URLs come from?</strong></u></h3>
55 | <p><strong>All of the above happens while the user is still on the original page (in our example, that’s the search results page). </strong><strong>In other words, the user hasn’t gone to a different page; they have just viewed an iframe on the same page and so the browser doesn’t change the URL</strong><strong>. </strong></p>
56 | <p><strong>We still want the URL in the browser to reflect the page that is displayed on the screen and make it easy for users to link to. When users hit refresh in their browser, they expect the same document to show up and not the underlying search result page. So the AMP viewer has to manually update this URL. This happens using the History API. This API allows the AMP Viewer to update the browser’s URL bar without doing a hard navigation.</strong></p>
57 | <p><strong>The question is what URL the browser should be updated to. Ideally, this would be the URL of the result itself (e.g., </strong><strong><a href="http://www.example.com/amp/doc.html" rel="nofollow">http://www.example.com/amp/doc.html</a></strong><strong>); or the AMP Cache URL (e.g., </strong><strong>www-example-com.cdn.ampproject.org/www.example.com/amp/doc.html</strong><strong>). Unfortunately, it can’t be either of those. One of the main restrictions of the History API is that the new URL must be on the same origin as the original URL (</strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API"><strong>reference</strong></a><strong>). This is enforced by browsers (for </strong><a href="https://www.w3.org/TR/2011/WD-html5-20110113/history.html#the-history-interface"><strong>security reasons</strong></a><strong>), but it means that in Google Search, this URL has to be on the </strong><strong><a href="http://www.google.com" rel="nofollow">http://www.google.com</a></strong><strong> origin. </strong></p>
58 | <h3><u><strong>Why do we show a header bar?</strong></u></h3>
59 | <p><strong>The previous section explained restrictions on URLs that an AMP Viewer has to handle. These URLs, however, can be confusing and misleading. They can open up the doors to phishing attacks. If an AMP page showed a login page that looks like Google’s and the URL bar says </strong><strong><a href="http://www.google.com" rel="nofollow">http://www.google.com</a></strong><strong>, how would a user know that this page isn’t actually Google’s? That’s where the need for additional attribution comes in.</strong></p>
60 | <p><strong>To provide appropriate attribution of content, every AMP Viewer must make it clear to users where the content that they’re looking at is coming from. And one way of accomplishing this is by adding a header bar that displays the “true” origin of a page.</strong></p>
61 | <p><div class="wp-image wp-image-1050 aligncenter"><amp-img layout='responsive' width="817" height="593" src="https://amphtml.files.wordpress.com/2017/02/image3.png?w=624&h=453" srcset="https://amphtml.files.wordpress.com/2017/02/image3.png?w=624&h=453 624w, https://amphtml.files.wordpress.com/2017/02/image3.png?w=150&h=109 150w, https://amphtml.files.wordpress.com/2017/02/image3.png?w=300&h=218 300w, https://amphtml.files.wordpress.com/2017/02/image3.png?w=768&h=557 768w, https://amphtml.files.wordpress.com/2017/02/image3.png 817w" sizes="(max-width: 624px) 100vw, 624px"></amp-img></p>
62 | <h1><strong>What’s next?</strong></h1>
63 | <p><strong>I hope the previous sections made it clear why these different URLs exist and why there needs to be a header in every AMP viewer. We have heard how you feel about this approach and the importance of URLs. So what next? As you know, we want to be thoughtful in what we do and ensure that we don’t break the speed and performance users expect from AMP pages. </strong></p>
64 | <p><strong>Since the launch of </strong><a href="https://amphtml.wordpress.com/2016/02/24/amping-up-in-google-search/"><strong>AMP in Google Search</strong></a><strong> in Feb 2016, we have taken the following steps:</strong></p>
65 | <ul>
66 | <li ><strong>All Google URLs (i.e., the Google AMP cache URL and the Google AMP viewer URL) reflect the original source of the content as best as possible:</strong><strong><br />
67 | </strong></p>
68 | <pre><strong>www.google.com/amp/</strong><b>www.example.com/amp/doc.html</b></pre>
69 | </li>
70 | <li ><strong>When users scroll down the page to read a document, the AMP viewer header bar hides, freeing up precious screen real-estate.</strong></li>
71 | <li ><strong>When users visit a Google AMP viewer URL on a platform where the viewer is not available, we redirect them to the canonical page for the document.</strong></li>
72 | </ul>
73 | <p>In addition to the above, many users have requested a way to access, copy, and share the canonical URL of a document. Today, we’re adding support for this functionality in form of an anchor button in the AMP Viewer header on Google Search. This feature allows users to use their browser’s native share functionality by long-tapping on the link that is displayed.</p>
74 | <p><div class="wp-image wp-image-1049 aligncenter"><amp-img layout='responsive' width="614" height="1064" src="https://amphtml.files.wordpress.com/2017/02/image4.png?w=457&h=792" srcset="https://amphtml.files.wordpress.com/2017/02/image4.png?w=457&h=792 457w, https://amphtml.files.wordpress.com/2017/02/image4.png?w=87&h=150 87w, https://amphtml.files.wordpress.com/2017/02/image4.png?w=173&h=300 173w, https://amphtml.files.wordpress.com/2017/02/image4.png 614w" sizes="(max-width: 457px) 100vw, 457px"></amp-img></p>
75 | <p><strong>In the coming weeks, the Android Google app will share the original URL of a document when users tap on the app’s share button. This functionality is already available on the iOS Google app.</strong></p>
76 | <p><strong>Lastly, we’re working on leveraging upcoming web platform APIs that allow us to improve this functionality even further. One such API is the </strong><a href="https://developers.google.com/web/updates/2016/10/navigator-share"><strong>Web Share API</strong></a><strong> that would allow AMP viewers to invoke the platform’s native sharing flow with the original URL rather than the AMP viewer URL.</strong></p>
77 | <p><strong>We as Google have every intention in making the AMP experience as good as we can for both, users and publishers. A thriving ecosystem is very important to us and attribution, user trust, and ownership are important pieces of this ecosystem. I hope this blog post helps clear up the origin of the three URLs of AMP documents, their role in making AMP fast, and our efforts to further improve the AMP experience in Google Search. Lastly, an ecosystem can only flourish with your participation: give us </strong><a href="https://twitter.com/googledevs"><strong>feedback</strong></a><strong> and </strong><a href="https://github.com/ampproject/amphtml"><strong>get involved</strong></a><strong> with AMP.<br />
78 | </strong><br />
79 | <em><strong>Posted by Alex Fischer, Software Engineer, Google Search.</strong></em></p><br />
80 | </div>
81 |
82 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Mendalami AMP Analytics
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | Panduan ini mendalami
9 | [komponen amp-analytics](/docs/reference/extended/amp-analytics.html),
10 | menguraikan konfigurasi `amp-analytics` contoh ke dalam blok pembangun utama ini:
11 |
12 | Bagian selanjutnya dari panduan ini memakai contoh konfigurasi ini,
13 | yang melacak tampilan halaman dan klik pengguna pada tautan
14 | dan mengirim data analisis ke penyedia pihak ketiga,
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 | **Catatan:** Kode contoh di atas adalah untuk membantu Anda belajar, namun bukan berarti contoh itu realistis. Jika Anda bekerja dengan penyedia analisis, ada kemungkinan bahwa sampel di atas tidak masuk akal, konfigurasi penyedia akan meniadakan kerumitan. Rujuklah dokumen penyedia analisis untuk melihat konfigurasi contoh.
57 |
58 | ## Tempat mengirim data analisis: atribut tipe
59 |
60 | AMP didesain untuk mendukung dua pola umum pengumpulan data:
61 |
62 | * Penyerapan oleh endpoint yang dipublikasikan pemilik untuk sistem analisis internal.
63 | * Penyerapan oleh endpoint yang dimiliki oleh vendor untuk interoperabilitas dengan solusi vendor
64 | (misalnya, [Adobe Analytics](https://helpx.adobe.com/marketing-cloud/analytics.html), [Chartbeat](http://support.chartbeat.com/docs/), [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/)).
65 |
66 | Untuk mengirim data analisis ke penyedia analisis,
67 | sertakan atribut `type` dalam tag `amp-analytics` dan atur nilainya
68 | ke vendor yang sesuai, sebagaimana didefinisikan dalam
69 | [spesifikasi amp-analytics](/docs/reference/extended/amp-analytics.html).
70 |
71 | Misalnya: `<amp-analytics type="googleanalytics">` mengirim data analisis
72 | ke penyedia analisis pihak ketiga, Google Analytics,
73 | Untuk mengirim data ke endpoint yang dimiliki penerbit,
74 | cukup jangan sertakan atribut `type`;
75 | data analisis dikirim ke endpoint yang didefinisikan untuk masing-masing
76 | [permintaan](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute).
77 |
78 | Konfigurasi vendor Analytics merupakan cara cepat
79 | untuk memulai `amp-analytics`.
80 | Anda harus merujuk pada dokumentasi vendor dan
81 | sumber daya bantuan untuk panduan lebih lanjut.
82 | Sebagaimana yang dijelaskan sebelumnya,
83 | daftar vendor yang sudah terintegrasi dengan AMP, serta tautan
84 | ke dokumentasi spesifik bisa ditemukan dalam
85 | [spesifikasi amp-analytics](/docs/reference/extended/amp-analytics.html).
86 |
87 | Jika Anda adalah vendor analisis,
88 | ketahui selengkapnya tentang
89 | [mengintegrasikan konfigurasi analisis sendiri ke dalam AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
90 |
91 | ## Memuat konfigurasi jarak jauh: atribut config
92 |
93 | Anda tidak harus menyertakan semua konfigurasi
94 | untuk `amp-analytics` secara menyeluruh di halaman AMP Anda.
95 | Sebaliknya, Anda bisa memanggil URL jarak jauh
96 | untuk semua atau sebagian konfigurasi.
97 |
98 | Hal ini memungkinkan Anda untuk melakukan berbagai hal seperti memvariasikan konfigurasi
99 | berdasarkan permintaan spesifik
100 | Jika Anda sebagai penerbit memiliki kontrol atas file jarak jauh,
101 | Anda bisa melakukan pemrosesan sisi server yang diperlukan
102 | untuk membuat data konfigurasi.
103 |
104 | Langkah pertama untuk memuat konfigurasi jarak jauh adalah
105 | menyertakan atribut config dalam tag `amp-analytics`:
106 |
107 | [sourcecode:html]
108 | <amp-analytics config="https://example.com/analytics.account.config.json">
109 | [/sourcecode]
110 |
111 | Langkah berikutnya adalah membuat materi JSON yang berada dalam URL jarak jauh.
112 | Dalam contoh sederhana ini,
113 | konfigurasi yang terkandung dalam objek JSON hanyalah merupakan nilai variabel untuk akun analisis.
114 |
115 | Contoh materi dalam `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 | Langkah terakhir adalah untuk memastikan apa yang diambil dari file jarak jauh
126 | ke dalam tempat yang sesuai dalam konfigurasi `amp-analytics`.
127 | Baik dalam permintaan `pageview` maupun `event` di sini,
128 | nilai variabel `account` secara otomatis diatur
129 | ke nilai akun dalam URL jarak jauh (`"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 | **Penting:** AMP tidak memvalidasi terhadap lebih dari satu penggunaan dari variabel yang sama.
139 | Nilai-nilai diisikan mengikuti urutan prioritas penggantian variabel,
140 | dan nilai dalam URL jarak jauh berada di prioritas teratas dari urutan tersebut
141 | (lihat [Pengurutan penggantian variabel](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
142 |
143 | ## Permintaan, pemicu, & transport
144 |
145 | Atribut `requests` mendefinisikan 'data apa yang dikirimkan'
146 | (misalnya, `pageviews`, `events`),
147 | dan tempat data tersebut dikirimkan (URL yang digunakan untuk mentransmisikan data).
148 |
149 | Atribut `triggers` menjelaskan kapan data analisis harus dikirimkan,
150 | misalnya, ketika pengguna melihat halaman, ketika pengguna mengeklik tautan.
151 |
152 | Atribut `transport` menetapkan cara mengirim permintaan,
153 | atau secara lebih spesifik lagi, protokolnya.
154 |
155 | Teruskan membaca untuk mengetahui selengkapnya tentang konfigurasi ini.
156 | (Anda juga bisa membaca tentang konfigurasi ini dalam
157 | [referensi amp-analytics](/docs/reference/extended/amp-analytics.html).)
158 |
159 | ### Data apa yang dikirimkan: meminta atribut
160 |
161 | `request-name` digunakan dalam konfigurasi pemicu untuk menetapkan
162 | permintaan apa yang harus dikirim sebagai respons terhadap suatu kejadian tertentu.
163 | `request-value` merupakan URL `https`.
164 | Nilai-nilai ini bisa meliputi token placeholder
165 | yang bisa merujuk permintaan atau variabel lain.
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 | Beberapa penyedia analisis (termasuk Google Analytics)
175 | sudah memberikan konfigurasi,
176 | yang Anda gunakan lewat atribut `type`.
177 | Jika Anda menggunakan penyedia analisis,
178 | Anda tidak perlu menyertakan informasi `requests`.
179 | Lihat dokumentasi vendor untuk mengetahui
180 | jika `requests` perlu dikonfigurasi, dan cara melakukannya.
181 |
182 | #### Menambahkan URL permintaan: Extra URL Params
183 |
184 | Atribut [extraUrlParams](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#extra-url-params)
185 | atribut menetapkan parameter tambahan untuk ditambahkan ke </string> kueri dari URL permintaan lewat konvensi "&foo=baz" yang biasa.
186 |
187 | Contoh `amp-analytics` menambahkan parameter tambahan <code>cd1</code>
188 | ke permintaan dan mengatur nilai parameter ke "AMP":
189 |
190 | [sourcecode:html]
191 | "extraUrlParams": {
192 | "cd1": "AMP"
193 | }
194 | [/sourcecode]
195 |
196 | ### Ketika data dikirimkan: memicu atribut
197 |
198 | Atribut `triggers` menjelaskan kapan permintaan analisis harus dikirimkan.
199 | Atribut ini berisi pasangan nilai-kunci dari nama pemicu dan konfigurasi pemicu.
200 | Nama pemicu bisa berupa sembarang </string> yang terdiri
201 | karakter alfanumerik (a-zA-Z0-9).
202 |
203 | Misalnya,
204 | elemen `amp-analytics` berikut dikonfigurasi untuk mengirim permintaan ke
205 | `https://example.com/analytics` ketika dokumen dimuat pertama kali,
206 | dan setiap kali tag `a` diklik:
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 mendukung konfigurasi pemicu berikut:
227 |
228 | <table>
229 | <thead>
230 | <tr>
231 | <th data-th="Trigger Config" class="col-thirty">Konfigurasi Pemicu</th>
232 | <th data-th="Description">Keterangan</th>
233 | </tr>
234 | </thead>
235 | <tbody>
236 | <tr>
237 | <td data-th="Trigger Config"><code>on</code> (diperlukan)</td>
238 | <td data-th="Description">Kejadian untuk pendengar. Nilai yang valid adalah <code>click</code>, <code>scroll</code>, <code>timer</code>, dan <code>visible</code>.</td>
239 | </tr>
240 | <tr>
241 | <td data-th="Trigger Config"><code>request</code> (diperlukan)</td>
242 | <td data-th="Description">Nama permintaan untuk dikirim (seperti yang ditetapkan dalam <a href="/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute">permintaan</a>).</td>
243 | </tr>
244 | <tr>
245 | <td data-th="Trigger Config"><code>vars</code></td>
246 | <td data-th="Description">Objek yang berisi pasangan nilai-kunci yang digunakan untuk mengganti <code>vars</code> didefinisikan dalam config di tingkat teratas, atau untuk menetapkan <code>vars</code> sebagai unik bagi pemicu ini (lihat juga <a href="/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering">Pengurutan penggantian variabel</a>).</td>
247 | </tr>
248 | <tr>
249 | <td data-th="Trigger Config"><code>selector</code> (diperlukan ketika <code>on</code> diatur ke <code>click</code>)</td>
250 | <td data-th="Description">Pemilih CSS digunakan untuk menyaring elemen yang harus dilacak. Gunakan nilai <code>*</code> untuk melacak semua elemen. Konfigurasi ini digunakan bersama pemicu <code>click</code>. Ketahui cara menggunakan pemilih untuk <a href="/docs/guides/analytics/use_cases.html#tracking-page-clicks">melacak klik halaman</a> dan <a href="/docs/guides/analytics/use_cases.html#tracking-social-interactions">interaksi sosial</a>.</td>
251 | </tr>
252 | <tr>
253 | <td data-th="Trigger Config"><code>scrollSpec</code> (diperlukan ketika <code>on</code> diatur ke <code>scroll</code>)</td>
254 | <td data-th="Description">Mengontrol berdasarkan kondisi ketika halaman digulirkan kejadian <code>scroll</code> akan dipicu. Objek ini bisa berisi <code>verticalBoundaries</code> dan <code>horizontalBoundaries</code>. Sekurangnya satu dari dua properti diperlukan agar kejadian <code>scroll</code> dipicu. Nilai-nilai untuk kedua properti tersebut harus larik angkat yang berisi batasan sebuah kejadian gulir akan dihasilkan. Lihat contoh ini dalam <a href="/docs/guides/analytics/use_cases.html#tracking-scrolling">melacak pengguliran</a>.</td>
255 | </tr>
256 | <tr>
257 | <td data-th="Trigger Config"><code>timerSpec</code> (diperlukan ketika <code>on</code> diatur ke <code>timer</code>)</td>
258 | <td data-th="Description">Mengontrol ketika kejadian <code>timer</code> dipicu. Timer akan langsung dipicu dan kemudian pada interval yang telah ditetapkan. Konfigurasi ini digunakan bersama pemicu <code>timer</code>.</td>
259 | </tr>
260 | </tbody>
261 | </table>
262 |
263 | **Penting:** Pemicu dari konfigurasi yang berprioritas lebih rendah dikesampingkan
264 | oleh pemicu dengan nama yang sama dari konfigurasi dengan prioritas lebih tinggi
265 | (lihat [Pengurutan penggantian variabel](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
266 |
267 | ### Bagaimana data dikirimkan: atribut transport
268 |
269 | Atribut `transport` menetapkan cara mengirim permintaan.
270 | Ketiga metode berikut ini diaktifkan secara default:
271 |
272 | <table>
273 | <thead>
274 | <tr>
275 | <th data-th="Transport Method" class="col-thirty">Metode Transport</th>
276 | <th data-th="Description">Keterangan</th>
277 | </tr>
278 | </thead>
279 | <tbody>
280 | <tr>
281 | <td data-th="Transport Method"><code>beacon</code></td>
282 | <td data-th="Description">Menunjukkan <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> bisa digunakan untuk mentransmisikan permintaan. Ini akan mengirimkan permintaan <code>POST</code>, dengan kredensial, dan bagian badan yang kosong.</td>
283 | </tr>
284 | <tr>
285 | <td data-th="Transport Method"><code>xhrpost</code></td>
286 | <td data-th="Description">Menunjukkan <code>XMLHttpRequest</code> bisa digunakan untuk mentransmisikan permintaan tersebut. Ini akan mengirimkan permintaan <code>POST</code>, dengan kredensial, dan badan teks yang kosong.</td>
287 | </tr>
288 | <tr>
289 | <td data-th="Transport Method"><code>image</code></td>
290 | <td data-th="Description">Menunjukkan permintaan bisa dikirimkan dengan menghasilkan tag <code>Image</code>. Ini akan mengirimkan permintaan <code>GET</code>.</td>
291 | </tr>
292 | </tbody>
293 | </table>
294 |
295 | Hanya satu metode transport yang digunakan,
296 | dan hanya yang memiliki prioritas lebih tinggi
297 | yang diaktifkan, diizinkan, dan tersedia.
298 | Prioritasnya adalah `beacon` > `xhrpost` > `image`.
299 | Jika agen-pengguna klien tidak mendukung sebuah metode,
300 | metode prioritas tertinggi berikutnya yang diaktifkan akan digunakan.
301 |
302 | Sertakan atribut `transport` dalam konfigurasi Anda
303 | hanya jika Anda ingin membatasi opsi transport,
304 | jika tidak, Anda bisa menghentikan permintaan.
305 |
306 | Dalam contoh di bawah ini,
307 | `beacon` dan `xhrpost` diatur ke false,
308 | sehingga tidak akan digunakan meski prioritasnya lebih tinggi daripada `image`.
309 | Jika agen-pengguna klien mendukung metode `image`,
310 | maka ia akan digunakan; jika tidak, tidak ada permintaan yang akan dikirimkan.
311 |
312 | [sourcecode:html]
313 | 'transport': {
314 | 'beacon': false,
315 | 'xhrpost': false,
316 | 'image': true
317 | }
318 | [/sourcecode]
319 |
320 | ## Pengurutan penggantian variabel
321 |
322 | AMP mengisi variabel dengan nilai berdasarkan urutan prioritas:
323 |
324 | 1. Konfigurasi jarak jauh (lewat `config`).
325 | 2. `vars` disarangkan di dalam pemicu di dalam `triggers`.
326 | 3. `vars` di tingkat teratas disarangkan di dalam `amp-analytics`.
327 | 4. Nilai yang disediakan oleh platform.
328 |
329 | Dalam contoh ini, ada konfigurasi jarak jauh,
330 | variabel yang didefinisikan di tingkat teratas, dalam pemicu, dan di tingkat platform:
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 | Ketika `var` yang sama didefinisikan di lebih dari satu lokasi,
358 | urutan prioritas variabel mengatur nilainya satu kali.
359 | Sehingga jika dalam contoh di atas konfigurasi jarak jauh mendefinisikan `account` sebagai UA-XXXXX-Y,
360 | maka nilai dari berbagai vars akan menjadi sebagai berikut:
361 |
362 | <table>
363 | <thead>
364 | <tr>
365 | <th data-th="var" class="col-thirty"><code>var</code></th>
366 | <th data-th="Value">Nilai</th>
367 | <th data-th="Defined By" class="col-thirty">Didefinisikan Oleh</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">Platform</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">Pemicu</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">Konfigurasi jarak jauh</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">Pemicu</td>
390 | </tr>
391 | </tbody>
392 | </table>
393 |
```
--------------------------------------------------------------------------------
/content/pages/how-it-works.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title: How it works
3 | $view: /views/blank.html
4 | ---
5 | <!doctype html>
6 | <html ⚡>
7 | <head>
8 | <meta charset="utf-8">
9 | <title>Accelerated Mobile Pages – A new approach to web performance</title>
10 | <link rel="canonical" href="https://www.ampproject.org/how-it-works/">
11 | <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
12 | <link href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Droid+Serif' rel='stylesheet' type='text/css'>
13 | <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
14 | <script src="https://cdn.ampproject.org/v0.js" async></script>
15 | <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
16 | <style amp-custom>
17 | body {
18 | margin: 0;
19 | font-family: 'Open Sans';
20 | }
21 |
22 | .brand-logo {
23 | font-family: Georgia, 'Droid Serif', serif;
24 | }
25 |
26 | .amp {
27 | font-size: 3em;
28 | }
29 |
30 | .ad-container {
31 | display: flex;
32 | justify-content: center;
33 | }
34 |
35 | .content-container p {
36 | line-height: 28px;
37 | margin: 32px 0;
38 | }
39 |
40 | body > header {
41 | border: 0 solid #f4f4f4;
42 | border-bottom-width: 1px;
43 | font-size: 1.4rem;
44 | }
45 |
46 | header,
47 | .article-body {
48 | padding: 15px;
49 | }
50 |
51 | .lightbox {
52 | background: #222;
53 | }
54 |
55 | .full-bleed {
56 | margin: 0 -15px;
57 | }
58 |
59 | .lightbox-content {
60 | position: absolute;
61 | top: 0;
62 | left: 0;
63 | right: 0;
64 | bottom: 0;
65 |
66 | display: flex;
67 | flex-direction: column;
68 | flex-wrap: nowrap;
69 | justify-content: center;
70 | align-items: center;
71 | }
72 |
73 | .lightbox-content p {
74 | color: #fff;
75 | padding: 15px;
76 | }
77 |
78 | .lightbox amp-img {
79 | width: 100%;
80 | }
81 |
82 | figure {
83 | margin: 0;
84 | }
85 |
86 | figcaption {
87 | color: #6f757a;
88 | padding: 15px 0;
89 | font-size: .9em;
90 | }
91 |
92 | .author {
93 | display: flex;
94 | align-items: center;
95 |
96 | background: #f4f4f4;
97 | padding: 0 15px;
98 |
99 | font-size: .8em;
100 |
101 | border: solid #dcdcdc;
102 | border-width: 1px 0;
103 | }
104 |
105 | .header-time {
106 | color: #a8a3ae;
107 | font-family: 'Roboto', sans-serif;
108 | font-size: 12px;
109 | }
110 |
111 | .author p {
112 | margin: 5px;
113 | }
114 |
115 | .byline {
116 | font-family: 'Roboto', sans-serif;
117 | display: inline-block;
118 | }
119 |
120 | .byline p {
121 | line-height: normal;
122 | }
123 |
124 | .byline .brand {
125 | color: #6f757a;
126 | }
127 |
128 | .standfirst {
129 | color: #6f757a;
130 | }
131 |
132 | .twitter {
133 | text-decoration: none;
134 | }
135 |
136 | #author-avatar {
137 | margin: 10px;
138 | border: 5px solid #fff;
139 | width: 50px;
140 | height: 50px;
141 | border-radius: 50%;
142 | }
143 |
144 | h1 {
145 | margin: 5px 0;
146 | font-weight: normal;
147 | }
148 |
149 | p:before {
150 | content: '';
151 | width: 14em;
152 | display: block;
153 | overflow: hidden;
154 | }
155 |
156 | footer {
157 | display: flex;
158 | align-items: center;
159 | justify-content: center;
160 | height: 100px;
161 | background: #f4f4f4;
162 | }
163 |
164 | hr {
165 | margin: 0;
166 | }
167 |
168 | amp-img {
169 | background-color: #f4f4f4;
170 | }
171 |
172 | h2 {
173 | margin-top: 2em;
174 | margin-bottom: 2em;
175 | font-family: Georgia, 'Droid Serif', serif;
176 | font-size: 1.3em;
177 | text-align: center;
178 | }
179 |
180 | code {
181 | color: green;
182 | }
183 |
184 | @media screen and (min-width: 767px) {
185 | main, body > header {
186 | margin: 0 10%;
187 | }
188 | }
189 |
190 | @media screen and (min-width: 900px) {
191 | main, body > header {
192 | margin: 0 18%;
193 | }
194 | }
195 | </style>
196 | </head>
197 | <body>
198 | <amp-analytics type="googleanalytics" id="analytics-ga">
199 | <script type="application/json">
200 | {
201 | "vars": {
202 | "account": "UA-67833617-1"
203 | },
204 | "triggers": {
205 | "trackPageview": {
206 | "on": "visible",
207 | "request": "pageview"
208 | }
209 | }
210 | }
211 | </script>
212 | </amp-analytics>
213 | <header>
214 | <div class="brand-logo">
215 | Accelerated Mobile Pages
216 | </div>
217 | </header>
218 | <main role="main">
219 | <article>
220 | <div class="content-container">
221 | <header>
222 | <h1 itemprop="headline">A new approach to web performance</h1>
223 | <time class="header-time" itemprop="datePublished"
224 | datetime="2015-10-01 07:30">October 7, 2015</time>
225 | <p class="standfirst">
226 | Web performance is not unexplored territory for the tech community: <a href="http://www.webperformance.com/library/reading.html">books</a> have been written about it, many <a href="https://stevesouders.com/talks.php">talks</a> have been given – there is even an entire <a href="http://velocityconf.com/">conference series</a> dedicated to the topic. However, users still frequently see poor web performance in the wild, particularly on mobile devices. Consumption of news articles, and similar relatively static content, is often painfully slow, with pages taking a long time to load. Even after text becomes visible, pages continue to build up over many seconds, as ads and images come into display. The result is an often jarring experience of janky scrolling and users needlessly losing their reading position.
227 | </p>
228 | <p class="standfirst">
229 | Over the last several months, discussions between publishers and technology companies began in earnest about the need to improve the entire mobile content ecosystem for everyone – publishers, consumer platforms, creators, and users. We asked ourselves, how can we improve this problem? In some ways, the trend nowadays is to switch to native apps on mobile, but we have read those books, and seen those presentations, and we know that the web can be fast if best practices are followed. To make the web fast at scale, we want to make it easier to create documents that are fast-by-default.
230 | </p>
231 | </header>
232 |
233 | <div class="author">
234 |
235 | <!-- This is the only AMP custom element in this article. Images are resources and thus subject to AMP's resource loading. -->
236 |
237 | <amp-img src="/static/img/malte.jpg" id="author-avatar" placeholder
238 | height="50" width="50" alt="Malte Ubl">
239 | </amp-img>
240 | <div class="byline">
241 | <p>
242 | by <span itemscope itemtype="http://schema.org/Person"
243 | itemprop="author"><b>Malte Ubl</b>
244 | <a class="twitter" href="https://twitter.com/cramforce">
245 | @cramforce</a></span>
246 | </p>
247 | <p class="brand">AMP Project Tech Lead<p>
248 | </div>
249 | </div>
250 | <div class="article-body" itemprop="articleBody">
251 | <p>
252 | This is a really hard problem to solve, so we decided to reduce scope. The web today is many things: an application platform, an e-commerce platform, a content platform, a gaming platform, and so much more. We decided to focus entirely on static content as it lends itself to more radical optimization approaches that are easier to apply across the board.
253 | </p>
254 |
255 | <p>
256 | We began to experiment with an idea: could we develop a restricted subset of the things we’d use from HTML, that's both fast and expressive, so that documents would always load and render with reliable performance? That experiment has culminated in a promising proof of concept we call <a href="https://www.ampproject.org/">Accelerated Mobile Pages (AMP)</a>. AMP HTML is built on existing web technologies, and the documents written in it render in all modern web browsers and web views. In fact, this page is, itself, an AMP HTML document.
257 | </p>
258 |
259 | <h2>The page you are currently reading is an AMP HTML document.</h2>
260 |
261 | <p>
262 | We think AMP HTML is promising, but we know it's not complete. We are <a href="https://github.com/ampproject/amphtml">sharing our proof-of-concept on GitHub</a> to start a conversation about how to make static content on the web fast. We want to collaborate with the entire web community to develop this promising idea into something more real, sharing our techniques, ideas, and code.
263 | </p>
264 | <p>
265 | One thing we realized early on is that many performance issues are caused by the integration of multiple JavaScript libraries, tools, embeds, etc. into a page. This isn’t saying that JavaScript immediately leads to bad performance, but once arbitrary JavaScript is in play, most bets are off because anything could happen at any time and it is hard to make any type of performance guarantee. With this in mind we made the tough decision that AMP HTML documents would not include any author-written JavaScript, nor any third-party scripts.
266 | </p>
267 | <p>
268 | JavaScript is the core building block for advanced web apps, but for static content it may not always be required: for a headline, some text and an image you do not need JS. Looking further into the content being created on the web nowadays, there are, however, things like lightboxes, various embeds, polls, quizzes and other interactive features that cannot easily be implemented without JavaScript. But the web platform has a great solution: <a href="http://www.html5rocks.com/en/tutorials/webcomponents/customelements/">custom elements</a> and <a href="http://webcomponents.org/">web components</a>. AMP components may have JavaScript under the hood, but it is coordinated with other AMP components, so its composition into the page doesn’t cause performance degradation. If AMP HTML provided the right custom elements, we might be able to get rid of arbitrary JavaScript for these documents altogether.
269 | </p>
270 |
271 | <h2>AMP HTML loves CSS!</h2>
272 |
273 | <p>
274 | So, AMP HTML comes with strong limitations on JS. What about CSS? AMP HTML loves CSS! We do add some <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#stylesheets">best practice enforcement</a>, but we do want AMP HTML documents to look like their authors intended them to, and so allowing extensive styling is core to the platform.
275 | </p>
276 |
277 | <p>
278 | Ads and analytics – while critical for publishers – are a big part of the performance problem and so they must be a big part of the solution. Sites often deploy many analytics providers. Ad serving is also a complicated ecosystem. Embedding an ad or analytics often implies giving up control of what eventually happens to a site because they can typically inject any JavaScript they want into pages. AMP HTML does not allow this. We realize that both ads and analytics are an important element of monetization on the web, and so we need to support them: our goal is to realign monetization with great user experience.
279 | </p>
280 | <p>
281 | AMP HTML is taking the following approach to analytics: so-called “tracking pixels” can be embedded into AMP documents as long as they don’t use JavaScript. They typically come with a <code>noscript</code> version that makes this easy. More advanced analytics are currently not supported. Our vision is to deploy a single, unified, auditable, high performance, open source analytics library with AMP HTML that can report to various existing analytics provider backends, so it is possible to use the existing ecosystem without overloading a page with analytics software.
282 | </p>
283 | <p>
284 | We’ve taken first steps to make ads in AMP HTML better, but we aren’t done yet. AMP HTML doesn’t allow JavaScript so ads cannot be directly embedded – instead they live in sandboxed iframes with no access to the primary document. Relying on iframes solves some of the worst performance pitfalls with ads, in particular with respect to <code>document.write</code>. We also prioritize ads lower during loading than other content and optimize load timing to avoid jank. Ads in AMP files can still be heavyweight, so there is still a lot of work to do for us.
285 | </p>
286 |
287 | <h2>AMP HTML is pretty fast.</h2>
288 |
289 | <p>
290 | So, how fast is AMP HTML? Pretty fast. In a sample of pages our early partners created we are seeing performance improvements measured through <a href="https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index">Speed Index</a> between 15% and 85%. This was measured with a simulated 3G connection and a simulated Nexus 5 device. The best part is you don't need to be a performance expert to get this; best practices are baked right in. And as we optimize AMP HTML in the future, all pages benefit.
291 | </p>
292 | <p>
293 | But how do we get from good to, let’s say, instant? We’ll cheat :) AMP documents are from the ground up designed to be efficiently pre-renderable. Browsers have long supported pre-rendering through the <code><link rel=prerender></code> tag, but they need to be conservative about this mechanism because prerendering can be expensive. With AMP HTML we added the ability to tell a document: render yourself, but only as far as what is visible above the fold and only elements which are not CPU intensive to minimize the cost of pre-rendering. With this mechanism in place, referrers of AMP document can initiate rendering of docs before the user acts much more aggressively, so that in many cases the document will be done rendering by the time the user clicks.
294 | </p>
295 | <p>
296 | With all of these techniques in place, AMP HTML documents can be loaded with a small set of HTTP requests: the document itself, custom fonts (if used) and what we call the AMP JavaScript library that implements the AMP custom elements and resource loading.
297 | </p>
298 | <p>
299 | Our goal with AMP HTML is reliable performance, so we designed it to be easily cacheable by content delivery networks (CDNs). Google is offering a service that delivers AMP HTML documents given their URL through its CDN. Others can use this service or make their own or serve AMP HTML pages from a plain-old-web-server.
300 | </p>
301 |
302 | <h2>Resources must declare their sizing up-front</h2>
303 |
304 | <p>
305 | This brings us to the final topic that makes AMP HTML unique: all resource loading is controlled by the AMP library and, more importantly, resources must declare their sizing up-front. Document authors have to state resource sizes explicitly. This doesn’t mean that resources can’t be responsive – they can be, but their aspect ratio or dimensions needs to be inferable from the HTML alone. This means that after initial layout, an AMP document does not change until user action. An ad at the top of the page can’t suddenly say: “I want to be 200 pixels high instead of 50.” This dramatically reduces jank and prevents users from losing their place in the document. All custom elements are subject to this restriction. Placement on the screen can be reserved while their implementations download asynchronously. This gets us lazy loading with zero visual jank.
306 | </p>
307 | <p>
308 | To summarize: AMP HTML is a specialized subset of HTML with custom elements that provides reliable performance and instant loading of static content. Nothing about the project is set in stone. We are sharing an early version of the <a href="https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md">AMP HTML spec</a> as well as a <a href="https://github.com/ampproject/amphtml">prototype implementation on GitHub</a> and we are looking forward to collaborating with the community on all aspects of the project. We expect there are still low (or not so low) hanging fruit for performance optimization that we missed, so if you are an expert in web performance or just want to dig in we’d love your help. Also, if you happen to know a lot about publishing documents on the internet we’d love your input: Maybe some of our restrictions are a bit too drastic for the things you work on. We’d love to hear about those cases, so we can thoughtfully extend the capabilities of AMP HTML while keeping pages lean and fast.<br> <a href="https://github.com/ampproject/amphtml">See you over on GitHub!</a>
309 | </p>
310 | </div>
311 | </div>
312 | </article>
313 | </main>
314 |
315 | <footer>
316 | <div class="amp"> ⚡</div>
317 | </footer>
318 | </body>
319 | </html>
320 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/deep_dive_analytics@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Informações detalhadas sobre o AMP Analytics
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | Este guia fornece informações detalhadas sobre o
9 | [componente amp-analytics](/docs/reference/extended/amp-analytics.html),
10 | dividindo uma configuração de exemplo do `amp-analytics` nestas três categorias básicas:
11 |
12 | O restante deste guia usa esse exemplo de configuração,
13 | que rastreia as visualizações de páginas e os cliques de usuários em links
14 | e envia os dados de análise ao provedor de terceiros,
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 | **Observação:** o exemplo de código acima tem por objetivo ajudá-lo a aprender, mas não é de forma alguma um exemplo realista. Se você estiver trabalhando com provedores de análise, é provável que o exemplo acima não faça sentido; as configurações dos provedores removem a complexidade. Consulte a documentação do seu provedor de análises para obter exemplos de configurações.
57 |
58 | ## Onde enviar dados de análise: atributo type
59 |
60 | O AMP foi projetado para oferecer suporte a dois padrões comuns de coleta de dados:
61 |
62 | * Ingestão por um endpoint de propriedade do editor para sistemas de análise internos.
63 | * Ingestão por um endpoint de propriedade de um fornecedor para interoperabilidade com uma solução desse fornecedor
64 | (por exemplo, [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 dados de análise a um provedor de análises,
67 | inclua o atributo `type` na tag `amp-analytics` e defina seu valor
68 | para o fornecedor adequado, segundo definido na
69 | [especificação do amp-analytics](/docs/reference/extended/amp-analytics.html).
70 |
71 | Por exemplo: `<amp-analytics type="googleanalytics">` envia dados de análise
72 | ao provedor de análise de terceiros, Google Analytics.
73 | Para enviar dados para um endpoint de propriedade do editor,
74 | basta não incluir o atributo `type`;
75 | os dados de análise são enviados para endpoints definidos para cada
76 | [solicitação](/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute).
77 |
78 | As configurações de fornecedores de análises são uma forma rápida
79 | de dar os primeiros passos com o `amp-analytics`.
80 | Você deve consultar a documentação e os recursos de ajuda
81 | do fornecedor para obter mais orientações.
82 | Como mencionado anteriormente,
83 | a lista de fornecedores que já foram integrados ao AMP, assim como os links
84 | para suas documentações específicas, pode ser encontrada na
85 | [especificação do amp-analytics](/docs/reference/extended/amp-analytics.html).
86 |
87 | Se você é um fornecedor de análises,
88 | saiba mais sobre
89 | [como integrar sua própria configuração de análise no AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
90 |
91 | ## Carregar configuração remota: atributo config
92 |
93 | Você não precisa incluir toda a configuração
94 | para `amp-analytics` inteiramente na sua página AMP.
95 | Em vez disso, você pode chamar um URL remoto
96 | para toda a configuração ou parte dela.
97 |
98 | Isso permite que você faça coisas como variar a configuração
99 | com base em uma solicitação específica.
100 | Se você, como editor, tem controle sobre o arquivo remoto,
101 | é possível realizar qualquer procedimento necessário no lado do servidor
102 | para construir os dados de configuração.
103 |
104 | O primeiro passo para carregar configurações remotas é
105 | incluir o atributo config na tag `amp-analytics`:
106 |
107 | [sourcecode:html]
108 | <amp-analytics config="https://example.com/analytics.account.config.json">
109 | [/sourcecode]
110 |
111 | O próximo passo é criar o conteúdo JSON que reside no URL remoto.
112 | Neste exemplo simples,
113 | a configuração contida no objeto JSON é exatamente o valor da variável para a conta de análise.
114 |
115 | Conteúdo de exemplo em `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 | A etapa final é assegurar-se de que o arquivo remoto tenha sido extraído
126 | para o lugar adequado na configuração do `amp-analytics`.
127 | Nas duas solicitações de `pageview` e `event` do exemplo,
128 | o valor da variável `account` é definido automaticamente
129 | para o valor de conta no 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:** o AMP não realiza a validação em relação a diversos usos da mesma variável.
139 | Os valores são preenchidos seguindo uma ordem de preferência de substituição de variável
140 | e os valores nos URLs remotos estão no topo dessa ordem
141 | (consulte [Ordem de substituição de variáveis](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
142 |
143 | ## Solicitações, acionamento e transportes
144 |
145 | O atributo `requests` define “quais dados são enviados”
146 | (por exemplo, `pageviews`, `events`),
147 | e para onde os dados são enviados (os URLs usados para transmitir dados).
148 |
149 | O atributo `triggers` descreve quando dados de análise devem ser enviados,
150 | por exemplo, quando um usuário visualiza uma página ou clica em um link.
151 |
152 | O atributo `transport` especifica como enviar a solicitação,
153 | mais especificamente, o protocolo.
154 |
155 | Continue lendo para saber mais sobre essas configurações.
156 | (Você também pode ler sobre essas configurações na
157 | [referência do amp-analytics](/docs/reference/extended/amp-analytics.html).)
158 |
159 | ### Quais dados são enviados: atributo requests
160 |
161 | O `request-name` é usado na configuração de acionamento para especificar
162 | que solicitação deve ser enviada em resposta a um evento específico.
163 | O `request-value` é um URL `https`.
164 | Esses valores podem incluir tokens de marcadores de posição
165 | que podem fazer referência a outras solicitações ou variáveis.
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 | Alguns provedores de análise (incluindo o Google Analytics)
175 | já forneceram configurações,
176 | que você usará por meio do atributo `type`.
177 | Se você estiver usando um provedor de análises,
178 | pode ser que não precise incluir informações de `requests`.
179 | Consulte a documentação do seu fornecedor para descobrir
180 | se `requests` precisa ser configurado, e como.
181 |
182 | #### Anexar o URL de solicitação: parâmetros de URL adicionais
183 |
184 | O atributo [extraUrlParams](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md#extra-url-params)
185 | especifica parâmetros adicionais para anexar à string de consulta do URL da solicitação por meio da convenção habitual "&foo=baz".
186 |
187 | O exemplo `amp-analytics` adiciona um parâmetro adicional <code>cd1</code>
188 | à solicitação e define o valor do parâmetro para “AMP”:
189 |
190 | [sourcecode:html]
191 | "extraUrlParams": {
192 | "cd1": "AMP"
193 | }
194 | [/sourcecode]
195 |
196 | ### Quando os dados são enviados: atributo trigger
197 |
198 | O atributo `triggers` descreve quando uma solicitação de análise deve ser enviada.
199 | Ele contém um par de valores-chave de trigger-name e trigger-configuration.
200 | O nome do trigger pode ser qualquer string composta
201 | por caracteres alfanuméricos (a-zA-Z0-9).
202 |
203 | Por exemplo,
204 | o seguinte elemento `amp-analytics` está configurado para enviar uma solicitação para
205 | `https://example.com/analytics` quando o documento for carregado pela primeira vez,
206 | e cada vez que uma tag `a` for clicada:
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 | O AMP oferece suporte às seguintes configurações de acionamento:
227 |
228 | <table>
229 | <thead>
230 | <tr>
231 | <th data-th="Trigger Config" class="col-thirty">Configuração de acionamento</th>
232 | <th data-th="Description">Descrição</th>
233 | </tr>
234 | </thead>
235 | <tbody>
236 | <tr>
237 | <td data-th="Trigger Config"><code>on</code> (obrigatório)</td>
238 | <td data-th="Description">O evento a ouvir. Os valores válidos são <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> (obrigatório)</td>
242 | <td data-th="Description">Nome da solicitação a enviar (segundo especificado nas <a href="/docs/guides/analytics/deep_dive_analytics.html#what-data-gets-sent-requests-attribute">solicitações</a>).</td>
243 | </tr>
244 | <tr>
245 | <td data-th="Trigger Config"><code>vars</code></td>
246 | <td data-th="Description">Um objeto que contém pares de valor-chave usados para modificar<code>vars</code> definidas na configuração de nível superior ou para especificar <code>vars</code> exclusivas para esse acionamento (consulte também <a href="/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering">Ordem da substituição de variáveis</a>).</td>
247 | </tr>
248 | <tr>
249 | <td data-th="Trigger Config"><code>selector</code> (obrigatório quando <code>on</code> for definido como <code>click</code>)</td>
250 | <td data-th="Description">Um seletor CSS usado para refinar quais elementos devem ser rastreados. Use o valor <code>*</code> para rastrear todos os elementos. Essa configuração é usada em conjunto com o acionamento <code>click</code>. Saiba como usar o seletor para <a href="/docs/guides/analytics/use_cases.html#tracking-page-clicks">rastrear cliques de página</a> e <a href="/docs/guides/analytics/use_cases.html#tracking-social-interactions">interações sociais</a>.</td>
251 | </tr>
252 | <tr>
253 | <td data-th="Trigger Config"><code>scrollSpec</code> (obrigatório quando <code>on</code> for definido como <code>scroll</code>)</td>
254 | <td data-th="Description">Controla sob que condições o evento <code>scroll</code> é acionado quando a página é rolada. Esse objeto pode conter<code>verticalBoundaries</code> e <code>horizontalBoundaries</code>. Pelo menos uma das duas propriedades é obrigatória para que um evento <code>scroll</code> seja acionado. Os valores para ambas as propriedades devem ser matrizes de números que contenham os limites nos quais um evento de rolagem é gerado. Consulte exemplos em <a href="/docs/guides/analytics/use_cases.html#tracking-scrolling">rastrear rolagem</a>.</td>
255 | </tr>
256 | <tr>
257 | <td data-th="Trigger Config"><code>timerSpec</code> (obrigatório quando <code>on</code> for definido como <code>timer</code>)</td>
258 | <td data-th="Description">Controla quando o evento <code>timer</code> é acionado. O temporizador será acionado imediatamente e, depois, a um intervalo especificado. Essa configuração é usada em conjunto com o acionamento <code>timer</code>.</td>
259 | </tr>
260 | </tbody>
261 | </table>
262 |
263 | **Importante:** acionamentos de uma configuração com menor precedência são sobrepostos
264 | por acionamentos com os mesmos nomes de uma configuração com maior precedência.
265 | (consulte [Ordem de substituição de variáveis](/docs/guides/analytics/deep_dive_analytics.html#variable-substitution-ordering)).
266 |
267 | ### Como os dados são enviados: atributo transport
268 |
269 | O atributo `transport` especifica como enviar a solicitação.
270 | Os três seguintes métodos são ativados por padrão:
271 |
272 | <table>
273 | <thead>
274 | <tr>
275 | <th data-th="Transport Method" class="col-thirty">Método de transporte</th>
276 | <th data-th="Description">Descrição</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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> pode ser usado para transmitir a solicitação. Isso enviará uma solicitação de <code>POST</code> com credenciais e o corpo vazio.</td>
283 | </tr>
284 | <tr>
285 | <td data-th="Transport Method"><code>xhrpost</code></td>
286 | <td data-th="Description">Indica que <code>XMLHttpRequest</code> pode ser usado para transmitir a solicitação. Isso enviará uma solicitação de <code>POST</code> com credenciais e corpo vazio.</td>
287 | </tr>
288 | <tr>
289 | <td data-th="Transport Method"><code>image</code></td>
290 | <td data-th="Description">Indica que a solicitação pode ser enviada gerando uma tag <code>Image</code>. Isso enviará uma solicitação <code>GET</code>.</td>
291 | </tr>
292 | </tbody>
293 | </table>
294 |
295 | Somente um método de transporte é usado:
296 | aquele com a precedência mais alta
297 | que esteja ativado, autorizado e disponível.
298 | A precedência é `beacon` > `xhrpost` > `image`.
299 | Se o user agent do cliente não oferecer suporte a um método,
300 | o próximo método de precedência mais alta ativado será usado.
301 |
302 | Somente inclua o atributo `transport` em sua configuração
303 | se quiser limitar as opções de transporte,
304 | caso contrário, você poderá interromper as solicitações.
305 |
306 | No exemplo abaixo,
307 | `beacon` e `xhrpost` são definidos como falsos,
308 | de forma que não serão usados, mesmo que tenham precedência mais alta do que `image`.
309 | Se o user agent do cliente oferecer suporte ao método `image`,
310 | ele será usado; caso contrário, a solicitação não será enviada.
311 |
312 | [sourcecode:html]
313 | 'transport': {
314 | 'beacon': false,
315 | 'xhrpost': false,
316 | 'image': true
317 | }
318 | [/sourcecode]
319 |
320 | ## Ordem de substituição de variáveis
321 |
322 | O AMP preenche as variáveis com valores em uma ordem de precedência:
323 |
324 | 1. Configurações remotas (via `config`).
325 | 2. `vars` aninhadas em um acionamento dentro de `triggers`.
326 | 3. `vars` no nível superior aninhadas dentro de `amp-analytics`.
327 | 4. Valores fornecidos pela plataforma.
328 |
329 | Neste exemplo, há uma configuração remota,
330 | variáveis definidas no nível superior, em acionamentos e no nível de 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 | Quando a mesma `var` é definida em vários locais,
358 | a ordem de precedência da variável define seu valor uma vez.
359 | Assim, se a configuração remota definiu `account` como UA-XXXXX-Y no exemplo acima,
360 | os valores de várias variáveis serão os seguintes:
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">Acionamento</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">Configurações remotas</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">Acionamento</td>
390 | </tr>
391 | </tbody>
392 | </table>
393 |
```