CINXE.COM

<!doctype html><html amp lang="fr" 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="Capturer les données d'analyse à partir d'un document AMP."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="Capturer les données d'analyse à partir d'un document AMP."><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/fr/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="fr"><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/fr/documentation/components/amp-analytics/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/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/fr/documentation/components/amp-analytics/ ","name":"amp.dev","headline":"Documentation : \u0026lt;amp-analytics\u0026gt;","description":"Capturer les données d\u0026#39;analyse à partir d\u0026#39;un document AMP.","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}}.-so{display:block;width:100%;height:1px;margin-bottom:.813em;background-color:#fafafc}@media(min-width:768px){.-so{display:none}.-su{display:block}}.-li{padding:84px 15px 0}@media(min-width:768px){.-li{padding-left:0;padding-right:0}}.-ls{margin-bottom:.75em;font-size:1.8rem;margin-top:2rem;padding:20px 0}.-ls,.-lo{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}.-lo{margin-top:1.5rem;font-size:1.2rem;padding-left:20px;margin-bottom:0}.-lu{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}.-la{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,.-ue{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-ut{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 .-un:not(:checked)+ul{display:none;transition:.2s}.ap-o-toc .-un: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 .-ur{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ur{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ur .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ur .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur,#sidebar-left[open]~.ap--main .-ur{z-index:9999999999}.-ui{position:absolute;top:50px}.-us{position:fixed;top:-99px}.-uo{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}.-uo .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}.-uo .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uo .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)}.-uu{position:fixed;top:-99px}.-ur{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ur{display:none}}.-ur .label-icon svg{transform:rotate(180deg)}.-ua{display:none}.-uf{position:fixed;top:-99px}.-ul{display:none}@media(min-width:768px)and (max-width:1440px){.-ua{display:inline-block}.-ul{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-uf:checked~.-uc{grid-column:1/2}.-uf:checked~.-uc nav{display:none}.-uf:checked~.-uc svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf: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){.-uf:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.-t,.-uf:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-uf:checked~.-t .-ul,.-uf:checked~.ap--help .-ul{margin-left:-88px}.-uf:checked~.-t .-ul .label-icon svg,.-uf:checked~.ap--help .-ul .label-icon svg{transform:rotate(180deg)}}.-lf{display:none}.-ll.amp-active~.-lf{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){.-ll.amp-active~.-lf{display:block}}.-ll.amp-active~.-lf .-lc{position:relative;display:flex;align-items:center;width:100%;height:100%;max-width:1440px;padding:0 30px;margin:0 auto}@media(min-width:1024px){.-ll.amp-active~.-lf .-lc{padding:0 15px}}.-ll.amp-active~.-lf .-lc: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}.-ll.amp-active~.-lf .-lh{flex:1 0;padding-right:10px}.-ll.amp-active~.-lf .-lp{height:20px;width:20px;background-color:transparent;border:0;cursor:pointer;padding:3px}.-ll.amp-active~.-lf .-lp 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}.-ld .-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){.-ld .-tf{padding:0 15px}.-ld .-tf>div,.-ld .-tf section{min-width:0}}@media(min-width:768px){.-ld .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-ld .-tf{padding:0 15px}}.-ld .-t,.-ld .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){.-ld .-t,.-ld .ap--help{grid-column:9/25}}@media(min-width:1024px){.-ld .-t,.-ld .ap--help{grid-column:7/25}.-ld .-t p.limit,.-ld .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-ld .-t,.-ld .ap--help{grid-column:8/25}}@media(min-width:1024px){.-ld .-t,.-ld .ap--help{grid-column:6/25}}.-ld .-uc{grid-column:auto;padding:0}@media(min-width:768px){.-ld .-uc{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-ld .-uc{grid-column:1/6}}.-ld .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-ld .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-ld .ap--toc{grid-column:8/25}.-ld .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-ld .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-ld .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-ld .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-ld .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-ld .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-ld .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-ld .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ld .-uc+.-t,.-ld .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-ld .-uc+.-t,.-ld .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-ld .-uc+.-t:nth-of-type(2),.-ld .-uc+.-t:nth-of-type(3),.-ld .ap--toc+.-t:nth-of-type(2),.-ld .ap--toc+.-t:nth-of-type(3){grid-row:1}}.-ld .ap--versions{position:relative;display:inline-flex;align-items:center;background:#fff;border:1px solid #e2e5e6;margin-top:5px}.-ld .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}.-ld .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}.-ld .ap--component-tags{margin-top:-1.5rem;margin-bottom:2rem}@media(min-width:768px){.-ld .-t,.-ld .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="/fr/"> <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 "> À propos <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="/fr/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">Sites Web AMP</div> <div class="ap-o-header-flyout-item-description">Créez des expériences Web sans défaut</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/fr/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">Stories empilables pour tous</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/fr/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">Annonces AMP</div> <div class="ap-o-header-flyout-item-description">Annonces ultra rapides sur le Web</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/fr/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">E-mail AMP</div> <div class="ap-o-header-flyout-item-description">L'e-mail nouvelle génération</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/about/how-amp-works/">Comment AMP fonctionne</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/about/mission-and-vision/">Vision et mission</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/about/use-cases/">Cas d'utilisation</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/success-stories/">Exemples de réussite</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> 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="/fr/documentation/">Commencer</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/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 et tutoriels</div> <div class="ap-o-header-flyout-item-description">Premiers pas avec AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/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">Composants</div> <div class="ap-o-header-flyout-item-description">La bibliothèque AMP complète</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/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">Exemples</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="/fr/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">Cours</div> <div class="ap-o-header-flyout-item-description">Apprenez à utiliser AMP grâce à des cours gratuits</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/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">Modèles</div> <div class="ap-o-header-flyout-item-description">Prêts à l'emploi</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/fr/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">Outils</div> <div class="ap-o-header-flyout-item-description">Commencez à créer</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Communauté <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="/fr/documentation/guides-and-tutorials/contribute/">Contribuer</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/community/roadmap/">Feuille de route</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/community/governance/">Gouvernance</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/community/working-groups/access-subscriptions/">Groupes de travail</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Événements <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="/fr/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="/fr/events/amp-roadshow/">Tournée AMP</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 "> Assistance <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="/fr/support/">Aide</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/fr/support/faq/">FAQ</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="Sélectionner une langue" tabindex="-1"> <span class="-tw">FR</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="/documentation/components/amp-analytics/" role="listitem">English</a> <a class="-tw" href="/de/documentation/components/amp-analytics/" role="listitem">Deutsch</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="Menu à tiroir" 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 "> À propos </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="/fr/about/websites/"> Sites Web AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/ads/"> Annonces AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/email/"> E-mail AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/how-amp-works/"> Comment AMP fonctionne </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/mission-and-vision/"> Vision et mission </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/about/use-cases/"> Cas d'utilisation </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/success-stories/"> Exemples de réussite </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Documentation </label> <input class="-td" type="checkbox" aria-label="Documentation"> <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="/fr/documentation/"> Commencer </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/guides-and-tutorials/"> Guides et tutoriels </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/components/"> Composants </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/examples/"> Exemples </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/courses/"> Cours </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/templates/"> Modèles </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/documentation/tools/"> Outils </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Communauté </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="/fr/documentation/guides-and-tutorials/contribute/"> Contribuer </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/community/roadmap/"> Feuille de route </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/community/governance/"> Gouvernance </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/community/working-groups/access-subscriptions/"> Groupes de travail </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Événements </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="/fr/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/fr/events/amp-roadshow/"> Tournée AMP </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="/fr/support/"> Aide </a> </li> </ul> </nav> <div class="-ui"> <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="-ll i-amphtml-layout-nodisplay" id="format-filter-hint" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-user-notification> <div class="-lf" aria-hidden="true"> <div class="-lc"> <div class="-lh">Sélectionnez votre format pour une expérience plus rationalisée</div> <button class="-lp" 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 -ld"> <div class="-tf"> <input class="-uu ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-uf ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-uc"></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 des matières</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="-us -un" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul><li><a href="#transmettre-des-données-d'analyse-à-un-fournisseur-ou-les-envoyer-en-interne-?">Transmettre des données d'analyse à un fournisseur ou les envoyer en interne ? </a><ul> <li><a href="#transmettre-les-données-à-un-fournisseur-de-solutions-d'analyse">Transmettre les données à un fournisseur de solutions d'analyse </a></li> <li><a href="#envoyer-des-données-en-interne">Envoyer des données en interne </a></li> </ul> </li> <li><a href="#spécifier-les-données-de-configuration">Spécifier les données de configuration </a><ul> <li><a href="#configuration-intégrée-ou-à-distance">Configuration intégrée ou à distance </a><ul> <li><a href="#charger-la-configuration-à-distance">Charger la configuration à distance </a></li> <li><a href="#fonctionnalité-de-réécriture-de-configuration">Fonctionnalité de réécriture de configuration </a><ul> <li><a href="#groupes-de-variables">Groupes de variables </a></li> </ul> </li> </ul> </li> <li><a href="#objets-de-données-de-configuration">Objets de données de configuration </a><ul> <li><a href="#requêtes">Requêtes </a><ul> <li><a href="#configurations-de-requête">Configurations de requête </a></li> <li><a href="#configurations-du-traitement-par-lots">Configurations du traitement par lots </a></li> </ul> </li> <li><a href="#variables">Variables </a></li> <li><a href="#paramètres-d'url-supplémentaires">Paramètres d'URL supplémentaires </a></li> <li><a href="#déclencheurs">Déclencheurs </a><ul> <li><a href="#sélecteur-d'éléments">Sélecteur d'éléments </a></li> <li><a href="#intégrer-le-déclencheur-de-démarrage-du-rendu">Intégrer le déclencheur de démarrage du rendu </a></li> <li><a href="#déclencheur-de-chargement-initial">Déclencheur de chargement initial </a></li> <li><a href="#déclencheur-de-visibilité-des-pages-et-des-éléments">Déclencheur de visibilité des pages et des éléments </a></li> <li><a href="#déclenchement-d'erreur">Déclenchement d'erreur </a></li> <li><a href="#déclencheur-de-clic">Déclencheur de clic </a></li> <li><a href="#déclencheur-de-défilement">Déclencheur de défilement </a></li> <li><a href="#déclencheur-de-minuteur">Déclencheur de minuteur </a></li> <li><a href="#déclencheur-occulté">Déclencheur occulté </a></li> <li><a href="#déclencheurs-d'accès">Déclencheurs d'accès </a></li> </ul> </li> <li><a href="#déclencheurs-d'analyse-vidéo">Déclencheurs d'analyse vidéo </a></li> <li><a href="#transport">Transport </a><ul> <li><a href="#utiliser-body-pour-les-paramètres-d'url-supplémentaires">Utiliser Body pour les paramètres d'URL supplémentaires </a></li> <li><a href="#stratégie-en-matière-d'url-de-provenance">Stratégie en matière d'URL de provenance </a></li> </ul> </li> <li><a href="#linkers">Linkers </a></li> <li><a href="#cookies">Cookies </a></li> </ul> </li> </ul> </li> <li><a href="#validation">Validation </a><ul> <li><a href="#attributs-valides-pour-<amp-analytics>">Attributs valides pour <amp-analytics> </a></li> </ul> </li> <li><a href="#solutions-d'analyse-pour-les-composants-amp">Solutions d'analyse pour les composants AMP </a></li></ul> </div> </section> <section class="-t"> <label class="-uo -ur 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">Afficher/masquer la barre latérale</span> </label> <label class="-uo -ul 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">Afficher/masquer la barre latérale</span> </label> <nav class="-ue"> <a class="ap-m-breadcrumbs-crumb" href="/fr/documentation/">Documentation</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -ut"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <a class="ap-m-breadcrumbs-crumb" href="/fr/documentation/components/">Composants</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">Capturer les données d'analyse à partir d'un document AMP.</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">Exemples</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> <p>Ce composant capture des données d'analyse à partir d'un document AMP.</p> <table> <tbody><tr> <td class="col-fourty"><strong>Script requis</strong></td> <td><code><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script></code></td> </tr> <tr> <td class="col-fourty"><strong>Exemples</strong></td> <td>Consultez l'<a href="https://ampbyexample.com/components/amp-analytics/">exemple de composant amp-analytics</a> sur AMP By Example.</td> </tr> </tbody></table> <h2 id="transmettre-des-données-d'analyse-à-un-fournisseur-ou-les-envoyer-en-interne-?">Transmettre des données d'analyse à un fournisseur ou les envoyer en interne ? <a name="sending-analytics-to-a-vendor-or-in-house"></a></h2> <p>Avant d'utiliser les analyses AMP sur votre site, vous devez déterminer si vous utiliserez des outils d'analyse tiers pour évaluer l'intérêt des utilisateurs ou votre propre solution interne.</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"> Pour tout savoir sur les analyses AMP, consultez le guide <a href="/fr/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/">Configuration des analyses</a>. </div> </div><p></p> <h3 id="transmettre-les-données-à-un-fournisseur-de-solutions-d'analyse">Transmettre les données à un fournisseur de solutions d'analyse <a name="analytics-vendors"></a></h3> <p>Les analyses AMP sont spécialement conçues pour mesurer une seule fois et transmettre ces mesures à autant de destinataires que nécessaire. Si vous travaillez déjà avec un ou plusieurs fournisseurs de solutions d'analyse, consultez la liste des <a href="/fr/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/">fournisseurs de solutions d'analyse</a> pour savoir s'ils ont intégré leur solution à AMP.</p> <p>Fournisseurs ayant intégré leur solution à AMP :</p> <ol> <li>Dans la balise <code><amp-analytics></code>, ajoutez l'attribut <code>type</code> et définissez sa valeur sur le <a href="/fr/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/">fournisseur</a> spécifié.</li> <li>Déterminez les données dont vous souhaitez effectuer la capture et le suivi, puis indiquez ces informations dans les données de configuration. Consultez la documentation du fournisseur pour obtenir des instructions sur la façon de recueillir des données d'analyse.</li> </ol> <p>Si le fournisseur de solutions d'analyse n'a pas intégré AMP, contactez son service d'assistance. Nous vous invitons également à créer un ticket d'incident dans le projet AMP pour demander à ce que le fournisseur soit ajouté. Consultez également l'article relatif à l'<a href="/fr/documentation/guides-and-tutorials/contribute/integrate-your-analytics-tools/">intégration de vos outils d'analyse dans AMP HTML</a>. Vous pouvez aussi contacter votre fournisseur pour lui envoyer les données à l'URL qu'il vous a indiquée. Pour en savoir plus, consultez la section <a href="#sending-data-in-house">Envoyer des données en interne</a> ci-dessous.</p> <p><em>Exemple : Envoi de données à un fournisseur de solutions d'analyse tiers</em></p> <p>Dans l'exemple suivant, les données d'analyse sont envoyées à Nielsen, un fournisseur de solutions d'analyse tiers qui est intégré à AMP. Vous trouverez des informations sur la configuration des données d'analyse pour Nielsen dans la documentation <a href="https://engineeringportal.nielsen.com/docs/DCR_Static_Google_AMP_Cloud_API">Nielsen</a>.</p> <div class="-ta"><pre><span></span><code><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">"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> </code></pre></div> <h3 id="envoyer-des-données-en-interne">Envoyer des données en interne <a name="sending-data-in-house"></a></h3> <p>Si vous possédez votre propre solution interne pour mesurer l'engagement des utilisateurs, la seule chose dont vous aurez besoin pour intégrer les analyses AMP à cette solution est une URL. C'est là que vous enverrez les données. Vous pouvez également envoyer des données à différentes URL. Par exemple, vous pouvez envoyer les données sur les vues de page à une URL et les données d'engagement sur les médias sociaux à une autre.</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"> Si, dans le cadre de votre solution interne, vous devez travailler avec un fournisseur de solutions d'analyse qui n'est pas intégré à AMP, coopérez avec ce dernier pour déterminer les informations de configuration qui sont requises. </div> </div><p></p> <p>Pour envoyer des données à une URL spécifique, procédez comme suit :</p> <ol> <li>Déterminez les données dont vous souhaitez effectuer la capture et le suivi, puis <a href="#specifying-configuration-data">indiquez ces informations dans les données de configuration</a>.</li> <li>Dans l'objet de configuration <a href="#requests"><code>requests</code></a>, indiquez le type de requête dont vous souhaitez effectuer le suivi (page vue, événements déclenchés particuliers, etc.) et les URL auxquelles les données de suivi doivent être envoyées.</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"> Lors du traitement des URL AMP dans l'en-tête de page de provenance des requêtes d'analyse, supprimez ou ignorez le paramètre <code>usqp</code>. Ce paramètre est utilisé par Google pour déclencher des tests pour Google AMP Cache. </div> </div><p></p> <p><em>Exemple : Envoi de données à une URL</em></p> <p>Voici un exemple simple de suivi des pages vues. Chaque fois qu'une page est visible, l'événement de déclenchement est généré et envoie les données sur les pages vues à une URL définie avec un ID aléatoire.</p> <div class="-ta"><pre><span></span><code><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> </code></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"> Pour certains scénarios de suivi courants (pages vues, clics sur une page, défilement, etc.), consultez la page <a href="/fr/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/use_cases/">Analytics : Cas d'utilisation</a>. </div> </div><p></p> <h2 id="spécifier-les-données-de-configuration">Spécifier les données de configuration <a name="specifying-configuration-data"></a></h2> <p>Dans l'élément <code><amp-analytics></code>, vous devez spécifier un objet de configuration JSON qui contient les informations relatives aux éléments à mesurer et à la destination des données d'analyse.</p> <p>L'objet de configuration pour <code><amp-analytics></code> utilise le format suivant :</p> <div class="-ta"><pre><span></span><code><span class="p">{</span> <span class="s2">"requests"</span><span class="o">:</span> <span class="p">{</span> <span class="nx">request</span><span class="o">-</span><span class="nx">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="kd">var</span><span class="o">-</span><span class="nx">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="nx">extraurlparam</span><span class="o">-</span><span class="nx">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="nx">trigger</span><span class="o">-</span><span class="nx">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> </code></pre></div> <h3 id="configuration-intégrée-ou-à-distance">Configuration intégrée ou à distance <a name="inline-or-remote-configuration"></a></h3> <p>Les données de configuration peuvent être spécifiées de manière intégrée ou récupérées à distance en spécifiant une URL dans l'attribut <code>config</code>. Vous pouvez, en outre, sélectionner la configuration intégrée pour les principaux fournisseurs de solutions d'analyse en utilisant l'attribut <code>type</code>.</p> <p>En cas d'utilisation de données de configuration provenant de plusieurs de ces sources, les objets de configuration (variables, requêtes et déclencheurs) sont fusionnés afin que :</p> <ol> <li>la configuration à distance soit prioritaire sur la configuration intégrée ;</li> <li>la configuration intégrée soit prioritaire sur la configuration du fournisseur.</li> </ol> <h4 id="charger-la-configuration-à-distance">Charger la configuration à distance <a name="loading-remote-configuration"></a></h4> <p>Pour charger une configuration à distance, spécifiez l'attribut <code>config</code> et l'URL des données de configuration dans l'élément <code><amp-analytics></code>. L'URL spécifiée doit utiliser le format HTTPS. L'URL peut inclure des <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">variables d'URL AMP</a>. Pour accéder aux cookies, reportez-vous à l'attribut <a href="#data-credentials"><code>data-credentials</code></a>. La réponse doit respecter les <a href="/fr/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/">consignes de sécurité AMP CORS</a>.</p> <p>Dans cet exemple, l'attribut <code>config</code> est spécifié pour charger les données de configuration à partir de l'URL spécifiée.</p> <div class="-ta"><pre><span></span><code><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> </code></pre></div> <h4 id="fonctionnalité-de-réécriture-de-configuration">Fonctionnalité de réécriture de configuration <a name="configuration-rewriter"></a></h4> <p>La fonctionnalité de réécriture de configuration est conçue pour permettre aux fournisseurs de solutions d'analyse de réécrire une configuration fournie de manière dynamique. Cette fonctionnalité est semblable à la configuration à distance, si ce n'est qu'elle inclut, en outre, toute configuration fournie par l'utilisateur dans la requête envoyée au serveur. Pour l'heure, cette option ne peut être activée que par un fournisseur de solutions d'analyse.</p> <p>Un fournisseur de solutions d'analyse indique une propriété configRewriter avec une URL de serveur.</p> <div class="-ta"><pre><span></span><code><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> </code></pre></div> <p>L'environnement d'exécution envoie une requête contenant la configuration intégrée, fusionnée avec la configuration à distance fournie, au point de terminaison configRewriter indiqué par le fournisseur. Le fournisseur utilise ces données du côté serveur pour la construction et renvoie une nouvelle configuration réécrite.</p> <p>L'environnement d'exécution fusionne ensuite l'ensemble de la configuration fournie afin de déterminer la configuration finale par ordre décroissant de priorité :</p> <ol> <li>Configuration réécrite</li> <li>Configuration intégrée</li> <li>Configuration définie par le fournisseur</li> </ol> <h5 id="groupes-de-variables">Groupes de variables <a name="variable-groups"></a></h5> <p>La fonctionnalité Groupes de variables permet aux fournisseurs de solutions d'analyse de regrouper un ensemble prédéfini de variables pouvant être facilement activées par un utilisateur. Ces variables sont ensuite résolues et envoyées au point de terminaison <code>configRewriter</code> spécifié.</p> <p>Pour activer cette fonctionnalité, les fournisseurs de solutions d'analyse doivent créer un objet <code>varGroups</code> à l'intérieur de la configuration <code>configRewriter</code>. Les éditeurs peuvent alors inclure tout objet <code>varGroups</code> créé par un fournisseur nommé qu'ils souhaitent activer dans leur configuration d'analyse. Toutes les variables acceptées dans le <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">guide de substitution des variables AMP HTML</a> peuvent être utilisées. <em>Remarque importante</em> : Les variantes ${varName} ne fonctionnent pas.</p> <p>Prenons l'exemple d'un fournisseur dont la configuration se présente comme suit :</p> <div class="-ta"><pre><span></span><code><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> <span class="p">}</span> </code></pre></div> <p>Vous pouvez préciser les groupes de variables qui sont activés en incluant <code>{enabled: true}</code> pour les objets <code>varGroups</code> spécifiés dans la configuration <code><amp-analytics></code> du fournisseur. <code>enabled</code> est un mot clé réservé qui ne peut pas être utilisé comme nom de variable.</p> <p>Dans l'exemple ci-dessous, <code>group1</code> et <code>group2</code> ont tous deux été activés. Tous les groupes qui n'ont pas été spécifiquement activés sont ignorés. L'environnement d'exécution va ensuite résoudre toutes ces variables activées et les fusionner en un seul objet <code>configRewriter.vars</code> qui sera envoyé à l'URL de réécriture de la configuration.</p> <div class="-ta"><pre><span></span><code> /* 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> </code></pre></div> <p>Dans cet exemple, le corps de la requête se présente comme suit :</p> <div class="-ta"><pre><span></span><code><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> </code></pre></div> <h3 id="objets-de-données-de-configuration">Objets de données de configuration <a name="configuration-data-objects"></a></h3> <h4 id="requêtes">Requêtes <a name="requests"></a></h4> <p>L'objet de configuration <code>requests</code> indique les URL utilisées pour transmettre les données à une plate-forme d'analyse, ainsi que le mode de traitement par lots ou de signalement de la requête. L'objet <code>request-name</code> indique la requête qui doit être envoyée en réponse à un événement particulier (<code>pageview</code>, <code>event</code>, etc.). L'objet <code>request-value</code> contient une URL https. La valeur peut inclure des jetons d'espace réservé pouvant faire référence à d'autres requêtes ou variables. <code>request-value</code> peut également être un objet contenant des configurations de requête facultatives.</p> <h5 id="configurations-de-requête">Configurations de requête <a name="request-configs"></a></h5> <p>Les propriétés utilisées pour définir une requête avec un objet sont les suivantes :</p> <ul> <li><code>baseUrl</code> : définit l'URL de la requête (obligatoire).</li> <li><code>reportWindow</code> : propriété facultative permettant de spécifier la période (en secondes) avant d'arrêter le signalement des requêtes. Le déclencheur avec l'attribut <code>important: true</code> remplace la contrainte de fenêtre de signalement maximale.</li> </ul> <p>Dans cet exemple, toutes les requêtes sont valides.</p> <div class="-ta"><pre><span></span><code><span class="s2">"requests"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"base"</span><span class="o">:</span> <span class="s2">"https://example.com/analytics?a=${account}&u=${canonicalUrl}&t=${title}"</span><span class="p">,</span> <span class="s2">"pageview"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"baseUrl"</span><span class="o">:</span> <span class="s2">"${base}&type=pageview"</span> <span class="p">},</span> <span class="s2">"event"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"baseUrl"</span><span class="o">:</span> <span class="s2">"${base}&type=event&eventId=${eventId}"</span><span class="p">,</span> <span class="s2">"batchInterval"</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="s2">"reportWindow"</span> <span class="o">:</span> <span class="mi">30</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Certains fournisseurs de solutions d'analyse proposent une configuration prête à l'emploi, que vous utilisez au moyen de l'attribut <code>type</code>. Si vous utilisez un fournisseur de solutions d'analyse, il n'est pas forcément nécessaire d'inclure des informations sur les requêtes. Consultez la documentation de votre fournisseur pour savoir si les requêtes doivent être configurées et, le cas échéant, connaître la marche à suivre.</p> <h5 id="configurations-du-traitement-par-lots">Configurations du traitement par lots <a name="batching-configs"></a></h5> <p>Pour réduire le nombre de pings de requête, vous pouvez spécifier des comportements de traitement par lots dans la configuration des requêtes. Tous les objets <a href="#extra-url-params"><code>extraUrlParams</code></a> de <code>triggers</code> qui utilisent la même requête sont ajoutés à la propriété <code>baseUrl</code> de la requête.</p> <p>Les propriétés de traitement par lots sont les suivantes :</p> <ul> <li><code>batchInterval</code> : cette propriété spécifie l'intervalle de temps (en secondes) pour vider les pings de requête dans la file d'attente de traitement par lots. <code>batchInterval</code> peut être un nombre ou une série de nombres (l'intervalle minimal est de 200 ms). La requête respecte chaque valeur de la série, puis répète la dernière valeur d'intervalle (ou la valeur unique) lorsqu'elle atteint la fin de la série.</li> </ul> <p>Par exemple, la configuration suivante envoie un seul ping de requête toutes les deux secondes, avec un exemple de ping semblable à ceci :<code>https://example.com/analytics?rc=1&rc=2</code>.</p> <div class="-ta"><pre><span></span><code><span class="s2">"requests"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"timer"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"baseUrl"</span><span class="o">:</span> <span class="s2">"https://example.com/analytics?"</span><span class="p">,</span> <span class="s2">"batchInterval"</span><span class="o">:</span> <span class="mi">2</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">"timer"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="s2">"request"</span> <span class="o">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="s2">"timerSpec"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"interval"</span><span class="o">:</span> <span class="mi">1</span> <span class="p">},</span> <span class="s2">"extraUrlParams"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"rc"</span><span class="o">:</span> <span class="s2">"${requestCount}"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Avec la configuration suivante, le premier ping de requête est envoyé au bout d'une seconde, puis une requête est envoyée toutes les trois secondes. Le premier ping de requête se présente comme suit : <code>https://example.com/analytics?rc=1</code>. Quant au deuxième ping de requête, il se présente comme suit : <code>https://example.com/analytics?rc=2&rc=3&rc=4</code>.</p> <div class="-ta"><pre><span></span><code><span class="s2">"requests"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"timer"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"baseUrl"</span><span class="o">:</span> <span class="s2">"https://example.com/analytics?"</span><span class="p">,</span> <span class="s2">"batchInterval"</span><span class="o">:</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="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"timer"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="s2">"request"</span> <span class="o">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="s2">"timerSpec"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"interval"</span><span class="o">:</span> <span class="mi">1</span> <span class="p">},</span> <span class="s2">"extraUrlParams"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"rc"</span><span class="o">:</span> <span class="s2">"${requestCount}"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <h4 id="variables">Variables <a name="vars"></a></h4> <p>Le composant <code>amp-analytics</code> définit de nombreuses variables de base qui peuvent être utilisées dans des requêtes. La liste des variables de ce type est disponible dans le <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md">guide des variables <code>amp-analytics</code></a>. Notez également que toutes les variables acceptées dans le <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">guide de substitution des variables AMP HTML</a> peuvent être utilisées.</p> <p>L'objet de configuration <code>vars</code> peut être utilisé pour définir de nouvelles paires valeur/clé ou pour remplacer des variables existantes qui peuvent être référencées dans des valeurs <code>request</code>. Les nouvelles variables sont généralement utilisées pour spécifier des informations spécifiques aux éditeurs. Des tableaux peuvent être utilisés pour spécifier une liste de valeurs qui doivent être encodées en URL séparément, tout en conservant la virgule comme délimiteur.</p> <div class="-ta"><pre><span></span><code><span class="s2">"vars"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"account"</span><span class="o">:</span> <span class="s2">"ABC123"</span><span class="p">,</span> <span class="s2">"countryCode"</span><span class="o">:</span> <span class="s2">"tr"</span><span class="p">,</span> <span class="s2">"tags"</span><span class="o">:</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="p">}</span> </code></pre></div> <h4 id="paramètres-d'url-supplémentaires">Paramètres d'URL supplémentaires <a name="extra-url-params"></a></h4> <p>L'objet de configuration <code>extraUrlParams</code> indique les paramètres supplémentaires à inclure dans la requête. Par défaut, les paramètres d'URL supplémentaires sont ajoutés à la chaîne de requête d'une URL de requête en utilisant la convention "&foo=baz" habituelle.</p> <p>Dans l'exemple suivant, <code>&a=1&b=2&c=3</code> est ajouté à une requête :</p> <div class="-ta"><pre><span></span><code><span class="s2">"extraUrlParams"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"a"</span><span class="o">:</span> <span class="s2">"1"</span><span class="p">,</span> <span class="s2">"b"</span><span class="o">:</span> <span class="s2">"2"</span><span class="p">,</span> <span class="s2">"c"</span><span class="o">:</span> <span class="s2">"3"</span> <span class="p">}</span> </code></pre></div> <p>L'objet <code>extraUrlParams</code> peut être envoyé via le corps de la requête au lieu de l'URL si <code>useBody</code> est activé et que la requête est envoyée au moyen des méthodes de transport <code>beacon</code> ou <code>xhrpost</code>. Dans ce cas, les paramètres ne sont ni encodés en URL ni aplatis. Pour plus d'informations, reportez-vous à la section <a href="#use-body-for-extra-url-params">Utiliser Body pour les paramètres d'URL supplémentaires</a>.</p> <p>L'attribut <code>extraUrlParamsReplaceMap</code> spécifie une carte de clés et de valeurs qui servent de paramètres à <code>String.replace()</code> pour effectuer le prétraitement de clés dans la configuration <code>extraUrlParams</code>. Par exemple, si une configuration <code>extraUrlParams</code> définit <code>"page.title": "The title of my page"</code> et que l'attribut <code>extraUrlParamsReplaceMap</code> définit <code>"page.": "_p_"</code>, alors <code>&_p_title=The%20title%20of%20my%20page%20</code> est ajouté à la requête.</p> <p><code>extraUrlParamsReplaceMap</code> n'est pas obligatoire pour utiliser <code>extraUrlParams</code>. Si l'attribut <code>extraUrlParamsReplaceMap</code> n'est pas défini, aucune substitution de chaîne ne se produit et les chaînes définies dans <code>extraUrlParams</code> sont utilisées telles quelles.</p> <p>Si <code>useBody</code> est activé et que la requête est envoyée au moyen des méthodes de transport <code>beacon</code> ou <code>xhrpost</code>, la substitution de chaîne <code>extraUrlParamsReplaceMap</code> n'est effectuée que sur les clés de niveau supérieur dans <code>extraUrlParams</code>.</p> <h4 id="déclencheurs">Déclencheurs <a name="triggers"></a></h4> <p>L'objet de configuration <code>triggers</code> décrit à quel moment une requête d'analyse doit être envoyée. L'attribut <code>triggers</code> contient une paire clé/valeur de nom de déclencheur et de configuration de déclencheur. Un nom de déclencheur est une chaîne composée de caractères alphanumériques (a-zA-Z0-9). Les déclencheurs issus d'une configuration de priorité inférieure sont remplacés par des déclencheurs portant le même nom dans une configuration de priorité supérieure.</p> <ul> <li><code>on</code> (obligatoire) Événement à écouter. Les valeurs valides sont les suivantes : <code>render-start</code>, <code>ini-load</code>, <code>click</code>, <code>scroll</code>, <code>timer</code>, <code>visible</code>, <code>hidden</code>, <code>user-error</code>, <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-access/amp-access-analytics.md"><code>access-*</code></a> et <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md"><code>video-*</code></a></li> <li><code>request</code> (obligatoire) Nom de la requête à envoyer (comme indiqué dans la section <code>requests</code>).</li> <li><code>vars</code> Objet contenant des paires clé/valeur utilisées pour remplacer les <code>vars</code> définies dans la configuration de niveau supérieur ou pour spécifier des variables propres à ce déclencheur.</li> <li><code>important</code> peut être spécifié pour utiliser des requêtes qui sont compatibles avec le comportement de traitement par lots ou la fenêtre de signalement. Définir l'attribut <code>important</code> sur <code>true</code> peut faciliter le vidage de la file d'attente des requêtes par lots avec certains déclencheurs. Dans ce cas, il est possible de réduire le nombre de pings de requête sans risquer de perdre des événements de déclenchement importants. Définir l'attribut <code>important</code> sur <code>true</code> permet également d'ignorer la valeur <code>reportWindow</code> de la requête pour envoyer des pings de requête importants.</li> <li><code>selector</code> et <code>selectionMethod</code> peuvent être spécifiés pour certains déclencheurs, tels que <code>click</code> et <code>visible</code>. Pour plus d'informations, reportez-vous à la section <a href="#element-selector">Sélecteur d'éléments</a>.</li> <li><code>scrollSpec</code> (obligatoire lorsque l'attribut <code>on</code> est défini sur <code>scroll</code>) Cette configuration est utilisée avec le déclencheur <code>scroll</code>. Consultez les informations ci-dessous pour plus de détails.</li> <li><code>timerSpec</code> (obligatoire lorsque l'attribut <code>on</code> est défini sur <code>timer</code>) Cette configuration est utilisée avec le déclencheur <code>timer</code>. Consultez les informations ci-dessous pour plus de détails.</li> <li><code>sampleSpec</code> Cet objet permet de définir le mode d'échantillonnage des requêtes avant leur envoi. Ce paramètre permet d'effectuer un échantillonnage en fonction d'entrées aléatoires ou d'autres variables compatibles avec la plate-forme. L'objet contient une configuration permettant de spécifier une entrée qui est utilisée pour générer un hachage, ainsi qu'un seuil que ce dernier doit respecter.<ul> <li><code>sampleOn</code> Ce modèle de chaîne est développé en renseignant les variables de la plate-forme, puis haché afin de générer un nombre pour la logique d'échantillonnage décrite sous le seuil ci-après.</li> <li><code>threshold</code> Cette configuration permet d'exclure les requêtes qui ne répondent pas à des critères particuliers. Pour qu'une demande accède au fournisseur de solutions d'analyse, la logique suivante doit être définie sur "true" : <code>HASH(sampleOn) < threshold</code>.</li> </ul> </li> <li><code>videoSpec</code> (utilisée lorsque l'attribut <code>on</code> est défini sur <code>video-*</code>) Cette configuration est utilisée avec les déclencheurs <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md"><code>video-*</code></a>.</li> </ul> <p>À titre d'exemple, la configuration suivante peut être utilisée pour échantillonner 50 % des requêtes en fonction d'une entrée aléatoire ou à 1 % en fonction de l'ID client.</p> <div class="-ta"><pre><span></span><code><span class="s1">'triggers'</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'sampledOnRandom'</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'on'</span><span class="o">:</span> <span class="s1">'visible'</span><span class="p">,</span> <span class="s1">'request'</span><span class="o">:</span> <span class="s1">'request'</span><span class="p">,</span> <span class="s1">'sampleSpec'</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'sampleOn'</span><span class="o">:</span> <span class="s1">'${random}'</span><span class="p">,</span> <span class="s1">'threshold'</span><span class="o">:</span> <span class="mi">50</span><span class="p">,</span> <span class="p">},</span> <span class="p">},</span> <span class="s1">'sampledOnClientId'</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'on'</span><span class="o">:</span> <span class="s1">'visible'</span><span class="p">,</span> <span class="s1">'request'</span><span class="o">:</span> <span class="s1">'request'</span><span class="p">,</span> <span class="s1">'sampleSpec'</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'sampleOn'</span><span class="o">:</span> <span class="s1">'${clientId(cookieName)}'</span><span class="p">,</span> <span class="s1">'threshold'</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="p">},</span> <span class="p">},</span> <span class="p">},</span> </code></pre></div> <h5 id="sélecteur-d'éléments">Sélecteur d'éléments <a name="element-selector"></a></h5> <p>Certains déclencheurs, tels que <code>click</code> et <code>visible</code>, permettent de spécifier un seul élément ou un ensemble d'éléments à l'aide des propriétés du sélecteur. Les limites et interprétations appliquées aux éléments sélectionnés peuvent varier en fonction des déclencheurs. Par exemple : Un sélecteur s'applique-t-il à l'ensemble des éléments correspondants ou seulement au premier ? Quels éléments peuvent être mis en correspondance : tous ou seulement les éléments AMP ? Pour plus d'informations, consultez la documentation relative à chaque déclencheur concerné.</p> <p>Les propriétés du sélecteur sont les suivantes </p> <ul> <li><code>selector</code> Cette propriété permet de rechercher un élément ou un ensemble d'éléments à l'aide d'une requête CSS/DOM. La sémantique utilisée pour la mise en correspondance de l'élément peut être modifiée à l'aide de <code>selectionMethod</code>. La valeur de cette propriété peut être :<ul> <li>Un sélecteur CSS valide, par exemple <code>#ad1</code> ou <code>amp-ad</code>.</li> <li><code>:root</code> Un sélecteur spécial qui correspond à la racine du document.</li> </ul> </li> <li><code>selectionMethod</code> Lorsque cette propriété est spécifiée, sa valeur peut être <code>scope</code> ou <code>closest</code>. <code>scope</code> permet de sélectionner un élément dans l'élément parent de la balise <code>amp-analytics</code>. <code>closest</code> recherche l'ancêtre le plus proche de la balise <code>amp-analytics</code> qui respecte le sélecteur donné. La valeur par défaut est <code>scope</code>.</li> </ul> <h5 id="intégrer-le-déclencheur-de-démarrage-du-rendu">Intégrer le déclencheur de démarrage du rendu <a name="embed-render-start-trigger"></a></h5> <p>Les éléments AMP qui intègrent d'autres documents dans des cadres iFrame (des annonces, par exemple) peuvent signaler un événement de démarrage de rendu (<code>"on": "render-start"</code>). En règle générale, cet événement est généré dès qu'il est possible de confirmer que le rendu du document intégré a commencé. Consultez la documentation d'un élément AMP spécifique pour savoir s'il émet ou non cet événement.</p> <p>Le déclencheur de l'élément intégré doit inclure un élément <a href="#element-selector"><code>selector</code></a> qui pointe vers l'élément d'intégration :</p> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"renderStart"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"render-start"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"request"</span><span class="p">,</span> <span class="s2">"selector"</span><span class="o">:</span> <span class="s2">"#embed1"</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>L'événement de démarrage du rendu est également émis par le document proprement dit et peut être configuré comme suit :</p> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"renderStart"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"render-start"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"request"</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <h5 id="déclencheur-de-chargement-initial">Déclencheur de chargement initial <a name="initial-load-trigger"></a></h5> <p>L'événement de chargement initial (<code>"on": "ini-load"</code>) est déclenché lorsque le contenu initial d'un élément AMP ou d'un document AMP a été chargé.</p> <p>Le "chargement initial" est défini par rapport au conteneur et à sa taille initiale. Pour être plus précis :</p> <ul> <li>Pour un document : tous les éléments de la première fenêtre d'affichage.</li> <li>Pour un élément intégré : tous les éléments de contenu du document intégré qui sont positionnés dans la taille initiale de l'élément intégré.</li> <li>Pour un élément AMP simple (<code>amp-img</code>, par exemple) : les ressources proprement dites, telles qu'une image ou une vidéo.</li> </ul> <p>Le déclencheur d'un élément intégré ou d'un élément AMP doit inclure un élément <a href="#element-selector"><code>selector</code></a> qui pointe vers l'élément :</p> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"iniLoad"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"ini-load"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"request"</span><span class="p">,</span> <span class="s2">"selector"</span><span class="o">:</span> <span class="s2">"#embed1"</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>L'événement de chargement initial est également émis par le document proprement dit et peut être configuré comme suit :</p> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"iniLoad"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"ini-load"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"request"</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <h5 id="déclencheur-de-visibilité-des-pages-et-des-éléments">Déclencheur de visibilité des pages et des éléments <a name="page-and-element-visibility-trigger"></a></h5> <p>Utilisez le déclencheur de visibilité des pages (<code>"on": "visible"</code>) pour déclencher une requête lorsque la page devient visible. <code>visibilitySpec</code> permet de configurer l'activation de ce déclencheur.</p> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"defaultPageview"</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> </code></pre></div> <p>Le déclencheur de visibilité des éléments peut être configuré pour tout élément AMP ou pour la racine d'un document à l'aide de l'élément <a href="#element-selector"><code>selector</code></a>. Le déclencheur est activé lorsque l'élément spécifié correspond aux paramètres de visibilité qui peuvent être personnalisés à l'aide de <code>visibilitySpec</code>.</p> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"defaultPageview"</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">"elementview"</span><span class="p">,</span> <span class="s2">"selector"</span><span class="o">:</span> <span class="s2">"#ad1"</span><span class="p">,</span> <span class="s2">"visibilitySpec"</span><span class="o">:</span> <span class="p">{</span><span class="cm">/* optional visibility spec */</span><span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Notez que le sélecteur ne peut être utilisé que pour spécifier un seul élément, et non pour un ensemble. Il peut s'agir d'un <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-tag-addendum.md#amp-specific-tags">élément étendu AMP</a> ou d'une racine de document.</p> <p>Le déclencheur de visibilité des éléments attend le signal spécifié par la propriété <code>waitFor</code> dans <code>visibilitySpec</code> avant de lancer le suivi. Si la propriété <code>waitFor</code> n'est pas spécifiée, le déclencheur attend le signal <a href="#initial-load-trigger"><code>ini-load</code></a> de l'élément. Pour plus d'informations, consultez la documentation de la propriété <code>waitFor</code>. Si <code>reportWhen</code> est spécifié, le déclencheur attend ce signal avant d'envoyer l'événement. Cela s'avère utile, par exemple, pour envoyer des événements d'analyse lorsque la page est fermée.</p> <h5 id="déclenchement-d'erreur">Déclenchement d'erreur <a name="error-trigger"></a></h5> <p>L'événement d'erreur utilisateur (<code>"on": "user-error"</code>) se déclenche lorsqu'une erreur imputable à l'auteur de la page ou au logiciel utilisé pour la publier se produit. Il peut s'agir, par exemple, d'une mauvaise configuration d'un composant AMP, d'annonces mal configurées ou encore d'assertions ayant échoué. Les erreurs utilisateur sont également affichées dans la console de développement.</p> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"userError"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"user-error"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"error"</span> <span class="p">}</span> <span class="p">}</span> </code></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"> Un <a href="https://github.com/ampproject/amphtml/issues/10891">problème connu</a> concerne le signalement d'erreurs liées à des intégrations iFrame A4A qui ne sont pas pertinentes pour la page. </div> </div><p></p> <p><strong><a id="visibility-spec"></a>Spécification de visibilité</strong></p> <p><code>visibilitySpec</code> est un ensemble de conditions et de propriétés qui peuvent être appliquées aux déclencheurs <code>visible</code> (visibles) ou <code>hidden</code> (masqués) afin de modifier le moment du déclenchement. Si plusieurs propriétés sont spécifiées, elles doivent toutes être définies sur "true" pour qu'une requête soit déclenchée. Les propriétés de configuration acceptées dans <code>visibilitySpec</code> sont les suivantes :</p> <ul> <li><code>waitFor</code> : cette propriété indique que le déclencheur de visibilité doit attendre un certain signal avant d'effectuer le suivi de la visibilité. Les valeurs acceptées sont <code>none</code>, <code>ini-load</code> et <code>render-start</code>. Si la propriété <code>waitFor</code> n'est pas définie, le paramètre <a href="#initial-load-trigger"><code>ini-load</code></a> est défini par défaut lorsque le sélecteur est spécifié. Sinon, ce paramètre est défini sur <code>none</code>.</li> <li><code>reportWhen</code> : cette propriété indique que le déclencheur de visibilité doit attendre un certain signal avant l'envoi. La seule valeur acceptée est <code>documentExit</code>. Les propriétés <code>reportWhen</code> et <code>repeat</code> ne peuvent pas être utilisées toutes les deux dans la même spécification de visibilité. Notez que lorsque la propriété <code>reportWhen</code> est spécifiée, le rapport est envoyé à l'émission du signal, même si les conditions de visibilité requises ne sont pas remplies à ce moment-là ou si elles n'ont pas été respectées précédemment. Toutes les variables pertinentes (<code>totalVisibleTime</code>, etc.) sont renseignées en fonction des exigences de visibilité dans cette spécification de visibilité (<code>visibilitySpec</code>).</li> <li><code>continuousTimeMin</code> et <code>continuousTimeMax</code> : ces propriétés indiquent qu'une requête doit être déclenchée lorsqu'un élément se trouve (intégralement ou en partie) dans la fenêtre d'affichage pendant une période continue comprise entre les durées minimale et maximale spécifiées. Les durées sont exprimées en millisecondes. La propriété <code>continuousTimeMin</code> est définie, par défaut, sur 0.</li> <li><code>totalTimeMin</code> et <code>totalTimeMax</code> : ces propriétés indiquent qu'une requête doit être déclenchée lorsqu'un élément se trouve (intégralement ou en partie) dans la fenêtre d'affichage pendant une durée totale comprise entre les périodes minimale et maximale spécifiées. Les durées sont exprimées en millisecondes. La propriété <code>totalTimeMin</code> est définie, par défaut, sur 0.</li> <li><code>visiblePercentageMin</code> et <code>visiblePercentageMax</code> : ces propriétés indiquent qu'une requête doit être déclenchée lorsque la partie d'un élément visible dans la fenêtre d'affichage est comprise entre les valeurs de pourcentage minimale et maximale spécifiées. Les valeurs de pourcentage comprises entre 0 et 100 sont correctes. Notez que la limite supérieure (<code>visiblePercentageMax</code>) est inclusive. La limite inférieure (<code>visiblePercentageMin</code>) est exclusive, sauf si les deux limites sont définies sur 0 ou sur 100. Si les deux limites sont définies sur 0, le déclencheur est activé lorsque l'élément n'est pas visible. Si les deux limites sont définies sur 100, le déclencheur est activé lorsque l'élément est entièrement visible. Lorsque ces propriétés sont définies avec d'autres propriétés temporelles, on tient compte uniquement de la période pendant laquelle elles sont satisfaites. Les valeurs définies par défaut pour <code>visiblePercentageMin</code> et <code>visiblePercentageMax</code> sont, respectivement, 0 et 100.</li> <li><code>repeat</code> : si cette propriété est définie sur <code>true</code>, le déclencheur est activé chaque fois que les conditions <code>visibilitySpec</code> sont remplies. Dans l'exemple ci-dessous, si l'utilisateur fait défiler 51 % de l'élément, puis 49 %, puis de nouveau 51 %, le déclencheur est activé à deux reprises. Cependant, si la propriété <code>repeat</code> est définie sur <code>false</code>, le déclencheur n'est activé qu'une seule fois. La valeur par défaut de <code>repeat</code> est <code>false</code>. Les propriétés <code>reportWhen</code> et <code>repeat</code> ne peuvent pas utilisées toutes les deux dans la même spécification de visibilité.</li> </ul> <div class="-ta"><pre><span></span><code><span class="nx">visibilitySpec</span><span class="o">:</span> <span class="p">{</span> <span class="nx">visiblePercentageMin</span><span class="o">:</span> <span class="mi">50</span><span class="p">,</span> <span class="nx">repeat</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="p">}</span> </code></pre></div> <p><code>visiblePercentageThresholds</code> peut être utilisé comme un raccourci pour créer plusieurs instances <code>visibilitySpec</code> dont seules les propriétés <code>visiblePercentageMin</code> et <code>visiblePercentageMax</code> sont différentes. Par exemple, les éléments suivants sont équivalents :</p> <div class="-ta"><pre><span></span><code><span class="c1">// Two triggers with visibilitySpecs that only differ in visiblePercentageMin and visiblePercentageMax:</span> <span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"pageView_30_to_40"</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="s2">"selector"</span><span class="o">:</span> <span class="s2">"#ad1"</span><span class="p">,</span> <span class="s2">"visibilitySpec"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"visiblePercentageMin"</span><span class="o">:</span> <span class="mi">30</span><span class="p">,</span> <span class="s2">"visiblePercentageMax"</span><span class="o">:</span> <span class="mi">40</span><span class="p">,</span> <span class="s2">"continuousTimeMin"</span><span class="o">:</span> <span class="mi">1000</span><span class="p">,</span> <span class="p">}</span> <span class="p">}</span> <span class="s2">"pageView_40_to_50"</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="s2">"selector"</span><span class="o">:</span> <span class="s2">"#ad1"</span><span class="p">,</span> <span class="s2">"visibilitySpec"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"visiblePercentageMin"</span><span class="o">:</span> <span class="mi">40</span><span class="p">,</span> <span class="s2">"visiblePercentageMax"</span><span class="o">:</span> <span class="mi">50</span><span class="p">,</span> <span class="s2">"continuousTimeMin"</span><span class="o">:</span> <span class="mi">1000</span><span class="p">,</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="c1">// A single trigger equivalent to both of the above:</span> <span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"pageView"</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="s2">"selector"</span><span class="o">:</span> <span class="s2">"#ad1"</span><span class="p">,</span> <span class="s2">"visibilitySpec"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"visiblePercentageThresholds"</span><span class="o">:</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="s2">"continuousTimeMin"</span><span class="o">:</span> <span class="mi">1000</span><span class="p">,</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Outre les conditions énoncées ci-dessus, <code>visibilitySpec</code> active certaines variables qui sont documentées <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md#visibility-variables">ici</a>.</p> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"defaultPageview"</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="s2">"selector"</span><span class="o">:</span> <span class="s2">"#ad1"</span><span class="p">,</span> <span class="s2">"visibilitySpec"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"waitFor"</span><span class="o">:</span> <span class="s2">"ini-load"</span><span class="p">,</span> <span class="s2">"reportWhen"</span><span class="o">:</span> <span class="s2">"documentExit"</span><span class="p">,</span> <span class="s2">"visiblePercentageMin"</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span> <span class="s2">"totalTimeMin"</span><span class="o">:</span> <span class="mi">500</span><span class="p">,</span> <span class="s2">"continuousTimeMin"</span><span class="o">:</span> <span class="mi">200</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Outre les variables fournies dans le cadre des déclencheurs, vous pouvez définir des valeurs de remplacement / supplémentaires pour les <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md#variables-as-data-attribute">variables en tant qu'attributs de données</a>. Si ces attributs de données sont utilisés, ils doivent faire partie de l'élément spécifié en tant que <a href="#element-selector"><code>selector</code></a>.</p> <h5 id="déclencheur-de-clic">Déclencheur de clic <a name="click-trigger"></a></h5> <p>Utilisez le déclencheur de clic (<code>"on": "click"</code>) pour déclencher une requête lorsqu'un utilisateur clique sur un élément spécifié. Utilisez l'élément <a href="#element-selector"><code>selector</code></a> pour déterminer les éléments qui déclencheront cette requête. Le déclencheur est activé pour tous les éléments correspondant au sélecteur spécifié.</p> <div class="-ta"><pre><span></span><code><span class="s2">"vars"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"id1"</span><span class="o">:</span> <span class="s2">"#socialButtonId"</span><span class="p">,</span> <span class="s2">"id2"</span><span class="o">:</span> <span class="s2">".shareButtonClass"</span> <span class="p">},</span> <span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"anchorClicks"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"click"</span><span class="p">,</span> <span class="s2">"selector"</span><span class="o">:</span> <span class="s2">"a, ${id1}, ${id2}"</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">"vars"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"eventId"</span><span class="o">:</span> <span class="mi">128</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Outre les variables fournies dans le cadre des déclencheurs, vous pouvez définir des valeurs de remplacement / supplémentaires pour les <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md#variables-as-data-attribute">variables en tant qu'attributs de données</a>. Si ces attributs de données sont utilisés, ils doivent faire partie de l'élément spécifié en tant que <code>selector</code>.</p> <h5 id="déclencheur-de-défilement">Déclencheur de défilement <a name="scroll-trigger"></a></h5> <p>Utilisez le déclencheur de défilement (<code>"on": "scroll"</code>) pour déclencher une requête dans certaines conditions lors du défilement de la page. Ce déclencheur fournit des <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/analytics-vars.md#interaction">variables spéciales</a> qui indiquent les limites ayant déclenché l'envoi d'une requête. Utilisez <code>scrollSpec</code> pour déterminer le moment du déclenchement :</p> <ul> <li><code>scrollSpec</code> Cet objet peut contenir les propriétés <code>verticalBoundaries</code> et <code>horizontalBoundaries</code>. Au moins l'une de ces deux propriétés est requise pour déclencher un événement de défilement. Les valeurs des deux propriétés doivent être des séries de nombres contenant les limites par rapport auxquelles un événement de défilement est généré. Par exemple, dans l'extrait de code suivant, l'événement de défilement est déclenché lorsque l'utilisateur fait défiler la page verticalement de 25 %, 50 % et 90 %. L'événement est également déclenché lorsque la page fait l'objet d'un défilement horizontal équivalant à 90 % de la largeur de défilement. Pour que la page continue de fonctionner de manière optimale, les limites de défilement sont arrondies au multiple de <code>5</code> le plus proche.</li> </ul> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"scrollPings"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"scroll"</span><span class="p">,</span> <span class="s2">"scrollSpec"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"verticalBoundaries"</span><span class="o">:</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="s2">"horizontalBoundaries"</span><span class="o">:</span> <span class="p">[</span><span class="mi">90</span><span class="p">]</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="p">}</span> </code></pre></div> <h5 id="déclencheur-de-minuteur">Déclencheur de minuteur <a name="timer-trigger"></a></h5> <p>Utilisez le déclencheur du minuteur (<code>"on": "timer"</code>) pour déclencher une requête selon un intervalle de temps régulier. Utilisez <code>timerSpec</code> pour déterminer le moment du déclenchement :</p> <ul> <li><code>timerSpec</code> Spécification pour les déclencheurs de type <code>timer</code>. À moins qu'un élément <code>startSpec</code> n'ait été spécifié, le minuteur se déclenche immédiatement (par défaut, il peut être désactivé), puis selon un intervalle spécifié ultérieurement.<ul> <li><code>interval</code> Durée de l'intervalle du minuteur, en secondes.</li> <li><code>maxTimerLength</code> Durée maximale de déclenchement du minuteur, en secondes. Une requête supplémentaire est déclenchée lorsque la valeur <code>maxTimerLength</code> a été atteinte. La valeur par défaut est de 2 heures. Lorsqu'un élément <code>stopSpec</code> est présent, mais qu'aucune valeur maxTimerLength n'est spécifiée, la valeur par défaut est l'infini.</li> <li><code>immediate</code> Déclenchement immédiat du minuteur ou non. Il s'agit d'une valeur booléenne, définie par défaut sur "true".</li> </ul> </li> </ul> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"pageTimer"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="s2">"timerSpec"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"interval"</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span> <span class="s2">"maxTimerLength"</span><span class="o">:</span> <span class="mi">600</span> <span class="p">},</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"pagetime"</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Pour configurer un minuteur qui mesure les événements utilisateur :</p> <ul> <li><code>startSpec</code> Spécification relative au déclenchement du démarrage du minuteur. Utilisez la valeur <code>on</code> et <code>selector</code> pour effectuer le suivi d'événements spécifiques. Dans le cas d'une configuration contenant un élément <code>startSpec</code>, mais pas d'élément <code>stopSpec</code>, le minuteur ne s'arrête que lorsque la valeur <code>maxTimerLength</code> a été atteinte.</li> <li><code>stopSpec</code> Spécification relative au déclenchement de l'arrêt du minuteur. Dans le cas d'une configuration contenant un élément <code>stopSpec</code>, mais pas d'élément <code>startSpec</code>, le minuteur démarre immédiatement, mais ne s'arrête que lorsque l'événement spécifié se produit.</li> </ul> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"videoPlayTimer"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"timer"</span><span class="p">,</span> <span class="s2">"timerSpec"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"interval"</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="s2">"startSpec"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"video-play"</span><span class="p">,</span> <span class="s2">"selector"</span><span class="o">:</span> <span class="s2">"amp-video"</span> <span class="p">},</span> <span class="s2">"stopSpec"</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">"selector"</span><span class="o">:</span> <span class="s2">"amp-video"</span> <span class="p">}</span> <span class="p">},</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"videoRequest"</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Pour en savoir plus sur la création de déclencheurs de minuteur imbriqués, consultez la spécification relative aux <a href="#triggers">déclencheurs</a>. Notez que vous ne pouvez pas utiliser un déclencheur de minuteur pour démarrer ou arrêter un minuteur.</p> <h5 id="déclencheur-occulté">Déclencheur occulté <a name="hidden-trigger"></a></h5> <p>Utilisez le déclencheur occulté (<code>"on": "hidden"</code>) pour déclencher une requête lorsque la page est occultée.</p> <div class="-ta"><pre><span></span><code><span class="s2">"triggers"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"defaultPageview"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"on"</span><span class="o">:</span> <span class="s2">"hidden"</span><span class="p">,</span> <span class="s2">"request"</span><span class="o">:</span> <span class="s2">"pagehide"</span><span class="p">,</span> <span class="p">}</span> <span class="p">}</span> </code></pre></div> <p>Un élément <a href="#visibility-spec"><code>visibilitySpec</code></a> peut être inclus, de telle sorte qu'une requête ne soit déclenchée que si les conditions de durée de visibilité sont remplies.</p> <div class="-ta"><pre><span></span><code><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> <span class="p">}</span> </code></pre></div> <p>La configuration ci-dessus peut être interprétée comme suit :</p> <blockquote> Lorsque la page est occultée, déclencher une requête si l'élément #anim-id est visible (sur plus de 20 % de la surface de la fenêtre d'affichage) pendant plus de 3 secondes au total. </blockquote> <h5 id="déclencheurs-d'accès">Déclencheurs d'accès <a name="access-triggers"></a></h5> <p>Le système AMP Access génère de nombreux événements pour différents états du flux d'accès. Pour en savoir plus sur les déclencheurs d'accès (<code>"on": "access-*"</code>), consultez la page <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-access/amp-access-analytics.md">AMP Access and Analytics</a>.</p> <h4 id="déclencheurs-d'analyse-vidéo">Déclencheurs d'analyse vidéo <a name="video-analytics-triggers"></a></h4> <p>Les analyses vidéo proposent plusieurs déclencheurs (<code>"on": "video-*"</code>) que les éditeurs peuvent utiliser pour effectuer le suivi de différents événements qui se produisent pendant le cycle de vie d'une vidéo. Pour obtenir des informations supplémentaires, consultez la page <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-video-analytics.md">AMP Video Analytics</a>.</p> <h4 id="transport">Transport <a name="transport"></a></h4> <p>L'objet de configuration <code>transport</code> définit comment envoyer une requête. La valeur est un objet dont les champs indiquent les méthodes de transport acceptées.</p> <ul> <li><code>beacon</code> Indique que <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon"><code>navigator.sendBeacon</code></a> peut être utilisé pour transmettre la requête. Une requête POST va alors être envoyée avec des identifiants. Cette requête sera envoyée avec un corps de document vide, sauf si la valeur de <code>useBody</code> est définie sur "true". Pour en savoir plus sur <code>useBody</code>, reportez-vous à la section <a href="#use-body-for-extra-url-params">Utiliser Body pour les paramètres d'URL supplémentaires</a>.</li> <li><code>xhrpost</code> Indique que <code>XMLHttpRequest</code> peut être utilisé pour transmettre la requête. Une requête POST va alors être envoyée avec des identifiants. Cette requête sera envoyée avec un corps de document vide, sauf si la valeur de <code>useBody</code> est définie sur "true". Pour en savoir plus sur <code>useBody</code>, reportez-vous à la section <a href="#use-body-for-extra-url-params">Utiliser Body pour les paramètres d'URL supplémentaires</a>.</li> <li><code>image</code> Indique que la requête peut être envoyée en générant une balise <code>Image</code>. Une requête GET va alors être envoyée. Pour supprimer les avertissements de console consécutifs à des réponses vides ou des échecs de requête, définissez <code>"image": {"suppressWarnings": true}</code>.</li> </ul> <p>Les fournisseurs accrédités par le MRC peuvent utiliser un quatrième mécanisme de transport, "iframe transport", en ajoutant une chaîne d'URL à iframe-transport-vendors.js. Ce mécanisme indique qu'un iFrame doit être créé, avec son attribut <code>src</code> défini sur cette URL, et que les requêtes lui seront envoyées via <code>window.postMessage()</code>. Dans ce cas, les requêtes ne doivent pas nécessairement être des URL complètes. <code>iframe</code> ne peut être spécifié que dans <code>iframe-transport-vendors.js</code>. Il ne peut pas être spécifié de manière intégrée dans la balise <code>amp-analytics</code>, ni via la configuration à distance. En outre, le frame du fournisseur peut envoyer une réponse qui sera utilisée par amp-ad-exit. Reportez-vous aux fichiers <a href="https://github.com/ampproject/amphtml/blob/main/examples/analytics-iframe-transport-remote-frame.html">analytics-iframe-transport-remote-frame.html</a> et <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html">fake_amp_ad_with_iframe_transport.html</a> : le premier fichier envoie un objet JSON de réponse {'collected-data': 'abc'}, tandis que le deuxième utilise cet objet pour remplacer 'bar_' par 'abc' dans finalUrl.</p> <p>Si plusieurs des méthodes de transport ci-dessus sont activées, l'ordre est le suivant : <code>iframe</code> > <code>beacon</code> > <code>xhrpost</code> > <code>image</code>. Une seule méthode de transport sera utilisée, et il s'agira de la méthode autorisée et disponible ayant la priorité la plus élevée. Si l'user-agent du client n'accepte pas une méthode, la méthode activée qui vient ensuite dans l'ordre de priorité sera utilisée. Par défaut, les quatre méthodes ci-dessus sont toutes activées.</p> <p>Dans l'exemple ci-dessous, aucune URL <code>iframe</code> n'est spécifiée, et <code>beacon</code> et <code>xhrpost</code> sont définis sur <code>false</code>. Ils ne sont donc pas utilisés, même si leur priorité est supérieure à celle de la méthode <code>image</code>. Par défaut, la méthode <code>image</code> est définie sur <code>true</code>, mais cet élément est explicitement déclaré ici. Si l'user-agent du client accepte la méthode <code>image</code>, elle est utilisée. Dans le cas contraire, aucune requête n'est envoyée.</p> <div class="-ta"><pre><span></span><code><span class="s2">"transport"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"beacon"</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="s2">"xhrpost"</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="s2">"image"</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span> </code></pre></div> <p>Pour en savoir plus, consultez <a href="https://github.com/ampproject/amphtml/blob/main/examples/analytics-iframe-transport-remote-frame.html">cet exemple qui met en œuvre l'API du client de transport iFrame</a> et <a href="https://github.com/ampproject/amphtml/blob/main/examples/analytics-iframe-transport.amp.html">cet exemple de page qui intègre cet iFrame</a>. L'exemple charge une <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-ad-network-fake-impl/0.1/data/fake_amp_ad_with_iframe_transport.html">annonce fictive</a> qui contient la balise <code>amp-analytics</code>. Notez que le contenu de l'annonce fictive inclut des instructions de configuration supplémentaires qu'il faut respecter.</p> <h5 id="utiliser-body-pour-les-paramètres-d'url-supplémentaires">Utiliser Body pour les paramètres d'URL supplémentaires <a name="use-body-for-extra-url-params"></a></h5> <p>L'option de configuration <code>useBody</code> indique si les paramètres d'URL supplémentaires (<code>extraUrlParams</code>) doivent être inclus ou non dans le corps de la requête POST plutôt que dans l'URL en tant que paramètres de requête encodés en URL.</p> <p><code>useBody</code> n'est disponible que pour les méthodes de transport <code>beacon</code> et <code>xhrpost</code>. Si l'option <code>useBody</code> est définie sur "true" et utilisée avec l'une de ces méthodes de transport, les <code>extraUrlParams</code> sont envoyés dans le corps de la requête POST. Dans le cas contraire, la requête est envoyée avec un corps vide et les <code>extraUrlParams</code> sont inclus en tant que paramètres d'URL.</p> <p><code>useBody</code> vous permet d'inclure des objets imbriqués dans <code>extraUrlParams</code>. Cependant, si la requête bascule vers d'autres options de transport qui ne sont pas compatibles avec <code>useBody</code> (<code>image</code>, par exemple), les objets imbriqués sont convertis en une chaîne dans l'URL en tant que <code>[object Object]</code>.</p> <div class="-ta"><pre><span></span><code><span class="s2">"transport"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"beacon"</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="s2">"xhrpost"</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="s2">"useBody"</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="s2">"image"</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}</span> </code></pre></div> <h5 id="stratégie-en-matière-d'url-de-provenance">Stratégie en matière d'URL de provenance <a name="referrer-policy"></a></h5> <p>La stratégie en matière d'URL de provenance peut être spécifiée en tant que champ <code>referrerPolicy</code> dans la configuration <code>transport</code>. Pour le moment, seul <code>no-referrer</code> est accepté. Ce type de stratégie n'est disponible que pour la méthode de transport <code>image</code>. Si <code>referrerPolicy: no-referrer</code> est spécifié, les méthodes de transport <code>beacon</code> et <code>xhrpost</code> sont remplacées par <code>false</code>.</p> <div class="-ta"><pre><span></span><code><span class="s2">"transport"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"beacon"</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="s2">"xhrpost"</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="s2">"image"</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="s2">"referrerPolicy"</span><span class="o">:</span> <span class="s2">"no-referrer"</span> <span class="p">}</span> </code></pre></div> <h4 id="linkers">Linkers <a name="linkers"></a></h4> <p>La fonctionnalité <code>linkers</code> permet d'activer la synchronisation d'identifiants sur plusieurs domaines. <code>amp-analytics</code> utilise un <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/linker-id-forwarding.md#format">objet de configuration</a> pour créer une "chaîne linker" qui sera ajoutée en tant que paramètre d'URL aux liens sortants spécifiés sur la page. Lorsqu'un utilisateur clique sur l'un de ces liens, la page de destination lit cette chaîne à partir du paramètre d'URL pour procéder à la synchronisation des identifiants. En règle générale, cette fonctionnalité est utilisée pour participer à des sessions utilisateur sur un domaine proxy AMP et un domaine d'éditeur.</p> <p>Vous trouverez des informations détaillées sur la configuration de Linker sur la page <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/linker-id-forwarding.md">Linker ID Forwarding</a>.</p> <p>Si vous souhaitez ingérer ce paramètre, vous trouverez des informations relatives à sa création sur la page <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/linker-id-receiving.md">Linker ID Receiving</a>.</p> <h4 id="cookies">Cookies <a name="cookies"></a></h4> <p>La fonctionnalité <code>cookies</code> permet d'écrire des cookies dans le domaine d'origine en extrayant les informations <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md#query-parameter"><code>QUERY_PARAM</code></a> et <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/linker-id-receiving.md#linker-param"><code>LINKER_PARAM</code></a> de l'URL du document. Elle peut être utilisée avec des fonctionnalités <code>linkers</code> pour effectuer la synchronisation des identifiants depuis le domaine proxy AMP vers les pages AMP sur le domaine d'un éditeur.</p> <p>Pour en savoir plus sur la configuration de <code>cookies</code>, consultez la section <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="validation">Validation <a name="validation"></a></h2> <p>Consultez les <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/validator-amp-analytics.protoascii">règles relatives à amp-analytics</a> dans les spécifications du validateur AMP.</p> <h3 id="attributs-valides-pour-<amp-analytics>">Attributs valides pour <code><amp-analytics></code> <a name="valid-attributes-for-"></a></h3> <p>Voici les attributs valides pour le composant <code>amp-analytics</code> :</p> <p><strong>type</strong></p> <p>Indique le type de fournisseur. Pour plus d'informations, consultez la liste des <a href="/fr/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/">fournisseurs de solutions d'analyse</a>.</p> <p>Exemple</p> <div class="-ta"><pre><span></span><code><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> </code></pre></div> <p><strong>config</strong></p> <p>Il s'agit d'un attribut facultatif qui peut être utilisé pour charger une configuration à partir d'une URL distante spécifiée. L'URL spécifiée doit utiliser le format HTTPS. Reportez-vous également à l'attribut <code>data-include-credentials</code> ci-dessous. L'URL peut inclure des <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">variables d'URL AMP</a>. La réponse doit respecter les <a href="/fr/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/">consignes de sécurité AMP CORS</a>.</p> <p>Exemple</p> <div class="-ta"><pre><span></span><code><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> </code></pre></div> <p><strong>data-credentials</strong><a name="data-credentials"></a></p> <p>Si cet attribut est défini sur <code>include</code>, il est possible de lire et d'écrire des cookies sur la requête spécifiée via l'attribut <code>config</code>. Cet attribut est facultatif.</p> <p><strong>data-consent-notification-id</strong></p> <p>Si cet attribut est fourni, la page ne traite pas les requêtes d'analyse tant que l'utilisateur n'a pas confirmé (accepté) un élément <a href="/fr/documentation/components/amp-user-notification/">notification amp-user</a> avec l'ID d'élément HTML donné. Cet attribut est facultatif.</p> <h2 id="solutions-d'analyse-pour-les-composants-amp">Solutions d'analyse pour les composants AMP <a name="analytics-for-amp-components"></a></h2> <p>Les développeurs de composants AMP peuvent mettre en œuvre un ensemble de données à l'aide des analyses AMP. Pour en savoir plus, reportez-vous à la section <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-analytics/amp-components-analytics.md">Implementing analytics for AMP components</a></p> </section> <section class="ap--help"> <div class="-li"> <span class="-ls">Besoin d'une aide supplémentaire ?</span> <p class="-lu">Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur 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">Se rendre sur Stack Overflow</span> </a> <div class="-la"></div> <span class="-ls">Vous avez trouvé un bug ou une fonctionnalité manquante ?</span> <p class="-lu">Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.</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">Se rendre sur GitHub</span> </a> <div class="-la"></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="/fr/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="/fr/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="/fr/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="/fr/documentation/components/websites/amp-3d-gltf/">amp-3d-gltf</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-access-fewcents/">amp-access-fewcents</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-access-laterpay/">amp-access-laterpay</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-access-poool/">amp-access-poool</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-access-scroll/">amp-access-scroll</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-access/">amp-access</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-accordion/">amp-accordion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-action-macro/">amp-action-macro</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-ad-exit/">amp-ad-exit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-ad/">amp-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-addthis/">amp-addthis</a> </li> <li class="nav-item level-2 active" autoscroll> <a class="nav-link" href="/fr/documentation/components/websites/amp-analytics/">amp-analytics</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-anim/">amp-anim</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-animation/">amp-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-apester-media/">amp-apester-media</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-app-banner/">amp-app-banner</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-audio/">amp-audio</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-auto-ads/">amp-auto-ads</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-base-carousel/">amp-base-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-beopinion/">amp-beopinion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-bind/">amp-bind</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-bodymovin-animation/">amp-bodymovin-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-brid-player/">amp-brid-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-brightcove/">amp-brightcove</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-call-tracking/">amp-call-tracking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-carousel/">amp-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-connatix-player/">amp-connatix-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-dailymotion/">amp-dailymotion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-date-countdown/">amp-date-countdown</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-date-display/">amp-date-display</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-date-picker/">amp-date-picker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-delight-player/">amp-delight-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-embedly-card/">amp-embedly-card</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-facebook-comments/">amp-facebook-comments</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-facebook-like/">amp-facebook-like</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-facebook-page/">amp-facebook-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-facebook/">amp-facebook</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-fit-text/">amp-fit-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-font/">amp-font</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-form/">amp-form</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-fx-collection/">amp-fx-collection</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-geo/">amp-geo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-gfycat/">amp-gfycat</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-gist/">amp-gist</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-google-document-embed/">amp-google-document-embed</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/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="/fr/documentation/components/websites/amp-iframe/">amp-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-iframely/">amp-iframely</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-ima-video/">amp-ima-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-image-lightbox/">amp-image-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-image-slider/">amp-image-slider</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-img/">amp-img</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-imgur/">amp-imgur</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-inline-gallery/">amp-inline-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-inputmask/">amp-inputmask</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-instagram/">amp-instagram</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-install-serviceworker/">amp-install-serviceworker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/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="/fr/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="/fr/documentation/components/websites/amp-layout/">amp-layout</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-lightbox-gallery/">amp-lightbox-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-lightbox/">amp-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-link-rewriter/">amp-link-rewriter</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-list/">amp-list</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-mathml/">amp-mathml</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-mega-menu/">amp-mega-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-megaphone/">amp-megaphone</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-minute-media-player/">amp-minute-media-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-mowplayer/">amp-mowplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-nested-menu/">amp-nested-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-next-page/">amp-next-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-o2-player/">amp-o2-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-onetap-google/">amp-onetap-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-ooyala-player/">amp-ooyala-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-pan-zoom/">amp-pan-zoom</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-pinterest/">amp-pinterest</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-pixel/">amp-pixel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-playbuzz/">amp-playbuzz</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-position-observer/">amp-position-observer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-reach-player/">amp-reach-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-recaptcha-input/">amp-recaptcha-input</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-reddit/">amp-reddit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-render/">amp-render</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-script/">amp-script</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-selector/">amp-selector</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-sidebar/">amp-sidebar</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-skimlinks/">amp-skimlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-slikeplayer/">amp-slikeplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-smartlinks/">amp-smartlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-social-share/">amp-social-share</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-soundcloud/">amp-soundcloud</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-springboard-player/">amp-springboard-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-sticky-ad/">amp-sticky-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-stream-gallery/">amp-stream-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-subscriptions-google/">amp-subscriptions-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-tiktok/">amp-tiktok</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-timeago/">amp-timeago</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-truncate-text/">amp-truncate-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/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="/fr/documentation/components/websites/amp-video-docking/">amp-video-docking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-video-iframe/">amp-video-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-video/">amp-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-vimeo/">amp-vimeo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-vine/">amp-vine</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-viqeo-player/">amp-viqeo-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-web-push/">amp-web-push</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/documentation/components/websites/amp-wistia-player/">amp-wistia-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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="/fr/documentation/components/websites/amp-yotpo/">amp-yotpo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/fr/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">Ce site a évidemment été créé avec AMP !</div> <div class="-l"> <h5 class="-c">Suivez-nous</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">Vue d'ensemble</h5> <ul class="-y"> <li class="-b"><a href="/fr/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>Framework AMP</a></li> <li class="-b"><a href="/fr/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>Cas d'utilisation</a></li> <li class="-b"><a href="/fr/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>Exemples de réussite</a></li> <li class="-b"><a href="/fr/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>Fonctionnalité</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Documents</h5> <ul class="-y"> <li class="-b"><a href="/fr/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>Commencer</a></li> <li class="-b"><a href="/fr/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 et tutoriels</a></li> <li class="-b"><a href="/fr/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>Composants</a></li> <li class="-b"><a href="/fr/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>Exemples</a></li> <li class="-b"><a href="/fr/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>Modèles de conception</a></li> <li class="-b"><a href="/fr/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>Outils</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Communauté</h5> <ul class="-y"> <li class="-b"><a href="/fr/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>Plateformes et fournisseurs partenaires</a></li> <li class="-b"><a href="/fr/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>Contribuer</a></li> <li class="-b"><a href="/fr/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>Feuille de route</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">Événements</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="/fr/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">Matériaux de la marque AMP</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>Guide de style</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">Politique de confidentialité</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="Fermer la fenêtre de consentement"> <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="Accepter l'utilisation de cookies">Compris !</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>