CINXE.COM
Documentation: <amp-analytics> - amp.dev
<!doctype html><html amp lang="en" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="description" content="Captures analytics data from an AMP document."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="Captures analytics data from an AMP document."><meta name="twitter:title" content="Documentation: amp-analytics"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-component-600x314.png"><meta property="og:title" content="Documentation: <amp-analytics>"><meta property="og:url" content="https://amp.dev/documentation/components/amp-analytics/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-component-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites,stories,ads"><meta name="page-locale" content="en,de,pt_br,ru,zh_cn,pl,vi"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012406131415000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous" custom-element="amp-iframe"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><script async src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.mjs" custom-element="amp-sidebar" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" crossorigin="anonymous" custom-element="amp-sidebar"></script><script async src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.mjs" custom-element="amp-user-notification" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js" crossorigin="anonymous" custom-element="amp-user-notification"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/documentation/components/amp-analytics/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/components/amp-analytics/"><link rel="alternate" hreflang="fr" href="https://amp.dev/fr/documentation/components/amp-analytics/"><link rel="alternate" hreflang="ar" href="https://amp.dev/ar/documentation/components/amp-analytics/"><link rel="alternate" hreflang="es" href="https://amp.dev/es/documentation/components/amp-analytics/"><link rel="alternate" hreflang="it" href="https://amp.dev/it/documentation/components/amp-analytics/"><link rel="alternate" hreflang="id" href="https://amp.dev/id/documentation/components/amp-analytics/"><link rel="alternate" hreflang="ja" href="https://amp.dev/ja/documentation/components/amp-analytics/"><link rel="alternate" hreflang="ko" href="https://amp.dev/ko/documentation/components/amp-analytics/"><link rel="alternate" hreflang="pt_BR" href="https://amp.dev/pt_br/documentation/components/amp-analytics/"><link rel="alternate" hreflang="tr" href="https://amp.dev/tr/documentation/components/amp-analytics/"><link rel="alternate" hreflang="zh_CN" href="https://amp.dev/zh_cn/documentation/components/amp-analytics/"><title>Documentation: <amp-analytics> - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/documentation/components/amp-analytics/ ","name":"amp.dev","headline":"Documentation: \u0026lt;amp-analytics\u0026gt;","description":"Captures analytics data from an AMP document.","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/docs-component-600x314.png","width":600,"height":314}}</script><style amp-custom>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.ap-m-format-toggle{position:-webkit-sticky;position:sticky;top:0;margin:0 10px;padding:10px 0 0;width:100%;max-width:85%;z-index:12}@media(min-width:768px){.ap-m-format-toggle{padding:0;margin:0 15px 0 0;max-width:100%}}.ap-m-format-toggle-selected{border:0}.amp-mode-touch .ap-m-format-toggle-selected{position:relative}.ap-m-format-toggle-selected:focus:after,.ap-m-format-toggle-selected:hover:after{position:absolute;top:0;left:0;content:"";display:block;height:300%;width:100%}.ap-m-format-toggle-link,.ap-m-format-toggle-selected{z-index:3;display:flex;align-items:center;width:100%;margin:0 0 2px;padding:5px 8px;overflow:hidden;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Poppins,system;font-weight:700;font-size:12px;text-align:left;border-radius:4px;color:#000;background:#ebebf0;transition:opacity .2s ease;box-shadow:0 5px 15px -5px rgba(0,0,0,.25)}.ap-m-format-toggle-link .ap-a-ico,.ap-m-format-toggle-selected .ap-a-ico{width:14px;height:14px;margin-right:8px;fill:#000}.ap-m-format-toggle-link{color:#000;background:#ebebf0}.ap-m-format-toggle-link .ap-a-ico{fill:#000}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected,.ap-m-format-toggle-link-websites:hover{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-websites:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected,.ap-m-format-toggle-link-stories:hover{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-stories:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected,.ap-m-format-toggle-link-ads:hover{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-ads:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected,.ap-m-format-toggle-link-email:hover{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-email:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-angle{margin-right:0;margin-left:auto}.ap-m-format-toggle-formats{position:absolute;width:100%;z-index:2;pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .2s ease;transition-delay:.05s}.ap-m-format-toggle-formats:focus-within,.ap-m-format-toggle-formats:hover,.ap-m-format-toggle-selected:focus+.ap-m-format-toggle-formats,.ap-m-format-toggle-selected:hover+.ap-m-format-toggle-formats{pointer-events:auto;opacity:1;transform:translateY(0)}body{top:0;left:0;background-repeat:no-repeat;background-size:100% auto;background-position:100% 0;background-attachment:fixed}body.ap--websites{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' y1='855.23' x2='606.28' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d5e6f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--ads{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--stories{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ebdfd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d7ebd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}.ap--ampsidebar{width:100%;max-width:90vw;background:#fafafc}.ap--ampsidebar-toolbar{top:86px;height:100vh;max-height:calc(100vh - 86px)}@media(min-width:768px){.ap--ampsidebar-toolbar{position:-webkit-sticky;position:sticky;overflow:auto}}.ap--ampsidebar-toolbar>ul{-webkit-overflow-scrolling:touch;margin:0;padding:0}@media(min-width:768px){.ap--ampsidebar-toolbar>ul{overflow:auto;max-height:100%}}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar{width:6px;height:6px}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-corner{background-color:transparent}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.ap-o-sidebar-component{max-width:100%}@media(min-width:768px){.ap-o-sidebar-component .ap-o-sidebar{width:auto;min-height:400px;padding-bottom:0;margin-right:0;margin-left:-10px;background:0 0;box-shadow:none}}.ap-o-sidebar-component .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-component .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-component .nav-list.level-1{margin:0 15px}.ap-o-sidebar-component .nav-list .nav-list{padding-bottom:10px;margin-bottom:10px}.ap-o-sidebar-component .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-component .nav-item.level-1{pointer-events:none}.ap-o-sidebar-component .nav-item.level-1 .nav-link{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1.8rem;padding:0;margin:0;line-height:1;word-break:break-all;pointer-events:auto;color:#e2e5e6}.ap-o-sidebar-component .nav-item.level-1 .nav-link:only-child:not(a){margin:-20px;font-size:0;pointer-events:none;z-index:-1}.ap-o-sidebar-component .nav-item.level-1>.nav-link{padding-top:10px;pointer-events:none;z-index:1;transition:color .15s ease}.ap-o-sidebar-component .nav-item.level-1.active>.nav-link,.ap-o-sidebar-component .nav-item.level-1:hover>.nav-link{color:#91979d}.ap-o-sidebar-component .nav-item.level-2 .nav-link{text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em;padding:3px 25px 3px 0;margin:0}.ap-o-sidebar-component .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-component .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-component .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-a-img{position:relative}.image-preview-1 .ap-a-img{overflow:hidden;border-radius:50%}.image-preview-2 .ap-a-img{margin-right:-30px;filter:drop-shadow(0 30px 30px -15px rgba(0,0,0,.25))}@media(min-width:768px){.image-preview-2 .ap-a-img{margin-right:0}}.-is{display:block;width:100%;height:1px;margin-bottom:.813em;background-color:#fafafc}@media(min-width:768px){.-is{display:none}.-io{display:block}}.-ff{padding:84px 15px 0}@media(min-width:768px){.-ff{padding-left:0;padding-right:0}}.-fl{margin-bottom:.75em;font-size:1.8rem;margin-top:2rem;padding:20px 0}.-fl,.-fc{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}.-fc{margin-top:1.5rem;font-size:1.2rem;padding-left:20px;margin-bottom:0}.-fh{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}.-fp{display:block;background-color:#ebebf0;height:1px;margin:30px 20px 30px 0}.ap-m-clip{position:relative}.ap-m-clip-expand{position:absolute;z-index:10;bottom:0;left:0;display:flex;justify-content:center;align-items:flex-end;height:65px;width:100%;border:none;background:#fff;background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff 40%);cursor:pointer}.ap-m-clip-expand-icon{max-height:21px;max-width:21px;margin-top:35px;fill:#48525c;transition:transform .3s}.ap-m-clip-expand:hover .ap-m-clip-expand-icon{fill:#005af0;transform:translate3d(0,-2px,0)}.ap-a-copy-script{display:flex;align-items:center;flex-basis:100%}.ap-a-copy-script pre{overflow-x:scroll;flex:1 0;margin:6px 8px 6px 0;padding:4px 6px;white-space:wrap;background:#e2e5e6;font-size:12.6px}.ap-a-copy-script pre::-webkit-scrollbar{width:6px;height:6px}.ap-a-copy-script pre::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-a-copy-script pre::-webkit-scrollbar-corner{background-color:transparent}.ap-a-copy-script pre::-webkit-scrollbar{height:4px}.ap-a-copy-script pre::-webkit-scrollbar-thumb{border-radius:0}.ap-o-component-intro-row{padding:15px;background-color:#fff;border:1px solid #e2e5e6}.ap-o-component-intro-row+.ap-o-component-intro-row{margin-top:10px}@media(min-width:768px){.ap-o-component-intro-row-inline{display:flex;align-items:baseline;flex-wrap:wrap}}.ap-o-component-intro-headline{font-size:16px;margin:0 0 10px}.ap-o-component-intro-row-inline .ap-o-component-intro-headline{white-space:nowrap;margin-right:10px}.ap-o-component-intro-headline .active{color:#00f}.ap-o-component-intro-filter{margin-left:auto}.ap-o-component-intro-filter *{font-size:.875rem}.ap-o-component-intro-text{margin:5px 0}.ap-o-component-intro-list{max-height:142px;overflow:hidden}@media(min-width:768px){.ap-o-component-intro-list{display:flex;flex-wrap:wrap}}.ap-o-component-intro-list-item{display:block;margin-bottom:6px;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:768px){.ap-o-component-intro-list-item{width:50%;padding-right:12px}}.expanded .ap-o-component-intro-list{max-height:none}.ap-m-tip{display:flex;padding:15px;margin-bottom:20px;border-radius:4px;background-color:#ebebf0;border:1px solid #e2e5e6}@media(min-width:768px){.ap-m-tip{padding:30px}}.ap-m-tip code{white-space:normal}.ap-m-tip-icon{width:36px;height:36px;margin-top:5px;margin-right:14px}@media(min-width:768px){.ap-m-tip-icon{margin-right:26px}}.ap-m-tip-content{font-size:.875rem;min-width:0}.ap-m-tip-content h4{font-size:1rem;margin:0 0 .75em}.ap-m-tip-content ol,.ap-m-tip-content p,.ap-m-tip-content ul{font-size:.875rem}.ap-m-tip-content ol:first-child,.ap-m-tip-content p:first-child,.ap-m-tip-content ul:first-child{margin-top:0}.ap-breadcrumbs,.-ou{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-oa{width:10px;height:10px;margin:0 6px;transform:rotate(-90deg)}.ap--toc{width:100%}@media(min-width:1024px){.ap--toc{background:0 0;box-shadow:none;padding-right:10px}}.ap-o-toc{--spacing-top:90px;position:relative;z-index:1;top:0;right:0;width:calc(100% - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07);border-radius:8px;padding:15px;margin-bottom:10px}.ap-o-toc::-webkit-scrollbar{width:6px;height:6px}.ap-o-toc::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-o-toc::-webkit-scrollbar-corner{background-color:transparent}.ap-o-toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}@media(min-width:768px){.ap-o-toc{width:100%}}@media(min-width:1024px){.ap-o-toc{position:-webkit-sticky;position:sticky;z-index:1;padding:0 10px 0 0;margin:0;height:auto;top:var(--spacing-top);right:auto;padding-bottom:var(--spacing-top);background:0 0;box-shadow:none;overflow-y:scroll;max-height:calc(100vh - var(--spacing-top))}}.ap-o-toc-hl{font-family:Poppins,system;font-weight:700;cursor:pointer;width:100%;margin-bottom:0}@media(min-width:1024px){.ap-o-toc-hl{margin-bottom:10px}}.ap-o-toc-toggle{display:flex;align-items:center;justify-content:space-between;outline:0}@media(min-width:1024px){.ap-o-toc-toggle{position:-webkit-sticky;position:sticky;top:0;background:#fafafc}}.ap-o-toc ul{list-style:none;margin:0;padding:0;transition:.4s}.ap-o-toc ul>li a{display:block;padding-bottom:20px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;font-weight:700;line-height:1rem}.ap-o-toc ul>li>ul{padding-left:10px;text-transform:none}.ap-o-toc ul>li>ul li a{font-weight:400}@media(max-width:1023px){.ap-o-toc .-of:not(:checked)+ul{display:none;transition:.2s}.ap-o-toc .-of:checked+ul{margin-top:15px}}.ap-o-toc .nav-icon svg{width:15px;height:15px}@media(min-width:1024px){.ap-o-toc .nav-icon{display:none}}.ap-o-toc .nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.ap-o-toc.contentmenuopen .nav-icon .ap-a-ico{transform:rotate(0)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ol{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ol .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ol .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ol,#sidebar-left[open]~.ap--main .-ol{z-index:9999999999}.-oc{position:absolute;top:50px}.-oh{position:fixed;top:-99px}.-op{position:fixed;z-index:15;font-size:12px;font-family:Poppins,system;font-weight:700;color:#fff;fill:#fff;cursor:pointer;display:flex;align-items:center}.-op .label-icon{border-radius:4px;background:#005af0;height:35px;width:32px;padding-left:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);z-index:1}.-op .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-op .label-title{left:32px;display:flex;align-items:center;height:35px;margin-left:-5px;padding:5px 10px 5px 5px;white-space:nowrap;border-radius:0 4px 4px 0;background:#005af0;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);transform:scaleX(0);transform-origin:left;transition:transform .233s cubic-bezier(0,0,.21,1)}.-od{position:fixed;top:-99px}.-ol{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ol{display:none}}.-ol .label-icon svg{transform:rotate(180deg)}.-ov{display:none}.-om{position:fixed;top:-99px}.-og{display:none}@media(min-width:768px)and (max-width:1440px){.-ov{display:inline-block}.-og{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-om:checked~.-oy{grid-column:1/2}.-om:checked~.-oy nav{display:none}.-om:checked~.-oy svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-om:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-om:checked~.ap--toc~.-t{padding-left:80px;padding-right:80px;grid-column:2/20}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-om:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-om:checked~.-t,.-om:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-om:checked~.-t .-og,.-om:checked~.ap--help .-og{margin-left:-88px}.-om:checked~.-t .-og .label-icon svg,.-om:checked~.ap--help .-og .label-icon svg{transform:rotate(180deg)}}.-fd{display:none}.-fv.amp-active~.-fd{height:42px;max-width:2020px;margin:0 auto;color:#fff;background-color:#20202a;font-size:.875rem;z-index:100;position:absolute;width:100%;left:0;right:0}@media(min-width:768px){.-fv.amp-active~.-fd{display:block}}.-fv.amp-active~.-fd .-fm{position:relative;display:flex;align-items:center;width:100%;height:100%;max-width:1440px;padding:0 30px;margin:0 auto}@media(min-width:1024px){.-fv.amp-active~.-fd .-fm{padding:0 15px}}.-fv.amp-active~.-fd .-fm:after{position:absolute;content:"";top:42px;left:50px;width:0;height:0;border-color:#20202a transparent transparent;border-style:solid;border-width:8px 10px 0}.-fv.amp-active~.-fd .-fg{flex:1 0;padding-right:10px}.-fv.amp-active~.-fd .-fy{height:20px;width:20px;background-color:transparent;border:0;cursor:pointer;padding:3px}.-fv.amp-active~.-fd .-fy svg{fill:#fff;width:100%;height:100%}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}body{background-color:#fafafc}.-fb .-tf{position:relative;display:flex;flex-wrap:wrap;width:100%;max-width:1440px;padding:0 20px;margin-left:auto;margin-right:auto}@media(max-width:767px){.-fb .-tf{padding:0 15px}.-fb .-tf>div,.-fb .-tf section{min-width:0}}@media(min-width:768px){.-fb .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-fb .-tf{padding:0 15px}}.-fb .-t,.-fb .ap--help{grid-column:1;position:relative;width:100%;background:#fafafc;box-shadow:0 25px 40px 0 rgba(0,0,0,.05);padding-left:0;padding-right:0}@media(min-width:768px){.-fb .-t,.-fb .ap--help{grid-column:9/25}}@media(min-width:1024px){.-fb .-t,.-fb .ap--help{grid-column:7/25}.-fb .-t p.limit,.-fb .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-fb .-t,.-fb .ap--help{grid-column:8/25}}@media(min-width:1024px){.-fb .-t,.-fb .ap--help{grid-column:6/25}}.-fb .-oy{grid-column:auto;padding:0}@media(min-width:768px){.-fb .-oy{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-fb .-oy{grid-column:1/6}}.-fb .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-fb .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-fb .ap--toc{grid-column:8/25}.-fb .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-fb .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-fb .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-fb .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-fb .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-fb .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-fb .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-fb .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-fb .-oy+.-t,.-fb .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-fb .-oy+.-t,.-fb .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-fb .-oy+.-t:nth-of-type(2),.-fb .-oy+.-t:nth-of-type(3),.-fb .ap--toc+.-t:nth-of-type(2),.-fb .ap--toc+.-t:nth-of-type(3){grid-row:1}}.-fb .ap--versions{position:relative;display:inline-flex;align-items:center;background:#fff;border:1px solid #e2e5e6;margin-top:5px}.-fb .ap--versions-toggle{border:0;padding:0 32px 0 8px;background:#fff;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none;appearance:none}.-fb .ap--versions:after{content:"";position:absolute;right:8px;width:16px;height:35px;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%2320202A'%3E%3Cpath d='M59.863 17.14l4.137 5.488-32 24.232-32-24.232 4.137-5.488 27.863 21.108z'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;pointer-events:none}.-fb .ap--component-tags{margin-top:-1.5rem;margin-bottom:2rem}@media(min-width:768px){.-fb .-t,.-fb .ap--help{padding-left:30px;padding-right:30px}}.-ta{display:flex;overflow-x:auto;margin:1.1rem 0 0;padding:0 1em;color:#fff;line-height:1.3em;background:#20202a;font-size:.9em}.-ta:after{content:" ";-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.-ta::-webkit-scrollbar{width:6px;height:6px}.-ta::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.-ta::-webkit-scrollbar-corner{background-color:transparent}.-ta::-webkit-scrollbar-thumb{border-radius:0}@media(min-width:768px){.-ta{max-width:100%;margin-right:-30px}}.-ta code,.-ta pre{font-family:Fira Mono,monospace;font-weight:500;white-space:pre;font-size:.9rem;padding:unset;word-break:normal;color:inherit;background:0 0}.-ta .hll{background-color:#49483e}.-ta .c{color:#75715e}.-ta .k{color:#66d9ef}.-ta .l{color:#ae81ff}.-ta .n{color:#f8f8f2}.-ta .o{color:#f15a5a}.-ta .p{color:#f8f8f2}.-ta .c1,.-ta .ch,.-ta .cm,.-ta .cp,.-ta .cpf,.-ta .cs{color:#75715e}.-ta .gd{color:#f15a5a}.-ta .ge{font-style:italic}.-ta .gi{color:#a6e22e}.-ta .gs{font-weight:700}.-ta .gu{color:#75715e}.-ta .kc,.-ta .kd{color:#66d9ef}.-ta .kn{color:#f15a5a}.-ta .kp,.-ta .kr,.-ta .kt{color:#66d9ef}.-ta .ld{color:#e6db74}.-ta .m{color:#ae81ff}.-ta .s{color:#e6db74}.-ta .na{color:#a6e22e}.-ta .nb{color:#f8f8f2}.-ta .nc{color:#a6e22e}.-ta .no{color:#66d9ef}.-ta .nd{color:#a6e22e}.-ta .ni{color:#f8f8f2}.-ta .ne,.-ta .nf{color:#a6e22e}.-ta .nl,.-ta .nn{color:#f8f8f2}.-ta .nx{color:#fff}.-ta .py{color:#f8f8f2}.-ta .nt{color:#f15a5a}.-ta .nv{color:#f8f8f2}.-ta .ow{color:#f15a5a}.-ta .w{color:#f8f8f2}.-ta .mb,.-ta .mf,.-ta .mh,.-ta .mi,.-ta .mo{color:#ae81ff}.-ta .dl,.-ta .s2,.-ta .sa,.-ta .sb,.-ta .sc,.-ta .sd{color:#e6db74}.-ta .se{color:#ae81ff}.-ta .s1,.-ta .sh,.-ta .si,.-ta .sr,.-ta .ss,.-ta .sx{color:#e6db74}.-ta .bp{color:#f8f8f2}.-ta .fm{color:#a6e22e}.-ta .vc,.-ta .vg,.-ta .vi,.-ta .vm{color:#f8f8f2}.-ta .il{color:#ae81ff}table{table-layout:fixed;width:100%;position:relative;border-collapse:collapse;padding:0 0 0 20px;margin:1.5em -20px 2em;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem}@media(min-width:768px){table{padding:0;margin:1.5em 0 2em}}thead{font-weight:700}thead tr{text-align:left}thead tr th{padding:20px}tbody tr,thead tr th{border-bottom:1px solid #e2e5e6}tbody tr:nth-child(odd){background-color:hsla(0,0%,100%,.5)}tbody tr td:first-child{border-right:1px solid #e2e5e6}tbody td{padding:10px 20px;text-align:left;vertical-align:top;width:50%}@media(min-width:768px){tbody td{padding:20px}}@media(min-width:1024px){tbody td{width:25%}}tbody td code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}</style><link rel="manifest" href="/manifest.json"></head><body class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="external" viewBox="0 0 64 64"> <path d="M28.879 11.24c-0.841-0.841-2.206-0.841-3.048 0s-0.841 2.207 0 3.048l15.543 15.543h-39.241c-1.219 0-2.133 0.987-2.133 2.133 0 1.219 0.914 2.207 2.133 2.207h39.241l-15.616 15.543c-0.841 0.841-0.841 2.206 0 3.048 0.835 0.841 2.206 0.841 3.048 0l19.273-19.279c0.841-0.841 0.841-2.206 0-3.048l-19.2-19.194zM59.429 27.392c2.511 0 4.571 2.060 4.571 4.571s-2.060 4.571-4.571 4.571-4.571-2.060-4.571-4.571 2.060-4.571 4.571-4.571z"/> </symbol><symbol id="speech-bubble" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#005AF0" stroke-width="1.94" d="M1.544 19.002c0 9.64 7.816 17.457 17.457 17.457 3.707 0 6.783-.838 9.61-2.809.936-.653 7.057 3.628 7.848 2.809.71-.737-3.264-7.394-2.69-8.247 1.868-2.78 2.69-5.61 2.69-9.21C36.459 9.36 28.642 1.544 19 1.544c-9.639 0-17.456 7.817-17.456 17.458z"/><path fill="#005AF0" fill-rule="nonzero" d="M17.621 28.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 28.71z"/></g></symbol><symbol id="bookmark" viewBox="0 0 27 40"><g fill="none"><path stroke="#005AF0" stroke-width="2" d="M20.598 1H6.402c-1.497 0-2.856.568-3.84 1.492C1.602 3.394 1 4.638 1 6.014V38.05l12.588-8.756L26 38.069V6.014c0-1.376-.601-2.62-1.562-3.522C23.454 1.568 22.095 1 20.598 1z"/><path fill="#005AF0" d="M12.121 25.21h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362L14.398 7l1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L12.121 25.21z"/></g></symbol><symbol id="warning-sign" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#F3C000" stroke-width="2" d="M19.843 2.29l16.643 33.671c.177.356.03.788-.326.964-.1.05-.208.075-.319.075H2.171c-.398 0-.72-.322-.72-.72 0-.113.026-.224.077-.325l17.028-33.67c.179-.355.612-.497.967-.318.139.07.251.184.32.324z"/><path fill="#F3C000" fill-rule="nonzero" d="M17.621 32.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 32.71z"/></g></symbol><symbol id="sidebar-toggle" viewBox="0 0 64 64"> <path d="M36.032 7.9c0.985-0.996 2.624-0.996 3.643 0 0.985 0.963 0.985 2.565 0 3.526l-18.471 18.060h40.246c1.421 0.002 2.55 1.107 2.55 2.496s-1.129 2.529-2.55 2.529h-40.246l18.471 18.026c0.985 0.996 0.985 2.601 0 3.562-1.019 0.996-2.66 0.996-3.643 0l-22.844-22.336c-1.019-0.963-1.019-2.565 0-3.526l22.844-22.338z"/> <path d="M2.071 3.012c1.144 0 2.071 0.927 2.071 2.071v53.835c0 1.144-0.927 2.071-2.071 2.071s-2.071-0.927-2.071-2.071v-53.835c0-1.144 0.927-2.071 2.071-2.071z"/> </symbol><symbol id="contentmenu" viewBox="0 0 64 64"> <path d="M1.351 46.865h36.036c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-36.036c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 14.432h40.541c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-40.541c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 38.757h31.532c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-31.532c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 30.649h37.838c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-37.838c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 22.541h34.234c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-34.234c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM52.249 29.371c-0.992 0-1.231-0.566-0.525-1.272l5.296-5.296c0.353-0.353 0.931-0.348 1.279 0l5.296 5.296c0.702 0.702 0.466 1.272-0.525 1.272h-10.822zM63.069 35.153c0.992 0 1.231 0.566 0.525 1.272l-5.296 5.296c-0.353 0.353-0.931 0.348-1.279 0l-5.296-5.296c-0.702-0.702-0.466-1.272 0.525-1.272h10.822z"/> </symbol><symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> About <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">AMP Websites</div> <div class="ap-o-header-flyout-item-description">Create flawless web experiences</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">Snackable Stories for everyone</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">AMP Ads</div> <div class="ap-o-header-flyout-item-description">Super fast ads on the web</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">AMP Email</div> <div class="ap-o-header-flyout-item-description">Next gen email</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/about/how-amp-works/">How AMP works</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/about/mission-and-vision/">Vision & Mission</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/about/use-cases/">Use cases</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/success-stories/">Success Stories</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw active"> Documentation <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/documentation/">Get Started</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Guides & Tutorials</div> <div class="ap-o-header-flyout-item-description">Get started with AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Components</div> <div class="ap-o-header-flyout-item-description">The complete AMP library</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Examples</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Courses</div> <div class="ap-o-header-flyout-item-description">Learn AMP with free courses</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Templates</div> <div class="ap-o-header-flyout-item-description">Ready to use</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Tools</div> <div class="ap-o-header-flyout-item-description">Begin building</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Community <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/documentation/guides-and-tutorials/contribute/">Contribute</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/community/roadmap/">Roadmap</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/community/governance/">Governance</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/community/working-groups/access-subscriptions/">Working Groups</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Events <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/events/amp-roadshow/">AMP Roadshow</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">Blog</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Support <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/support/">Help</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/support/faq/">FAQ</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="Select a language" tabindex="-1"> <span class="-tw">EN</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/de/documentation/components/amp-analytics/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/components/amp-analytics/" role="listitem">Français</a> <a class="-tw" href="/ar/documentation/components/amp-analytics/" role="listitem">العربية</a> <a class="-tw" href="/es/documentation/components/amp-analytics/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/components/amp-analytics/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/components/amp-analytics/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/documentation/components/amp-analytics/" role="listitem">日本語</a> <a class="-tw" href="/ko/documentation/components/amp-analytics/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/components/amp-analytics/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/components/amp-analytics/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/components/amp-analytics/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/components/amp-analytics/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/components/amp-analytics/" role="listitem">Polski</a> <a class="-tw" href="/vi/documentation/components/amp-analytics/" role="listitem">Tiếng việt</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="Burger Menu" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> About </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/websites/"> AMP Websites </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/ads/"> AMP Ads </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/email/"> AMP Email </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/how-amp-works/"> How AMP works </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/mission-and-vision/"> Vision & Mission </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/about/use-cases/"> Use cases </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/success-stories/"> Success Stories </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw active"> Documentation </label> <input class="-td" type="checkbox" aria-label="Documentation" checked> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/"> Get Started </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/guides-and-tutorials/"> Guides & Tutorials </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/components/"> Components </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/examples/"> Examples </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/courses/"> Courses </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/templates/"> Templates </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/tools/"> Tools </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Community </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/documentation/guides-and-tutorials/contribute/"> Contribute </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/community/roadmap/"> Roadmap </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/community/governance/"> Governance </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/community/working-groups/access-subscriptions/"> Working Groups </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Events </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/events/amp-roadshow/"> AMP Roadshow </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">Blog</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/support/"> Help </a> </li> </ul> </nav> <div class="-oc"> <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse" intersection-ratios="1" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <amp-animation id="slideTransition" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"150ms","fill":"both","easing":"ease-out","iterations":"1","animations":[{"selector":".label-title","keyframes":[{"transform":"scale3d(0, 1, 1)"},{"transform":"scale3d(1, 1, 1)"}]}]}</script> </amp-animation> </div> <amp-user-notification class="-fv i-amphtml-layout-nodisplay" id="format-filter-hint" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-user-notification> <div class="-fd" aria-hidden="true"> <div class="-fm"> <div class="-fg">Select your format for a more streamlined experience</div> <button class="-fy" on="tap:format-filter-hint.dismiss"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> </div> </div> <main class="ap--main -fb"> <div class="-tf"> <input class="-od ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-om ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-oy"></span> <section class="ap--toc"> <div class="ap-o-toc" [class]="contentmenuopen ? 'ap-o-toc contentmenuopen' : 'ap-o-toc'" i-amphtml-binding> <label class="ap-o-toc-toggle" for="toc" on="tap:AMP.setState({contentmenuopen: !contentmenuopen})" role="contentmenutrigger" tabindex="0"> <span class="ap-o-toc-hl">Table of contents</span> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </label> <input class="-oh -of" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul><li><a href="#usage">Usage</a><ul> <li><a href="#send-data-to-an-analytics-vendor">Send data to an analytics vendor</a><ul> <li><a href="#integrated-analytics-vendors">Integrated analytics vendors</a></li> <li><a href="#non-integrated-analytics-vendors">Non-integrated analytics vendors</a></li> </ul> </li> <li><a href="#send-data-in-house">Send data in-house </a></li> <li><a href="#load-remote-configuration">Load remote configuration</a></li> <li><a href="#dynamically-rewrite-a-configuration">Dynamically rewrite a configuration</a></li> <li><a href="#enable-predfined-variable-groups">Enable Predfined Variable Groups</a></li> <li><a href="#configuration-data-objects">Configuration data objects</a><ul> <li><a href="#requests">Requests </a><ul> <li><a href="#define-a-request-origin">Define a request origin </a></li> <li><a href="#schedule-batch-requests">Schedule batch requests</a></li> </ul> </li> <li><a href="#vars">Vars</a></li> <li><a href="#register-event-triggers">Register event triggers </a><ul> <li><a href="#element-selector">Element selector </a></li> <li><a href="#selector-values">Selector Values </a></li> <li><a href="#available-triggers">Available triggers </a><ul> <li><a href="#"on":-"render-start"-trigger">"on": "render-start" trigger</a></li> <li><a href="#"on":-"ini-load"-trigger">"on": "ini-load" trigger </a></li> <li><a href="#"on":-"blur"-trigger">"on": "blur" trigger</a></li> <li><a href="#"on":-"change"-trigger">"on": "change" trigger</a></li> <li><a href="#"on":-"click"-trigger">"on": "click" trigger</a></li> <li><a href="#"on":-"scroll"-trigger">"on": "scroll" trigger </a></li> <li><a href="#"on":-"timer"-trigger">"on": "timer" trigger </a></li> <li><a href="#"on":-"visible"-trigger">"on": "visible" trigger</a></li> <li><a href="#"on":-"hidden"-trigger">"on": "hidden" trigger</a></li> <li><a href="#"on":-"user-error"-trigger">"on": "user-error" trigger</a></li> <li><a href="#"on":-component-specific-triggers">"on": Component-specific triggers</a></li> <li><a href="#request-trigger">request trigger</a></li> <li><a href="#vars-trigger-(optional)">vars trigger (optional)</a></li> <li><a href="#important-trigger-(optional)">important trigger (optional)</a></li> <li><a href="#selector-and-selectionmethod-trigger-(optional)">selector and selectionMethod trigger (optional)</a></li> <li><a href="#scrollspec-trigger">scrollSpec trigger</a></li> <li><a href="#timerspec-trigger">timerSpec trigger</a></li> <li><a href="#samplespec-trigger-(optional)">sampleSpec trigger (optional)</a></li> <li><a href="#videospec-trigger">videoSpec trigger</a></li> </ul> </li> </ul> </li> <li><a href="#transport">Transport</a><ul> <li><a href="#iframe">iframe</a></li> <li><a href="#referrer-policy">Referrer policy</a></li> </ul> </li> <li><a href="#extra-url-parameters">Extra URL parameters </a><ul> <li><a href="#map-replacement-strings-in-parameters">Map replacement strings in parameters</a></li> </ul> </li> </ul> </li> <li><a href="#customize-the-visible-and-hidden-triggers-with-visibilityspec">Customize the visible and hidden triggers with visibilitySpec </a></li> <li><a href="#linkers">Linkers</a></li> <li><a href="#cookies">Cookies</a></li> </ul> </li> <li><a href="#attributes">Attributes</a><ul> <li><a href="#type">type</a></li> <li><a href="#config-(optional)">config (optional)</a></li> <li><a href="#data-credentials-(optional)">data-credentials (optional) </a></li> <li><a href="#data-consent-notification-id-(optional)">data-consent-notification-id (optional)</a></li> </ul> </li> <li><a href="#analytics">Analytics</a><ul> <li><a href="#google-analytics-4-and-amp">Google Analytics 4 and AMP</a></li> </ul> </li> <li><a href="#validation">Validation</a></li></ul> </div> </section> <section class="-t"> <label class="-op -ol ap-a-sidebar-mobile-toggle-label-sidebar" for="sidebar" on="tap:sidebar-left.toggle" role="categoriemenutrigger" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Toggle Sidebar</span> </label> <label class="-op -og ap-a-sidebar-desktop-toggle-label-sidebar" for="sidebar-desktop" role="categoriemenutrigger-desktop" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Toggle Sidebar</span> </label> <nav class="-ou"> <a class="ap-m-breadcrumbs-crumb" href="/documentation/">Documentation</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -oa"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <a class="ap-m-breadcrumbs-crumb" href="/documentation/components/">Components</a> </nav> <h1> amp-analytics </h1> <div class="ap-o-component-intro"> <div class="ap-o-component-intro-row"> <h4 class="ap-o-component-intro-headline">Description</h4> <p class="ap-o-component-intro-text">Captures analytics data from an AMP document.</p> </div> <div class="ap-o-component-intro-row ap-o-component-intro-row-inline"> <h4 class="ap-o-component-intro-headline">Required Scripts</h4> <div id="amp-script" class="ap-a-copy-script"> <pre><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script></pre> <amp-iframe width="24" height="24" layout="fixed" sandbox="allow-scripts" src="https://amp.dev/shared/copy-script/#%3Cscript%20async%20custom-element%3D%22amp-analytics%22%20src%3D%22https%3A//cdn.ampproject.org/v0/amp-analytics-0.1.js%22%3E%3C/script%3E" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:24px;height:24px;" i-amphtml-layout="fixed"> <div placeholder></div> </amp-iframe> </div> </div> <div class="ap-o-component-intro-row"> <div id="examples" class="ap-m-clip"> <h4 class="ap-o-component-intro-headline">Examples</h4> <div class="ap-o-component-intro-list"> <a class='ap-o-component-intro-list-item' href='/documentation/examples/advertising-analytics/joining_analytics_sessions/'>Joining Analytics Sessions</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/advertising-analytics/tracking_core_web_vitals/'>Tracking Core Web Vitals</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/product_browse_page/'>Product Browse Page</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/product_page/'>Product Page</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-access-laterpay/'>amp-access-laterpay</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-access/'>amp-access</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-experiment/'>amp-experiment</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/news-publishing/news_article/'>News Article</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/news-publishing/recipe/'>Recipe</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/checkout_flow/'>Checkout Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/housing/'>Housing</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-analytics/'>amp-analytics</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-user-notification/'>amp-user-notification</a> </div> <button id="examples-expand" class="ap-m-clip-expand" on="tap:examples.toggleClass(class='expanded', force=true),examples-expand.hide()"> <svg class="ap-m-clip-expand-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </button> </div> </div> </div> <h2 id="usage">Usage</h2> <p>The <code><amp-analytics></code> component specifies a JSON configuration object that contains the details for what to measure and where to send analytics data. It can report to an in-house or integrated third-party solution.</p> <p><a name="configuration-object"></a>The configuration object for <code><amp-analytics></code> uses the following format:</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="s2">"requests"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"request-name"</span><span class="o">:</span> <span class="nx">request</span><span class="o">-</span><span class="nx">value</span><span class="p">,</span> <span class="p">...</span> <span class="p">},</span> <span class="s2">"vars"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"var-name"</span><span class="o">:</span> <span class="kd">var</span><span class="o">-</span><span class="nx">value</span><span class="p">,</span> <span class="p">...</span> <span class="p">},</span> <span class="s2">"extraUrlParams"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"extraurlparam-name"</span><span class="o">:</span> <span class="nx">extraurlparam</span><span class="o">-</span><span class="nx">value</span><span class="p">,</span> <span class="p">...</span> <span class="p">},</span> <span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"trigger-name"</span><span class="o">:</span> <span class="nx">trigger</span><span class="o">-</span><span class="nx">object</span><span class="p">,</span> <span class="p">...</span> <span class="p">},</span> <span class="s2">"transport"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"beacon"</span><span class="o">:</span> <span class="o">*</span><span class="kr">boolean</span><span class="o">*</span><span class="p">,</span> <span class="s2">"xhrpost"</span><span class="o">:</span> <span class="o">*</span><span class="kr">boolean</span><span class="o">*</span><span class="p">,</span> <span class="s2">"image"</span><span class="o">:</span> <span class="o">*</span><span class="kr">boolean</span><span class="o">*</span><span class="p">,</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>The configuration data may be specified inline or fetched remotely by specifying a URL in the <code>config</code> attribute. Additionally, built-in configuration for popular analytics vendors can be selected by using the <code>type</code> attribute.</p> <p>If configuration data from more than one of these sources is used, the configuration objects (<code>vars</code>, <code>requests</code>, and <code>triggers</code>) will be merged together such that:</p> <ol> <li>Remote configuration takes precedence over inline configuration and</li> <li>Inline configuration takes precedence over vendor configuration.</li> </ol> <p>Before you start using AMP analytics on your site, you need to decide whether you will use third-party analytics tools to analyze user engagement, or your own in-house solution.</p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bookmark"/></svg> </div> <div class="ap-m-tip-content"> Learn all about AMP analytics in the <a href="https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/">Configure Analytics</a> guide. </div> </div><p></p> <h3 id="send-data-to-an-analytics-vendor">Send data to an analytics vendor</h3> <p>The <code>amp-analytics</code> component is specifically designed to measure once and report to many. If you are already working with one or more analytics vendors, check the list of <a href="https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/#vendors">Analytics Vendors</a> to see if they’ve integrated their solution with AMP.</p> <h4 id="integrated-analytics-vendors">Integrated analytics vendors</h4> <p>For integrated AMP analytics vendors:</p> <ol> <li>In the <code><amp-analytics></code> tag, add the <code>type</code> attribute and set its value to the specified <a href="https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/#vendors">vendor</a>.</li> <li>Determine what data you want to capture and track, and specify those details in the configuration data. See the vendor's documentation for instructions on how to capture analytics data.</li> </ol> <p>In the following example, analytics data is sent to Nielsen, a third-party analytics provider that has integrated with AMP. Details for configuring analytics data for Nielsen can be found in the <a href="https://engineeringportal.nielsen.com/docs/DCR_Static_Google_AMP_Cloud_API">Nielsen</a> documentation.</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-analytics</span> <span class="na">type</span><span class="o">=</span><span class="s">"nielsen"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"vars"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"apid"</span><span class="o">:</span> <span class="s2">"XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"</span><span class="p">,</span> <span class="s2">"apv"</span><span class="o">:</span> <span class="s2">"1.0"</span><span class="p">,</span> <span class="s2">"apn"</span><span class="o">:</span> <span class="s2">"My AMP Website"</span><span class="p">,</span> <span class="s2">"section"</span><span class="o">:</span> <span class="s2">"Entertainment"</span><span class="p">,</span> <span class="s2">"segA"</span><span class="o">:</span> <span class="s2">"Music"</span><span class="p">,</span> <span class="s2">"segB"</span><span class="o">:</span> <span class="s2">"News"</span><span class="p">,</span> <span class="s2">"segC"</span><span class="o">:</span> <span class="s2">"Google AMP"</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-analytics</span><span class="p">></span> </pre></div> <h4 id="non-integrated-analytics-vendors">Non-integrated analytics vendors</h4> <p>If the analytics vendor hasn’t integrated with AMP, reach out to the vendor to ask for their support. We also encourage you to let us know by <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../../docs/contributing.md#report-a-bug">filing an issue</a> requesting that the vendor be added. See also <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/integrating-analytics.md">Integrating your analytics tools in AMP HTML</a>. Alternatively, work with your vendor to send the data to their specified URL. Learn more in the <a href="#send-data-in-house">Send data in-house</a> section below.</p> <h3 id="send-data-in-house">Send data in-house <a name="send-data-in-house"></a></h3> <p>If you have your own in-house solution for measuring user engagement, the only thing you will need to integrate AMP analytics with that solution is a URL. This is where you will send the data. You can also send data to various URLs. For example, you can send page view data to one URL, and social engagement data to another URL.</p> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> If your in-house solution involves working with an analytics vendor that hasn't integrated with AMP, work with the vendor to determine what configuration information is required. </div> </div><p></p> <p>To send data to a specific URL:</p> <ol> <li>Determine what data you want to capture and track, and <a href="#configuration-object">specify those details in the configuration data</a>.</li> <li>In the <a href="#requests"><code>requests</code></a> configuration object, specify the type of request to track (e.g., pageview, specific triggered events) and the url(s) of where you want to send the tracking data to.</li> </ol> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> When processing AMP URLs in the referrer header of analytics requests, strip out or ignore the <code>usqp</code> parameter. This parameter is used by Google to trigger experiments for the Google AMP Cache. </div> </div><p></p> <p>The example below tracks page views. Every time a page is visible, the trigger event fires, and sends the pageview data to a defined URL along with a random ID.</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-analytics</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"requests"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"pageview"</span><span class="o">:</span> <span class="s2">"https://foo.com/pixel?RANDOM"</span> <span class="p">},</span> <span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"trackPageview"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"pageview"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-analytics</span><span class="p">></span> </pre></div> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> For some common tracking use cases (e.g., page views, page clicks, scrolling, etc.) see <a href="https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/use_cases">Analytics: Use Cases</a>. </div> </div><p></p> <h3 id="load-remote-configuration">Load remote configuration</h3> <p>To load a remote configuration, in the <code><amp-analytics></code> element, specify the <code>config</code> attribute and the URL for the configuration data. The URL specified should use the HTTPS scheme. The URL may include <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">AMP URL vars</a>. To access cookies, see the <a href="#data-credentials"><code>data-credentials</code></a> attribute. The response must follow the <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md">AMP CORS security guidelines</a>.</p> <p>In this example, we specify the <code>config</code> attribute to load the configuration data from the specified URL.</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-analytics</span> <span class="na">config</span><span class="o">=</span><span class="s">"https://example.com/analytics.account.config.json"</span> <span class="p">></</span><span class="nt">amp-analytics</span><span class="p">></span> </pre></div> <h3 id="dynamically-rewrite-a-configuration">Dynamically rewrite a configuration</h3> <p>The configuration rewriter feature is designed to allow analytics providers to dynamically rewrite a provided configuration. This is similar to the remote configuration feature but additionally includes any user-provided configuration in the request made to the sever. This currently can only be enabled by an analytics vendor.</p> <p>An analytics vendor specifies a configRewriter property with a server url.</p> <div class="-ta"><pre><span></span><span class="kr">export</span> <span class="kr">const</span> <span class="nx">VENDOR_ANALYTICS_CONFIG</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span> <span class="s1">'configRewriter'</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'url'</span><span class="o">:</span> <span class="s1">'https://www.vendor.com/amp-config-rewriter'</span><span class="p">,</span> <span class="p">},</span> <span class="p">...</span> <span class="p">}</span> </pre></div> <p>AMP sends a request containing the inlined configuration, merged with the provided remote configuration, to the <code>configRewriter</code> endpoint given by the vendor. The vendor uses this data server side to construction and return a new rewritten configuration.</p> <p>AMP then merges all the provided configurations to determine the final configuration in order of highest to lowest precedence:</p> <ol> <li>Rewritten Configuration</li> <li>Inlined Configuration</li> <li>Vendor defined configuration</li> </ol> <h3 id="enable-predfined-variable-groups">Enable Predfined Variable Groups</h3> <p>Variable Groups is a feature that allows analytics providers to group a predefined set of variables that can easily be enabled. These variables will then be resolved and sent along to the specified <code>configRewriter</code> endpoint.</p> <p>Analytics providers need to create a new <code>varGroups</code> object inside of the <code>configRewriter</code> configuration to enable this feature. Publishers can then include any named analytic provider created <code>varGroups</code> they wish to enable in their analytics configuration. All of the variables supported by <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../../docs/spec/amp-var-substitutions.md">AMP HTML Substitutions Guide</a> can be used. <em>Important note:</em> the <code>${varName}</code> variants will not work.</p> <p>For example we may have a vendor whose configuration looks like this:</p> <div class="-ta"><pre><span></span><span class="c1">// This is predefined by vendor.</span> <span class="kr">export</span> <span class="kr">const</span> <span class="nx">VENDOR_ANALYTICS_CONFIG</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span> <span class="s1">'configRewriter'</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'url'</span><span class="o">:</span> <span class="s1">'https://www.vendor.com/amp-config-rewriter'</span><span class="p">,</span> <span class="s1">'varGroups'</span> <span class="o">:</span> <span class="p">{</span> <span class="s1">'group1'</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'referrer'</span><span class="o">:</span> <span class="s1">'DOCUMENT_REFERRER'</span><span class="p">,</span> <span class="s1">'source'</span><span class="o">:</span> <span class="s1">'SOURCE_URL'</span><span class="p">,</span> <span class="s1">'group2'</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'title'</span><span class="o">:</span> <span class="s1">'TITLE'</span><span class="p">,</span> <span class="p">},</span> <span class="p">},</span> <span class="p">},</span> <span class="p">...</span> <span class="p">}</span> </pre></div> <p>You can specify which variable groups are enabled by including <code>{enabled: true}</code> for the specified <code>varGroups</code> within the provider's <code><amp-analytics></code> configuration. <code>enabled</code> is a reserved keyword, and can not be used as a variable name.</p> <p>In the example below, both <code>group1</code> and <code>group2</code> have been enabled. Any groups that have not been specifically enabled will be ignored. The runtime will then resolve all of these enabled variables, and merge them into a single <code>configRewriter.vars</code> object that will be sent to the configuration rewriter url.</p> <div class="-ta"><pre><span></span>/* Included on publisher page */ <span class="p"><</span><span class="nt">amp-analytics</span> <span class="na">type</span><span class="o">=</span><span class="s">"myVendor"</span> <span class="na">id</span><span class="o">=</span><span class="s">"myVendor"</span> <span class="na">data-credentials</span><span class="o">=</span><span class="s">"include"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"configRewriter"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"varGroups"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"group1"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"enabled"</span><span class="o">:</span> <span class="kc">true</span> <span class="p">},</span> <span class="s2">"group2"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"enabled"</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-analytics</span><span class="p">></span> </pre></div> <p>In this example the request body would look something like this:</p> <div class="-ta"><pre><span></span><span class="err">/*</span> <span class="err">Se</span><span class="kc">nt</span> <span class="kc">t</span><span class="err">o</span> <span class="err">co</span><span class="kc">nf</span><span class="err">igura</span><span class="kc">t</span><span class="err">io</span><span class="kc">n</span> <span class="err">rewri</span><span class="kc">ter</span> <span class="err">server.</span> <span class="err">*/</span> <span class="nt">"configRewriter"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"vars"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"referrer"</span><span class="p">:</span> <span class="s2">"https://www.example.com"</span><span class="p">,</span> <span class="nt">"source"</span><span class="p">:</span> <span class="s2">"https://www.amp.dev"</span><span class="p">,</span> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"Cool Amp Tips"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h3 id="configuration-data-objects">Configuration data objects</h3> <h4 id="requests">Requests <a name="requests"></a></h4> <p>The <code>requests</code> configuration object specifies the URLs used to transmit data to an analytics platform as well as batching or reporting behavior of the request. The <code>request-name</code> specifies what request should be sent in response to a particular event (e.g., <code>pageview</code>, <code>event</code>, etc.) . The <code>request-value</code> contains an https URL, the value may include placeholder tokens that can reference other requests or variables. The <code>request-value</code> can also be an object that contains optional request configs.</p> <p>The properties for defining a request with an object are:</p> <ul> <li><code>baseUrl</code>: Defines the url of the request (required).</li> <li><code>reportWindow</code>: An optional property to specify the time (in seconds) to stop reporting requests. The trigger with <code>important: true</code> overrides the maximum report window constraint.</li> <li><a href="#request-origin"><code>origin</code></a>: An optional property to specify the origin for requests</li> </ul> <p>In this example, all requests are valid.</p> <div class="-ta"><pre><span></span><span class="nt">"requests"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"base"</span><span class="p">:</span> <span class="s2">"https://example.com/analytics?a=${account}&u=${canonicalUrl}&t=${title}"</span><span class="p">,</span> <span class="nt">"pageview"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"baseUrl"</span><span class="p">:</span> <span class="s2">"${base}&type=pageview"</span> <span class="p">},</span> <span class="nt">"event"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"baseUrl"</span><span class="p">:</span> <span class="s2">"${base}&type=event&eventId=${eventId}"</span><span class="p">,</span> <span class="nt">"batchInterval"</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nt">"reportWindow"</span> <span class="p">:</span> <span class="mi">30</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>Some analytics providers have an already-provided configuration, which you use via the <code>type</code> attribute. If you are using an analytics provider, you may not need to include requests information. See your vendor documentation to find out if requests need to be configured, and how.</p> <h5 id="define-a-request-origin">Define a request origin <a name="request-origin"></a></h5> <p>The top-level <code>requestOrigin</code> property accepts an absolute URL and defines the origin for requests. If <code>requestOrigin</code> is declared, the origin will be extracted from the value and it will be prepended to <code>baseUrl</code>. <code>requestOrigin</code> accepts and supports variables substitution. Variables will not be encoded in <code>requestOrigin</code>.</p> <div class="-ta"><pre><span></span><span class="nt">"requestOrigin"</span><span class="p">:</span> <span class="s2">"${example}/ignore_query"</span><span class="p">,</span> <span class="nt">"requests"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"base"</span><span class="p">:</span> <span class="s2">"/analytics?a=${account}"</span><span class="p">,</span> <span class="nt">"pageview"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"baseUrl"</span><span class="p">:</span> <span class="s2">"${base}&type=pageview"</span> <span class="p">},</span> <span class="nt">"event"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"baseUrl"</span><span class="p">:</span> <span class="s2">"${base}&type=event"</span><span class="p">,</span> <span class="p">}</span> <span class="p">},</span> <span class="nt">"vars"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"example"</span><span class="p">:</span> <span class="s2">"https://example.com"</span> <span class="p">}</span> </pre></div> <p>In this example, outgoing requests will be <code>https://example.com/analytics?a=${account}&type=pageview</code> for <code>pageview</code> requests and <code>https://example.com/analytics?a=${account}&type=event</code> for <code>event</code> requests. Notice that the <code>requestOrigin</code> value is not encoded and that only the origin is added to <code>baseUrl</code>.</p> <p>Request objects can also have an <code>origin</code> property that will override this top-level <code>requestOrigin</code> property.</p> <div class="-ta"><pre><span></span><span class="nt">"requestOrigin"</span><span class="p">:</span> <span class="s2">"https://example.com"</span><span class="p">,</span> <span class="nt">"requests"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"pageview"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"origin"</span><span class="p">:</span> <span class="s2">"https://newexample.com"</span><span class="p">,</span> <span class="nt">"baseUrl"</span><span class="p">:</span> <span class="s2">"/analytics?type=pageview"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>In this example, the outgoing request will be <code>https://newexample.com/analytics?type=pageview</code> for the <code>pageview</code> request.</p> <h5 id="schedule-batch-requests">Schedule batch requests</h5> <p>To reduce the number of request pings, you can specify batching behaviors in the request configuration. Any <a href="#extra-url-parameters"><code>extraUrlParams</code></a> from <code>triggers</code> that use the same request are appended to the <code>baseUrl</code> of the request.</p> <p>The batching property is <code>batchInterval</code>. This property specifies the time interval (in seconds) to flush request pings in the batching queue. <code>batchInterval</code> can be a number or an array of numbers (the minimum time interval 200ms). The request will respect every value in the array, and then repe the last interval value (or the single value) when it reaches the end the array.</p> <p>For example, the following config sends out a single request ping every 2 seconds, with one sample request ping looking like <code>https://example.com/analytics?rc=1&rc=2</code>.</p> <div class="-ta"><pre><span></span><span class="nt">"requests"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"timer"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"baseUrl"</span><span class="p">:</span> <span class="s2">"https://example.com/analytics?"</span><span class="p">,</span> <span class="nt">"batchInterval"</span><span class="p">:</span> <span class="mi">2</span> <span class="p">}</span> <span class="p">}</span> <span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"timer"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="nt">"request"</span> <span class="p">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="nt">"timerSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"interval"</span><span class="p">:</span> <span class="mi">1</span> <span class="p">},</span> <span class="nt">"extraUrlParams"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"rc"</span><span class="p">:</span> <span class="s2">"${requestCount}"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>The following config sends out the first request ping after 1 second and then sends out a request every 3 seconds. The first request ping looks like <code>https://example.com/analytics?rc=1</code>, the second request ping looks like <code>https://example.com/analytics?rc=2&rc=3&rc=4</code>.</p> <div class="-ta"><pre><span></span><span class="nt">"requests"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"timer"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"baseUrl"</span><span class="p">:</span> <span class="s2">"https://example.com/analytics?"</span><span class="p">,</span> <span class="nt">"batchInterval"</span><span class="p">:</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">3</span><span class="p">]</span> <span class="p">}</span> <span class="p">}</span> <span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"timer"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="nt">"request"</span> <span class="p">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="nt">"timerSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"interval"</span><span class="p">:</span> <span class="mi">1</span> <span class="p">},</span> <span class="nt">"extraUrlParams"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"rc"</span><span class="p">:</span> <span class="s2">"${requestCount}"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h4 id="vars">Vars</h4> <p>The <code>amp-analytics</code> component defines many basic variables that can be used in requests. A list of all such variables is available in the <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md"><code>amp-analytics</code> Variables Guide</a>. In addition, all of the variables supported by <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../../docs/spec/amp-var-substitutions.md">AMP HTML Substitutions Guide</a> are also supported.</p> <p>Variables are resolved asynchronously and can delay the request until they are fulfilled. For example, some metrics such as Cumulative Layout Shift and Largest Contentful Paint are calculated after the page is hidden. For First Input Delay, it is resolved after the user interacts with the page. For this reason these metrics might not be suitable for use with all triggers (for example, on timer or visible).</p> <p>The <code>vars</code> configuration object can be used to define new key-value pairs or override existing variables that can be referenced in <code>request</code> values. New variables are commonly used to specify publisher specific information. Arrays can be used to specify a list of values that should be URL encoded separately while preserving the comma delimiter. Substituting built-in and custom variables within arrays is supported, except when the variable expands into another array.</p> <div class="-ta"><pre><span></span><span class="nt">"vars"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"account"</span><span class="p">:</span> <span class="s2">"ABC123"</span><span class="p">,</span> <span class="nt">"countryCode"</span><span class="p">:</span> <span class="s2">"tr"</span><span class="p">,</span> <span class="nt">"tags"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"Swift,Jonathan"</span><span class="p">,</span> <span class="s2">"Gulliver's Travels"</span><span class="p">,</span> <span class="s2">"${account}"</span><span class="p">]</span> <span class="p">}</span> </pre></div> <h4 id="register-event-triggers">Register event triggers <a name="triggers"></a></h4> <p>The <code>triggers</code> configuration object describes when an analytics request should be sent. The <code>triggers</code> attribute contains a key-value pair of trigger-name and trigger-configuration. A trigger-name can be any string comprised of alphanumeric characters (a-zA-Z0-9). Triggers from a configuration with lower precedence are overridden by triggers with the same names from a configuration with higher precedence.</p> <p>For details on how to set up triggers, see <a href="#available-triggers">Available triggers</a>.</p> <p>As an example, the following configuration can be used to sample 50% of the requests based on random input or at 1% based on client id.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"sampledOnRandom"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"request"</span><span class="p">,</span> <span class="nt">"sampleSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"sampleOn"</span><span class="p">:</span> <span class="s2">"${random}"</span><span class="p">,</span> <span class="nt">"threshold"</span><span class="p">:</span> <span class="mi">50</span> <span class="p">}</span> <span class="p">},</span> <span class="nt">"sampledOnClientId"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"request"</span><span class="p">,</span> <span class="nt">"sampleSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"sampleOn"</span><span class="p">:</span> <span class="s2">"${clientId(cookieName)}"</span><span class="p">,</span> <span class="nt">"threshold"</span><span class="p">:</span> <span class="mi">1</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h6 id="element-selector">Element selector <a name="element-selector"></a></h6> <p>Some triggers such as <code>click</code>, <code>video</code>, and <code>visible</code> allow specifying a single element or a collection of elements using the selector properties. Different triggers can apply different limitations and interpretations on selected elements, such as whether a selector applies to all matched elements or the first one, or which elements can be matched: all or only AMP elements. See the documentation for each relevant trigger for more details.</p> <p>The selector properties are:</p> <ul> <li> <p><code>selector</code> This property is used to find an element or a collection of elements using CSS/DOM query. The semantics of how the element is matched can be changed using <code>selectionMethod</code>. The value of this property can be one of:</p> <ul> <li>a valid CSS selector, e.g. <code>#ad1</code> or <code>amp-ad</code>.</li> <li><code>:root</code> - a special selector that matches the document root.</li> </ul> </li> <li> <p><code>selectionMethod</code> When specified, this property can have one of two values: <code>scope</code> or <code>closest</code>. <code>scope</code> allows selection of element within the parent element of <code>amp-analytics</code> tag. <code>closest</code> searches for the closest ancestor of the <code>amp-analytics</code> tag that satisfies the given selector. The default value is <code>scope</code>.</p> </li> </ul> <h5 id="selector-values">Selector Values <a name="selector-values"></a></h5> <p>As mentioned above, for <code>click</code>, <code>video</code>, and <code>visible</code> triggers it is possible to specify a single CSS selector or a collection of CSS selectors for the selector value.</p> <p>If a single string CSS selector is specified, an element that maps to that selector will be extracted - even if the CSS selector maps to more than one element.</p> <p>In the case where a single configuration applies to multiple elements, instead of creating separate configuration for each, it can be simplified by specifying all the selectors at once. To do so, specify an array of selectors that are comma separated and individually enclosed in quote marks.</p> <div class="-ta"><pre><span></span><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"video-pause"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"video-pause"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"event"</span><span class="p">,</span> <span class="s2">"selector"</span><span class="o">:</span> <span class="p">[</span><span class="s2">"#Video-1"</span><span class="p">,</span> <span class="s2">"#Video-2"</span><span class="p">]</span> <span class="p">},</span> <span class="p">}</span> </pre></div> <h5 id="available-triggers">Available triggers <a name="available-triggers"></a></h5> <p>The <code>on</code> trigger provides an event to listen for. Valid values are <code>render-start</code>, <code>ini-load</code>, <code>blur</code>, <code>change</code>, <code>click</code>, <code>scroll</code>, <code>timer</code>, <code>visible</code>, <code>hidden</code>, <code>user-error</code>, <code>access-*</code>, and <code>video-*</code>.</p> <p>Other available triggers include <code>request</code>, <code>vars</code>, <code>important</code>, <code>selector</code>, <code>selectionMethod</code>, <code>scrollSpec</code>, <code>timerSpec</code>, <code>sampleSpec</code>, and <code>videoSpec</code>.</p> <h6 id=""on":-"render-start"-trigger"><code>"on": "render-start"</code> trigger</h6> <p>AMP elements that embed other documents in iframes (e.g., ads) may report a render start event (<code>"on": "render-start"</code>). This event is typically emitted as soon as it's possible to confirm that rendering of the embedded document has started. Consult the documentation of a particular AMP element to see whether it emits this event.</p> <p>The trigger for the embed element must include a <a href="#element-selector"><code>selector</code></a> that points to the embedding element:</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"renderStart"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"render-start"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"request"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"#embed1"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>The render start event is also emitted by the document itself and can be configured as:</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"renderStart"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"render-start"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"request"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h6 id=""on":-"ini-load"-trigger"><code>"on": "ini-load"</code> trigger <a name="ini-load"></a></h6> <p>The initial load event (<code>"on": "ini-load"</code>) is triggered when the initial contents of an AMP element or an AMP document have been loaded.</p> <p>The "initial load" is defined in relationship to the container and its initial size. More specifically:</p> <ul> <li>For a document: all elements in the first viewport.</li> <li>For an embed element: all content elements in the embed document that are positioned within the initial size of the embed element.</li> <li>For a simple AMP element (e.g. <code>amp-img</code>): the resources itself, such as an image or a video.</li> </ul> <p>The trigger for an embed or an AMP element must include a <a href="#element-selector"><code>selector</code></a> that points to the element:</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"iniLoad"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"ini-load"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"request"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"#embed1"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>The initial load event is also emitted by the document itself and can be configured as:</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"iniLoad"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"ini-load"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"request"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h6 id=""on":-"blur"-trigger"><code>"on": "blur"</code> trigger</h6> <p>The on blur is part of the browser events that are supported by the Browser Event Tracker. Use the blur trigger (<code>"on": "blur"</code>) to fire a request when a specified element is no longer in focus. Use <a href="#element-selector"><code>selector</code></a> to control which elements will cause this request to fire. The trigger will fire for all elements matched by the specified selector. The selector can either be a single CSS query selector or an array of selectors.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"inputFieldBlurred"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"blur"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"event"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"inputField-A"</span><span class="p">,</span> <span class="s2">"inputField-B"</span><span class="p">]</span> <span class="nt">"vars"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"eventId"</span><span class="p">:</span> <span class="s2">"${id}"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h6 id=""on":-"change"-trigger"><code>"on": "change"</code> trigger</h6> <p>Similar to the blur trigger, the change trigger is part of the Browser Events. Use the change trigger (<code>"on": "change"</code>) to fire a request when a specified element undergoes a state change. The state change may vary for different elements. Use <a href="#element-selector"><code>selector</code></a> to control which elements will cause this request to fire. The selector can either be a single CSS query selector or an array of selectors. The trigger will fire for all elements matched by the specified selector.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"selectChange"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"change"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"event"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:[</span><span class="s2">"dropdownA"</span><span class="p">,</span> <span class="s2">"dropdownB"</span><span class="p">],</span> <span class="nt">"vars"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"eventId"</span><span class="p">:</span> <span class="s2">"${id}"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h6 id=""on":-"click"-trigger"><code>"on": "click"</code> trigger</h6> <p>Use the click trigger (<code>"on": "click"</code>) to fire a request when a specified element is clicked. Use <a href="#element-selector"><code>selector</code></a> to control which elements will cause this request to fire. The trigger will fire for all elements matched by the specified selector.</p> <div class="-ta"><pre><span></span><span class="nt">"vars"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"id1"</span><span class="p">:</span> <span class="s2">"#socialButtonId"</span><span class="p">,</span> <span class="nt">"id2"</span><span class="p">:</span> <span class="s2">".shareButtonClass"</span> <span class="p">},</span> <span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"anchorClicks"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"click"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"a, ${id1}, ${id2}"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"event"</span><span class="p">,</span> <span class="nt">"vars"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"eventId"</span><span class="p">:</span> <span class="mi">128</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>In addition to the variables provided as part of triggers you can also specify additional / overrides for <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md#variables-as-data-attribute">variables as data attribute</a>. If used, these data attributes have to be part of element specified as the <code>selector</code>.</p> <h6 id=""on":-"scroll"-trigger"><code>"on": "scroll"</code> trigger <a name="scroll"></a></h6> <p>Use the scroll trigger (<code>"on": "scroll"</code>) to fire a request under certain conditions when the page is scrolled. This trigger provides <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md#interaction">special vars</a> that indicate the boundaries that triggered a request to be sent. Use <code>scrollSpec</code> to control when this will fire.</p> <p><code>scrollSpec</code> is an object that contains the properties:</p> <ul> <li> <p><code>horizontalBoundaries</code>, <code>verticalBoundaries</code> (At least one of these is required for a scroll event to fire.)</p> <p>These should be number arrays containing the percentage boundaries on which a scroll event is fired.</p> <p>(To keep the page performant, these percentages are rounded to multiples of <code>5</code>.)</p> </li> <li> <p><code>useInitialPageSize</code> (optional, default <code>false</code>)</p> <p>If set to <code>true</code>, scroll position is calculated based on the initial sizing of the page, ignoring its new dimensions when resized.</p> </li> </ul> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> When using <code><amp-analytics></code> with infinitely scrolling experiences such as <code><amp-next-page></code> and <code><amp-list></code>, you might find it helpful to use <code>useInitialPageSize</code> in order to have scroll triggers report on the initial height of the pages (before <code><amp-next-page></code> or <code><amp-list></code> elements get added). Note that this will also ignore the size changes caused by other extensions (such as expanding embedded content) so some scroll events might fire prematurely instead. </div> </div><p></p> <p>For instance, in the following code snippet, the scroll event will be fired when page is scrolled vertically by 25%, 50% and 90%. Additionally, the event will also fire when the page is horizontally scrolled to 90% of scroll width.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"scrollPings"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"scroll"</span><span class="p">,</span> <span class="nt">"scrollSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"verticalBoundaries"</span><span class="p">:</span> <span class="p">[</span><span class="mi">25</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="mi">90</span><span class="p">],</span> <span class="nt">"horizontalBoundaries"</span><span class="p">:</span> <span class="p">[</span><span class="mi">90</span><span class="p">]</span> <span class="p">},</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"event"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h6 id=""on":-"timer"-trigger"><code>"on": "timer"</code> trigger <a name="timer"></a></h6> <p>Use the timer trigger (<code>"on": "timer"</code>) to fire a request on a regular time interval. Use <code>timerSpec</code> to control when this will fire.</p> <p><code>timerSpec</code> Specification for triggers of type <code>timer</code>. Unless a <code>startSpec</code> is specified, the timer will trigger immediately (by default, can be unset) and then at a specified interval thereafter.</p> <ul> <li><code>interval</code> Length of the timer interval, in seconds.</li> <li><code>maxTimerLength</code> Maximum duration for which the timer will fire, in seconds. An additional request will be triggered when the <code>maxTimerLength</code> has been reached. The default is 2 hours. When a <code>stopSpec</code> is present, but no <code>maxTimerLength</code> is specified, the default will be infinity.</li> <li><code>immediate</code> trigger timer immediately or not. Boolean, defaults to true</li> </ul> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> The timer trigger will continue to send out requests regardless of document state (inactive or hidden), until the <code>maxTimerLength</code> has been reached (default to 2 hours if <code>stopSpec</code> doesn't exist and inifity if it does) or <code>stopSpec</code> has been met. In the case of no <code>stopSpec</code>, the <code>maxTimerLength</code> will default to infinity. </div> </div><p></p> <p>See the following example:</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"pageTimer"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="nt">"timerSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"interval"</span><span class="p">:</span> <span class="mi">10</span><span class="p">,</span> <span class="nt">"maxTimerLength"</span><span class="p">:</span> <span class="mi">600</span> <span class="p">},</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"pagetime"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>To configure a timer which times user events use:</p> <ul> <li><code>startSpec</code> Specification for triggering when a timer starts. Use the value of <code>on</code> and <code>selector</code> to track specific events. A config with a <code>startSpec</code> but no <code>stopSpec</code> will only stop after <code>maxTimerLength</code> has been reached.</li> <li><code>stopSpec</code> Specification for triggering when a timer stops. A config with a <code>stopSpec</code> but no <code>startSpec</code> will start immediately but only stop on the specified event.</li> </ul> <p>See the spec on <a href="#triggers">triggers</a> for details on creating nested timer triggers. Note that using a timer trigger to start or stop a timer is not allowed. The example below demonstrates how to configure a trigger based on a documents <code>hidden</code> and <code>visible</code> events and a trigger based on a videos <code>play</code> and <code>pause</code> events.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"startOnVisibleStopOnHiddenTimer"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="nt">"timerSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"interval"</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nt">"startSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">":root"</span> <span class="p">},</span> <span class="nt">"stopSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"hidden"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">":root"</span> <span class="p">}</span> <span class="p">},</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"timerRequest"</span> <span class="p">},</span> <span class="nt">"videoPlayTimer"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="nt">"timerSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"interval"</span><span class="p">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nt">"startSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"video-play"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"amp-video"</span> <span class="p">},</span> <span class="nt">"stopSpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"video-pause"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"amp-video"</span> <span class="p">}</span> <span class="p">},</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"videoRequest"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h6 id=""on":-"visible"-trigger"><code>"on": "visible"</code> trigger</h6> <p>Use the page visibility trigger (<code>"on": "visible"</code>) to fire a request when the page becomes visible. The firing of this trigger can be configured using <code>visibilitySpec</code>.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"defaultPageview"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"pageview"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>The element visibility trigger can be configured for any AMP or non-AMP element or a document root using <a href="#element-selector"><code>selector</code></a>. The trigger will fire when the specified element matches the visibility parameters that can be customized using the <code>visibilitySpec</code>.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"defaultPageview"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"elementview"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"#ad1"</span><span class="p">,</span> <span class="nt">"visibilitySpec"</span><span class="p">:</span> <span class="p">{</span><span class="err">/*</span> <span class="err">op</span><span class="kc">t</span><span class="err">io</span><span class="kc">nal</span> <span class="err">visibili</span><span class="kc">t</span><span class="err">y</span> <span class="err">spec</span> <span class="err">*/</span><span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>The element visibility trigger waits for the signal specified by the <code>waitFor</code> property in <code>visibilitySpec</code> before tracking element visibility. If <code>waitFor</code> is not specified, it waits for element's <a href="#ini-load"><code>ini-load</code></a> signal. See <code>waitFor</code> docs for more details. If <code>reportWhen</code> is specified, the trigger waits for that signal before sending the event. This is useful, for example, in sending analytics events when the page is closed.</p> <p><code>selector</code> can either be a single selector string (shown above) or an array of selector strings (shown below). If <code>selector</code> is a string, then it will be used to only specify a single element or a document root. If <code>selector</code> is an array of strings, each selector will specify all the elements in the doc that share the selector and have the <code>data-vars-*</code> attribute (useful for identifying elements).</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"defaultPageview"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"adViewWithId"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"amp-ad"</span><span class="p">,</span> <span class="s2">"#myImg.red"</span><span class="p">],</span> <span class="nt">"visibilitySpec"</span><span class="p">:</span> <span class="p">{</span><span class="err">/*</span> <span class="err">op</span><span class="kc">t</span><span class="err">io</span><span class="kc">nal</span> <span class="err">visibili</span><span class="kc">t</span><span class="err">y</span> <span class="err">spec</span> <span class="err">*/</span><span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h6 id=""on":-"hidden"-trigger"><code>"on": "hidden"</code> trigger</h6> <p>Use the hidden trigger (<code>"on": "hidden"</code>) to fire a request when the page becomes hidden.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"defaultPageview"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"hidden"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"pagehide"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>A <a href="#visibility-spec"><code>visibilitySpec</code></a> can be included so that a request is only fired if the visibility duration conditions are satisfied.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"defaultPageview"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"hidden"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"pagehide"</span><span class="p">,</span> <span class="nt">"visibilitySpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"#anim-id"</span><span class="p">,</span> <span class="nt">"visiblePercentageMin"</span><span class="p">:</span> <span class="mi">20</span><span class="p">,</span> <span class="nt">"totalTimeMin"</span><span class="p">:</span> <span class="mi">3000</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>The above configuration translates to:</p> <blockquote> <p>When page becomes hidden, fire a request if the element <code>#anim-id</code> has been visible (more than 20% area in viewport) for more than 3s in total.</p> </blockquote> <h6 id=""on":-"user-error"-trigger"><code>"on": "user-error"</code> trigger</h6> <p>The user error event (<code>"on": "user-error"</code>) is triggered when an error occurs that is attributable to the author of the page or to software that is used in publishing the page. This includes, but not limited to, misconfiguration of an AMP component, misconfigured ads, or failed assertions. User errors are also reported in the developer console.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"userError"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"user-error"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"error"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> There is a <a href="https://github.com/ampproject/amphtml/issues/10891">known issue</a> that it still reports errors from A4A iframe embeds, which are irrelevant to the page. </div> </div><p></p> <h6 id=""on":-component-specific-triggers"><code>"on":</code> Component-specific triggers</h6> <ul> <li>Access triggers: AMP Access system issues numerous events for different states in the access flow. For details on access triggers (<code>"on": "access-*"</code>), see <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../amp-access/amp-access-analytics.md">AMP Access and Analytics</a>.</li> <li>Video analytics triggers: Video analytics provides several triggers (<code>"on": "video-*"</code>) that publishers can use to track different events occurring during a video's lifecycle. More details are available in <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md">AMP Video Analytics</a>.</li> <li>Browser Event Trackers: AMP provides the ability to track a custom set of browser events. The set of browser events that are supported are listed in the allow-list. Currently, events (<code>"on": "change"</code>) and (<code>"on": "blur"</code>) are supported.</li> </ul> <h6 id="request-trigger"><code>request</code> trigger</h6> <p>Name of the request to send (as specified in the <code>requests</code> section).</p> <h6 id="vars-trigger-(optional)"><code>vars</code> trigger (optional)</h6> <p>An object containing key-value pairs used to override <code>vars</code> defined in the top level config, or to specify <code>vars</code> unique to this trigger.</p> <h6 id="important-trigger-(optional)"><code>important</code> trigger (optional)</h6> <p>Can be specified to work with requests that support the batching behavior or the report window. Setting <code>important</code> to <code>true</code> can help to flush batched request queue with some certain triggers. In this case, it's possible to reduce the request pings number without losing important trigger events. Setting <code>important</code> to <code>true</code> can also override the request's <code>reportWindow</code> value to send out important request pings regardless.</p> <h6 id="selector-and-selectionmethod-trigger-(optional)"><code>selector</code> and <code>selectionMethod</code> trigger (optional)</h6> <p>Can be specified for some triggers, such as <code>click</code> and <code>visible</code>. See <a href="#element-selector">Element selector</a> for details.</p> <h6 id="scrollspec-trigger"><code>scrollSpec</code> trigger</h6> <p>This configuration is used in conjunction with the <code>scroll</code> trigger. See <a href="#scroll"><code>scroll</code></a> for details. Required when <code>on</code> is set to <code>scroll</code>.</p> <h6 id="timerspec-trigger"><code>timerSpec</code> trigger</h6> <p>This configuration is used in conjunction with the <code>timer</code> trigger. See <a href="#timer"><code>timer</code></a> for details. Required when <code>on</code> is set to <code>timer</code>.</p> <h6 id="samplespec-trigger-(optional)"><code>sampleSpec</code> trigger (optional)</h6> <p>This object is used to define how the requests can be sampled before they are sent. This setting allows sampling based on random input or other platform supported <code>vars</code>. The object contains configuration to specify an input that is used to generate a hash and a threshold that the hash must meet.</p> <ul> <li><code>sampleOn</code>: This string template is expanded by filling in the platform variables and then hashed to generate a number for the purposes of the sampling logic described under <code>threshold</code> below.</li> <li><code>threshold</code>: This configuration is used to filter out requests that do not meet particular criteria. For a request to go through to the analytics vendor, the following logic should be true <code>HASH(sampleOn) < threshold</code>.</li> </ul> <h6 id="videospec-trigger"><code>videoSpec</code> trigger</h6> <p>This configuration is used in conjunction with the <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md"><code>video-*</code></a> triggers. Used when <code>on</code> is set to <code>video-*</code>.</p> <h4 id="transport">Transport</h4> <p>The <code>transport</code> configuration object specifies how to send a request. The value is an object with fields that indicate which transport methods are acceptable.</p> <ul> <li><code>beacon</code> Indicates <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon"><code>navigator.sendBeacon</code></a> can be used to transmit the request. This will send a POST request with credentials. The request will be sent with an empty body unless <code>useBody</code> is true. See <a href="#extra-url-parameters"> Extra URL parameters</a> for more information about <code>useBody</code>.</li> <li><code>xhrpost</code> Indicates <code>XMLHttpRequest</code> can be used to transmit the request. This will send a POST request with credentials. The request will be sent with an empty body unless <code>useBody</code> is true. See <a href="#extra-url-parameters">Extra URL parameters</a> for more information about <code>useBody</code>.</li> <li><code>image</code> Indicates the request can be sent by generating an <code>Image</code> tag. This will send a GET request. To suppress console warnings due to empty responses or request failures, set <code>"image": {"suppressWarnings": true}</code>.</li> <li><code>iframe</code> Indicates that an <code>iframe</code> can be used to transmit the request. See <a href="#iframe"><code>iframe</code></a> for details.</li> </ul> <p>If more than one of the above transport methods are enabled, the precedence is <code>iframe</code> > <code>beacon</code> > <code>xhrpost</code> > <code>image</code>. Only one transport method will be used, and it will be the highest precedence one that is permitted and available. If the client's user agent does not support a method, the next highest precedence method enabled will be used. By default, all four methods above are enabled.</p> <p>In the example below, an <code>iframe</code> URL is not specified, and <code>beacon</code> and <code>xhrpost</code> are set to <code>false</code>, so they will not be used even though they have higher precedence than <code>image</code>. <code>image</code> would be set <code>true</code> by default, but it is explicitly declared here. If the client's user agent supports the <code>image</code> method, then it will be used; otherwise, no request would be sent.</p> <div class="-ta"><pre><span></span><span class="nt">"transport"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"beacon"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nt">"xhrpost"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nt">"image"</span><span class="p">:</span> <span class="kc">true</span> <span class="p">}</span> </pre></div> <p>To learn more, see <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../../examples/analytics-iframe-transport-remote-frame.html">this example that implements iframe transport client API</a> and <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../../examples/analytics-iframe-transport.amp.html">this example page that incorporates that iframe</a>. The example loads a <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html">fake ad</a>, which contains the <code>amp-analytics</code> tag. Note that the fake ad content includes some extra configuration instructions that must be followed.</p> <h5 id="iframe">iframe</h5> <p>MRC-accredited vendors may utilize a fourth transport mechanism, "iframe transport", by adding a URL string to iframe-transport-vendors.js. This indicates that an iframe should be created, with its <code>src</code> attribute set to this URL, and requests will be sent to that iframe via <code>window.postMessage()</code>. In this case, requests need not be full-fledged URLs. <code>iframe</code> may only be specified in <code>iframe-transport-vendors.js</code>, not inline within the <code>amp-analytics</code> tag, nor via remote configuration. Furthermore, the vendor frame may send a response, to be used by <code>amp-ad-exit</code>. See <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../../examples/analytics-iframe-transport-remote-frame.html">analytics-iframe-transport-remote-frame.html</a> and <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html">fake_amp_ad_with_iframe_transport.html</a>: the former file sends a response JSON object of <code>{'collected-data': 'abc'}</code>, and the latter file uses that object to substitute <code>'abc'</code> for <code>'bar_'</code> in <code>finalUrl</code>.</p> <h5 id="referrer-policy">Referrer policy</h5> <p>Referrer policy can be specified as <code>referrerPolicy</code> field in the <code>transport</code> config. Currently only <code>no-referrer</code> is supported. Referrer policy is only available for <code>image</code> transport. If <code>referrerPolicy: no-referrer</code> is specified, the <code>beacon</code> & <code>xhrpost</code> transports are overridden to <code>false</code>.</p> <div class="-ta"><pre><span></span><span class="nt">"transport"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"beacon"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nt">"xhrpost"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nt">"image"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nt">"referrerPolicy"</span><span class="p">:</span> <span class="s2">"no-referrer"</span> <span class="p">}</span> </pre></div> <h4 id="extra-url-parameters">Extra URL parameters <a name="extra-url-parameters"></a></h4> <p>The <code>extraUrlParams</code> configuration object specifies additional parameters to be included in the request. By default, extra URL params are appended to the query string of a request URL via the usual <code>"&foo=baz"</code> convention.</p> <p>Here's an example that would append <code>&a=1&b=2&c=3</code> to a request:</p> <div class="-ta"><pre><span></span><span class="nt">"extraUrlParams"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"a"</span><span class="p">:</span> <span class="s2">"1"</span><span class="p">,</span> <span class="nt">"b"</span><span class="p">:</span> <span class="s2">"2"</span><span class="p">,</span> <span class="nt">"c"</span><span class="p">:</span> <span class="s2">"3"</span> <span class="p">}</span> </pre></div> <p><code>extraUrlParams</code> may be sent via the request body instead of the URL if <code>useBody</code> is enabled and the request is sent via the <code>beacon</code> or <code>xhrpost</code> transport methods. In this case, the parameters are not URL encoded or flattened.</p> <p>The <code>useBody</code> configuration option indicates whether or not to include <code>extraUrlParams</code> in the POST request body instead of in the URL as URL-encoded query parameters.</p> <p><code>useBody</code> is only available for the <code>beacon</code> and <code>xhrpost</code> transport methods. If <code>useBody</code> is true and used in conjunction with either of these transport methods, <code>extraUrlParams</code> are sent in the POST request body. Otherwise, the request is sent with an empty body and the <code>extraUrlParams</code> are included as URL parameters.</p> <p>With <code>useBody</code>, you can include nested objects in <code>extraUrlParams</code>. However, if the request falls back to other transport options that don't support <code>useBody</code> (e.g. <code>image</code>), then those nested objects will be stringified into the URL as <code>[object Object]</code>.</p> <div class="-ta"><pre><span></span><span class="nt">"transport"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"beacon"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nt">"xhrpost"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nt">"useBody"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nt">"image"</span><span class="p">:</span> <span class="kc">false</span> <span class="p">}</span> </pre></div> <h5 id="map-replacement-strings-in-parameters">Map replacement strings in parameters</h5> <p>The <code>extraUrlParamsReplaceMap</code> attribute specifies a map of keys and values that act as parameters to <code>String.replace()</code> to pre-process keys in the <code>extraUrlParams</code> configuration. For example, if an <code>extraUrlParams</code> configuration defines <code>"page.title": "The title of my page"</code> and the <code>extraUrlParamsReplaceMap</code> defines <code>"page.": "_p_"</code>, then <code>&_p_title=The%20title%20of%20my%20page%20</code> will be appended to the request.</p> <p><code>extraUrlParamsReplaceMap</code> is not required to use <code>extraUrlParams</code>. If <code>extraUrlParamsReplaceMap</code> is not defined, then no string substitution will happens and the strings defined in <code>extraUrlParams</code> are used as-is.</p> <p>If <code>useBody</code> is enabled and the request is sent via the <code>beacon</code> or <code>xhrpost</code> transport methods, <code>extraUrlParamsReplaceMap</code> string substitution will only be performed on the top-level keys in <code>extraUrlParams</code>.</p> <h3 id="customize-the-visible-and-hidden-triggers-with-visibilityspec">Customize the <code>visible</code> and <code>hidden</code> triggers with <code>visibilitySpec</code> <a name="visibility-spec"></a></h3> <p>The <code>visibilitySpec</code> is a set of conditions and properties that can be applied to <code>visible</code> or <code>hidden</code> triggers to change when they fire. If multiple properties are specified, they must all be true in order for a request to fire. Configuration properties supported in <code>visibilitySpec</code> are:</p> <ul> <li> <p><code>waitFor</code>: This property indicates that the visibility trigger should wait for a certain signal before tracking visibility. The supported values are <code>none</code>, <code>ini-load</code>, and <code>render-start</code>. If <code>waitFor</code> is undefined, it is defaulted to <a href="#ini-load"><code>ini-load</code></a> (for AMP elements) when selector is specified, or to <code>none</code> otherwise. When tracking non-AMP elements, only <code>none</code> is supported, which is its default value. Tracking non-AMP elements may not always work as intended. For example, tracking a <code><div></code> element that contains an <code><amp-iframe></code>, may not accurately wait for the iframe to load before sending the signal out.</p> </li> <li> <p><code>reportWhen</code>: This property indicates that the visibility trigger should wait for a certain signal before sending the trigger. The only supported value is <code>documentExit</code>. <code>reportWhen</code> and <code>repeat</code> may not both be used in the same <code>visibilitySpec</code>. Note that when <code>reportWhen</code> is specified, the report will be sent at the time of the signal even if visibility requirements are not met at that time or have not been met previously. Any relevant variables (<code>totalVisibleTime</code>, etc.) will be populated according to the visibility requirements in this <code>visibilitySpec</code>.</p> </li> <li> <p><code>continuousTimeMin</code> and <code>continuousTimeMax</code>: These properties indicate that a request should be fired when (any part of) an element has been within the viewport for a continuous amount of time that is between the minimum and maximum specified times. The times are expressed in milliseconds. The <code>continuousTimeMin</code> is defaulted to <code>0</code> when not specified.</p> </li> <li> <p><code>totalTimeMin</code> and <code>totalTimeMax</code>: These properties indicate that a request should be fired when (any part of) an element has been within the viewport for a total amount of time that is between the minimum and maximum specified times. The times are expressed in milliseconds. The <code>totalTimeMin</code> is defaulted to <code>0</code> when not specified.</p> </li> <li> <p><code>visiblePercentageMin</code> and <code>visiblePercentageMax</code>: These properties indicate that a request should be fired when the proportion of an element that is visible within the viewport is between the minimum and maximum specified percentages. Percentage values between 0 and 100 are valid. Note that the upper bound (<code>visiblePercentageMax</code>) is inclusive. The lower bound (<code>visiblePercentageMin</code>) is exclusive, unless both bounds are set to 0 or both are set to 100. If both bounds are set to 0, then the trigger fires when the element is not visible. If both bounds are set to 100, the trigger fires when the element is fully visible. When these properties are defined along with other timing related properties, only the time when these properties are met are counted. The default values for <code>visiblePercentageMin</code> and <code>visiblePercentageMax</code> are <code>0</code> and <code>100</code>, respectively.</p> </li> <li> <p><code>repeat</code>: If this property is set to <code>true</code>, the trigger fires each time that the <code>visibilitySpec</code> conditions are met. In the following example, if the element is scrolled to 51% in view, then 49%, then 51% again, the trigger fires twice. However, if <code>repeat</code> was <code>false</code>, the trigger fires once. The default value of <code>repeat</code> is <code>false</code>. <code>reportWhen</code> and <code>repeat</code> may not both be used in the same visibilitySpec.</p> </li> </ul> <div class="-ta"><pre><span></span><span class="nt">"visibilitySpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"visiblePercentageMin"</span><span class="p">:</span> <span class="mi">50</span><span class="p">,</span> <span class="nt">"repeat"</span><span class="p">:</span> <span class="kc">true</span> <span class="p">}</span> </pre></div> <p><code>visiblePercentageThresholds</code> may be used as a shorthand for creating multiple <code>visibilitySpec</code> instances that differ only in <code>visiblePercentageMin</code> and <code>visiblePercentageMax</code>. For example the following are equivalent:</p> <div class="-ta"><pre><span></span><span class="err">//</span> <span class="err">Two</span> <span class="kc">tr</span><span class="err">iggers</span> <span class="err">wi</span><span class="kc">t</span><span class="err">h</span> <span class="err">visibili</span><span class="kc">t</span><span class="err">ySpecs</span> <span class="kc">t</span><span class="err">ha</span><span class="kc">t</span> <span class="err">o</span><span class="kc">nl</span><span class="err">y</span> <span class="err">di</span><span class="kc">ffer</span> <span class="err">i</span><span class="kc">n</span> <span class="err">visiblePerce</span><span class="kc">nta</span><span class="err">geMi</span><span class="kc">n</span> <span class="err">a</span><span class="kc">n</span><span class="err">d</span> <span class="err">visiblePerce</span><span class="kc">nta</span><span class="err">geMax</span><span class="p">:</span> <span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"pageView_30_to_40"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"pageview"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"#ad1"</span><span class="p">,</span> <span class="nt">"visibilitySpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"visiblePercentageMin"</span><span class="p">:</span> <span class="mi">30</span><span class="p">,</span> <span class="nt">"visiblePercentageMax"</span><span class="p">:</span> <span class="mi">40</span><span class="p">,</span> <span class="nt">"continuousTimeMin"</span><span class="p">:</span> <span class="mi">1000</span> <span class="p">}</span> <span class="p">},</span> <span class="nt">"pageView_40_to_50"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"pageview"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"#ad1"</span><span class="p">,</span> <span class="nt">"visibilitySpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"visiblePercentageMin"</span><span class="p">:</span> <span class="mi">40</span><span class="p">,</span> <span class="nt">"visiblePercentageMax"</span><span class="p">:</span> <span class="mi">50</span><span class="p">,</span> <span class="nt">"continuousTimeMin"</span><span class="p">:</span> <span class="mi">1000</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="err">//</span> <span class="err">A</span> <span class="err">si</span><span class="kc">n</span><span class="err">gle</span> <span class="kc">tr</span><span class="err">igger</span> <span class="err">equivale</span><span class="kc">nt</span> <span class="kc">t</span><span class="err">o</span> <span class="err">bo</span><span class="kc">t</span><span class="err">h</span> <span class="err">o</span><span class="kc">f</span> <span class="kc">t</span><span class="err">he</span> <span class="err">above</span><span class="p">:</span> <span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"pageView"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"pageview"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"#ad1"</span><span class="p">,</span> <span class="nt">"visibilitySpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"visiblePercentageThresholds"</span><span class="p">:</span> <span class="p">[[</span><span class="mi">30</span><span class="p">,</span> <span class="mi">40</span><span class="p">],</span> <span class="p">[</span><span class="mi">40</span><span class="p">,</span> <span class="mi">50</span><span class="p">]],</span> <span class="nt">"continuousTimeMin"</span><span class="p">:</span> <span class="mi">1000</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>In addition to the conditions above, <code>visibilitySpec</code> also enables certain variables which are documented <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md#visibility-variables">here</a>.</p> <div class="-ta"><pre><span></span><span class="nt">"triggers"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"defaultPageview"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"on"</span><span class="p">:</span> <span class="s2">"visible"</span><span class="p">,</span> <span class="nt">"request"</span><span class="p">:</span> <span class="s2">"pageview"</span><span class="p">,</span> <span class="nt">"selector"</span><span class="p">:</span> <span class="s2">"#ad1"</span><span class="p">,</span> <span class="nt">"visibilitySpec"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"waitFor"</span><span class="p">:</span> <span class="s2">"ini-load"</span><span class="p">,</span> <span class="nt">"reportWhen"</span><span class="p">:</span> <span class="s2">"documentExit"</span><span class="p">,</span> <span class="nt">"visiblePercentageMin"</span><span class="p">:</span> <span class="mi">20</span><span class="p">,</span> <span class="nt">"totalTimeMin"</span><span class="p">:</span> <span class="mi">500</span><span class="p">,</span> <span class="nt">"continuousTimeMin"</span><span class="p">:</span> <span class="mi">200</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>In addition to the variables provided as part of triggers you can also specify additional / overrides for <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md#variables-as-data-attribute">variables as data attribute</a>. If used, these data attributes have to be part of element specified as the <a href="#element-selector"><code>selector</code></a>.</p> <h3 id="linkers">Linkers</h3> <p>The <code>linkers</code> feature is used to enable cross domain ID syncing. <code>amp-analytics</code> will use a <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/linker-id-forwarding.md#format">configuration object</a> to create a "linker string" which will be appended to the specified outgoing links on the page as URL param. When a user clicks on one of these links, the destination page will read the linker string from the URL param to perform ID syncing. This is typically used to join user sessions across an AMP proxy domain and publisher domain.</p> <p>Details on setting up your linker configuration are outlined in <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/linker-id-forwarding.md">Linker ID Forwarding</a>.</p> <p>If you need to ingest this parameter, information on how this parameter is created is illustrated in <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/linker-id-receiving.md">Linker ID Receiving</a>.</p> <h3 id="cookies">Cookies</h3> <p>The <code>cookies</code> feature supports writing cookies to the origin domain by extracting <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../../docs/spec/amp-var-substitutions.md#query-parameter"><code>QUERY_PARAM</code></a> and <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/linker-id-receiving.md#linker-param"><code>LINKER_PARAM</code></a> information from the document url. It can be used along with <code>linkers</code> features to perform ID syncing from the AMP proxied domain to AMP pages on a publisher's domain.</p> <p>Details on setting up the <code>cookies</code> configuration can be found at <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/linker-id-receiving.md#receiving-linker-params-on-amp-pages">Receiving Linker Params on AMP Pages</a>.</p> <h2 id="attributes">Attributes</h2> <h3 id="type"><code>type</code></h3> <p>Specifies the type of vendor. For details, see the list of <a href="https://amp.dev/documentation/guides-and-tutorials/optimize-measure/configure-analytics/analytics-vendors">Analytics vendors</a>.</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-analytics</span> <span class="na">type</span><span class="o">=</span><span class="s">"googleanalytics"</span> <span class="na">config</span><span class="o">=</span><span class="s">"https://example.com/analytics.account.config.json"</span> <span class="p">></</span><span class="nt">amp-analytics</span><span class="p">></span> </pre></div> <h3 id="config-(optional)"><code>config</code> (optional)</h3> <p>This is an optional attribute that can be used to load a configuration from a specified remote URL. The URL specified should use the HTTPS scheme. See also the <code>data-include-credentials</code> attribute below. The URL may include <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../../docs/spec/amp-var-substitutions.md">AMP URL vars</a>. The response must follow the <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../../docs/spec/amp-cors-requests.md">AMP CORS security guidelines</a>.</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-analytics</span> <span class="na">config</span><span class="o">=</span><span class="s">"https://example.com/analytics.config.json"</span> <span class="p">></</span><span class="nt">amp-analytics</span><span class="p">></span> </pre></div> <h3 id="data-credentials-(optional)"><code>data-credentials</code> (optional) <a name="data-credentials"></a></h3> <p>If set to <code>include</code>, this turns on the ability to read and write cookies on the request specified via the <code>config</code> attribute. This is an optional attribute.</p> <h3 id="data-consent-notification-id-(optional)"><code>data-consent-notification-id</code> (optional)</h3> <p>If provided, the page will not process analytics requests until an <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/../amp-user-notification/amp-user-notification.md">amp-user-notification</a> with the given HTML element id is confirmed (accepted) by the user. This is an optional attribute.</p> <h2 id="analytics">Analytics</h2> <p>AMP component developers can implement collection of data using AMP analytics. For more information, please refer to <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-components-analytics.md">Implementing analytics for AMP components</a>.</p> <h3 id="google-analytics-4-and-amp">Google Analytics 4 and AMP</h3> <p>For information on how to set up Google Analytics 4 with amp-analytics see <a href="https://developers.google.com/analytics/devguides/collection/amp-analytics">amp-analytics dev guide</a> and <a href="https://developers.google.com/tag-platform/gtagjs/amp?technology=gtagjs">gtagjs guide</a></p> <h2 id="validation">Validation</h2> <p>See <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/validator-amp-analytics.protoascii"><code>amp-analytics</code> rules</a> in the AMP validator specification.</p> </section> <section class="ap--help"> <div class="-ff"> <span class="-fl">Need more help?</span> <p class="-fh">You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.</p> <a href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" class="-n"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">Go to Stack Overflow</span> </a> <div class="-fp"></div> <span class="-fl">Found a bug or missing a feature?</span> <p class="-fh">The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.</p> <a href="https://github.com/ampproject/amphtml" rel="noopener" class="-n link-preview-1"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">Go to GitHub</span> </a> <div class="-fp"></div> </div> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar i-amphtml-layout-nodisplay" layout="nodisplay" side="left" hidden="hidden" i-amphtml-layout="nodisplay"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/documentation/components/stories/amp-analytics/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/documentation/components/ads/amp-analytics/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/documentation/components/email/amp-analytics/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-component"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">3</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-3d-gltf/">amp-3d-gltf</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-3q-player/">amp-3q-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">A</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-access-fewcents/">amp-access-fewcents</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-access-laterpay/">amp-access-laterpay</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-access-poool/">amp-access-poool</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-access-scroll/">amp-access-scroll</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-access/">amp-access</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-accordion/">amp-accordion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-action-macro/">amp-action-macro</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-ad-exit/">amp-ad-exit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-ad/">amp-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-addthis/">amp-addthis</a> </li> <li class="nav-item level-2 active" autoscroll> <a class="nav-link" href="/documentation/components/websites/amp-analytics/">amp-analytics</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-anim/">amp-anim</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-animation/">amp-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-apester-media/">amp-apester-media</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-app-banner/">amp-app-banner</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-audio/">amp-audio</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-auto-ads/">amp-auto-ads</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-autocomplete/">amp-autocomplete</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">B</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-base-carousel/">amp-base-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-beopinion/">amp-beopinion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-bind/">amp-bind</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-bodymovin-animation/">amp-bodymovin-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-brid-player/">amp-brid-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-brightcove/">amp-brightcove</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-byside-content/">amp-byside-content</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">C</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-call-tracking/">amp-call-tracking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-carousel/">amp-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-connatix-player/">amp-connatix-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-consent/">amp-consent</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">D</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-dailymotion/">amp-dailymotion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-date-countdown/">amp-date-countdown</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-date-display/">amp-date-display</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-date-picker/">amp-date-picker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-delight-player/">amp-delight-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-dynamic-css-classes/">amp-dynamic-css-classes</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">E</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-embedly-card/">amp-embedly-card</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-experiment/">amp-experiment</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">F</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-facebook-comments/">amp-facebook-comments</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-facebook-like/">amp-facebook-like</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-facebook-page/">amp-facebook-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-facebook/">amp-facebook</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-fit-text/">amp-fit-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-font/">amp-font</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-form/">amp-form</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-fx-collection/">amp-fx-collection</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-fx-flying-carpet/">amp-fx-flying-carpet</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">G</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-geo/">amp-geo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-gfycat/">amp-gfycat</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-gist/">amp-gist</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-google-document-embed/">amp-google-document-embed</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-google-read-aloud-player/">amp-google-read-aloud-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">H</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-hulu/">amp-hulu</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">I</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-iframe/">amp-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-iframely/">amp-iframely</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-ima-video/">amp-ima-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-image-lightbox/">amp-image-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-image-slider/">amp-image-slider</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-img/">amp-img</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-imgur/">amp-imgur</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-inline-gallery/">amp-inline-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-inputmask/">amp-inputmask</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-instagram/">amp-instagram</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-install-serviceworker/">amp-install-serviceworker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-izlesene/">amp-izlesene</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">J</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-jwplayer/">amp-jwplayer</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">K</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-kaltura-player/">amp-kaltura-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">L</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-layout/">amp-layout</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-lightbox-gallery/">amp-lightbox-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-lightbox/">amp-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-link-rewriter/">amp-link-rewriter</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-list/">amp-list</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-live-list/">amp-live-list</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">M</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-mathml/">amp-mathml</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-mega-menu/">amp-mega-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-megaphone/">amp-megaphone</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-minute-media-player/">amp-minute-media-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-mowplayer/">amp-mowplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-mustache/">amp-mustache</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">N</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-nested-menu/">amp-nested-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-next-page/">amp-next-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-nexxtv-player/">amp-nexxtv-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">O</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-o2-player/">amp-o2-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-onetap-google/">amp-onetap-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-ooyala-player/">amp-ooyala-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-orientation-observer/">amp-orientation-observer</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">P</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-pan-zoom/">amp-pan-zoom</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-pinterest/">amp-pinterest</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-pixel/">amp-pixel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-playbuzz/">amp-playbuzz</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-position-observer/">amp-position-observer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-powr-player/">amp-powr-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">R</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-reach-player/">amp-reach-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-recaptcha-input/">amp-recaptcha-input</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-reddit/">amp-reddit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-render/">amp-render</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-riddle-quiz/">amp-riddle-quiz</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">S</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-script/">amp-script</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-selector/">amp-selector</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-sidebar/">amp-sidebar</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-skimlinks/">amp-skimlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-slikeplayer/">amp-slikeplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-smartlinks/">amp-smartlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-social-share/">amp-social-share</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-soundcloud/">amp-soundcloud</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-springboard-player/">amp-springboard-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-sticky-ad/">amp-sticky-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-stream-gallery/">amp-stream-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-subscriptions-google/">amp-subscriptions-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-subscriptions/">amp-subscriptions</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">T</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-tiktok/">amp-tiktok</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-timeago/">amp-timeago</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-truncate-text/">amp-truncate-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-twitter/">amp-twitter</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">U</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-user-notification/">amp-user-notification</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">V</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-video-docking/">amp-video-docking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-video-iframe/">amp-video-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-video/">amp-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-vimeo/">amp-vimeo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-vine/">amp-vine</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-viqeo-player/">amp-viqeo-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-vk/">amp-vk</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">W</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-web-push/">amp-web-push</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-wistia-player/">amp-wistia-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-wordpress-embed/">amp-wordpress-embed</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">Y</li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-yotpo/">amp-yotpo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/documentation/components/websites/amp-youtube/">amp-youtube</a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">Of course, this site is made with AMP!</div> <div class="-l"> <h5 class="-c">Follow us</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">Overview</h5> <ul class="-y"> <li class="-b"><a href="/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Framework</a></li> <li class="-b"><a href="/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Use Cases</a></li> <li class="-b"><a href="/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Success stories</a></li> <li class="-b"><a href="/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Functionality</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Docs</h5> <ul class="-y"> <li class="-b"><a href="/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Get Started</a></li> <li class="-b"><a href="/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Guides and Tutorials</a></li> <li class="-b"><a href="/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Components</a></li> <li class="-b"><a href="/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Examples</a></li> <li class="-b"><a href="/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Design Templates</a></li> <li class="-b"><a href="/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Tools</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Community</h5> <ul class="-y"> <li class="-b"><a href="/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Platform and Vendor Partners</a></li> <li class="-b"><a href="/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Contribute</a></li> <li class="-b"><a href="/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Roadmap</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Events</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Conf 2020</a></li> <li class="-b"><a href="/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="-g">AMP Brand Materials</h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Styleguide</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Logos</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">Privacy Policy</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"components","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"components","event_label":"breadcrumbs","event_name":"breadcrumbs"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"formatToggle":{"on":"click","selector":".ap-m-format-toggle-link","vars":{"event_action":"link","event_category":"components","event_label":"format-toggle","event_name":"format-toggle"}},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"components","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"components","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"components","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}},"sidebarLink":{"on":"click","selector":".ap-o-sidebar a","vars":{"event_action":"link","event_category":"components","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"components","event_label":"sidebar","event_name":"sidebar"}},"tocLink":{"on":"click","selector":".ap-o-toc a","vars":{"event_action":"link","event_category":"components","event_label":"toc","event_name":"toc"}},"tocToggle":{"on":"click","selector":".ap-o-toc label","vars":{"event_action":"toggle","event_category":"components","event_label":"toc","event_name":"toc"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics><amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="Dismiss consent"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Accept use of cookies">Got it!</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes moveSidebarToggleBackwards{0%{transform:translateX(calc(90vw - 50%))}to{transform:translateX(0)}}@keyframes moveSidebarToggleForwards{0%{transform:translateX(0)}to{transform:translateX(calc(90vw - 50%))}}</style></body></html>