This is page 11 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: Anwendungsbeispiele
3 | ---
4 |
5 | Diese Anleitung enthält eine Reihe von Anwendungsbeispielen für das Erfassen der Nutzerinteraktion:
6 |
7 | [TOC]
8 |
9 | Sie möchten ein Anwendungsbeispiel hinzufügen?
10 | [Dann geben Sie uns Bescheid.](https://github.com/ampproject/docs/issues/new)
11 |
12 | Unter [Beitrag leisten](https://www.ampproject.org/docs/support/contribute.html) erfahren Sie, wie Sie eigene Anwendungsbeispiele bereitstellen können.
13 |
14 | ## Seitenaufrufe erfassen
15 |
16 | Erfahren Sie, wie Sie mittels `amp-pixel` und `amp-analytics` Seitenaufrufe erfassen.
17 |
18 | ### amp-pixel verwenden
19 |
20 | Daten zu Seitenaufrufen mittels [amp-pixel](/docs/reference/amp-pixel.html) an eine angegebene URL senden:
21 |
22 | [sourcecode:html]
23 | <amp-pixel src="https://foo.com/pixel?"></amp-pixel>
24 | [/sourcecode]
25 |
26 | ### amp-pixel verwenden – kein Anbieter
27 |
28 | Daten zu Seitenaufrufen mittels [amp-analytics](/docs/reference/extended/amp-analytics.html) an eine angegebene URL senden:
29 |
30 | [sourcecode:html]
31 | <amp-analytics>
32 | <script type="application/json">
33 | {
34 | "requests": {
35 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
36 | },
37 | "vars": {
38 | "account": "ABC123"
39 | },
40 | "triggers": {
41 | "trackPageview": {
42 | "on": "visible",
43 | "request": "pageview"
44 | }
45 | }
46 | }
47 | </script>
48 | </amp-analytics>
49 | [/sourcecode]
50 |
51 | ### amp-analytics verwenden – googleanalytics
52 |
53 | Daten zu Seitenaufrufen an Google Analytics senden (siehe auch [Seiten-Tracking in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
54 |
55 | [sourcecode:html]
56 | <amp-analytics type="googleanalytics" id="analytics1">
57 | <script type="application/json">
58 | {
59 | "vars": {
60 | "account": "UA-XXXXX-Y" // Replace with your property ID.
61 | },
62 | "triggers": {
63 | "trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
64 | "on": "visible",
65 | "request": "pageview"
66 | }
67 | }
68 | }
69 | </script>
70 | </amp-analytics>
71 | [/sourcecode]
72 |
73 | ## Seitenklicks erfassen
74 |
75 | Erfahren Sie, wie Sie Seitenklicks mittels [amp-analytics](/docs/reference/extended/amp-analytics.html) erfassen und Ereignisdaten an eine angegebene URL und an [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/) senden können.
76 |
77 | ### Daten an eine angegebene URL senden
78 |
79 | Im folgenden Beispiel wird mithilfe des `selector`-Attributs jedes Mal ein `click`-Ereignis an die angegebene URL gesendet, wenn ein Nutzer auf einen Link (`a href`) klickt:
80 |
81 | [sourcecode:html]
82 | <amp-analytics>
83 | <script type="application/json">
84 | {
85 | "requests": {
86 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
87 | },
88 | "vars": {
89 | "account": "ABC123"
90 | },
91 | "triggers": {
92 | "trackAnchorClicks": {
93 | "on": "click",
94 | "selector": "a",
95 | "request": "event",
96 | "vars": {
97 | "eventId": "42",
98 | "eventLabel": "clicked on a link"
99 | }
100 | }
101 | }
102 | }
103 | </script>
104 | </amp-analytics>
105 | [/sourcecode]
106 |
107 | ### Daten an Google Analytics senden
108 |
109 | Im folgenden Beispiel wird mithilfe des `selector`-Attributs von `trigger` ein `click`-Ereignis an Google Analytics gesendet, wenn auf ein bestimmtes Element geklickt wird (siehe auch [AMP-Ereignis-Tracking in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
110 |
111 | [sourcecode:html]
112 | <amp-analytics type="googleanalytics" id="analytics3">
113 | <script type="application/json">
114 | {
115 | "vars": {
116 | "account": "UA-XXXXX-Y" // Replace with your property ID.
117 | },
118 | "triggers": {
119 | "trackClickOnHeader" : {
120 | "on": "click",
121 | "selector": "#header",
122 | "request": "event",
123 | "vars": {
124 | "eventCategory": "ui-components",
125 | "eventAction": "header-click"
126 | }
127 | }
128 | }
129 | }
130 | </script>
131 | </amp-analytics>
132 | [/sourcecode]
133 |
134 | ## Scrollen erfassen
135 |
136 | Sie können mittels [amp-analytics](/docs/reference/extended/amp-analytics.html) das Scrollen auf Seiten erfassen.
137 | Im folgenden Beispiel wird mithilfe des `scrollspec`-Attributs ein `scroll`-Ereignis an die angegebene URL gesendet, wenn auf einer Seite vertikal um 25 %, 50 % und 90 % gescrollt wird.
138 | Das Ereignis wird auch dann ausgelöst, wenn auf der Seite horizontal bis 90 % der `scroll`-Breite gescrollt wird:
139 |
140 | [sourcecode:html]
141 | <amp-analytics>
142 | <script type="application/json">
143 | {
144 | "requests": {
145 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
146 | },
147 | "vars": {
148 | "account": "ABC123"
149 | },
150 | "triggers": {
151 | "scrollPings": {
152 | "on": "scroll",
153 | "scrollSpec": {
154 | "verticalBoundaries": [25, 50, 90],
155 | "horizontalBoundaries": [90]
156 | }
157 | }
158 | }
159 | }
160 | </script>
161 | </amp-analytics>
162 | [/sourcecode]
163 |
164 | ## Interaktionen über soziale Netzwerke erfassen
165 |
166 | Erfahren Sie, wie Sie Interaktionen über soziale Netzwerke mittels [amp-analytics](/docs/reference/extended/amp-analytics.html) erfassen und Ereignisdaten an eine angegebene URL und an [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/) senden.
167 |
168 | ### Daten an eine angegebene URL senden
169 |
170 | Im folgenden Beispiel wird mithilfe des `selector`-Attributs jedes Mal ein `click`-Ereignis an die angegebene URL gesendet, wenn ein Nutzer auf einen Tweet (`#tweet-link`) klickt:
171 |
172 | [sourcecode:html]
173 | <amp-analytics>
174 | <script type="application/json">
175 | {
176 | "requests": {
177 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
178 | },
179 | "vars": {
180 | "account": "ABC123"
181 | },
182 | "triggers": {
183 | "trackClickOnTwitterLink": {
184 | "on": "click",
185 | "selector": "#tweet-link",
186 | "request": "event",
187 | "vars": {
188 | "eventId": "43",
189 | "eventLabel": "clicked on a tweet link"
190 | }
191 | }
192 | }
193 | }
194 | </script>
195 | </amp-analytics>
196 | [/sourcecode]
197 |
198 | ### Daten an Google Analytics senden
199 |
200 | Im folgenden Beispiel wird mithilfe des `selector`-Attributs von `trigger` ein Ereignis gesendet, wenn auf ein bestimmtes Element geklickt wird (siehe auch [AMP-Tracking von Interaktionen über soziale Netzwerke in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
201 |
202 | [sourcecode:html]
203 | <amp-analytics type="googleanalytics" id="analytics4">
204 | <script type="application/json">
205 | {
206 | "vars": {
207 | "account": "UA-XXXXX-Y" // Replace with your property ID.
208 | },
209 | "triggers": {
210 | "trackClickOnTwitterLink" : {
211 | "on": "click",
212 | "selector": "#tweet-link",
213 | "request": "social",
214 | "vars": {
215 | "socialNetwork": "twitter",
216 | "socialAction": "tweet",
217 | "socialTarget": "https://www.examplepetstore.com"
218 | }
219 | }
220 | }
221 | }
222 | </script>
223 | </amp-analytics>
224 | [/sourcecode]
225 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Casos de uso
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | En esta guía se incluye un conjunto de casos de uso comunes para realizar un seguimiento de la captación de usuarios:
9 |
10 | ¿Quieres agregar un caso de uso?
11 | [Cuéntanos](https://github.com/ampproject/docs/issues/new).
12 |
13 | También puedes aportar tus propios casos de uso;
14 | consulta [Cómo contribuir](https://www.ampproject.org/docs/support/contribute.html).
15 |
16 | ## Seguimiento de vistas de página
17 |
18 | Obtén información acerca de cómo realizar un seguimiento de las vistas de página usando `amp-pixel` y `amp-analytics`.
19 |
20 | ### Con amp-pixel
21 |
22 | Envía datos de vistas de página a una URL especificada usando
23 | [amp-pixel](/docs/reference/amp-pixel.html):
24 |
25 | [sourcecode:html]
26 | <amp-pixel src="https://foo.com/pixel?"></amp-pixel>
27 | [/sourcecode]
28 |
29 | ### Con amp-analytics (sin proveedor)
30 |
31 | Envía datos de vistas de página a una URL especificada usando
32 | [amp-analytics](/docs/reference/extended/amp-analytics.html):
33 |
34 | [sourcecode:html]
35 | <amp-analytics>
36 | <script type="application/json">
37 | {
38 | "requests": {
39 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
40 | },
41 | "vars": {
42 | "account": "ABC123"
43 | },
44 | "triggers": {
45 | "trackPageview": {
46 | "on": "visible",
47 | "request": "pageview"
48 | }
49 | }
50 | }
51 | </script>
52 | </amp-analytics>
53 | [/sourcecode]
54 |
55 | ### Con amp-analytics (googleanalytics)
56 |
57 | Envía datos de vistas de página a Google Analytics
58 | (consulta también [Seguimiento de páginas en Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
59 |
60 | [sourcecode:html]
61 | <amp-analytics type="googleanalytics" id="analytics1">
62 | <script type="application/json">
63 | {
64 | "vars": {
65 | "account": "UA-XXXXX-Y" // Replace with your property ID.
66 | },
67 | "triggers": {
68 | "trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
69 | "on": "visible",
70 | "request": "pageview"
71 | }
72 | }
73 | }
74 | </script>
75 | </amp-analytics>
76 | [/sourcecode]
77 |
78 | ## Seguimiento de clics en páginas
79 |
80 | Obtén información acerca de cómo realizar un seguimiento de los clics en páginas usando
81 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
82 | enviando datos de eventos a una URL especificada y a
83 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
84 |
85 | ### Envío de datos a URL especificadas
86 |
87 | En el ejemplo siguiente se usa el atributo `selector` para enviar un evento `click`
88 | a la URL especificada cada vez que un usuario hace clic en un vínculo (`<a href>`):
89 |
90 | [sourcecode:html]
91 | <amp-analytics>
92 | <script type="application/json">
93 | {
94 | "requests": {
95 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
96 | },
97 | "vars": {
98 | "account": "ABC123"
99 | },
100 | "triggers": {
101 | "trackAnchorClicks": {
102 | "on": "click",
103 | "selector": "a",
104 | "request": "event",
105 | "vars": {
106 | "eventId": "42",
107 | "eventLabel": "clicked on a link"
108 | }
109 | }
110 | }
111 | }
112 | </script>
113 | </amp-analytics>
114 | [/sourcecode]
115 |
116 | ### Envío de datos a Google Analytics
117 |
118 | En el ejemplo siguiente se usa el atributo `selector` de `trigger`
119 | para enviar un evento `click` a Google Analytics cuando se hace clic en un elemento específico
120 | (consulta también
121 | [Seguimiento de eventos de AMP en Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
122 |
123 | [sourcecode:html]
124 | <amp-analytics type="googleanalytics" id="analytics3">
125 | <script type="application/json">
126 | {
127 | "vars": {
128 | "account": "UA-XXXXX-Y" // Replace with your property ID.
129 | },
130 | "triggers": {
131 | "trackClickOnHeader" : {
132 | "on": "click",
133 | "selector": "#header",
134 | "request": "event",
135 | "vars": {
136 | "eventCategory": "ui-components",
137 | "eventAction": "header-click"
138 | }
139 | }
140 | }
141 | }
142 | </script>
143 | </amp-analytics>
144 | [/sourcecode]
145 |
146 | ## Seguimiento del desplazamiento
147 |
148 | Realiza un seguimiento del desplazamiento usando [amp-analytics](/docs/reference/extended/amp-analytics.html).
149 | En el ejemplo siguiente se usa el atributo `scrollspec` para enviar un evento `scroll`
150 | a la URL especificada cuando la página se desplaza verticalmente un 25, un 50 y un 90%.
151 | El evento también se activa cuando la página se desplaza horizontalmente
152 | hasta el 90% del ancho de `scroll`:
153 |
154 | [sourcecode:html]
155 | <amp-analytics>
156 | <script type="application/json">
157 | {
158 | "requests": {
159 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
160 | },
161 | "vars": {
162 | "account": "ABC123"
163 | },
164 | "triggers": {
165 | "scrollPings": {
166 | "on": "scroll",
167 | "scrollSpec": {
168 | "verticalBoundaries": [25, 50, 90],
169 | "horizontalBoundaries": [90]
170 | }
171 | }
172 | }
173 | }
174 | </script>
175 | </amp-analytics>
176 | [/sourcecode]
177 |
178 | ## Seguimiento de interacciones sociales
179 |
180 | Obtén información acerca de cómo realizar un seguimiento de las interacciones sociales usando
181 | [amp-analytics](/docs/reference/extended/amp-analytics.html)y
182 | enviando datos de eventos a una URL especificada y a
183 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
184 |
185 | ### Envío de datos a URL especificadas
186 |
187 | En el ejemplo siguiente se usa el atributo `selector` para enviar un evento `click`
188 | a la URL especificada cada vez que un usuario hace clic en un tuit (`#tweet-link`):
189 |
190 | [sourcecode:html]
191 | <amp-analytics>
192 | <script type="application/json">
193 | {
194 | "requests": {
195 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
196 | },
197 | "vars": {
198 | "account": "ABC123"
199 | },
200 | "triggers": {
201 | "trackClickOnTwitterLink": {
202 | "on": "click",
203 | "selector": "#tweet-link",
204 | "request": "event",
205 | "vars": {
206 | "eventId": "43",
207 | "eventLabel": "clicked on a tweet link"
208 | }
209 | }
210 | }
211 | }
212 | </script>
213 | </amp-analytics>
214 | [/sourcecode]
215 |
216 | ### Envío de datos a Google Analytics
217 |
218 | En el ejemplo siguiente se usa el atributo `selector` de `trigger`
219 | para enviar un evento cuando se hace clic en un botón específico de una red social
220 | (consulta también
221 | [Seguimiento de interacciones sociales de AMP en Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
222 |
223 | [sourcecode:html]
224 | <amp-analytics type="googleanalytics" id="analytics4">
225 | <script type="application/json">
226 | {
227 | "vars": {
228 | "account": "UA-XXXXX-Y" // Replace with your property ID.
229 | },
230 | "triggers": {
231 | "trackClickOnTwitterLink" : {
232 | "on": "click",
233 | "selector": "#tweet-link",
234 | "request": "social",
235 | "vars": {
236 | "socialNetwork": "twitter",
237 | "socialAction": "tweet",
238 | "socialTarget": "https://www.examplepetstore.com"
239 | }
240 | }
241 | }
242 | }
243 | </script>
244 | </amp-analytics>
245 | [/sourcecode]
246 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Cas d'utilisation
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | Ce guide propose des cas d'utilisation courants pour suivre l'engagement des utilisateurs :
9 |
10 | Vous aimeriez ajouter un cas d'utilisation ?
11 | [Dites-le nous.](https://github.com/ampproject/docs/issues/new)
12 |
13 | Vous pouvez également partager vos propres cas d'utilisation ;
14 | voir [Comment contribuer](https://www.ampproject.org/docs/support/contribute.html).
15 |
16 | ## Suivi des vues de page
17 |
18 | Découvrez comment suivre les vues de page avec `amp-pixel` et `amp-analytics`.
19 |
20 | ### Utilisation du composant amp-pixel
21 |
22 | Envoyez des données sur les vues de page à une URL spécifiée
23 | en utilisant [amp-pixel](/docs/reference/amp-pixel.html) :
24 |
25 | [sourcecode:html]
26 | <amp-pixel src="https://foo.com/pixel?"></amp-pixel>
27 | [/sourcecode]
28 |
29 | ### Utilisation du composant amp-analytics (pas de fournisseur)
30 |
31 | Envoyez des données sur les vues de page à une URL spécifiée
32 | en utilisant [amp-analytics](/docs/reference/extended/amp-analytics.html) :
33 |
34 | [sourcecode:html]
35 | <amp-analytics>
36 | <script type="application/json">
37 | {
38 | "requests": {
39 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
40 | },
41 | "vars": {
42 | "account": "ABC123"
43 | },
44 | "triggers": {
45 | "trackPageview": {
46 | "on": "visible",
47 | "request": "pageview"
48 | }
49 | }
50 | }
51 | </script>
52 | </amp-analytics>
53 | [/sourcecode]
54 |
55 | ### Utilisation du composant amp-analytics (googleanalytics)
56 |
57 | Envoyez des données sur les vues de page à Google Analytics
58 | (voir également [Suivi des pages dans Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)) :
59 |
60 | [sourcecode:html]
61 | <amp-analytics type="googleanalytics" id="analytics1">
62 | <script type="application/json">
63 | {
64 | "vars": {
65 | "account": "UA-XXXXX-Y" // Replace with your property ID.
66 | },
67 | "triggers": {
68 | "trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
69 | "on": "visible",
70 | "request": "pageview"
71 | }
72 | }
73 | }
74 | </script>
75 | </amp-analytics>
76 | [/sourcecode]
77 |
78 | ## Suivi des clics sur une page
79 |
80 | Découvrez comment suivre les clics sur une page à l'aide de
81 | [amp-analytics](/docs/reference/extended/amp-analytics.html)
82 | en envoyant les données d'événement à une URL spécifiée et à
83 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
84 |
85 | ### Envoi de données à une URL spécifiée
86 |
87 | L'exemple suivant utilise l'attribut `selector` pour envoyer un événement `click`
88 | à l'URL spécifiée à chaque fois qu'un utilisateur clique sur un lien (`<a href>`) :
89 |
90 | [sourcecode:html]
91 | <amp-analytics>
92 | <script type="application/json">
93 | {
94 | "requests": {
95 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
96 | },
97 | "vars": {
98 | "account": "ABC123"
99 | },
100 | "triggers": {
101 | "trackAnchorClicks": {
102 | "on": "click",
103 | "selector": "a",
104 | "request": "event",
105 | "vars": {
106 | "eventId": "42",
107 | "eventLabel": "clicked on a link"
108 | }
109 | }
110 | }
111 | }
112 | </script>
113 | </amp-analytics>
114 | [/sourcecode]
115 |
116 | ### Envoi de données à Google Analytics
117 |
118 | L'exemple suivant utilise l'attribut `selector` de `trigger`
119 | pour envoyer un événement `click` à Google Analytics lorsque l'on clique sur un élément particulier
120 | (voir également
121 | [Suivi des événements AMP dans Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)) :
122 |
123 | [sourcecode:html]
124 | <amp-analytics type="googleanalytics" id="analytics3">
125 | <script type="application/json">
126 | {
127 | "vars": {
128 | "account": "UA-XXXXX-Y" // Replace with your property ID.
129 | },
130 | "triggers": {
131 | "trackClickOnHeader" : {
132 | "on": "click",
133 | "selector": "#header",
134 | "request": "event",
135 | "vars": {
136 | "eventCategory": "ui-components",
137 | "eventAction": "header-click"
138 | }
139 | }
140 | }
141 | }
142 | </script>
143 | </amp-analytics>
144 | [/sourcecode]
145 |
146 | ## Suivi du défilement
147 |
148 | Suivez le défilement des pages avec [amp-analytics](/docs/reference/extended/amp-analytics.html).
149 | L'exemple suivant utilise l'attribut `scrollspec` pour envoyer un événement `scroll`
150 | à l'URL spécifiée à chaque fois qu'un utilisateur fait défiler verticalement la page de 25, 50 et 90 %.
151 | Cet événement se déclenche également lorsque l'on fait défiler
152 | horizontalement la page sur 90 % de sa largeur `scroll` :
153 |
154 | [sourcecode:html]
155 | <amp-analytics>
156 | <script type="application/json">
157 | {
158 | "requests": {
159 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
160 | },
161 | "vars": {
162 | "account": "ABC123"
163 | },
164 | "triggers": {
165 | "scrollPings": {
166 | "on": "scroll",
167 | "scrollSpec": {
168 | "verticalBoundaries": [25, 50, 90],
169 | "horizontalBoundaries": [90]
170 | }
171 | }
172 | }
173 | }
174 | </script>
175 | </amp-analytics>
176 | [/sourcecode]
177 |
178 | ## Suivi des interactions sociales
179 |
180 | Découvrez comment suivre les interactions sociales à l'aide de
181 | [amp-analytics](/docs/reference/extended/amp-analytics.html)
182 | en envoyant les données d'événement à une URL spécifiée et à
183 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
184 |
185 | ### Envoi de données à une URL spécifiée
186 |
187 | L'exemple suivant utilise l'attribut `selector` pour envoyer un événement `click`
188 | à l'URL spécifiée à chaque fois qu'un utilisateur clique sur un tweet (« #tweet-link ») :
189 |
190 | [sourcecode:html]
191 | <amp-analytics>
192 | <script type="application/json">
193 | {
194 | "requests": {
195 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
196 | },
197 | "vars": {
198 | "account": "ABC123"
199 | },
200 | "triggers": {
201 | "trackClickOnTwitterLink": {
202 | "on": "click",
203 | "selector": "#tweet-link",
204 | "request": "event",
205 | "vars": {
206 | "eventId": "43",
207 | "eventLabel": "clicked on a tweet link"
208 | }
209 | }
210 | }
211 | }
212 | </script>
213 | </amp-analytics>
214 | [/sourcecode]
215 |
216 | ### Envoi de données à Google Analytics
217 |
218 | L'exemple suivant utilise l'attribut `selector` de `trigger`
219 | pour envoyer un événement lorsque l'on clique sur un bouton de réseau social particulier
220 | (voir également
221 | [Suivi des interactions sociales AMP dans Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)) :
222 |
223 | [sourcecode:html]
224 | <amp-analytics type="googleanalytics" id="analytics4">
225 | <script type="application/json">
226 | {
227 | "vars": {
228 | "account": "UA-XXXXX-Y" // Replace with your property ID.
229 | },
230 | "triggers": {
231 | "trackClickOnTwitterLink" : {
232 | "on": "click",
233 | "selector": "#tweet-link",
234 | "request": "social",
235 | "vars": {
236 | "socialNetwork": "twitter",
237 | "socialAction": "tweet",
238 | "socialTarget": "https://www.examplepetstore.com"
239 | }
240 | }
241 | }
242 | }
243 | </script>
244 | </amp-analytics>
245 | [/sourcecode]
246 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Casistica
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | Questa guida offre una serie di tipologie di utilizzo comuni per seguire l’evoluzione del coinvolgimento degli utenti:
9 |
10 | Vuoi aggiungere una tipologia di utilizzo?
11 | [Comunicacelo.](https://github.com/ampproject/docs/issues/new)
12 |
13 | Puoi anche contribuire condividendo la tua casistica personale,
14 | scopri [Come dare il tuo contributo](https://www.ampproject.org/docs/support/contribute.html).
15 |
16 | ## Come monitorare le visualizzazioni di pagina
17 |
18 | Scopri come monitorare le visualizzazioni di pagina tramite `amp-pixel` e `amp-analytics`.
19 |
20 | ### Uso di amp-pixel
21 |
22 | Invia i dati sulla visualizzazione di pagina a un URL specifico utilizzando
23 | [amp-pixel](/docs/reference/amp-pixel.html):
24 |
25 | [sourcecode:html]
26 | <amp-pixel src="https://foo.com/pixel?"></amp-pixel>
27 | [/sourcecode]
28 |
29 | ### Uso di amp-analytics - no vendor
30 |
31 | Invia i dati sulla visualizzazione di pagina a un URL specifico utilizzando
32 | [amp-analytics](/docs/reference/extended/amp-analytics.html):
33 |
34 | [sourcecode:html]
35 | <amp-analytics>
36 | <script type="application/json">
37 | {
38 | "requests": {
39 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
40 | },
41 | "vars": {
42 | "account": "ABC123"
43 | },
44 | "triggers": {
45 | "trackPageview": {
46 | "on": "visible",
47 | "request": "pageview"
48 | }
49 | }
50 | }
51 | </script>
52 | </amp-analytics>
53 | [/sourcecode]
54 |
55 | ### Uso di amp-analytics - googleanalytics
56 |
57 | Invia i dati sulla visualizzazione di pagina a Google Analytics
58 | (vedi anche [Monitoraggio delle pagine in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
59 |
60 | [sourcecode:html]
61 | <amp-analytics type="googleanalytics" id="analytics1">
62 | <script type="application/json">
63 | {
64 | "vars": {
65 | "account": "UA-XXXXX-Y" // Replace with your property ID.
66 | },
67 | "triggers": {
68 | "trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
69 | "on": "visible",
70 | "request": "pageview"
71 | }
72 | }
73 | }
74 | </script>
75 | </amp-analytics>
76 | [/sourcecode]
77 |
78 | ## Come monitorare i clic sulla pagina
79 |
80 | Scopri come monitorare i clic sulla pagina tramite
81 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
82 | inviando dati eventi a un URL specifico e a
83 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
84 |
85 | ### Invio di dati a un URL specifico
86 |
87 | Il seguente esempio utilizza l’attributo `selector` per inviare un evento `click`
88 | all’URL specifico ogni volta che l’utente fa clic su un link (`<a href>`):
89 |
90 | [sourcecode:html]
91 | <amp-analytics>
92 | <script type="application/json">
93 | {
94 | "requests": {
95 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
96 | },
97 | "vars": {
98 | "account": "ABC123"
99 | },
100 | "triggers": {
101 | "trackAnchorClicks": {
102 | "on": "click",
103 | "selector": "a",
104 | "request": "event",
105 | "vars": {
106 | "eventId": "42",
107 | "eventLabel": "clicked on a link"
108 | }
109 | }
110 | }
111 | }
112 | </script>
113 | </amp-analytics>
114 | [/sourcecode]
115 |
116 | ### Invio di dati a Google Analytics
117 |
118 | Il seguente esempio utilizza l’attributo `selector` del `trigger`
119 | per inviare un evento `click` a Google Analytics quando si fa clic su un determinato elemento
120 | (vedi anche
121 | [Monitoraggio degli eventi AMP in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
122 |
123 | [sourcecode:html]
124 | <amp-analytics type="googleanalytics" id="analytics3">
125 | <script type="application/json">
126 | {
127 | "vars": {
128 | "account": "UA-XXXXX-Y" // Replace with your property ID.
129 | },
130 | "triggers": {
131 | "trackClickOnHeader" : {
132 | "on": "click",
133 | "selector": "#header",
134 | "request": "event",
135 | "vars": {
136 | "eventCategory": "ui-components",
137 | "eventAction": "header-click"
138 | }
139 | }
140 | }
141 | }
142 | </script>
143 | </amp-analytics>
144 | [/sourcecode]
145 |
146 | ## Come monitorare lo scorrimento delle pagine
147 |
148 | Puoi eseguire il monitoraggio dello scorrimento delle pagine utilizzando [amp-analytics](/docs/reference/extended/amp-analytics.html).
149 | Il seguente esempio utilizza l’attributo `scrollspec` per inviare un evento `scroll`
150 | all’URL specifico quando l’utente scorre la pagina in verticale del 25%, 50% e 90%.
151 | L’evento si attiva anche quando viene eseguito lo scorrimento in orizzontale
152 | per il 90% della larghezza di `scroll`:
153 |
154 | [sourcecode:html]
155 | <amp-analytics>
156 | <script type="application/json">
157 | {
158 | "requests": {
159 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
160 | },
161 | "vars": {
162 | "account": "ABC123"
163 | },
164 | "triggers": {
165 | "scrollPings": {
166 | "on": "scroll",
167 | "scrollSpec": {
168 | "verticalBoundaries": [25, 50, 90],
169 | "horizontalBoundaries": [90]
170 | }
171 | }
172 | }
173 | }
174 | </script>
175 | </amp-analytics>
176 | [/sourcecode]
177 |
178 | ## Come monitorare le interazioni con i social network
179 |
180 | Scopri come monitorare le interazioni con i social network utilizzando
181 | [amp-analytics](/docs/reference/extended/amp-analytics.html),
182 | inviando dati eventi a un URL specifico e a
183 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
184 |
185 | ### Invio di dati a un URL specifico
186 |
187 | Il seguente esempio utilizza l’attributo `selector` per inviare un evento `click`
188 | all’URL specifico ogni volta che un utente fa clic su un tweet (`#tweet-link`):
189 |
190 | [sourcecode:html]
191 | <amp-analytics>
192 | <script type="application/json">
193 | {
194 | "requests": {
195 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
196 | },
197 | "vars": {
198 | "account": "ABC123"
199 | },
200 | "triggers": {
201 | "trackClickOnTwitterLink": {
202 | "on": "click",
203 | "selector": "#tweet-link",
204 | "request": "event",
205 | "vars": {
206 | "eventId": "43",
207 | "eventLabel": "clicked on a tweet link"
208 | }
209 | }
210 | }
211 | }
212 | </script>
213 | </amp-analytics>
214 | [/sourcecode]
215 |
216 | ### Invio di dati a Google Analytics
217 |
218 | Il seguente esempio utilizza l’attributo `selector` del `trigger`
219 | per inviare un evento quando si fa clic su un determinato pulsante dei social
220 | (vedi anche
221 | [Monitoraggio delle interazioni con i social network con AMP in Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
222 |
223 | [sourcecode:html]
224 | <amp-analytics type="googleanalytics" id="analytics4">
225 | <script type="application/json">
226 | {
227 | "vars": {
228 | "account": "UA-XXXXX-Y" // Replace with your property ID.
229 | },
230 | "triggers": {
231 | "trackClickOnTwitterLink" : {
232 | "on": "click",
233 | "selector": "#tweet-link",
234 | "request": "social",
235 | "vars": {
236 | "socialNetwork": "twitter",
237 | "socialAction": "tweet",
238 | "socialTarget": "https://www.examplepetstore.com"
239 | }
240 | }
241 | }
242 | }
243 | </script>
244 | </amp-analytics>
245 | [/sourcecode]
246 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Przykłady zastosowań
3 | toc: true
4 | ---
5 | [TOC]
6 |
7 |
8 | W tym przewodniku przedstawiono szereg typowych przykładów zastosowań do monitorowania czynności użytkowników:
9 |
10 | Chcesz dodać przykład zastosowania?
11 | [Daj nam znać.](https://github.com/ampproject/docs/issues/new)
12 |
13 | Możesz także zgłosić własne przykłady zastosowań;
14 | zobacz [Jak dodać własne materiały](https://www.ampproject.org/docs/support/contribute.html).
15 |
16 | ## Monitorowanie wyświetleń stron
17 |
18 | Dowiedz się, jak monitorować wyświetlenia strony przy użyciu elementów `amp-pixel` i `amp-analytics`.
19 |
20 | ### Używanie elementu amp-pixel
21 |
22 | Wysyłanie danych żądania pageview na podany adres URL przy użyciu elementu
23 | [amp-pixel](/docs/reference/amp-pixel.html):
24 |
25 | [sourcecode:html]
26 | <amp-pixel src="https://foo.com/pixel?"></amp-pixel>
27 | [/sourcecode]
28 |
29 | ### Używanie elementu amp-analytics — bez dostawcy
30 |
31 | Wysyłanie danych żądania pageview na podany adres URL przy użyciu elementu
32 | [amp-analytics](/docs/reference/extended/amp-analytics.html):
33 |
34 | [sourcecode:html]
35 | <amp-analytics>
36 | <script type="application/json">
37 | {
38 | "requests": {
39 | "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
40 | },
41 | "vars": {
42 | "account": "ABC123"
43 | },
44 | "triggers": {
45 | "trackPageview": {
46 | "on": "visible",
47 | "request": "pageview"
48 | }
49 | }
50 | }
51 | </script>
52 | </amp-analytics>
53 | [/sourcecode]
54 |
55 | ### Używanie elementu amp-analytics — googleanalytics
56 |
57 | Wysyłanie danych żądania pageview do usługi Google Analytics
58 | (zobacz też [Monitorowanie stron w Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking)):
59 |
60 | [sourcecode:html]
61 | <amp-analytics type="googleanalytics" id="analytics1">
62 | <script type="application/json">
63 | {
64 | "vars": {
65 | "account": "UA-XXXXX-Y" // Replace with your property ID.
66 | },
67 | "triggers": {
68 | "trackPageview": { // Trigger names can be any string. trackPageview is not a required name.
69 | "on": "visible",
70 | "request": "pageview"
71 | }
72 | }
73 | }
74 | </script>
75 | </amp-analytics>
76 | [/sourcecode]
77 |
78 | ## Monitorowanie kliknięć na stronie
79 |
80 | Dowiedz się, jak monitorować kliknięcia na stronie przy użyciu elementu
81 | [amp-analytics](/docs/reference/extended/amp-analytics.html)
82 | oraz wysyłać dane zdarzenia na podany adres URL i do
83 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
84 |
85 | ### Wysyłanie danych na podany adres URL
86 |
87 | W poniższym przykładzie atrybut `selector` jest używany do wysyłania zdarzenia `click`
88 | na podany adres URL za każdym razem, gdy użytkownik kliknie link (`<a href>`):
89 |
90 | [sourcecode:html]
91 | <amp-analytics>
92 | <script type="application/json">
93 | {
94 | "requests": {
95 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
96 | },
97 | "vars": {
98 | "account": "ABC123"
99 | },
100 | "triggers": {
101 | "trackAnchorClicks": {
102 | "on": "click",
103 | "selector": "a",
104 | "request": "event",
105 | "vars": {
106 | "eventId": "42",
107 | "eventLabel": "clicked on a link"
108 | }
109 | }
110 | }
111 | }
112 | </script>
113 | </amp-analytics>
114 | [/sourcecode]
115 |
116 | ### Wysyłanie danych do Google Analytics
117 |
118 | W poniższym przykładzie atrybut `selector` elementu `trigger`
119 | jest używany do wysyłania zdarzenia `click` do Google Analytics, kiedy konkretny element zostanie kliknięty
120 | (zobacz też
121 | [Monitorowanie zdarzeń AMP w Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking)):
122 |
123 | [sourcecode:html]
124 | <amp-analytics type="googleanalytics" id="analytics3">
125 | <script type="application/json">
126 | {
127 | "vars": {
128 | "account": "UA-XXXXX-Y" // Replace with your property ID.
129 | },
130 | "triggers": {
131 | "trackClickOnHeader" : {
132 | "on": "click",
133 | "selector": "#header",
134 | "request": "event",
135 | "vars": {
136 | "eventCategory": "ui-components",
137 | "eventAction": "header-click"
138 | }
139 | }
140 | }
141 | }
142 | </script>
143 | </amp-analytics>
144 | [/sourcecode]
145 |
146 | ## Monitorowanie przewijania
147 |
148 | Przewijanie strony można monitorować przy użyciu elementu [amp-analytics](/docs/reference/extended/amp-analytics.html).
149 | W poniższym przykładzie atrybut `scrollspec` jest używany do wysyłania zdarzenia `scroll`
150 | na podany adres URL, gdy strona zostanie przewinięta o 25%, 50% i 90%.
151 | Zdarzenie jest wyzwalane także wtedy, gdy strona zostanie przewinięta w poziomie
152 | do 90% szerokości przewijania (`scroll`):
153 |
154 | [sourcecode:html]
155 | <amp-analytics>
156 | <script type="application/json">
157 | {
158 | "requests": {
159 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
160 | },
161 | "vars": {
162 | "account": "ABC123"
163 | },
164 | "triggers": {
165 | "scrollPings": {
166 | "on": "scroll",
167 | "scrollSpec": {
168 | "verticalBoundaries": [25, 50, 90],
169 | "horizontalBoundaries": [90]
170 | }
171 | }
172 | }
173 | }
174 | </script>
175 | </amp-analytics>
176 | [/sourcecode]
177 |
178 | ## Monitorowanie interakcji społecznościowych
179 |
180 | Dowiedz się, jak monitorować interakcje społecznościowe przy użyciu
181 | elementu [amp-analytics](/docs/reference/extended/amp-analytics.html)
182 | oraz wysyłać dane zdarzenia na podany adres URL i do
183 | [Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/).
184 |
185 | ### Wysyłanie danych na podany adres URL
186 |
187 | W poniższym przykładzie atrybut `selector` jest używany do wysyłania zdarzenia `click`
188 | na podany adres URL za każdym razem, gdy użytkownik kliknie tweet (`#tweet-link`):
189 |
190 | [sourcecode:html]
191 | <amp-analytics>
192 | <script type="application/json">
193 | {
194 | "requests": {
195 | "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
196 | },
197 | "vars": {
198 | "account": "ABC123"
199 | },
200 | "triggers": {
201 | "trackClickOnTwitterLink": {
202 | "on": "click",
203 | "selector": "#tweet-link",
204 | "request": "event",
205 | "vars": {
206 | "eventId": "43",
207 | "eventLabel": "clicked on a tweet link"
208 | }
209 | }
210 | }
211 | }
212 | </script>
213 | </amp-analytics>
214 | [/sourcecode]
215 |
216 | ### Wysyłanie danych do Google Analytics
217 |
218 | W poniższym przykładzie atrybut `selector` elementu `trigger`
219 | jest używany do wysyłania zdarzenia, gdy użytkownik kliknie konkretny przycisk serwisu społecznościowego
220 | (zobacz też
221 | [Monitorowanie interakcji społecznościowych AMP w Google Analytics](https://developers.google.com/analytics/devguides/collection/amp-analytics/#social_interactions)):
222 |
223 | [sourcecode:html]
224 | <amp-analytics type="googleanalytics" id="analytics4">
225 | <script type="application/json">
226 | {
227 | "vars": {
228 | "account": "UA-XXXXX-Y" // Replace with your property ID.
229 | },
230 | "triggers": {
231 | "trackClickOnTwitterLink" : {
232 | "on": "click",
233 | "selector": "#tweet-link",
234 | "request": "social",
235 | "vars": {
236 | "socialNetwork": "twitter",
237 | "socialAction": "tweet",
238 | "socialTarget": "https://www.examplepetstore.com"
239 | }
240 | }
241 | }
242 | }
243 | </script>
244 | </amp-analytics>
245 | [/sourcecode]
246 |
```
--------------------------------------------------------------------------------
/content/latest/blog/speeding-up-news-apps-with-amp.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | class: post-blog post-detail
3 | type: Blog
4 | $title: Speeding up news apps with AMP
5 | id: speeding-up-news-apps-with-amp
6 | author: Mario Lorenzen
7 | role: Portal Manager, mh:n digital
8 | origin: "https://amphtml.wordpress.com/2017/01/25/speeding-up-news-apps-with-amp/amp/"
9 | excerpt: "Shz.de is one of the top news publishers in Schleswig-Holstein, Germany’s most northern state. Each month around 1.5 million unique users access our content to stay up to date on local news. In 2011 we saw an increasing number of our readers viewing content on their mobile phones, so we produced a mobile app, which […]"
10 | avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
11 | date_data: 2017-01-25T12:58:19-08:00
12 | $date: January 25, 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><a href="http://shz.de"><span style="font-weight:400;"><img data-attachment-id="946" data-permalink="https://amphtml.wordpress.com/2017/01/25/speeding-up-news-apps-with-amp/shz/" data-orig-file="https://amphtml.files.wordpress.com/2017/01/shz.png?w=495&h=278" data-orig-size="583,328" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="shz" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/01/shz.png?w=495&h=278?w=300" data-large-file="https://amphtml.files.wordpress.com/2017/01/shz.png?w=495&h=278?w=583" class=" wp-image-946 aligncenter" src="https://amphtml.files.wordpress.com/2017/01/shz.png?w=495&h=278" alt="shz" width="495" height="278" srcset="https://amphtml.files.wordpress.com/2017/01/shz.png?w=495&h=278 495w, https://amphtml.files.wordpress.com/2017/01/shz.png?w=150&h=84 150w, https://amphtml.files.wordpress.com/2017/01/shz.png?w=300&h=169 300w, https://amphtml.files.wordpress.com/2017/01/shz.png 583w" sizes="(max-width: 495px) 100vw, 495px" /></span></a></p>
21 | <p><a href="http://shz.de"><span style="font-weight:400;">Shz.de</span></a><span style="font-weight:400;"> is one of the top news publishers in Schleswig-Holstein, Germany’s most northern state. Each month around 1.5 million unique users access our content to stay up to date on local news. In 2011 we saw an increasing number of our readers viewing content on their mobile phones, so we produced a mobile app, which has been downloaded over 40,000 times.</span></p>
22 | <p><span style="font-weight:400;">After 4 years of minor updates, we decided to completely rebuild our app because it was difficult and resource intensive to keep up with app store update cycles and RSS limitation. Our plan was to use mobile web content inside the app which gave us flexibility and cost-effective development, but we still wanted to ensure content loaded quickly inside the app. Our team learned about the Accelerated Mobile Pages project through documentation on AMPproject.org and by inspecting examples on ampbyexample.com. We were excited by the possibility of having content flexibility across platforms with near instantaneous page load times. </span><i><span style="font-weight:400;">“Our belief is that anything less than instant kills engagement. Why not integrate AMP article pages in our native apps?”</span></i><span style="font-weight:400;">, explains CEO Nicolas L. Fromm. </span></p>
23 | <p><img data-attachment-id="945" data-permalink="https://amphtml.wordpress.com/2017/01/25/speeding-up-news-apps-with-amp/shz_mobile/" data-orig-file="https://amphtml.files.wordpress.com/2017/01/shz_mobile.png?w=660" data-orig-size="285,545" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="shz_mobile" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/01/shz_mobile.png?w=660?w=157" data-large-file="https://amphtml.files.wordpress.com/2017/01/shz_mobile.png?w=660?w=285" class=" size-full wp-image-945 alignright" src="https://amphtml.files.wordpress.com/2017/01/shz_mobile.png?w=660" alt="shz_mobile" srcset="https://amphtml.files.wordpress.com/2017/01/shz_mobile.png 285w, https://amphtml.files.wordpress.com/2017/01/shz_mobile.png?w=78 78w" sizes="(max-width: 285px) 100vw, 285px" /></p>
24 | <p><span style="font-weight:400;">We piloted utilizing AMP pages inside our smallest mobile app and were extremely pleased with the results. With only a few hours of additional development work, </span><b>we were seeing articles load 4x faster than in previous app versions</b><span style="font-weight:400;">. Additionally, </span><b>pageviews per session increased by 25%</b><span style="font-weight:400;"> – achieving our goal of both speed and engagement. With these initial easy wins, we quickly rolled out the AMP format to our other apps.</span></p>
25 | <p><span style="font-weight:400;">Using AMP pages inside our app has provided fantastic improvements with speed and user engagement, but we’re not stopping there. We’re now exploring improving caching and offline support in our app. We look forward to these future enhancements and are excited to share our success with AMP. As Mr. Fromm said, </span><i><span style="font-weight:400;">“We’re in the business of creating engagement, building loyalty and monetizing quality journalism. Our main goal in building digital products is to create a frictionless and uninterrupted reading experi</span></i><i><span style="font-weight:400;">ence in our apps and news sites.”</span></i></p>
26 | <p><span style="font-weight:400;">Posted by Mario Lorenzen, Portal Manager, mh:n digital</span><span style="font-weight:400;"><br />
27 | </span></p><br /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/amphtml.wordpress.com/943/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/amphtml.wordpress.com/943/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=amphtml.wordpress.com&blog=102788268&post=943&subd=amphtml&ref=&feed=1" width="1" height="1" />
28 | </div>
29 |
30 |
```
--------------------------------------------------------------------------------
/assets/sass/pages/_home.scss:
--------------------------------------------------------------------------------
```scss
1 | .home {
2 | .content {
3 | overflow: hidden;
4 | }
5 |
6 | .hero {
7 | position: relative;
8 | margin: 0 auto;
9 | max-width: 1440px;
10 |
11 | .container {
12 | position: relative;
13 | display: flex;
14 | justify-content: space-between;
15 | }
16 |
17 | .intro {
18 | color: $color-black;
19 | font-size: 16px;
20 | margin: 0;
21 | padding-bottom: 30px;
22 | max-width: 500px;
23 | }
24 |
25 | .cta_connector {
26 | margin: 0 20px;
27 | }
28 | }
29 |
30 | .hero-image {
31 | flex: 1 1 auto;
32 | left: -100px;
33 | min-width: 0;
34 | position: relative;
35 | transform: translateY(-14%);
36 | z-index: -1;
37 |
38 | @include max-screen($container-size) {
39 | max-width: 700px;
40 | top: 40px;
41 | }
42 |
43 | .lines, .phone {
44 | max-width: 100%;
45 | }
46 |
47 | .lines {
48 | height: 600px;
49 | position: relative;
50 | top: 50px;
51 | width: 700px;
52 |
53 | .animated-lines-big {
54 | position: absolute;
55 | left: 25%;
56 | top: -100px;
57 | }
58 | }
59 |
60 | .phone {
61 | position: absolute;
62 | left: -30%;
63 | top: 70px;
64 | transform: scale(1.1);
65 | width: 700px;
66 | z-index: 1;
67 | }
68 | }
69 |
70 | .hero-content {
71 | flex: 10 1 auto;
72 | }
73 |
74 | .latest {
75 | left: -20%;
76 | margin-top: 80px;
77 | position: relative;
78 | width: 120%;
79 |
80 | .card {
81 | flex-basis: calc(33% - 20px);
82 | padding: 20px;
83 | }
84 |
85 | .card-type {
86 | margin-bottom: 5px;
87 | }
88 |
89 | .card-content {
90 | max-height: 48px;
91 | overflow: hidden;
92 | }
93 |
94 | @include min-max-screen($container-size - 200, $container-size) {
95 | left: 0;
96 | width: 100%;
97 | }
98 | }
99 |
100 | .latest-mobile {
101 | margin-top: 140px;
102 |
103 | .latest-label {
104 | margin: 0;
105 | text-align: center;
106 | transform: none;
107 | position: static;
108 | }
109 | }
110 |
111 | .latest-label {
112 | margin: 0 0 -15px 40px;
113 | }
114 |
115 | .benefits {
116 | h1 {
117 | margin: 0 auto;
118 | max-width: 450px;
119 | text-align: center;
120 | }
121 |
122 | .benefits-row {
123 | display: flex;
124 | justify-content: center;
125 | margin-top: 80px;
126 | }
127 |
128 | .benefit {
129 | margin: 0 80px;
130 | min-width: 0;
131 | white-space: nowrap;
132 |
133 | &:nth-child(2) .benefit-image {
134 | width: 80px;
135 | }
136 | }
137 |
138 | .benefit-image {
139 | display: inline-block;
140 | margin-right: 15px;
141 | position: relative;
142 | top: 0;
143 | width: 65px;
144 | }
145 |
146 | .benefit-content {
147 | display: inline-block;
148 | position: relative;
149 | vertical-align: top;
150 | white-space: normal;
151 | width: 300px;
152 |
153 | .desc {
154 | font-size: 16px;
155 | }
156 | }
157 | }
158 |
159 | .experience {
160 | align-items: center;
161 | display: flex;
162 | justify-content: flex-end;
163 | margin-left: 50px;
164 | margin-top: -250px;
165 | max-width: 100%;
166 |
167 | .experience-content {
168 | margin-right: 100px;
169 | max-width: 450px;
170 | }
171 |
172 | .experience-image {
173 | min-width: 0;
174 | position: relative;
175 |
176 | .bg, .lines, .phone {
177 | max-width: 100%;
178 | z-index: -1;
179 | }
180 |
181 | .bg {
182 | position: relative;
183 | transform: translateY(-9%);
184 | width: 712px;
185 | }
186 |
187 | .lines {
188 | left: 0;
189 | position: absolute;
190 | top: 0;
191 | width: 782px;
192 | }
193 |
194 | .phone {
195 | left: 30%;
196 | position: absolute;
197 | top: 24%;
198 | transform: scale(1.1);
199 | width: 610px;
200 | }
201 | }
202 | }
203 |
204 | .success-stories {
205 | margin-bottom: -80px;
206 | padding: 0;
207 | position: relative;
208 | z-index: 1;
209 |
210 | h1 {
211 | margin: 0 auto 30px;
212 | max-width: 700px;
213 | text-align: center;
214 | }
215 |
216 | .card {
217 | display: block;
218 |
219 | &.wapo .card-icon {
220 | width: 220px;
221 | }
222 |
223 | &.wired .card-icon {
224 | width: 150px;
225 | }
226 |
227 | &.teads .card-icon {
228 | width: 100px;
229 | }
230 | }
231 |
232 | .card-inner {
233 | width: 100%;
234 | }
235 |
236 | .card-content {
237 | flex: 1 1 auto;
238 | display: flex;
239 | flex-direction: column;
240 | justify-content: center;
241 | padding: 20px;
242 | position: relative;
243 |
244 | p {
245 | color: $color-black-95;
246 | font-size: 18px;
247 | }
248 | }
249 |
250 | .card-icon {
251 | margin: 0 auto 30px;
252 | }
253 | }
254 |
255 | .large-cta {
256 | padding: 130px 0 100px 0;
257 | }
258 |
259 | .wrap section {
260 | padding: 100px 0 60px 0;
261 | }
262 |
263 | &.rtl {
264 | .hero {
265 | .hero-image {
266 | left: auto;
267 | }
268 |
269 | br.tablet-down {
270 | display: block;
271 | visibility: visible;
272 | }
273 | }
274 |
275 | .latest {
276 | left: auto;
277 | right: -20%;
278 | }
279 |
280 | .latest-label {
281 | margin: 0 40px -15px 0;
282 | }
283 |
284 | .benefits .benefit-image {
285 | margin: 0 0 0 15px;
286 | }
287 |
288 | .experience {
289 | justify-content: flex-start;
290 | }
291 |
292 | .experience-image {
293 | order: 0;
294 | }
295 |
296 | .experience-content {
297 | order: 1;
298 | }
299 | }
300 |
301 |
302 | @include max-screen($tablet-breakpoint) {
303 | .hero {
304 | .container {
305 | flex-direction: column;
306 | }
307 |
308 | .intro-container {
309 | text-align: center;
310 |
311 | .button {
312 | margin-bottom: 20px;
313 | }
314 | }
315 |
316 | .intro {
317 | margin: 0 auto;
318 | }
319 |
320 | .cta_connector {
321 | margin: 0 5px 0 0;
322 | }
323 |
324 | .card {
325 | flex-basis: 100%;
326 | }
327 | }
328 |
329 | .hero-image {
330 | left: auto;
331 | margin: 0 auto;
332 | max-width: 500px;
333 | order: 2;
334 | transform: none;
335 | width: 100%;
336 | }
337 |
338 | .hero-content {
339 | order: 1;
340 | }
341 |
342 | .benefits .benefit-image {
343 | display: block;
344 | margin: 20px auto;
345 | }
346 | }
347 |
348 | @include max-screen($mobile-breakpoint) {
349 | .hero {
350 | padding-top: 100px;
351 | }
352 |
353 | .hero-image {
354 | z-index: 0;
355 |
356 | .lines {
357 | left: 50%;
358 | height: 350px;
359 | transform: translateX(-50%);
360 |
361 | .animated-lines-big {
362 | left: 0;
363 | top: -140px;
364 | transform: rotate(144deg) scale(0.5);
365 | }
366 | }
367 |
368 | .phone {
369 | left: 20%;
370 | max-width: 380px;
371 | transform: translateX(-50%);
372 | }
373 | }
374 |
375 | .benefits {
376 | h1 {
377 | max-width: 200px;
378 | }
379 |
380 | .benefits-row {
381 | flex-direction: column;
382 | margin-top: 0;
383 | }
384 |
385 | .benefit {
386 | margin: 20px auto;
387 | text-align: center;
388 | white-space: normal;
389 | }
390 |
391 | .benefit-image {
392 | top: 0;
393 | }
394 | }
395 |
396 | .experience {
397 | flex-direction: column;
398 | margin-top: 0;
399 |
400 | .bg {
401 | transform: translateY(-20%);
402 | }
403 | }
404 |
405 | .experience-image {
406 | margin: -50px 0 0 auto;
407 | max-width: 600px;
408 | width: 100%;
409 | }
410 |
411 | .success-stories {
412 | margin-bottom: 0;
413 |
414 | h1 {
415 | max-width: 300px;
416 | }
417 |
418 | .card {
419 | flex-basis: 100%;
420 | }
421 |
422 | .card-content {
423 | h2 {
424 | font-size: 20px;
425 | line-height: 1.5;
426 | }
427 | }
428 | }
429 |
430 | .wrap section {
431 | padding: 50px 0 40px;
432 | }
433 |
434 | &.rtl {
435 | .experience-image {
436 | order: 1;
437 | }
438 |
439 | .experience-content {
440 | order: 0;
441 | }
442 |
443 | .benefits .benefit-image {
444 | margin: 20px auto;
445 | }
446 | }
447 | }
448 | }
449 |
```
--------------------------------------------------------------------------------
/scripts/import_docs.js:
--------------------------------------------------------------------------------
```javascript
1 | #!/usr/bin/env node
2 |
3 | var github = require('octonode');
4 | const fs = require('fs');
5 | const path = require('path');
6 | var clientSecret = process.argv[2] || process.env.AMP_DOC_SECRET;
7 | var clientId = process.argv[3] || process.env.AMP_DOC_ID;
8 | var clientToken = process.env.AMP_DOC_TOKEN;
9 | var localPath = process.env.AMP_DOC_LOCAL_PATH;
10 | var importData = require('./import_docs.json');
11 | var subfolderLookupTable = require('./component_categories.json');
12 |
13 | if(!(clientToken || (clientSecret && clientId))) {
14 | console.error("This script reads the reference docs from GitHub which requires providing either a GitHub personal access token (AMP_DOC_TOKEN) or GitHub application id/secret (AMP_DOC_ID and AMP_DOC_SECRET). See README.md for more information.");
15 | process.exit(1);
16 | }
17 |
18 | var client = github.client(
19 | clientToken ||
20 | {
21 | id: clientId,
22 | secret: clientSecret
23 | });
24 |
25 | var ghrepo = client.repo('ampproject/amphtml');
26 |
27 | function downloadPage(filePath, callback, headingToStrip) {
28 |
29 | var process = function (err, data) {
30 |
31 | if (err) {
32 | throw err;
33 | }
34 |
35 | if (data && data.content !== undefined && !data.content.length) {
36 | console.log("Skipping " + filePath + ", file is empty..");
37 | return;
38 | }
39 |
40 |
41 | var encodedContent = new Buffer(data.content || data, 'base64')
42 | var decodedContent = encodedContent.toString();
43 |
44 | // we need to concert some of the markdown from Github flavor to Jekyll flavor
45 | var relativePath = filePath.substr(0, filePath.lastIndexOf("/"))
46 | decodedContent = convertMarkdown(decodedContent, relativePath, headingToStrip);
47 |
48 | callback(decodedContent);
49 |
50 | };
51 |
52 | if (localPath) {
53 | fs.readFile(path.resolve(localPath, filePath), process);
54 | } else {
55 | ghrepo.contents(filePath, process);
56 | }
57 |
58 | }
59 |
60 | function savePage(config, callback) {
61 | var frontMatter = "---\n$title: " + config.title + "\n$order: " + (config.order || 0) + "\n---\n";
62 | fs.writeFile(config.destination, frontMatter + config.content, callback);
63 | }
64 |
65 | function convertMarkdown(content, relativePath, headingToStrip) {
66 |
67 | // strip out first heading
68 | content = content.replace(headingToStrip === 1 ? (/^#{1}\s.+/m) : (/^#{3}\s.+/m), '');
69 |
70 | // this regular expression is crazy. Adds a newline before lists so they are parsed
71 | // as proper lists by Jekyll.
72 | content = content.replace(/(\n(?![^\S\n]*\*[^\S\n])(?![^\S\n]*\-)[^\n]+\n)([^\S\n]*?(?!\*\*)((\-\s)|(\*\s)|(1\.\s)))/gm, '$1\n$2');
73 |
74 | // for comments to be parsed correctly as HTML, we need an extra line break
75 | content = content.replace('<!---', '\n<!---');
76 |
77 | // replace code blocks
78 | content = content.replace(/(\`\`\`)(([A-z\-]*)\n)(((?!\`\`\`)[\s\S])+)(\`\`\`\n)/gm, function (match, p1, p2, p3, p4) {
79 | // work around for mustache-style curly braces to not mess with Grow
80 | if (p4.indexOf('{{') > -1) {
81 | p4 = "{% raw %}" + p4 + '{% endraw %}';
82 | }
83 | return '[sourcecode' + (p3 ? ':' + p3 : '') + ']\n' + p4 + '[/sourcecode]\n';
84 | });
85 |
86 | // replace mustache-style code elements
87 | content = content.replace(/\`[^\s{`]*(\{\{[^`]*\}\})[^`]*\`/g, '{% raw %}`$1`{% endraw %}');
88 |
89 | // horizontal rules like --- will break front matter
90 | content = content.replace(/\n---\n/gm, '\n- - -\n');
91 |
92 | // create absolute urls from relative github urls
93 | content = content.replace(/\[([^\]]+)\]\((?!http|#)([^\)]+)\)/g, '[$1](https://github.com/ampproject/amphtml/blob/master/' + relativePath + '/$2)');
94 |
95 | // now substitute links going to extensions with relative urls to the downloaded ones
96 | content = content.replace(/https\:\/\/github.com\/ampproject\/amphtml\/blob\/master\/extensions\/[^\/]+\/([^\.]+)\.md/g, "components/$1.html");
97 |
98 | return content;
99 | }
100 |
101 | /*
102 | * Imports all docs specified in the import_docs.json config file.
103 | */
104 | importData.forEach((item) => {
105 |
106 | downloadPage(item.from, function(pageContent) {
107 | savePage({
108 | destination: '../content/' + item.to,
109 | content: (item.toc ? '[TOC]\n' : '') + pageContent,
110 | title: item.title,
111 | order: item.order
112 | }, function (err) {
113 | if (err) throw err;
114 | console.log('Successfully imported: ' + item.title);
115 | });
116 | }, 1);
117 |
118 | });
119 |
120 | // Download built-in AMP component ref docs
121 | ghrepo.contents('builtins', 'master', function(err, data) {
122 |
123 | if(err) {
124 | throw err;
125 | }
126 |
127 | var components = data.filter(function (obj) {
128 | return /amp\-.*\.md/.test(obj.name);
129 | });
130 |
131 | var index = 0;
132 | components.forEach(function(component) {
133 |
134 | index++;
135 |
136 | // if we don't know how to categorize this one, warn and skip
137 | var subfolder = subfolderLookupTable[component.name.replace(/\.md$/, '')];
138 | if (!subfolder) {
139 | console.warn("Warning: Don\t know how to categorize " + component.name + ', skipping..');
140 | return;
141 | }
142 |
143 | downloadPage(component.path, function(pageContent) {
144 | savePage({
145 | destination: '../content/docs/reference/components/' + subfolder + '/' + component.name,
146 | content: pageContent,
147 | title: component.name.replace('.md', '') + ' (Built-in)'
148 | }, function (err) {
149 | if (err) throw err;
150 | console.log('Successfully imported: ' + component.name + ' (Built-in)');
151 | });
152 | }, 1);
153 |
154 | });
155 | });
156 |
157 | // download extension component ref docs
158 | ghrepo.contents('extensions', "master", function(err, data) {
159 |
160 | if(err) {
161 | throw err;
162 | }
163 |
164 | // grab extended component sub pages
165 | var components = data.filter(function(obj) {
166 | return obj.type === 'dir';
167 | });
168 |
169 | var index = 0;
170 | components.forEach(function(component) {
171 |
172 | var order = index;
173 |
174 | ghrepo.contents(component.path, "master", function(err, data) {
175 |
176 | // fish out the markdown file from the folder
177 | var subComponent;
178 | for (var i = 0; i < data.length; i++) {
179 | if(data[i].type === 'file' && data[i].name === component.name + '.md') {
180 | subComponent = data[i];
181 | break;
182 | }
183 | }
184 |
185 | // if there's nothing in the folder for some reason, skip
186 | if(!subComponent) {
187 | return;
188 | }
189 |
190 | // if we don't know how to categorize this one, warn and skip
191 | var subfolder = subfolderLookupTable[subComponent.name.replace(/\.md$/, '')];
192 | if (!subfolder) {
193 | console.warn("Warning: Don\'t know how to categorize " + subComponent.name + ', skipping..');
194 | return;
195 | }
196 |
197 | // download the page contents
198 | downloadPage(subComponent.path, function(pageContent) {
199 | // save it to the extended folder
200 | savePage({
201 | destination: '../content/docs/reference/components/' + subfolder + '/' + subComponent.name,
202 | content: pageContent,
203 | order: order,
204 | parent: '/content/docs/components.md',
205 | title: subComponent.name.replace('.md', '')
206 | }, function (err) {
207 | if (err) throw err;
208 | console.log('Successfully imported: ' + subComponent.name + ' (Extended)');
209 | });
210 | }, 1);
211 |
212 | });
213 |
214 | index++;
215 |
216 | });
217 | });
218 |
```
--------------------------------------------------------------------------------
/content/latest/blog/1056.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | class: post-blog post-detail
3 | type: Blog
4 | $title: Better galleries and forms in AMP
5 | id: 1056
6 | author: Eric Lindley
7 | role: Product Manager
8 | origin: "https://amphtml.wordpress.com/2017/02/15/1056/amp/"
9 | excerpt: "We just released a couple of small tweaks in the AMP library that can make a big difference in building a better user experience. First, a new JavaScript method (goToSlide) supports advancing <amp-carousel> to a particular slide on user tap/click. This enables significant UX enhancements to image galleries. Second, we’ve made it easier to integrate […]"
10 | avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
11 | date_data: 2017-02-15T10:29:48-08:00
12 | $date: February 15, 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><strong>We just released a couple of small tweaks in the AMP library that can make a big difference in building a better user experience.</strong></p>
21 | <p><strong>First, a new JavaScript method (</strong><a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md#advancing-amp-carouseltypeslides-to-a-specific-slide"><strong>goToSlide</strong></a><strong>) supports advancing </strong><a href="https://www.ampproject.org/docs/reference/components/amp-carousel"><strong><amp-carousel></strong></a><strong> to a particular slide on user tap/click. This enables significant UX enhancements to image galleries. Second, we’ve made it easier to integrate image thumbnails into forms with </strong><a href="https://www.ampproject.org/docs/reference/components/amp-selector"><strong><amp-selector></strong></a><strong>. These will be useful to a lot of developers in providing engaging content to users, as in image-rich journalism and e-commerce product pages.</strong></p>
22 | <h2><strong>Using the goToSlide method: Carousel with thumbnails</strong></h2>
23 | <p><strong>Until now, <amp-carousel> hasn’t supported some key interaction patterns for image galleries. How does the user know how many images are in this carousel? What if they want to jump directly to image five in a carousel of eight? How does the user even know the carousel is swipeable, if they don’t notice the arrow icon, or if it’s been hidden on the page?</strong></p>
24 | <p><strong>The solution, for many developers and designers, is to provide image thumbnails to the user. Tapping on these thumbnails will automatically advance the carousel to a specific slide.</strong></p>
25 | <p><div class="wp-image wp-image-1107 aligncenter"><amp-img layout='fixed' width="337" height="615" src="https://amphtml.files.wordpress.com/2017/02/ezgif-com-4626d203721.gif?w=337&h=615"></amp-img></p>
26 | <p><strong>This is now possible in AMP, using the goToSlide method. You, as a developer, can trigger this method on user tap to advance a slide carousel to a particular slide.</strong></p>
27 | <p><b>Example implementation</b></p>
28 | <pre class="brush: xml; title: ; notranslate">
29 |
30 | <!-- Primary Carousel -->
31 | <amp-carousel id="carousel-with-preview"
32 | width="400"
33 | height="300"
34 | layout="responsive"
35 | type="slides">
36 | <amp-img src="https://example.com/path/to?image=10"
37 | width="400"
38 | height="300"
39 | layout="responsive"
40 | alt="a sample image"></amp-img>
41 | <amp-img src="https://example.com/path/to?image=11"
42 | width="400"
43 | height="300"
44 | layout="responsive"
45 | alt="a sample image"></amp-img>
46 | </amp-carousel>
47 |
48 | <!-- Carousel thumbnails -->
49 | <div class="carousel-preview">
50 | <button on="tap:carousel-with-preview.goToSlide(index=0)">
51 | <amp-img src="https://example.com/path/to?image=10"
52 | width="60"
53 | height="40"
54 | layout="responsive"
55 | alt="a sample image"></amp-img>
56 | </button>
57 | <button on="tap:carousel-with-preview.goToSlide(index=1)">
58 | <amp-img src="https://example.com/path/to?image=11"
59 | width="60"
60 | height="40"
61 | layout="responsive"
62 | alt="a sample image"></amp-img>
63 | </button>
64 | </div>
65 | </pre>
66 | <p> </p>
67 | <p> </p>
68 | <p><strong>If you have a lot of images, you can even put the thumbnails in a smaller scrollable carousel:</strong></p>
69 | <center><div class="wp-image wp-image-1071 aligncenter"><amp-img layout='fixed' width="339" height="620" src="https://amphtml.files.wordpress.com/2017/02/sub-carousel.gif?w=339&h=620"></amp-img><i><strong>See AMP by Example for a </strong></i><a href="https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/"><b><i>sample implementation</i></b></a></center>
70 | <p>This pattern pops up all over the web—e-commerce sites may find it especially useful on product pages.</p>
71 | <h2><strong>Using <amp-selector>: Forms + image thumbnails</strong></h2>
72 | <p><strong>The previous two examples focused on use cases where images are important to a story or immersive experience, but images can also be useful to help users make selections when filling out forms. Using <amp-selector> makes this markup easy and semantically consistent. As a result, users understand their form selections in context. The experience becomes more informative, engaging, and easier to accomplish.</strong></p>
73 | <center><div class="wp-image wp-image-1073 aligncenter"><amp-img layout='fixed' width="341" height="635" src="https://amphtml.files.wordpress.com/2017/02/form.gif?w=341&h=635"></amp-img><i><strong>See AMP by Example for a </strong></i><a href="https://ampbyexample.com/samples_templates/product/"><b><i>sample implementation</i></b></a></center>
74 | <center>
75 | <h2><strong>Try it out!</strong></h2>
76 | <p><strong>To get started with <amp-selector> and the goToSlide method, you can take a look at the documentation (</strong><a href="https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md#advancing-amp-carouseltypeslides-to-a-specific-slide"><strong>goToSlide</strong></a><strong>, </strong><a href="https://www.ampproject.org/docs/reference/components/amp-selector"><strong><amp-selector></strong></a><strong>), check out working examples at AMP By Example (</strong><a href="https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/"><strong>goToSlide</strong></a><strong>, </strong><a href="https://ampbyexample.com/components/amp-selector/"><strong><amp-selector></strong></a><strong>), and give us feedback on what’s working and what’s not in the </strong><a href="https://github.com/ampproject/amphtml/issues/new"><strong>AMP GitHub repo</strong></a><strong>. We look forward to hearing from you!</strong></center>
77 | <p><i><strong>Posted by Eric Lindley, Product Manager</strong></i></p><br />
78 | </div>
79 |
80 |
```
--------------------------------------------------------------------------------
/assets/sass/_header.scss:
--------------------------------------------------------------------------------
```scss
1 | .header {
2 | backface-visibility: hidden;
3 | background-color: $color-white;
4 | box-shadow: $header-shadow;
5 | font-size: 14px;
6 | font-weight: 300;
7 | transform: translateZ(0);
8 |
9 | &.fixed {
10 | left: 0;
11 | position: fixed;
12 | top: 0;
13 | transform: translateY(0%);
14 | transition: all .4s ease;
15 | width: 100%;
16 | z-index: 1000;
17 | }
18 |
19 | .promo {
20 | align-items: center;
21 | background: $gradient-anglebold;
22 | display: flex;
23 | font-weight: 300;
24 | height: 60px;
25 | justify-content: center;
26 | overflow: hidden;
27 | padding: 0 20px;
28 | position: relative;
29 | text-align: center;
30 | text-transform: none;
31 |
32 | .description, .link {
33 | color: white;
34 | line-height: 1.5;
35 | position: relative;
36 | }
37 |
38 | .description {
39 | font-size: 20px;
40 | }
41 |
42 | .link {
43 | display: inline-block;
44 | font-weight: 400;
45 | margin-left: 20px;
46 | text-transform: uppercase;
47 | vertical-align: center;
48 |
49 | &::after {
50 | background: url(/static/img/arrow.svg) center/cover no-repeat;
51 | content: '';
52 | display: inline-block;
53 | height: 10px;
54 | margin-left: 10px;
55 | width: 10px;
56 | }
57 | }
58 | }
59 |
60 | .promo-line {
61 | left: 50px;
62 | top: -50px;
63 | position: absolute;
64 | width: 150px;
65 | }
66 |
67 | .nav-container,
68 | .left-nav,
69 | .alt,
70 | .tabs {
71 | display: flex;
72 | }
73 |
74 | .nav-container {
75 | justify-content: space-between;
76 | position: relative;
77 | }
78 |
79 | .left-nav,
80 | .alt {
81 | justify-content: flex-start;
82 | }
83 |
84 | .left-nav {
85 | align-items: center;
86 | font-size: 20px;
87 | font-weight: 300;
88 | margin-left: 0;
89 |
90 | .header-title {
91 | background: url('/static/img/logo-blue.svg') no-repeat center left / 100%;
92 | color: $color-midblue;
93 | margin: 0;
94 | padding: $header-padding $header-padding $header-padding ($header-padding + 20px);
95 | text-transform: none;
96 | white-space: nowrap;
97 | width: auto;
98 |
99 | &::after, &::before {
100 | display: none;
101 | }
102 | }
103 | }
104 |
105 | .alt,
106 | .tabs {
107 | align-items: stretch;
108 | }
109 |
110 | .alt {
111 | padding: 0;
112 |
113 | &.right {
114 | font-size: 15px;
115 | }
116 | }
117 |
118 | .tabs {
119 | justify-content: center;
120 | margin-left: 60px;
121 | }
122 |
123 | .tab {
124 | color: $color-black-95;
125 | font-weight: 400;
126 | margin: 0 4px;
127 | padding: 6px;
128 | position: relative;
129 | transition: .1s ease color;
130 |
131 | &::after {
132 | background: $gradient-bold;
133 | bottom: 0;
134 | content: '';
135 | height: 3px;
136 | left: 20px;
137 | margin: auto;
138 | opacity: 0;
139 | position: absolute;
140 | right: 20px;
141 | transition: .1s ease opacity;
142 | }
143 |
144 | &:hover,
145 | &.active {
146 | color: $color-ampblue;
147 | }
148 |
149 | &.active {
150 | &::after {
151 | opacity: 1;
152 | }
153 |
154 | &:hover {
155 | &::after {
156 | opacity: 0;
157 | }
158 | }
159 | }
160 |
161 | &.hamburger {
162 | align-self: center;
163 | background: url('/static/img/hamburger.svg') no-repeat center / 30px 24px transparent;
164 | border: 0;
165 | cursor: pointer;
166 | display: none;
167 | height: 40px;
168 | margin: 0;
169 | padding: 0;
170 | width: 40px;
171 | }
172 | }
173 |
174 | .tab {
175 | padding: 6px 20px;
176 |
177 | &::before {
178 | bottom: 0;
179 | box-shadow: $header-shadow;
180 | content: '';
181 | left: -10px;
182 | opacity: 0;
183 | position: absolute;
184 | right: -10px;
185 | top: 20px;
186 | transition: opacity .2s ease-out;
187 | }
188 |
189 | > a {
190 | color: inherit;
191 | position: relative;
192 | top: 19px;
193 | }
194 |
195 | .list-container > ul,
196 | .sublist {
197 | list-style: none;
198 | }
199 |
200 | .list-container,
201 | .sublist {
202 | opacity: 0;
203 | pointer-events: none;
204 | position: absolute;
205 | }
206 |
207 | .list-container {
208 | left: -10px;
209 | top: 100%;
210 | transition: .2s ease-out;
211 | z-index: -1;
212 | }
213 |
214 | .list-shadow {
215 | bottom: -50px;
216 | left: -50px;
217 | overflow: hidden;
218 | position: absolute;
219 | right: -50px;
220 | top: 0;
221 |
222 | &::before {
223 | bottom: 50px;
224 | box-shadow: $header-shadow;
225 | content: '';
226 | left: 50px;
227 | position: absolute;
228 | right: 50px;
229 | top: 0;
230 | }
231 | }
232 |
233 | .list-container > ul {
234 | background: $color-white;
235 | min-width: 250px;
236 | position: relative;
237 |
238 | li {
239 | box-sizing: border-box;
240 | position: relative;
241 |
242 | &.has-sublist {
243 | &::after {
244 | @include sprite(caret-right);
245 | content: '';
246 | position: absolute;
247 | right: 20px;
248 | top: 18px;
249 | }
250 | }
251 |
252 | a {
253 | @extend %text-base;
254 | @extend %text-small;
255 | display: block;
256 | padding: 7.5px 30px;
257 | }
258 |
259 | &:hover {
260 | background: #f8f8f8;
261 |
262 | .sublist {
263 | opacity: 1;
264 | pointer-events: all;
265 | }
266 | }
267 |
268 | &.external {
269 |
270 | a {
271 | background: no-repeat right 15px center / 12px;
272 | }
273 |
274 | &:hover {
275 | a {
276 | background-image: url('/static/img/ic_open_in_new_black.svg');
277 | }
278 | }
279 | }
280 | }
281 |
282 | .sublist {
283 | background: #f8f8f8;
284 | box-shadow: $header-shadow;
285 | right: 0;
286 | top: 0;
287 | transform: translateX(100%);
288 | transition: opacity .3s;
289 |
290 | li {
291 | &:hover {
292 | background: white;
293 | }
294 |
295 | a {
296 | display: block;
297 | font-size: 14px;
298 | line-height: 1.3;
299 | padding: 15px 35px;
300 | }
301 | }
302 | }
303 | }
304 |
305 | &:hover {
306 | &::before {
307 | opacity: 1;
308 | }
309 |
310 | .list-container {
311 | opacity: 1;
312 | pointer-events: all;
313 | z-index: 0;
314 | }
315 | }
316 | }
317 |
318 | @include min-screen($mobile-breakpoint + 1) {
319 | .description.desktop-up {
320 | display: inline-block;
321 | }
322 | }
323 |
324 | @include max-screen($mobile-breakpoint) {
325 | .container {
326 | // aligns the hamburger
327 | padding-right: 18px;
328 | }
329 |
330 | .promo {
331 | .description, .link {
332 | font-size: 16px;
333 | }
334 |
335 | .description.mobile-down {
336 | display: inline-block;
337 | }
338 | }
339 |
340 | .left-nav {
341 | flex: 1 1 auto;
342 | width: auto;
343 |
344 | .header-title {
345 | margin: 0;
346 | padding: $header-mobile-padding $header-mobile-padding $header-mobile-padding ($header-mobile-padding + 20px);
347 | width: auto;
348 | }
349 | }
350 |
351 | div.tab,
352 | .desktop {
353 | display: none;
354 | }
355 |
356 | .tab.hamburger {
357 | display: inline-block;
358 | }
359 |
360 | .promo {
361 | .description, .link {
362 | font-size: 14px;
363 | }
364 | }
365 | }
366 | }
367 |
368 | .rtl .header {
369 | .promo .link::after {
370 | transform: rotate(180deg);
371 | }
372 |
373 | .tabs {
374 | margin-right: 60px;
375 | }
376 |
377 | .tab {
378 | .list-container {
379 | left: auto;
380 | right: -10px;
381 |
382 | & > ul {
383 | li.has-sublist::after {
384 | left: 20px;
385 | right: auto;
386 | transform: rotate(180deg);
387 | }
388 |
389 | li.external a {
390 | background-position: left 15px center;
391 | }
392 |
393 | .sublist {
394 | left: 0;
395 | transform: translateX(-100%);
396 | right: auto;
397 | }
398 | }
399 | }
400 | }
401 | }
402 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/publisher_icon_fast.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 121.81 116.64"><defs><style>.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-2,.cls-4,.cls-8,.cls-9{fill:none;}.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-18,.cls-19,.cls-2,.cls-3,.cls-4,.cls-5,.cls-7,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-1,.cls-2{stroke-width:5.45px;opacity:0.8;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-18,.cls-19,.cls-3,.cls-5,.cls-7{fill:#fff;}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke-width:0.95px;stroke:url(#linear-gradient-4);}.cls-18,.cls-19,.cls-5{fill-opacity:0.9;}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{fill:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{stroke:url(#linear-gradient-9);}.cls-10{stroke:url(#linear-gradient-10);}.cls-11{stroke:url(#linear-gradient-11);}.cls-12{stroke:url(#linear-gradient-12);}.cls-13{stroke:url(#linear-gradient-13);}.cls-14{stroke:url(#linear-gradient-14);}.cls-15{stroke:url(#linear-gradient-15);}.cls-16{stroke:url(#linear-gradient-16);}.cls-17{fill:#0dd7ff;fill-opacity:0.7;}.cls-18{stroke:url(#linear-gradient-17);}.cls-19{stroke:url(#linear-gradient-18);}</style><linearGradient id="linear-gradient" x1="-7413.3" y1="219.71" x2="-7378.42" y2="219.71" gradientTransform="translate(7328.11 -1479.22) rotate(-10.05)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0389ff"/><stop offset="0.5" stop-color="#0dd7ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-7416.92" y1="228.36" x2="-7357.93" y2="228.36" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" y1="60.33" x2="70" y2="60.33" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-4" x1="0.27" y1="44.33" x2="69.73" y2="44.33" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-5" x1="-1302.69" y1="-2808.96" x2="-1246.66" y2="-2808.96" gradientTransform="matrix(0.79, -0.45, 0.1, 1.21, 1341.68, 2889.78)" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-6" x1="59.09" y1="79.96" x2="73.67" y2="71.72" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-7" x1="-1277.63" y1="-2795.2" x2="-1270.73" y2="-2795.2" gradientTransform="matrix(0.79, -0.45, 0.1, 1.21, 1341.68, 2889.78)" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-8" x1="-1275.16" y1="-2819.77" x2="-1275.16" y2="-2822.72" gradientTransform="matrix(0.79, -0.45, 0.1, 1.21, 1341.68, 2889.78)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd7ff"/><stop offset="0.49" stop-color="#0389ff"/><stop offset="1" stop-color="#1c79c4"/></linearGradient><linearGradient id="linear-gradient-9" x1="-19.73" y1="2434.35" x2="-19.73" y2="2431.41" gradientTransform="matrix(0.63, 0.54, -0.49, 1.17, 1281.8, -2786.19)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-10" x1="-1350.51" y1="-1343.81" x2="-1350.51" y2="-1346.76" gradientTransform="matrix(0.79, -0.19, -0.07, 1.27, 1045.59, 1512.68)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-11" x1="831.71" y1="3407.9" x2="831.71" y2="3404.95" gradientTransform="matrix(0.53, 0.74, -0.6, 1.05, 1675.78, -4149.19)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-12" x1="2176.65" y1="4412.96" x2="2176.65" y2="4410.01" gradientTransform="matrix(0.37, 0.97, -0.71, 0.85, 2383.49, -5792.46)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-13" x1="9838.49" y1="-7424.56" x2="9838.49" y2="-7427.51" gradientTransform="matrix(-0.49, 1.17, 0.63, 0.54, 9551.99, -7464.28)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-14" x1="12288.4" y1="-4240.39" x2="12288.4" y2="-4243.33" gradientTransform="matrix(-0.75, 0.69, 0.26, 1.09, 10425.35, -3793.05)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-15" x1="8726.68" y1="-8084.68" x2="8726.68" y2="-8087.63" gradientTransform="matrix(-0.37, 1.25, 0.71, 0.31, 8983.6, -8282.91)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-16" x1="7140.99" y1="-8616.44" x2="7140.99" y2="-8619.39" gradientTransform="matrix(-0.19, 1.29, 0.77, 0.01, 8085.76, -9017.99)" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-17" x1="8.75" y1="57.83" x2="49.25" y2="57.83" xlink:href="#linear-gradient-3"/><linearGradient id="linear-gradient-18" x1="8.75" y1="66.08" x2="41.75" y2="66.08" xlink:href="#linear-gradient-3"/></defs><title>publisher_icon_fast</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="99.5" y1="19.83" x2="68.86" y2="36.74"/><line class="cls-2" x1="120.5" y1="20.83" x2="67.5" y2="49.83"/><polygon class="cls-3" points="0.5 55.83 0.5 103.83 69.5 64.83 69.5 16.83 0.5 55.83"/><line class="cls-4" x1="0.5" y1="63.83" x2="69.5" y2="24.83"/><path class="cls-5" d="M84,71.9C82.53,53.54,71.58,44.18,59.55,51S38.94,78.2,40.41,96.56Z"/><path class="cls-6" d="M62.5,82.53l1.57,1.31L70.91,67a.2.2,0,0,0-.36-.18L61,83.33"/><path class="cls-7" d="M64.93,82.69c-.16-2-1.33-3-2.62-2.24s-2.21,2.92-2.05,4.88,1.33,3,2.62,2.24S65.09,84.66,64.93,82.69Z"/><line class="cls-8" x1="59.16" y1="51.21" x2="59.44" y2="54.77"/><line class="cls-9" x1="73.78" y1="50.31" x2="72.33" y2="53.76"/><line class="cls-10" x1="66.55" y1="48.93" x2="66.35" y2="52.69"/><line class="cls-11" x1="78.3" y1="54.22" x2="76.54" y2="57.32"/><line class="cls-12" x1="81.37" y1="60.32" x2="79.29" y2="62.82"/><line class="cls-13" x1="47.17" y1="64.74" x2="49.03" y2="66.32"/><line class="cls-14" x1="52.79" y1="56.09" x2="53.55" y2="59.3"/><line class="cls-15" x1="42.96" y1="74.83" x2="45.04" y2="75.76"/><line class="cls-16" x1="41.09" y1="83.72" x2="43.38" y2="83.76"/><circle class="cls-17" cx="21.17" cy="115.49" r="1.15"/><circle class="cls-17" cx="26.15" cy="105.15" r="1.15"/><circle class="cls-17" cx="31.49" cy="109.67" r="1.15"/><circle class="cls-17" cx="35" cy="103.82" r="1.15"/><circle class="cls-17" cx="34.49" cy="95.15" r="1.15"/><circle class="cls-17" cx="77.17" cy="21.49" r="1.15"/><circle class="cls-17" cx="7.17" cy="56.49" r="1.15" transform="translate(-49.77 57.41) rotate(-83.69)"/><circle class="cls-17" cx="3.97" cy="58.15" r="1.15" transform="translate(-54.27 55.7) rotate(-83.69)"/><circle class="cls-17" cx="10.37" cy="54.83" r="1.15" transform="translate(-45.27 59.11) rotate(-83.69)"/><circle class="cls-17" cx="82.15" cy="11.15" r="1.15"/><circle class="cls-17" cx="87.49" cy="15.67" r="1.15"/><circle class="cls-17" cx="91" cy="9.82" r="1.15"/><circle class="cls-17" cx="90.49" cy="1.15" r="1.15"/><line class="cls-18" x1="9" y1="69.33" x2="49" y2="46.33"/><line class="cls-19" x1="9" y1="75.33" x2="41.5" y2="56.83"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/latest/blog/new-default-placeholders-for-ads-in-amp.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | class: post-blog post-detail
3 | type: Blog
4 | $title: New default placeholders for ads in AMP
5 | id: new-default-placeholders-for-ads-in-amp
6 | author: Vamsee Jasti
7 | role: Product Manager, AMP Project
8 | origin: "https://amphtml.wordpress.com/2017/02/02/new-default-placeholders-for-ads-in-amp/amp/"
9 | excerpt: "We want to share a somewhat small but visually impactful feature that we are planning to launch on AMP. Content loads incredibly fast on AMP pages, but traditional ads often load relatively slowly. This leaves blank areas on publisher pages, which is a poor reading experience for the user as it can feel like the […]"
10 | avatar: http://0.gravatar.com/avatar/0342fb9db5636638e886dff44d5ec94c?s=96&d=identicon&r=G
11 | date_data: 2017-02-02T13:14:47-08:00
12 | $date: February 2, 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><span style="font-weight:400;">We want to share a somewhat small but visually impactful feature that we are planning to launch on AMP. </span></p>
21 | <p>Content loads incredibly fast on AMP pages, but traditional ads often load relatively slowly. This leaves blank areas on publisher pages, which is a poor reading experience for the user as it can feel like the page is missing content.</p>
22 | <p><span style="font-weight:400;">To deliver faster, lighter and more secure ads that are as fast as your AMP content, consider switching over to </span><a href="https://github.com/ampproject/amphtml/blob/master/ads/google/a4a/docs/a4a-readme.md" target="_blank">AMP Ads</a><span style="font-weight:400;">.</span></p>
23 | <p><span style="font-weight:400;">In the meantime, in order to address the issue of blank ad spaces, we’ve added two default features to every ad placement on AMP pages. If an ad does not have a publisher-configured placeholder, AMP will automatically add:</span></p>
24 | <ol>
25 | <li style="font-weight:400;"><span style="font-weight:400;">A clearly marked “Ad” label</span></li>
26 | <li style="font-weight:400;"><span style="font-weight:400;">A subtle loading animation at the top indicating that the ad is loading</span></li>
27 | </ol>
28 | <p style="text-align:center;"><img data-attachment-id="1006" data-permalink="https://amphtml.wordpress.com/2017/02/02/new-default-placeholders-for-ads-in-amp/fansided/" data-orig-file="https://amphtml.files.wordpress.com/2017/02/fansided.gif?w=660&h=526" data-orig-size="660,526" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="fansided" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/02/fansided.gif?w=660&h=526?w=300" data-large-file="https://amphtml.files.wordpress.com/2017/02/fansided.gif?w=660&h=526?w=660" class=" size-full wp-image-1006 aligncenter" src="https://amphtml.files.wordpress.com/2017/02/fansided.gif?w=660&h=526" alt="fansided" width="660" height="526" /></p>
29 | <p style="text-align:center;"><i><span style="font-weight:400;">The new default ad loading indicator and placeholder feature</span></i></p>
30 | <p><span style="font-weight:400;">The clearly labeled placeholder allows the user to focus on the content and selectively shift their attention to ads. It also ensures that the user doesn’t think there</span><span style="font-weight:400;"> is missing content while the ad is loading.</span></p>
31 | <p><img data-attachment-id="997" data-permalink="https://amphtml.wordpress.com/2017/02/02/new-default-placeholders-for-ads-in-amp/ad-animation/" data-orig-file="https://amphtml.files.wordpress.com/2017/02/ad-animation.gif?w=660" data-orig-size="480,82" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="ad-animation" data-image-description="" data-medium-file="https://amphtml.files.wordpress.com/2017/02/ad-animation.gif?w=660?w=300" data-large-file="https://amphtml.files.wordpress.com/2017/02/ad-animation.gif?w=660?w=480" class=" size-full wp-image-997 aligncenter" src="https://amphtml.files.wordpress.com/2017/02/ad-animation.gif?w=660" alt="ad-animation" /></p>
32 | <p style="text-align:center;"><span style="font-weight:400;"> </span><i><span style="font-weight:400;"> A close-up of the subtle loading indicator</span></i></p>
33 | <p><span style="font-weight:400;">We realize this could be a breaking change for a few publishers who have already configured </span><a href="https://www.ampproject.org/docs/reference/components/amp-ad#placeholder" target="_blank">default placeholders </a><span style="font-weight:400;">o</span><span style="font-weight:400;">n</span> <span style="font-weight:400;">t</span><span style="font-weight:400;">h</span><span style="font-weight:400;">e</span><span style="font-weight:400;">i</span><span style="font-weight:400;">r</span> <span style="font-weight:400;">p</span><span style="font-weight:400;">a</span><span style="font-weight:400;">g</span><span style="font-weight:400;">e</span><span style="font-weight:400;">s</span><span style="font-weight:400;">, but these change come with significant user benefits described above. Publisher-configured placeholders will always retain full control over the ad loading experience.</span></p>
34 | <p><span style="font-weight:400;">We recommend that you try out how this treatment fits with existing content by </span><a href="https://www.ampproject.org/docs/reference/experimental" target="_blank">opting into the AMP dev channel</a><span style="font-weight:400;"> and subscribing into the ‘amp-ad-loading-ux’ experiment. This change is planned for a production release on Thursday Feb 9th, 2017.</span></p>
35 | <p><span style="font-weight:400;">We look forward to your </span><a href="https://github.com/ampproject/amphtml/issues/5918"><span style="font-weight:400;">feedback</span></a><span style="font-weight:400;">!</span></p>
36 | <p><i><span style="font-weight:400;">Posted by Vamsee Jasti, Product Manager, AMP Project</span></i></p><br /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/amphtml.wordpress.com/993/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/amphtml.wordpress.com/993/" /></a> <img alt="" border="0" src="https://pixel.wp.com/b.gif?host=amphtml.wordpress.com&blog=102788268&post=993&subd=amphtml&ref=&feed=1" width="1" height="1" />
37 | </div>
38 |
39 |
```
--------------------------------------------------------------------------------
/content/docs/reference/common_attributes.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Common Attributes
3 | $order: 3
4 | ---
5 |
6 | AMP provides a set of common attributes that are extended to many AMP components (and HTML elements). This document describes each of the following attributes:
7 |
8 | * [fallback](#fallback)
9 | * [heights](#heights)
10 | * [layout](#layout)
11 | * [media](#media)
12 | * [noloading](#noloading)
13 | * [on](#on)
14 | * [placeholder](#placeholder)
15 | * [sizes](#sizes)
16 | * [width and height](#width-and-height)
17 |
18 | ## fallback
19 |
20 | A fallback is a convention that allows the element to communicate to the reader that the browser does not support the element or that loading the underlying resource failed. The `fallback` attribute can be placed on any HTML element that is a direct child of an AMP element that supports fallbacks. The exact behavior with respect to the fallback is up to the element's implementation but typically the fallback element would be shown in place of the regular element.
21 |
22 | Often used with: images, animations, audio, and videos
23 |
24 | Example:
25 |
26 | [sourcecode:html]
27 | <amp-anim src="animated.gif" width="466" height="355" layout="responsive" >
28 | <div fallback>Cannot play animated images on this device.</div>
29 | </amp-anim>
30 | [/sourcecode]
31 |
32 | For more information, see [Placeholders & fallbacks](https://www.ampproject.org/docs/guides/responsive/placeholders).
33 |
34 | ## heights
35 |
36 | All AMP elements that support the `responsive` layout, also support the `heights` attribute. The value of this attribute is a sizes expression based on media expressions, similar to the [sizes attribute on `img` tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) but with two key differences:
37 |
38 |
39 | 1. The value applies to the height, not the width of the element.
40 | 2. Percent values are allowed. A percent value indicates the percent of the element's width. For example, a value of `80%` indicates that the height of the element will be 80% of the element's width.
41 |
42 | {% call callout('Note', type='note') %}
43 | When the `heights` attribute is specified along with `width` and `height`, the `layout` is defaulted to `responsive`.
44 | {% endcall %}
45 |
46 | Example:
47 |
48 | [sourcecode:html]
49 | <amp-img src="amp.png"
50 | width="320" height="256"
51 | heights="(min-width:500px) 200px, 80%">
52 | </amp-img>
53 | [/sourcecode]
54 |
55 | For more information, see [Art direction with srcset, sizes & heights](https://www.ampproject.org/docs/guides/responsive/art_direction).
56 |
57 | ## layout
58 |
59 | AMP provides a set of [layouts](https://www.ampproject.org/docs/guides/responsive/control_layout#the-layout-attribute) that specify how an AMP component behaves in the document layout. You can specify a layout for a component by adding the `layout` attribute with one of the supported layout values for the element (see the element's documentation for what values are supported).
60 |
61 | Example:
62 |
63 | [sourcecode:html]
64 | <amp-img src="/img/amp.jpg"
65 | width="1080"
66 | height="610"
67 | layout="responsive"
68 | alt="an image">
69 | </amp-img>
70 | [/sourcecode]
71 |
72 | For more information, see [Layout & Media queries](https://www.ampproject.org/docs/guides/responsive/control_layout) and the [Layout Spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md).
73 |
74 | ## media
75 |
76 | All AMP elements support the `media` attribute. The value of `media` is a media query. If the query does not match, the element is not rendered and its resources and potentially its child resources will not be fetched. If the browser window changes size or orientation, the media queries are re-evaluated and elements are hidden and shown based on the new results.
77 |
78 | Example:
79 |
80 | [sourcecode:html]
81 | <amp-img
82 | media="(min-width: 650px)"
83 | src="wide.jpg"
84 | width="466"
85 | height="355" layout="responsive"></amp-img>
86 | <amp-img
87 | media="(max-width: 649px)"
88 | src="narrow.jpg"
89 | width="527"
90 | height="193" layout="responsive"></amp-img>
91 | [/sourcecode]
92 |
93 | For more information, see [Layout & Media queries](https://www.ampproject.org/docs/guides/responsive/control_layout#element-media-queries).
94 |
95 | ## noloading
96 |
97 | The `noloading` attribute indicates whether the "loading indicator" should be turned **off** for this element. Many AMP elements show a "loading indicator", which is a basic animation that shows that the element has not yet fully loaded.
98 |
99 | Often used with: images, animations, videos, and ads
100 |
101 | Example:
102 |
103 | [sourcecode:html]
104 | <amp-img src="card.jpg"
105 | noloading
106 | height="190"
107 | width="297"
108 | layout="responsive">
109 | </amp-img>
110 | [/sourcecode]
111 |
112 | ## on
113 |
114 | The `on` attribute is used to install event handlers on elements. The events that are supported depend on the element.
115 |
116 | Often used with: lightboxes, sidebars, live lists, and forms
117 |
118 | Syntax:
119 |
120 | [sourcecode:text]
121 | eventName:targetId[.methodName[(arg1=value, arg2=value)]]
122 | [/sourcecode]
123 |
124 | Example:
125 |
126 | [sourcecode:html]
127 | <button on="tap:my-lightbox">Open lightbox</button>
128 | <amp-lightbox id="my-lightbox" layout="nodisplay">
129 | ...
130 | </amp-lightbox>
131 | [/sourcecode]
132 |
133 | For more information, see [Actions and Events in AMP](https://github.com/ampproject/amphtml/blob/master/spec/amp-actions-and-events.md).
134 |
135 | ## placeholder
136 |
137 | The `placeholder` attribute indicates that the element marked with this attribute acts as a placeholder for the parent AMP element. The attribute can be placed on any HTML element that is a direct child of an AMP element that supports placeholders. By default, the placeholder is immediately shown for the AMP element, even if the AMP element's resources have not been downloaded or initialized. Once ready, the AMP element typically hides its placeholder and shows the content. The exact behavior with respect to the placeholder is up to the element's implementation.
138 |
139 | Often used with: images, animations, videos, and ads
140 |
141 | Example:
142 |
143 | [sourcecode:html]
144 | <amp-anim src="animated.gif" width="466" height="355" layout="responsive">
145 | <amp-img placeholder src="preview.png" layout="fill"></amp-img>
146 | </amp-anim>
147 | [/sourcecode]
148 |
149 | For more information, see [Placeholders & fallbacks](https://www.ampproject.org/docs/guides/responsive/placeholders).
150 |
151 | ## sizes
152 |
153 | All AMP elements that support the `responsive` layout, also support the `sizes` attribute. The value of the `sizes` attribute is a sizes expression as described in the [sizes attribute on `img` tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), but extended to all elements, not just images.
154 |
155 | Example:
156 |
157 | [sourcecode:html]
158 | <amp-img src="amp.png"
159 | width="400" height="300"
160 | layout="responsive"
161 | sizes="(min-width: 320px) 320px, 100vw">
162 | </amp-img>
163 | [/sourcecode]
164 |
165 | For more information, see [Art direction with srcset, sizes & heights](https://www.ampproject.org/docs/guides/responsive/art_direction).
166 |
167 | ## width and height
168 |
169 | For some [layouts](https://www.ampproject.org/docs/guides/responsive/control_layout#the-layout-attribute), AMP components must have a `width` and `height` attribute that contains an integer pixel value.
170 |
171 | Example:
172 |
173 | [sourcecode:html]
174 | <amp-anim width="245"
175 | height="300"
176 | src="/img/cat.gif"
177 | alt="cat animation">
178 | </amp-anim>
179 | [/sourcecode]
180 |
181 | For more information, see [Layout & Media queries](https://www.ampproject.org/docs/guides/responsive/control_layout) and the [Layout Spec](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md).
182 |
183 |
184 |
```
--------------------------------------------------------------------------------
/views/about-who-vertical.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | {% endset %}
6 |
7 | {% block main %}
8 | <div class="about-who-block {{doc.vertical_class}}">
9 | {{ navmarkup|safe }}
10 | <div class="container xl">
11 | <section class="hero">
12 | {% if doc.hero.hero_icon %}
13 | <amp-img class="icon"
14 | noloading
15 | width="{{doc.hero.hero_icon_width}}"
16 | height="{{doc.hero.hero_icon_height}}"
17 | layout=responsive
18 | src="/static/img/about/who-use-amp/{{doc.hero.hero_icon}}">
19 | </amp-img>
20 | {% endif %}
21 | <div class="hero-images desktop-only">
22 | {% if doc.hero.triangle_img %}
23 | <amp-img class="triangle"
24 | noloading
25 | width="{{doc.hero.triangle_img_width}}"
26 | height="{{doc.hero.triangle_img_height}}"
27 | layout=responsive
28 | src="/static/img/about/who-use-amp/{{doc.hero.triangle_img}}">
29 | </amp-img>
30 | {% endif %}
31 | {% if doc.hero.lines_img %}
32 | <amp-img class="lines"
33 | noloading
34 | width="{{doc.hero.lines_img_width}}"
35 | height="{{doc.hero.lines_img_height}}"
36 | layout=responsive
37 | src="/static/img/about/who-use-amp/{{doc.hero.lines_img}}">
38 | </amp-img>
39 | {% endif %}
40 | {% if doc.hero.hero_img_base %}
41 | <amp-img class="phones"
42 | noloading
43 | width="{{doc.hero.hero_img_width}}"
44 | height="{{doc.hero.hero_img_height}}"
45 | layout=responsive
46 | srcset="{{doc.hero.hero_img_base + '.png ' ~ doc.hero.hero_img_width ~ 'w'}},
47 | {{doc.hero.hero_img_base + '@1_5x.png ' ~ (doc.hero.hero_img_width * 0.66) ~ 'w'}},
48 | {{doc.hero.hero_img_base + '@1x.png ' ~ (doc.hero.hero_img_width * 0.5) ~ 'w'}}"
49 | src="{{doc.hero.hero_img_base + '.png'}}">
50 | </amp-img>
51 | {% endif %}
52 | </div>
53 | <p class="label">{{doc.title}}</p>
54 | <div class="tablet-wrapper">
55 | <h1 class="title">{{_(doc.hero.title)}}</h1>
56 | <p class="small paragraph">{{_(doc.hero.paragraph)}}</p>
57 | </div>
58 | <div class="example-users">
59 | {% for user in doc.hero.users %}
60 | <div class="example-user-logo{% if user.class %} {{user.class}}{% endif %}">
61 | <amp-img
62 | noloading
63 | width={{user.logo_width}}
64 | height={{user.logo_height}}
65 | layout=responsive
66 | src="/static/img/about/who-use-amp/{{user.logo}}">
67 | </amp-img>
68 | </div>
69 | {% endfor %}
70 | </div>
71 | </section>
72 | <section class="why-use">
73 | <h3>{{_(doc.why.title)}}</h3>
74 | <div class="reasons desktop">
75 | {% for reason in doc.why.reasons %}
76 | <div class="reason">
77 | <amp-img
78 | noloading
79 | height=140
80 | layout=fixed-height
81 | src="/static/img/about/who-use-amp/{{reason.icon}}">
82 | </amp-img>
83 | <h4>{{_(reason.title)}}</h4>
84 | <p class="small">{{_(reason.paragraph)}}</p>
85 | </div>
86 | {% endfor %}
87 | </div>
88 | <div class="reasons tablet">
89 | <amp-carousel class="latest-carousel"
90 | height="550"
91 | layout="fixed-height"
92 | type="slides">
93 | <div class="card-container">
94 | {% for reason in doc.why.reasons %}
95 | <div class="reason card">
96 | <amp-img
97 | noloading
98 | height=150
99 | width=150
100 | layout=responsive
101 | src="/static/img/about/who-use-amp/{{reason.icon}}">
102 | </amp-img>
103 | <h4>{{_(reason.title)}}</h4>
104 | <div><p class="small">{{_(reason.paragraph)}}</p></div>
105 | </div>
106 | {% if loop.last and loop.index is not divisibleby 2 %}
107 | {% for number in range(0, 2 - loop.index % 2) %}
108 | <div class="card card--spacer"></div>
109 | {% endfor %}
110 | {% endif %}
111 | {% if not loop.last and loop.index is divisibleby 2 %}
112 | </div>
113 | <div class="card-container">
114 | {% endif %}
115 | {% endfor %}
116 | </div>
117 | </amp-carousel>
118 | </div>
119 | <div class="reasons mobile">
120 | <amp-carousel class="latest-carousel"
121 | height="550"
122 | layout="fixed-height"
123 | type="slides">
124 | {% for reason in doc.why.reasons %}
125 | <div class="card-container">
126 | <div class="reason card">
127 | <amp-img
128 | noloading
129 | height=150
130 | width=150
131 | layout=responsive
132 | src="/static/img/about/who-use-amp/{{reason.icon}}">
133 | </amp-img>
134 | <h4>{{_(reason.title)}}</h4>
135 | <div><p class="small">{{_(reason.paragraph)}}</p></div>
136 | </div>
137 | </div>
138 | {% endfor %}
139 | </amp-carousel>
140 | </div>
141 | </section>
142 |
143 | {% if doc.points %}
144 | {% with points = doc.points %}
145 | {% include "/views/partials/points.html" %}
146 | {% endwith %}
147 | {% endif %}
148 |
149 | {% if doc.case %}
150 | <section class="case-study">
151 | <h3>{{_(doc.case.title)}}</h3>
152 | <div class="card-container grid case desktop">
153 | {% for case in doc.case.cases %}
154 | {% set locale = doc.locale %}
155 | {% with doc = g.doc('/content/learn/case-studies/' ~ case.filename, locale=doc.locale), isCase = true %}
156 | {% include "/views/partials/grid-card.html" %}
157 | {% endwith %}
158 | {% endfor %}
159 | </div>
160 | <amp-carousel
161 | height="430"
162 | layout="fixed-height"
163 | type="slides">
164 | {% for case in doc.case.cases %}
165 | <div class="card-container grid case">
166 | {% with doc = g.doc('/content/learn/case-studies/' ~ case.filename, locale=doc.locale), isCase = true %}
167 | {% include "/views/partials/grid-card.html" %}
168 | {% endwith %}
169 | </div>
170 | {% endfor %}
171 | </amp-carousel>
172 |
173 | {% if doc.case.lines_img %}
174 | <amp-img class="lines"
175 | noloading
176 | width={{doc.case.lines_img_width}}
177 | height={{doc.case.lines_img_height}}
178 | layout=responsive
179 | src="/static/img/about/who-use-amp/{{doc.case.lines_img}}">
180 | </amp-img>
181 | {% endif %}
182 | </section>
183 | {% endif %}
184 | </div>
185 |
186 | {% if doc.large_cta %}
187 | {% with large_cta = doc.large_cta %}
188 | {% include "/views/partials/large-cta.html" %}
189 | {% endwith %}
190 | {% endif %}
191 | </div>
192 | {% if doc.cta %}
193 | {% with cta = doc.cta %}
194 | {% include "/views/partials/footer-cta.html" %}
195 | {% endwith %}
196 | {% endif %}
197 | {% include "/views/partials/footer.html" %}
198 |
199 | {% endblock %}
```