CINXE.COM

<!doctype html><html amp lang="tr" 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="robots" content="noindex,follow"><meta name="description" content="This guide outlines highly personalized interactivity options to integrate into AMP pages."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="This guide outlines highly personalized interactivity options to integrate into AMP pages."><meta name="twitter:title" content="Building personalized interactive experiences"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-guide-600x314.png"><meta property="og:title" content="Building personalized interactive experiences"><meta property="og:url" content="https://amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-guide-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites"><meta name="page-locale" content="tr"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012502032353000">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 custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" async 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 custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" crossorigin="anonymous" custom-element="amp-carousel"></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 custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-list-0.1.js" crossorigin="anonymous" custom-element="amp-list"></script><script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" crossorigin="anonymous" custom-template="amp-mustache"></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 custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-script-0.1.js" crossorigin="anonymous" custom-element="amp-script"></script><script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" crossorigin="anonymous" custom-element="amp-selector"></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/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/"><title>Building personalized interactive experiences - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/ ","name":"amp.dev","headline":"Building personalized interactive experiences","description":"This guide outlines highly personalized interactivity options to integrate into AMP pages.","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-guide-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-o-translation-hint{position:fixed;z-index:100;width:100%;left:0;bottom:0}@media(max-width:767px){.ap-o-translation-hint{display:none}}.ap-o-translation-hint-wrapper{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;max-width:1440px;margin:0 auto;padding:1em 30px;background-color:#fff;border-top:5px solid #ffdc00;box-shadow:0 -2px 10px 0 rgba(0,0,0,.07)}.ap-o-translation-hint-link{display:inline-block}.-am+.ap-o-translation-hint{bottom:25px}.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-tutorial-progress{position:absolute;top:0;left:-4px;height:100%;width:2px;background-color:#e2e5e6}.ap-m-tutorial-progress-finished{background-color:#09a600}.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-default{max-width:100%}@media(min-width:768px){.ap-o-sidebar-default .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-default .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-default .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-default .nav-list.level-1{margin:0 15px}.ap-o-sidebar-default .nav-list .nav-list{display:none;margin-bottom:20px}.ap-o-sidebar-default .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-default .nav-item.level-1{border-bottom:1px solid rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item.level-1:last-child{border-bottom:none}.ap-o-sidebar-default .nav-item.level-1 .nav-link{padding:10px 25px 10px 20px;text-transform:uppercase;font-size:1.125rem;font-family:Poppins,system;font-weight:700;color:#000}.ap-o-sidebar-default .nav-item.level-1 .nav-icon,.ap-o-sidebar-default .nav-item.level-1 .nav-trigger{height:46px}.ap-o-sidebar-default .nav-item.level-1 .nav-icon .ap-a-ico{margin-top:16px}.ap-o-sidebar-default .nav-item.level-2 .nav-link{padding:7px 25px 8px 20px;text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em}.ap-o-sidebar-default .nav-item.level-2 .nav-icon,.ap-o-sidebar-default .nav-item.level-2 .nav-trigger{height:33px}.ap-o-sidebar-default .nav-item.level-2 .nav-icon .ap-a-ico{width:10px;height:10px;margin-top:10px}.ap-o-sidebar-default .nav-item.level-3{margin-left:24px}.ap-o-sidebar-default .nav-item.level-3 .nav-link{padding:7px 25px 8px 20px;font-size:.8125rem}.ap-o-sidebar-default .nav-item.level-3.active{background:rgba(51,61,71,.1);border-radius:4px}.ap-o-sidebar-default .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-default .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-default .nav-item-tutorial-divider{border-bottom:1px dashed rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item-tutorial-divider:first-child,.ap-o-sidebar-default .nav-item-tutorial-divider:last-child{display:none}.ap-o-sidebar-default .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-o-sidebar-default .nav-link-lastword{white-space:nowrap}.ap-o-sidebar-default .nav-icon,.ap-o-sidebar-default .nav-trigger{position:absolute;top:0;width:20px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer}.ap-o-sidebar-default .nav-trigger{-webkit-appearance:none;z-index:1}.ap-o-sidebar-default .nav-trigger:checked~ul{display:block}.ap-o-sidebar-default .nav-trigger:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.ap-o-sidebar-default .nav-trigger:focus{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color}.ap-o-sidebar-default .nav-icon .ap-a-ico{width:12px;height:12px;transform:rotate(-90deg)}.ap-o-sidebar-default .nav-type-icon{display:inline-block;vertical-align:top;width:20px;height:20px;margin-left:6px}.ap-o-sidebar-default .nav span.nav-link+.nav-trigger{width:calc(100% + 15px)}ul.ap-o-mini-card-list{display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none;margin:0;max-width:1440px;padding:0;position:relative;width:100%}.ap-o-mini-card-list-item{margin-bottom:1.25rem;padding-left:0;transition:transform .3s ease}.ap-o-mini-card-list-item:hover{transform:translateY(-.125em)}.ap-o-mini-card-list-item:hover>.ap-m-mini-card{box-shadow:0 15px 25px 0 rgba(0,0,0,.05)}.ap-m-mini-card{line-height:1.6rem;font-weight:400;color:#48525c;position:relative;display:flex;align-items:center;flex-direction:row;padding:8px 16px 8px 8px;margin:0 0 10px;box-shadow:0 5px 15px -3px rgba(0,0,0,.07);transition:box-shadow .3s ease;background:#fff}.ap-m-mini-card amp-img{width:35px;display:inline-block;border:1px solid #ebebf0;border-radius:100%}.ap-m-mini-card amp-img.large{width:38px;flex-shrink:0}.ap-m-mini-card span{padding-left:10px;line-height:1.3em}.ap-m-mini-card strong{font-weight:700}@media(max-width:374px){.ap-m-mini-card{font-size:.75em}}.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,.-ut{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-un{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 .-ur:not(:checked)+ul{display:none;transition:.2s}.ap-o-toc .-ur: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 .-ui{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ui .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ui .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ui{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ui .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ui .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ui,#sidebar-left[open]~.ap--main .-ui{z-index:9999999999}.-us{position:absolute;top:50px}.-uo{position:fixed;top:-99px}.-uu{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}.-uu .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}.-uu .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uu .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)}.-ua{position:fixed;top:-99px}.-ui{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ui{display:none}}.-ui .label-icon svg{transform:rotate(180deg)}.-uf{display:none}.-ul{position:fixed;top:-99px}.-uc{display:none}@media(min-width:768px)and (max-width:1440px){.-uf{display:inline-block}.-uc{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-ul:checked~.-uh{grid-column:1/2}.-ul:checked~.-uh nav{display:none}.-ul:checked~.-uh svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-ul:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-ul: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){.-ul:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-ul:checked~.-t,.-ul:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-ul:checked~.-t .-uc,.-ul:checked~.ap--help .-uc{margin-left:-88px}.-ul:checked~.-t .-uc .label-icon svg,.-ul:checked~.ap--help .-uc .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}.-ft .-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){.-ft .-tf{padding:0 15px}.-ft .-tf>div,.-ft .-tf section{min-width:0}}@media(min-width:768px){.-ft .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-ft .-tf{padding:0 15px}}.-ft .-t,.-ft .ap--help{grid-column:1;position:relative;width:100%;background:#fafafc}@media(min-width:768px){.-ft .-t,.-ft .ap--help{grid-column:9/25}}@media(min-width:1024px){.-ft .-t,.-ft .ap--help{grid-column:7/25}.-ft .-t p.limit,.-ft .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-ft .-t,.-ft .ap--help{grid-column:8/25;padding-left:30px;padding-right:30px;padding-bottom:60px}}@media(min-width:1024px){.-ft .-t,.-ft .ap--help{grid-column:6/24;padding-left:30px;padding-bottom:60px}}.-ft .-uh{grid-column:auto;padding:0}@media(min-width:768px){.-ft .-uh{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-ft .-uh{grid-column:1/6}}.-ft .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-ft .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-ft .ap--toc{grid-column:8/25}.-ft .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-ft .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-ft .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-ft .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-ft .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-ft .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-ft .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-ft .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ft .-uh+.-t,.-ft .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-ft .-uh+.-t,.-ft .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-ft .-uh+.-t:nth-of-type(2),.-ft .-uh+.-t:nth-of-type(3),.-ft .ap--toc+.-t:nth-of-type(2),.-ft .ap--toc+.-t:nth-of-type(3){grid-row:1}}@media(max-width:767px){.-ft .-uh~.-t,.-ft .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ft .-t amp-anim{box-shadow:0 30px 30px -15px rgba(0,0,0,.25)}@media screen and (max-width:575px){.-ft .-t figure{min-width:50vw}}.-ft .-t figure.alignment-wrapper{margin-top:1.6rem}.-ft .-t figure.left{text-align:left}.-ft .-t figure.center{text-align:center}.-ft .-t figure.right{text-align:right}@media(min-width:768px){.-ft .-t figure.half amp-img{width:50%}}.-ft .-t figure.third amp-img{width:50%}@media(min-width:768px){.-ft .-t figure.third amp-img{width:33%}}.-ft .-t figure.shadow amp-img{box-shadow:0 30px 30px -15px rgba(0,0,0,.25)}.-ft .-t figure amp-img{margin:0 auto}.-ft .-t figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;padding-top:20px;max-width:300px}.-ft .ap--chapter-indicator{display:flex;justify-content:space-between}.-ft .ap--chapter-indicator .ap-a-btn{margin:0 auto}.-ft .ap--chapter-indicator .ap--previous .-i{transform:scaleX(-1)}.-ft .ap--chapter-indicator .ap--next{justify-self:flex-end}.-ft .ap--chapter-indicator .ap--next .-i{margin-left:.625em;margin-right:0}.-ft .noshowtoc{display:none}.ap-code-preview,.ap-o-code-preview{position:relative;margin:1rem 0;background:#20202a}.ap-code-preview-controls,.ap-o-code-preview-controls{width:100%;display:flex;justify-content:center;align-items:center;margin:0 auto;padding:9px 0}.ap-code-preview-controls-button,.ap-o-code-preview-controls-button{-webkit-appearance:none;background-color:transparent;border:none;position:relative;padding:6px;cursor:pointer}.ap-code-preview-controls-icon,.ap-o-code-preview-controls-icon{width:22px;height:22px;fill:#fff;opacity:.6;transition:opacity .25s ease-out}.ap-code-preview-controls-button:focus .ap-code-preview-controls-icon,.ap-code-preview-controls-button:focus .ap-o-code-preview-controls-icon,.ap-code-preview-controls-button:hover .ap-code-preview-controls-icon,.ap-code-preview-controls-button:hover .ap-o-code-preview-controls-icon,.ap-o-code-preview-controls-button:focus .ap-code-preview-controls-icon,.ap-o-code-preview-controls-button:focus .ap-o-code-preview-controls-icon,.ap-o-code-preview-controls-button:hover .ap-code-preview-controls-icon,.ap-o-code-preview-controls-button:hover .ap-o-code-preview-controls-icon{opacity:1}.ap-code-preview-preview,.ap-o-code-preview-preview{position:relative;top:1em;margin:1em;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(min-height:768px){.ap-code-preview-preview+div.-ta,.ap-o-code-preview-preview+div.-ta{min-height:0}}.ap-code-preview-preview-iframe,.ap-o-code-preview-preview-iframe{display:flex;justify-content:center;position:relative;margin:0 1em}@media screen and (max-width:412px){.ap-code-preview-preview-iframe amp-iframe,.ap-o-code-preview-preview-iframe amp-iframe{width:240px;height:427px}}@media screen and (min-width:413px){.ap-code-preview-preview-iframe amp-iframe,.ap-o-code-preview-preview-iframe amp-iframe{width:320px;height:569px}}.ap-code-preview-top-preview,.ap-o-code-preview-top-preview{position:relative;padding:0 1em;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:start}@media(min-width:1024px){.ap-code-preview-top-preview,.ap-o-code-preview-top-preview{padding:0 15%}}.ap-code-preview-top-preview+div.-ta,.ap-o-code-preview-top-preview+div.-ta{position:relative;width:100%;min-height:0;padding:1em 1em 0;margin-top:0}.ap-code-preview-top-preview amp-iframe,.ap-o-code-preview-top-preview amp-iframe{align-self:center}.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;padding:0;margin:0}@media(min-width:768px){.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{width:auto;left:60%;background-color:#1c1c24}}@media(max-width:767px){.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{overflow:hidden;pointer-events:none}.ap-code-preview-side-preview-active,.ap-o-code-preview-side-preview-active{pointer-events:auto}}.ap-code-preview-side-preview-frame,.ap-o-code-preview-side-preview-frame{position:absolute;max-height:100%;right:15px;top:auto;background-color:#fff}@media(max-width:767px){.ap-code-preview-side-preview-frame,.ap-o-code-preview-side-preview-frame{position:static;background:#fff;pointer-events:none;transform:translateY(100%);transition:transform .2s cubic-bezier(0,0,.3,1)}.ap-code-preview-side-preview-frame.show,.ap-o-code-preview-side-preview-frame.show{transform:translateY(0);pointer-events:auto;height:100%}}.ap-code-preview-iframe,.ap-o-code-preview-iframe{background:#fff;margin-bottom:1em}.ap-code-preview.side-frame .-ta,.ap-code-preview.top-frame .-ta,.ap-o-code-preview.side-frame .-ta,.ap-o-code-preview.top-frame .-ta{min-height:150px;max-height:450px}.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{width:100%;margin:0;background:0 0}@media(min-width:768px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{width:60%;min-height:580px}}@media(min-width:1024px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:738px}}@media(min-width:1280px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:842px}}@media(min-width:1441px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:746px}}.ap-a-fab{display:flex;justify-content:center;width:56px;position:absolute;bottom:16px;right:16px;padding:0;font-size:24px;line-height:56px;user-select:none;cursor:pointer;z-index:14;color:#fff;background-color:#005af0;border:none;border-radius:50%;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);pointer-events:auto}.ap-a-fab:active{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.ap-a-fab-show{transform:scale(0);animation:expand .25s ease-in-out .25s both}.ap-a-fab-hide{transform:scale(1);animation:collapse .25s ease-in-out both}@media(min-width:768px){.ap-a-fab{display:none}}.-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="angle-down-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M0.662 19.607c-0.441-0.412-0.662-0.927-0.662-1.494s0.221-1.082 0.662-1.494c0.883-0.825 2.317-0.825 3.2 0l28.138 26.28 28.138-26.28c0.883-0.825 2.317-0.825 3.2 0s0.883 2.164 0 2.989l-29.738 27.775c-0.883 0.825-2.317 0.825-3.2 0l-29.738-27.775z"/> </symbol><symbol id="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16"><path fill="#005af0" d="M19.5 1.8h-1.4V.5c0-.1 0-.2-.1-.3-.1-.1-.2-.1-.3-.1h-5.9c-.7 0-1.4.3-1.8.9C9.6.4 8.9.1 8.2.1H2.3c-.1 0-.2 0-.3.1-.1.1-.1.2-.1.3v1.3H.5c-.1 0-.2 0-.3.1-.1.1-.1.2-.1.3v10.7c0 .1 0 .2.1.3s.2.1.3.1H5c2.5 0 3.3.7 4.6 2.5.1.1.2.2.4.2s.3-.1.4-.2c1.4-1.8 2.2-2.5 3.7-2.5h5.5c.1 0 .2 0 .3-.1s.1-.2.1-.3V2.2c0-.1 0-.2-.1-.3-.1-.1-.2-.1-.4-.1zM11.8.9h5.5v9.8h-5c-.7 0-1.3.3-1.8.8V2.2c0-.7.6-1.3 1.3-1.3zM2.7.9h5.5c.8 0 1.4.6 1.4 1.3v9.3c-.5-.5-1.1-.9-1.8-.9h-5V.9zm16.4 11.5h-5c-1.9 0-2.9.9-4.1 2.4-1.2-1.5-2.3-2.4-5-2.4H.9V2.6h.9V11c0 .1 0 .2.1.3s.2.1.3.1h5.5c.7 0 1.5.8 1.9 1.5.1.2.2.2.4.2h.1c.1 0 .2-.1.3-.2.4-.7 1.1-1.5 1.9-1.5h5.5c.1 0 .2 0 .3-.1s.1-.2.1-.3V2.6h.9v9.8zm-5.6-8.5c-.3 0-.5-.2-.5-.4s.2-.4.5-.4.5.2.5.4c-.1.2-.3.4-.5.4zm0 4.7c-.1 0-.2 0-.3-.1s-.1-.2-.1-.3V5.5c0-.2.2-.4.5-.4s.5.2.5.4v2.7c0 .1 0 .2-.1.3s-.4.1-.5.1zm-9-3.7c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5zm0 2c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5zm0 2c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5z"/></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><symbol id="orientation-toggle" viewBox="0 0 64 64"> <path d="M62.149 0h-30.149c-1.058 0-1.851 0.793-1.851 1.851v22.215c0 1.058 0.793 1.851 1.851 1.851s1.851-0.793 1.851-1.851v-20.364h26.446v42.843h-4.231c-1.058 0-1.851 0.793-1.851 1.851s0.793 1.851 1.851 1.851h6.083c1.058 0 1.851-0.793 1.851-1.851v-46.545c0-0.793-0.793-1.851-1.851-1.851z"/> <path d="M48.132 30.413h-46.281c-1.058 0-1.851 0.793-1.851 1.851v29.884c0 1.058 0.793 1.851 1.851 1.851h46.281c1.058 0 1.851-0.793 1.851-1.851v-29.884c0-1.058-0.793-1.851-1.851-1.851zM46.281 60.297h-42.578v-26.182h42.578v26.182z"/> <path d="M4.76 25.124c1.058 0 1.851-0.793 1.851-1.851 0-6.612 5.289-11.901 11.901-11.901h1.058l-0.529 0.529c-0.793 0.793-0.793 1.851 0 2.645 0.264 0.264 0.793 0.529 1.322 0.529s1.058-0.264 1.322-0.529l3.703-3.703c0.793-0.793 0.793-1.851 0-2.645l-3.703-3.703c-0.793-0.793-1.851-0.793-2.645 0s-0.793 1.851 0 2.645l0.529 0.529h-1.058c-8.727 0-15.603 7.141-15.603 15.603 0 1.058 0.793 1.851 1.851 1.851z"/> </symbol><symbol id="reload" viewBox="0 0 64 64"> <path d="M58.303 24.441c-4.535-10.583-14.614-17.386-25.953-17.638l2.772-2.772c1.008-1.008 1.008-2.268 0-3.276s-2.268-1.008-3.276 0l-7.055 7.307c-1.008 1.008-1.008 2.268 0 3.276l7.055 7.055c0.504 0.504 1.008 0.756 1.512 0.756s1.26-0.252 1.512-0.756c1.008-1.008 1.008-2.268 0-3.276l-3.779-3.78c9.827-0.252 18.898 5.543 22.929 14.614 4.535 10.583 0.756 22.929-9.071 29.48-9.575 6.299-22.425 4.787-30.488-3.528s-8.819-21.165-2.016-30.488c0.756-1.008 0.504-2.52-0.504-3.276s-2.52-0.504-3.024 0.504c-8.063 11.087-7.055 26.457 2.52 36.535 5.543 5.795 13.102 8.819 20.661 8.819 5.291 0 10.835-1.512 15.622-4.787 11.339-7.559 15.874-22.173 10.583-34.772z"/> </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="/tr/"> <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 "> Hakkında <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="/tr/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">AMP Web Siteleri</div> <div class="ap-o-header-flyout-item-description">Kusursuz web deneyimleri oluşturun</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/tr/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">Herkes için Pratik Hikayeler</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/tr/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">AMP Reklamları</div> <div class="ap-o-header-flyout-item-description">Web'de süper hızlı reklamlar</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/tr/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">AMP E-postası</div> <div class="ap-o-header-flyout-item-description">Yeni nesil e-posta</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/tr/about/how-amp-works/">AMP nasıl çalışır</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/tr/about/mission-and-vision/">Vizyon ve Misyon</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/tr/about/use-cases/">Kullanım örnekleri</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/tr/success-stories/">Başarı Hikayeleri</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Belgeleme <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="/tr/documentation/">Başlayın</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/tr/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">Kılavuzlar ve Öğreticiler</div> <div class="ap-o-header-flyout-item-description">AMP'yi kullanmaya başlayın</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/tr/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">Bileşenler</div> <div class="ap-o-header-flyout-item-description">Eksiksiz AMP kütüphanesi</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/tr/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">Örnekler</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="/tr/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">Kurslar</div> <div class="ap-o-header-flyout-item-description">Ücretsiz kurslarla AMP öğrenin</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/tr/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">Şablonlar</div> <div class="ap-o-header-flyout-item-description">Kullanıma hazır</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/tr/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">Araçlar</div> <div class="ap-o-header-flyout-item-description">Oluşturmaya başlayın</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Topluluk <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="/tr/documentation/guides-and-tutorials/contribute/">Katkı Sağlama</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/tr/community/roadmap/">Yol Haritası</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/tr/community/governance/">Yönetim</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/tr/community/working-groups/access-subscriptions/">Çalışma Grupları</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Etkinlikler <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="/tr/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="/tr/events/amp-roadshow/">AMP Tanıtım Turu</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 "> Destek <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="/tr/support/">Yardım</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/tr/support/faq/">SSS</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="Bir dil seçin" tabindex="-1"> <span class="-tw">TR</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/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">English</a> <a class="-tw" href="/de/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">Français</a> <a class="-tw" href="/ar/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">العربية</a> <a class="-tw" href="/es/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">日本語</a> <a class="-tw" href="/ko/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">Русский</a> <a class="-tw" href="/zh_cn/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">Polski</a> <a class="-tw" href="/vi/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/" role="listitem">Tiếng việt</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="Burger Menüsü" 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 "> Hakkında </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="/tr/about/websites/"> AMP Web Siteleri </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/about/ads/"> AMP Reklamları </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/about/email/"> AMP E-postası </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/about/how-amp-works/"> AMP nasıl çalışır </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/about/mission-and-vision/"> Vizyon ve Misyon </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/about/use-cases/"> Kullanım örnekleri </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/success-stories/"> Başarı Hikayeleri </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Belgeleme </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="/tr/documentation/"> Başlayın </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/documentation/guides-and-tutorials/"> Kılavuzlar ve Öğreticiler </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/documentation/components/"> Bileşenler </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/documentation/examples/"> Örnekler </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/documentation/courses/"> Kurslar </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/documentation/templates/"> Şablonlar </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/documentation/tools/"> Araçlar </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Topluluk </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="/tr/documentation/guides-and-tutorials/contribute/"> Katkı Sağlama </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/community/roadmap/"> Yol Haritası </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/community/governance/"> Yönetim </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/community/working-groups/access-subscriptions/"> Çalışma Grupları </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Etkinlikler </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="/tr/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/tr/events/amp-roadshow/"> AMP Tanıtım Turu </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="/tr/support/"> Yardım </a> </li> </ul> </nav> <div class="-us"> <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">Daha akıcı bir deneyim için biçiminizi seçin</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 -ft"> <div class="-tf"> <input class="-ua ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-ul ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-uh"></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">İçindekiler</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="-uo -ur" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul><li><a href="#selection-state-management-with-amp-selector">Selection state management with amp-selector</a></li> <li><a href="#simple-interactivity-and-data-binding-with-amp-bind">Simple interactivity and data binding with amp-bind</a><ul> <li><a href="#bindings">Bindings</a></li> <li><a href="#state">State</a></li> <li><a href="#expressions">Expressions</a><ul> <li><a href="#define-expression-macros">Define expression macros</a></li> </ul> </li> </ul> </li> <li><a href="#complex-interactivity-with-amp-script">Complex interactivity with amp-script</a><ul> <li><a href="#building-custom-widgets">Building custom widgets</a></li> <li><a href="#managing-complex-interactivity-with-state">Managing complex interactivity with state</a><ul> <li><a href="#implement-all-interactivity-in-amp-script">Implement all interactivity in amp-script</a></li> <li><a href="#combine-amp-script-and-amp-bind">Combine amp-script and amp-bind</a></li> </ul> </li> </ul> </li></ul> </div> </section> <section class="-t"> <label class="-uu -ui 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">İki Durum Kenar Çubuğu</span> </label> <label class="-uu -uc 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">İki Durum Kenar Çubuğu</span> </label> <nav class="-ut"> <a class="ap-m-breadcrumbs-crumb" href="/tr/documentation/">Belgeleme</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -un"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <a class="ap-m-breadcrumbs-crumb" href="/tr/documentation/guides-and-tutorials/">Kılavuzlar ve Öğreticiler</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -un"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <div class="ap-m-breadcrumbs-crumb">Etkileşim</div> </nav> <h1>Building personalized interactive experiences</h1> <p>This guide outlines highly personalized interactivity options to integrate into AMP pages. Like snowflakes and variable names, each website is unique and AMP's ready-made component library may not meet all your needs. Instead, AMP provides adaptable components that enable personalized solutions to complex interactivity needs. Use these components to build selection interfaces, display widgets, and process custom logic.</p> <h1 id="selection-state-management-with-amp-selector">Selection state management with amp-selector</h1> <p>Many common web experiences include presenting users with options and responding to their selections. With the <a href="/tr/documentation/components/amp-selector-v1.0/"><code>amp-selector</code></a> component, you can build menus of options, specify form input behaviors, and implement tabs.</p> <p>amp-selector offers two core features:</p> <ol> <li>Update UI based on a user selection.</li> <li>Manage single or multiple selection states.</li> </ol> <p>Define how elements behave when users make selections by allowing single or multi selection options. You can disable or highlight selector options based on user interactions and it exposes selection events enabling interaction with other AMP components.</p><div class="ap-code-preview top-frame"> <amp-state id="orientation1" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">true</script> </amp-state> <amp-state id="dimension1" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">{"width":533,"height":300}</script> </amp-state> <amp-state id="example1" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">"https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.1.html"</script> </amp-state> <div class="ap-code-preview-top-preview ap-code-preview-top-preview-1"> <div class="ap-code-preview-controls"> <button [hidden]="!orientation1" class="ap-code-preview-controls-button" on="tap: AMP.setState({ orientation1: true, dimension1: { width: dimension1.height, height: dimension1.width, } })" i-amphtml-binding> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#orientation-toggle"/></svg> </div> </button> <button class="ap-code-preview-controls-button" on="tap:AMP.setState({'example1': 'https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.1.html?' + random()})"> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#reload"/></svg> </div> </button> </div> <amp-iframe id="iframeContainer1" class="ap-code-preview-iframe i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" src="https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.1.html" layout="intrinsic" width="533" [width]="dimension1.width" height="300" [height]="dimension1.height" [src]="example1" sandbox="allow-scripts allow-popups allow-same-origin" frameborder="0" i-amphtml-binding i-amphtml-layout="intrinsic"><i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjUzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer> <div placeholder></div> </amp-iframe> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-selector</span> <span class="na">layout</span><span class="o">=</span><span class="s">"container"</span> <span class="na">class</span><span class="o">=</span><span class="s">"sample-selector"</span> <span class="na">multiple</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/landscape_sea_300x199.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"90"</span> <span class="na">height</span><span class="o">=</span><span class="s">"60"</span> <span class="na">option</span><span class="o">=</span><span class="s">"1"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Photo of a sea landscape"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/landscape_desert_300x200.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"90"</span> <span class="na">height</span><span class="o">=</span><span class="s">"60"</span> <span class="na">option</span><span class="o">=</span><span class="s">"2"</span> <span class="na">selected</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Photo of a desert landscape"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/landscape_ship_300x200.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"90"</span> <span class="na">height</span><span class="o">=</span><span class="s">"60"</span> <span class="na">option</span><span class="o">=</span><span class="s">"3"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Photo of a water landscape with ship"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/img/landscape_village_300x200.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"90"</span> <span class="na">height</span><span class="o">=</span><span class="s">"60"</span> <span class="na">option</span><span class="o">=</span><span class="s">"4"</span> <span class="na">disabled</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Photo of a village landscape"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-selector</span><span class="p">></span> </code></pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.1.html%3Fformat%3Dwebsites" class="-n -cn"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Bu kod parçacığını playground'ta aç</span> </a> <p>Here is an example in which we combine <code>amp-selector</code> with an SVG to create an interactive chart.</p><div class="ap-code-preview top-frame"> <amp-state id="orientation2" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">true</script> </amp-state> <amp-state id="dimension2" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">{"width":533,"height":300}</script> </amp-state> <amp-state id="example2" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">"https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.2.html"</script> </amp-state> <div class="ap-code-preview-top-preview ap-code-preview-top-preview-2"> <div class="ap-code-preview-controls"> <button [hidden]="!orientation2" class="ap-code-preview-controls-button" on="tap: AMP.setState({ orientation2: true, dimension2: { width: dimension2.height, height: dimension2.width, } })" i-amphtml-binding> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#orientation-toggle"/></svg> </div> </button> <button class="ap-code-preview-controls-button" on="tap:AMP.setState({'example2': 'https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.2.html?' + random()})"> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#reload"/></svg> </div> </button> </div> <amp-iframe id="iframeContainer2" class="ap-code-preview-iframe i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" src="https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.2.html" layout="intrinsic" width="533" [width]="dimension2.width" height="300" [height]="dimension2.height" [src]="example2" sandbox="allow-scripts allow-popups allow-same-origin" frameborder="0" i-amphtml-binding i-amphtml-layout="intrinsic"><i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjUzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer> <div placeholder></div> </amp-iframe> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">style</span> <span class="na">amp-custom</span><span class="p">></span> <span class="p">.</span><span class="nc">bar</span><span class="o">[</span><span class="nt">option</span><span class="o">][</span><span class="nt">selected</span><span class="o">]</span> <span class="p">{</span> <span class="n">fill</span><span class="p">:</span> <span class="kc">red</span><span class="p">;</span> <span class="k">outline</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span> <span class="p">}</span> <span class="p"></</span><span class="nt">style</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-selector</span><span class="p">></span> <span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"chart"</span> <span class="na">width</span><span class="o">=</span><span class="s">"420"</span> <span class="na">height</span><span class="o">=</span><span class="s">"150"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"title desc"</span> <span class="na">role</span><span class="o">=</span><span class="s">"img"</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span> <span class="na">id</span><span class="o">=</span><span class="s">"title"</span><span class="p">></span>A bar chart showing information<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"><</span><span class="nt">desc</span> <span class="na">id</span><span class="o">=</span><span class="s">"desc"</span><span class="p">></span>4 apples; 8 bananas; 15 kiwis; 16 oranges; 23 lemons<span class="p"></</span><span class="nt">desc</span><span class="p">></span> <span class="p"><</span><span class="nt">g</span> <span class="na">class</span><span class="o">=</span><span class="s">"bar"</span> <span class="na">option</span><span class="p">></span> <span class="p"><</span><span class="nt">rect</span> <span class="na">width</span><span class="o">=</span><span class="s">"40"</span> <span class="na">height</span><span class="o">=</span><span class="s">"19"</span><span class="p">></</span><span class="nt">rect</span><span class="p">></span> <span class="p"><</span><span class="nt">text</span> <span class="na">x</span><span class="o">=</span><span class="s">"45"</span> <span class="na">y</span><span class="o">=</span><span class="s">"9.5"</span> <span class="na">dy</span><span class="o">=</span><span class="s">".35em"</span><span class="p">></span>4 apples<span class="p"></</span><span class="nt">text</span><span class="p">></span> <span class="p"></</span><span class="nt">g</span><span class="p">></span> <span class="p"><</span><span class="nt">g</span> <span class="na">class</span><span class="o">=</span><span class="s">"bar"</span> <span class="na">option</span><span class="p">></span> <span class="p"><</span><span class="nt">rect</span> <span class="na">width</span><span class="o">=</span><span class="s">"80"</span> <span class="na">height</span><span class="o">=</span><span class="s">"19"</span> <span class="na">y</span><span class="o">=</span><span class="s">"20"</span><span class="p">></</span><span class="nt">rect</span><span class="p">></span> <span class="p"><</span><span class="nt">text</span> <span class="na">x</span><span class="o">=</span><span class="s">"85"</span> <span class="na">y</span><span class="o">=</span><span class="s">"28"</span> <span class="na">dy</span><span class="o">=</span><span class="s">".35em"</span><span class="p">></span>8 bananas<span class="p"></</span><span class="nt">text</span><span class="p">></span> <span class="p"></</span><span class="nt">g</span><span class="p">></span> <span class="p"><</span><span class="nt">g</span> <span class="na">class</span><span class="o">=</span><span class="s">"bar"</span> <span class="na">option</span><span class="p">></span> <span class="p"><</span><span class="nt">rect</span> <span class="na">width</span><span class="o">=</span><span class="s">"150"</span> <span class="na">height</span><span class="o">=</span><span class="s">"19"</span> <span class="na">y</span><span class="o">=</span><span class="s">"40"</span><span class="p">></</span><span class="nt">rect</span><span class="p">></span> <span class="p"><</span><span class="nt">text</span> <span class="na">x</span><span class="o">=</span><span class="s">"150"</span> <span class="na">y</span><span class="o">=</span><span class="s">"48"</span> <span class="na">dy</span><span class="o">=</span><span class="s">".35em"</span><span class="p">></span>15 kiwis<span class="p"></</span><span class="nt">text</span><span class="p">></span> <span class="p"></</span><span class="nt">g</span><span class="p">></span> <span class="p"><</span><span class="nt">g</span> <span class="na">class</span><span class="o">=</span><span class="s">"bar"</span> <span class="na">option</span> <span class="na">selected</span><span class="p">></span> <span class="p"><</span><span class="nt">rect</span> <span class="na">width</span><span class="o">=</span><span class="s">"160"</span> <span class="na">height</span><span class="o">=</span><span class="s">"19"</span> <span class="na">y</span><span class="o">=</span><span class="s">"60"</span><span class="p">></</span><span class="nt">rect</span><span class="p">></span> <span class="p"><</span><span class="nt">text</span> <span class="na">x</span><span class="o">=</span><span class="s">"161"</span> <span class="na">y</span><span class="o">=</span><span class="s">"68"</span> <span class="na">dy</span><span class="o">=</span><span class="s">".35em"</span><span class="p">></span>16 oranges<span class="p"></</span><span class="nt">text</span><span class="p">></span> <span class="p"></</span><span class="nt">g</span><span class="p">></span> <span class="p"><</span><span class="nt">g</span> <span class="na">class</span><span class="o">=</span><span class="s">"bar"</span> <span class="na">option</span><span class="p">></span> <span class="p"><</span><span class="nt">rect</span> <span class="na">width</span><span class="o">=</span><span class="s">"230"</span> <span class="na">height</span><span class="o">=</span><span class="s">"19"</span> <span class="na">y</span><span class="o">=</span><span class="s">"80"</span><span class="p">></</span><span class="nt">rect</span><span class="p">></span> <span class="p"><</span><span class="nt">text</span> <span class="na">x</span><span class="o">=</span><span class="s">"235"</span> <span class="na">y</span><span class="o">=</span><span class="s">"88"</span> <span class="na">dy</span><span class="o">=</span><span class="s">".35em"</span><span class="p">></span>23 lemons<span class="p"></</span><span class="nt">text</span><span class="p">></span> <span class="p"></</span><span class="nt">g</span><span class="p">></span> <span class="p"></</span><span class="nt">svg</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-selector</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> </code></pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.2.html%3Fformat%3Dwebsites" class="-n -cn"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Bu kod parçacığını playground'ta aç</span> </a> <h1 id="simple-interactivity-and-data-binding-with-amp-bind">Simple interactivity and data binding with amp-bind</h1> <p>Users expect the modern web to react to their interactions and reflect changes they've made. The <code>amp-bind</code> component enables state setting, reading, UI changes, and can process user inputs and simple logic.</p><div class="ap-code-preview top-frame"> <amp-state id="orientation3" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">true</script> </amp-state> <amp-state id="dimension3" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">{"width":533,"height":300}</script> </amp-state> <amp-state id="example3" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">"https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.3.html"</script> </amp-state> <div class="ap-code-preview-top-preview ap-code-preview-top-preview-3"> <div class="ap-code-preview-controls"> <button [hidden]="!orientation3" class="ap-code-preview-controls-button" on="tap: AMP.setState({ orientation3: true, dimension3: { width: dimension3.height, height: dimension3.width, } })" i-amphtml-binding> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#orientation-toggle"/></svg> </div> </button> <button class="ap-code-preview-controls-button" on="tap:AMP.setState({'example3': 'https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.3.html?' + random()})"> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#reload"/></svg> </div> </button> </div> <amp-iframe id="iframeContainer3" class="ap-code-preview-iframe i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" src="https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.3.html" layout="intrinsic" width="533" [width]="dimension3.width" height="300" [height]="dimension3.height" [src]="example3" sandbox="allow-scripts allow-popups allow-same-origin" frameborder="0" i-amphtml-binding i-amphtml-layout="intrinsic"><i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjUzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer> <div placeholder></div> </amp-iframe> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-state</span> <span class="na">id</span><span class="o">=</span><span class="s">"foo"</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">"bar"</span><span class="o">:</span> <span class="s2">"State is set."</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-state</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span> <span class="na">[text]</span><span class="o">=</span><span class="s">"foo.bar"</span><span class="p">></span>No state is set<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({})"</span><span class="p">></span>Set State<span class="p"></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.3.html%3Fformat%3Dwebsites" class="-n -cn"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Bu kod parçacığını playground'ta aç</span> </a> <p>The <code>amp-bind</code> component performs no evaluations on page load, with the exception of combining with amp-list.</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"> Read more on evaluating state on page load with amp-list in <a href="/tr/documentation/guides-and-tutorials/develop/interactivity_guide/client_rendering/">Client-side rendering in AMP</a>. </div> </div><p></p> <p>Instead it waits until a user triggers an action that interacts with amp-bind. This supports Core Web Vitals by not performing calculations that would slow down page load, and disallows page layout shifts, increasing speed to first user interaction.</p> <p><code>amp-bind</code> uses its own syntax to build interactivity and bind elements. It utilized three main concepts: state, expressions and bindings.</p> <h2 id="bindings">Bindings</h2> <p>Bindings are special attributes that bring it all together by linking an element’s property to an expression. A binding is a special attribute in the form <code>[property]</code> . This links an element’s property to a state. Use bindings to update text, change an image’s size, or allow users to specify appearances.</p> <p>Read more about <a href="/tr/documentation/components/amp-bind/#bindings">bindings here</a> and see a full list of bindable attributes for <a href="/tr/documentation/components/amp-bind/#amp-component-specific-attributes">AMP components</a> and <a href="/tr/documentation/components/amp-bind/#html-attributes">HTML elements</a>.</p> <h2 id="state">State</h2> <p>Each AMP page that uses <code>amp-bind</code> has its own scoped, mutable JSON data with a size limit of 100kb. This data is the state.</p><div class="ap-code-preview top-frame"> <amp-state id="orientation4" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">true</script> </amp-state> <amp-state id="dimension4" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">{"width":533,"height":300}</script> </amp-state> <amp-state id="example4" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">"https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.4.html"</script> </amp-state> <div class="ap-code-preview-top-preview ap-code-preview-top-preview-4"> <div class="ap-code-preview-controls"> <button [hidden]="!orientation4" class="ap-code-preview-controls-button" on="tap: AMP.setState({ orientation4: true, dimension4: { width: dimension4.height, height: dimension4.width, } })" i-amphtml-binding> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#orientation-toggle"/></svg> </div> </button> <button class="ap-code-preview-controls-button" on="tap:AMP.setState({'example4': 'https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.4.html?' + random()})"> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#reload"/></svg> </div> </button> </div> <amp-iframe id="iframeContainer4" class="ap-code-preview-iframe i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" src="https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.4.html" layout="intrinsic" width="533" [width]="dimension4.width" height="300" [height]="dimension4.height" [src]="example4" sandbox="allow-scripts allow-popups allow-same-origin" frameborder="0" i-amphtml-binding i-amphtml-layout="intrinsic"><i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjUzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer> <div placeholder></div> </amp-iframe> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-state</span> <span class="na">id</span><span class="o">=</span><span class="s">"todos"</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">"Learn AMP"</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-state</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">"todoInput"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">on</span><span class="o">=</span><span class="s">"input-throttled:AMP.setState({</span> <span class="s"> newTodo: event.value</span> <span class="s"> })"</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({</span> <span class="s"> todos: todos.concat(newTodo)</span> <span class="s"> })"</span><span class="p">></span> Add Todo <span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-list</span> <span class="na">[src]</span><span class="o">=</span><span class="s">"todos"</span> <span class="na">src</span><span class="o">=</span><span class="s">"amp-state:todos"</span> <span class="na">height</span><span class="o">=</span><span class="s">"20"</span> <span class="na">items</span><span class="o">=</span><span class="s">"."</span> <span class="na">[is-layout-container]</span><span class="o">=</span><span class="s">true</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span><span class="p">></span>{{.}}<span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.4.html%3Fformat%3Dwebsites" class="-n -cn"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Bu kod parçacığını playground'ta aç</span> </a> <p><code>amp-bind</code> supports predefined states, state initialization after user interaction, and updates to states. You may reference, add, or change any variables defined as key value pairs by using expressions, bindings, actions and events.</p> <p>There are multiple ways to declare and use state. Read more on state in the <a href="/tr/documentation/components/amp-bind/#state">amp-bind documentation</a>.</p> <h2 id="expressions">Expressions</h2> <p>The <code>amp-bind</code> component uses JavaScript-like expressions to perform operations on data from user input and state variables.</p><div class="ap-code-preview top-frame"> <amp-state id="orientation5" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">true</script> </amp-state> <amp-state id="dimension5" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">{"width":533,"height":300}</script> </amp-state> <amp-state id="example5" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">"https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.5.html"</script> </amp-state> <div class="ap-code-preview-top-preview ap-code-preview-top-preview-5"> <div class="ap-code-preview-controls"> <button [hidden]="!orientation5" class="ap-code-preview-controls-button" on="tap: AMP.setState({ orientation5: true, dimension5: { width: dimension5.height, height: dimension5.width, } })" i-amphtml-binding> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#orientation-toggle"/></svg> </div> </button> <button class="ap-code-preview-controls-button" on="tap:AMP.setState({'example5': 'https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.5.html?' + random()})"> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#reload"/></svg> </div> </button> </div> <amp-iframe id="iframeContainer5" class="ap-code-preview-iframe i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" src="https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.5.html" layout="intrinsic" width="533" [width]="dimension5.width" height="300" [height]="dimension5.height" [src]="example5" sandbox="allow-scripts allow-popups allow-same-origin" frameborder="0" i-amphtml-binding i-amphtml-layout="intrinsic"><i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjUzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer> <div placeholder></div> </amp-iframe> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">p</span> <span class="na">[text]</span><span class="o">=</span><span class="s">"myExpressionsState.foo"</span><span class="p">></</span><span class="nt">p</span><span class="p">></span> <span class="c"></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({myExpressionsState: {foo: 1 + '1'}})"</span><span class="p">></span> foo: 1 + "1" <span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="c"></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({myExpressionsState: {foo: 1 + + '1'}})"</span><span class="p">></span> foo: 1 + + "1" <span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="c"></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({myExpressionsState: {foo: !0}})"</span><span class="p">></span>foo: !0<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="c"></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({myExpressionsState: {foo: null || 'default'}})"</span><span class="p">></span> null || "default" <span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="c"></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:AMP.setState({myExpressionsState: {foo: [1, 2, 3].map(x => x + 1)}})"</span> <span class="p">></span> [1, 2, 3].map(x => x + 1) <span class="p"></</span><span class="nt">button</span><span class="p">></span> </code></pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.5.html%3Fformat%3Dwebsites" class="-n -cn"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Bu kod parçacığını playground'ta aç</span> </a> <p>These expressions have an <a href="/tr/documentation/components/amp-bind/#allowed-listed-functions">allowlist of supported functions</a> with slight <a href="/tr/documentation/components/amp-bind/#differences-from-javascript">differences and limitations</a> from classic JavaScript. Read more on <a href="/tr/documentation/components/amp-bind/#expressions">expressions here</a>.</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"> Expressions can become hard to maintain quickly. Make sure to keep it simple and use amp-bind-macro and amp-action-macro to encapsulate common logic. </div> </div><p></p> <h3 id="define-expression-macros">Define expression macros</h3> <p>You may reuse an amp-bind expression fragment by defining an <a href="/tr/documentation/components/amp-bind/#defining-macros-with-amp-bind-macro">amp-bind-macro</a>. The <code>amp-bind-macro</code> element allows an expression that takes zero or more arguments and references the current state. Invoke <code>amp-bind-macro</code> like a function, referencing the <code>id</code> attribute value from anywhere in the document.</p><div class="ap-code-preview top-frame"> <amp-state id="orientation6" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">true</script> </amp-state> <amp-state id="dimension6" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">{"width":533,"height":300}</script> </amp-state> <amp-state id="example6" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">"https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.6.html"</script> </amp-state> <div class="ap-code-preview-top-preview ap-code-preview-top-preview-6"> <div class="ap-code-preview-controls"> <button [hidden]="!orientation6" class="ap-code-preview-controls-button" on="tap: AMP.setState({ orientation6: true, dimension6: { width: dimension6.height, height: dimension6.width, } })" i-amphtml-binding> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#orientation-toggle"/></svg> </div> </button> <button class="ap-code-preview-controls-button" on="tap:AMP.setState({'example6': 'https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.6.html?' + random()})"> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#reload"/></svg> </div> </button> </div> <amp-iframe id="iframeContainer6" class="ap-code-preview-iframe i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" src="https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.6.html" layout="intrinsic" width="533" [width]="dimension6.width" height="300" [height]="dimension6.height" [src]="example6" sandbox="allow-scripts allow-popups allow-same-origin" frameborder="0" i-amphtml-binding i-amphtml-layout="intrinsic"><i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjUzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer> <div placeholder></div> </amp-iframe> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-bind-macro</span> <span class="na">id</span><span class="o">=</span><span class="s">"circleArea"</span> <span class="na">arguments</span><span class="o">=</span><span class="s">"radius"</span> <span class="na">expression</span><span class="o">=</span><span class="s">"3.14 * radius * radius"</span> <span class="p">></</span><span class="nt">amp-bind-macro</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span> Input a radius value <span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"number"</span> <span class="na">min</span><span class="o">=</span><span class="s">"0"</span> <span class="na">max</span><span class="o">=</span><span class="s">"100"</span> <span class="na">value</span><span class="o">=</span><span class="s">"0"</span> <span class="na">on</span><span class="o">=</span><span class="s">"input-throttled:AMP.setState({myCircle:{radius: event.value}})"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span> The circle has an area of <span class="p"><</span><span class="nt">span</span> <span class="na">[text]</span><span class="o">=</span><span class="s">"circleArea(myCircle.radius)"</span><span class="p">></span>0<span class="p"></</span><span class="nt">span</span><span class="p">></span>. <span class="p"></</span><span class="nt">p</span><span class="p">></span> </code></pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.6.html%3Fformat%3Dwebsites" class="-n -cn"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Bu kod parçacığını playground'ta aç</span> </a> <p>A macro can also call other macros defined before itself. A macro cannot call itself recursively.</p> <h1 id="complex-interactivity-with-amp-script">Complex interactivity with amp-script</h1> <p>Some experiences require highly complex solutions with custom logic. In these cases, use the <code>amp-script</code> component to embed features into your AMP pag. You can write vanilla JavaScript, or import a library such as Preact, all without sacrificing performance. Use it to manipulate the DOM or import personalized widgets.</p> <p><code>amp-script</code> has a <a href="/tr/documentation/components/amp-script/#size-of-javascript-code">limit of 150 kilobytes</a> of custom JavaScript on each page, shared between each instance of <code><amp-script></code>. It has an <a href="/tr/documentation/components/amp-script/#allowed-apis">allowlist of APIs</a> and some <a href="/tr/documentation/components/amp-script/#security-features">security features</a> to be aware of.</p> <h2 id="building-custom-widgets">Building custom widgets</h2> <p>We believe the web should be delightful, immersive and unique. Unique websites will require functionality and style that’s personal to their brand. With amp-script, you can import custom widgets anywhere in your page. Use these widgets to create beautiful interfaces that run on complex logic written in vanilla JavaScript, Preact, or whatever you need. View the <a href="https://github.com/ampproject/worker-dom/tree/main/demo/preact-todomvc">Worker DOM Preact demo here</a>.</p> <h2 id="managing-complex-interactivity-with-state">Managing complex interactivity with state</h2> <p>You may need to perform complex calculations or retrieve and process information from foundational logic that change the DOM. You can manage this logic by wrapping the entire page in an amp-script element, but in doing so you lose some of the AMP benefits. To keep these benefits, you may off-load complex calculations to amp-script, then combine it with amp-bind to update and reflect the new state.</p> <h3 id="implement-all-interactivity-in-amp-script">Implement all interactivity in amp-script</h3> <p>In some cases, wrapping an entire page in <code><amp-script></code> is the best way to create highly interactive experiences with AMP.</p> <p>While this solution gives you absolute control over the page, it does remove some of the benefits AMP provides. Such as creating new AMP components. The amp-script component can add any HTML element to the page DOM, but is limited to <a href="/tr/documentation/components/amp-layout/"><code>amp-layout</code></a> and <a href="/tr/documentation/components/amp-img/"><code>amp-img</code></a> components.</p> <h3 id="combine-amp-script-and-amp-bind">Combine amp-script and amp-bind</h3> <p>The amp-script components lets you implement complex domain logic that would cause amp-bind expressions to become too complicated. Instead of wrapping the entire page in <code><amp-script></code> tags, offload the logic to amp-script and use <code>amp-bind</code> to update the page state with the results. There is one caveat, user’s must interact with an element that triggers the calculation. However, once the information is processed, <code>amp-script</code> can update the page’s state on it’s own by calling <a href="/tr/documentation/components/amp-bind/#updating-state-variables-with-amp.setstate()"><code>AMP.setState</code></a>. The powers of <code>amp-bind</code> will handle the rest to update the DOM.</p><div class="ap-code-preview top-frame"> <amp-state id="orientation7" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">true</script> </amp-state> <amp-state id="dimension7" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">{"width":533,"height":300}</script> </amp-state> <amp-state id="example7" class="i-amphtml-layout-container" i-amphtml-layout="container"> <script type="application/json">"https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.7.html"</script> </amp-state> <div class="ap-code-preview-top-preview ap-code-preview-top-preview-7"> <div class="ap-code-preview-controls"> <button [hidden]="!orientation7" class="ap-code-preview-controls-button" on="tap: AMP.setState({ orientation7: true, dimension7: { width: dimension7.height, height: dimension7.width, } })" i-amphtml-binding> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#orientation-toggle"/></svg> </div> </button> <button class="ap-code-preview-controls-button" on="tap:AMP.setState({'example7': 'https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.7.html?' + random()})"> <div class="ap-a-ico ap-code-preview-controls-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#reload"/></svg> </div> </button> </div> <amp-iframe id="iframeContainer7" class="ap-code-preview-iframe i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" src="https://preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.7.html" layout="intrinsic" width="533" [width]="dimension7.width" height="300" [height]="dimension7.height" [src]="example7" sandbox="allow-scripts allow-popups allow-same-origin" frameborder="0" i-amphtml-binding i-amphtml-layout="intrinsic"><i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer"><img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMwMCIgd2lkdGg9IjUzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer> <div placeholder></div> </amp-iframe> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"amp-script-src"</span> <span class="na">content</span><span class="o">=</span><span class="s">"sha384-qdYQLoj2SRKXBu33BwIoyRKorw0b0nQ8UPIoIMc9wL8KVLcKODSAK52yNGQNS_vN"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">style</span> <span class="na">amp-custom</span><span class="p">></span> <span class="p">.</span><span class="nc">clickedButton</span> <span class="p">{</span> <span class="k">border</span><span class="p">:</span> <span class="mi">5</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">green</span><span class="p">;</span> <span class="p">}</span> <span class="p"></</span><span class="nt">style</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-script</span> <span class="na">width</span><span class="o">=</span><span class="s">"200"</span> <span class="na">height</span><span class="o">=</span><span class="s">"100"</span> <span class="na">script</span><span class="o">=</span><span class="s">"hello-world"</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"scriptStyle"</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span><span class="p">></span>Hello amp-script!<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-script</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"hello-world"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/plain"</span> <span class="na">target</span><span class="o">=</span><span class="s">"amp-script"</span><span class="p">></span> <span class="kr">const</span> <span class="nx">btn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'button'</span><span class="p">);</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="s1">'Hello World!'</span><span class="p">;</span> <span class="nx">AMP</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> <span class="nx">scriptStyle</span><span class="o">:</span> <span class="s2">"clickedButton"</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">body</span><span class="p">></span> </code></pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/tr/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences.example.7.html%3Fformat%3Dwebsites" class="-n -cn"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Bu kod parçacığını playground'ta aç</span> </a> </section> <section class="-t"> <hr> <ul class="ap-o-mini-card-list"> <li class="ap-o-mini-card-list-item"> <div class="ap-m-mini-card"> <amp-img alt="Author avatar" src="https://github.com/CrystalOnScript.png?size=38" width="38" height="38" class="large i-amphtml-layout-responsive i-amphtml-layout-size-defined" style="max-width: 38px" layout="responsive" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer> </amp-img> <span> <strong>Written by <a href="https://github.com/CrystalOnScript" rel="nofollow" target="_blank"> @CrystalOnScript </a> </strong> <br> <small> with contributions from <strong> <a href="https://github.com/sbenz" rel="nofollow" target="_blank"> @sbenz </a> </strong> </small> </span> </div></li> </ul> </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="/tr/documentation/guides-and-tutorials/stories/develop/interactivity_guide/personalized_experiences/"> <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="/tr/documentation/guides-and-tutorials/ads/develop/interactivity_guide/personalized_experiences/"> <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="/tr/documentation/guides-and-tutorials/email/develop/interactivity_guide/personalized_experiences/"> <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-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>Başlangıç</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/create/"> <span>İlk AMP›nizi</span> <span class="nav-link-lastword">oluşturun<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/create/basic_markup/"> AMP HTML Sayfanızı Oluşturun </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/create/include_image/"> Bir Görüntü Ekleyin </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/create/presentation_layout/"> Sunum ve Yerleşimi Değiştirme </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/create/prepare_for_discovery/"> Sayfanızı Keşif ve Dağıtım için Hazırlama </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/create/actions_events/"> Actions and events </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/create/preview_and_validate/"> Preview and validate </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/create/publish/"> Final steps before publishing </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/converting/"> <span>Convert HTML to</span> <span class="nav-link-lastword">AMP<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/converting/setting-up/"> Kurulum </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/converting/building-page/"> Normal bir HTML sayfası oluşturma </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/converting/resolving-errors/"> Doğrulama hatalarını çözme </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/converting/discoverable/"> Sayfanızı keşfedilebilir hale getirme </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/converting/congratulations/"> Tebrikler! </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/add_advanced/"> <span>Add advanced AMP</span> <span class="nav-link-lastword">features<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/add_advanced/setting_up/"> Kurulum </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/add_advanced/review_code/"> Başlangıç kodunu gözden geçirme </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/add_advanced/adding_components/"> Genişletilmiş AMP bileşenleri ekleme </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/add_advanced/adding_carousels/"> Resim döngüsü ekleme </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/add_advanced/tracking_data/"> Analizle etkileşimi izleyin </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/add_advanced/navigating/"> Sitenizde gezinme </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/add_advanced/fonts/"> Yazı tipi ekleme </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/start/add_advanced/congratulations/"> Tebrikler! </a> </li> </ul> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Öğrenme</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/amp-actions-and-events/"> Eylemler ve olaylar </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/common_attributes/"> Ortak öğe nitelikleri </a> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP HTML Teknik Özellikleri</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/spec/amp-html-responsive-attributes/"> AMP HTML Responsive Attributes </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/spec/amp-video-interface/"> Video in AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/spec/amphtml/"> AMP HTML Teknik Özellikleri </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/spec/amp-boilerplate/"> AMP Standart Metin Kodu </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/spec/release-schedule/"> AMP Sürüm Yayınlama Programı </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/experimental/"> Deneysel Bileşenler </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/amp-html-layout/"> <span>AMP's Layout System</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/amp-html-layout/"> AMPHTML Yerleşim Sistemi </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/amp-html-layout/layouts_demonstrated/"> Demonstrating AMP layouts </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Doğrulama İş Akışı</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/validation-workflow/validate_amp/"> AMP Sayfalarını Doğrulama </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/validation-workflow/validation_errors/"> AMP Doğrulama Hataları </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP Önbellekleri ve CORS</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/how_amp_pages_are_cached/"> AMP sayfaları nasıl önbelleğe alınır? </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cache-debugging/"> Hata Ayıklama AMP Önbellek sorunları </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cache-urls/"> AMP Önbellek URL Biçimi ve İstek İşleme </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cors-requests/"> AMP'de CORS </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/learn/combine-amp-pwa/"> AMP ve PWA arasında nasıl bir ilişki vardır? </a> </li> </ul> </li> <li class="nav-item active level-1"> <span class="nav-link"> <span>Geliştirme</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/style_and_layout/"> <span>Duyarlı AMP Sayfaları Oluşturma</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/style_and_layout/style_pages/"> Desteklenen CSS </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/style_and_layout/control_layout/"> Desteklenen Düzenler </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/style_and_layout/placeholders/"> Yer tutucular ve yedekler </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/style_and_layout/art_direction/"> Srcset, boyutlar ve yüksekliklere sahip duyarlı resimler </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/style_and_layout/responsive_design/"> Create responsive AMP pages </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/style_and_layout/custom_fonts/"> Özel yazı tipleri ekleme </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/"> <span>Include media, iframes & third-party content</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/"> Include images & video </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/third_party_components/"> Üçüncü Taraf İçeriği Ekleme </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/iframes/"> iframe'leri ekleme </a> </li> </ul> </li> <li class="nav-item active level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity_guide/"> <span>Interactivity</span> </a> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity_guide/foundations/"> Interactivity foundations </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity_guide/ready_made/"> Ready-made interactivity with AMP components </a> </li> <li class="nav-item active level-3" autoscroll> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity_guide/personalized_experiences/"> Building personalized interactive experiences </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity_guide/client_rendering/"> Client-side rendering in AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Animasyon ve Geçiş</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/animations/triggering_css_animations/"> CSS animasyonlarını ve geçişlerini tetikleme </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/animations/introduction_to_animations/"> Karmaşık animasyonlara giriş </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/custom-javascript/"> Use custom JavaScript in AMP pages </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/monetization/"> <span>Monetize your AMP pages</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/monetization/"> AMP sayfanızdan reklamlarla para kazanma </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/monetization/ads_vendors/"> Reklam satıcıları </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/monetization/content_encryption/"> Abonelik içeriğinizi istemci tarafı şifrelemesiyle koruma </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity/"> <span>Create interactive AMP</span> <span class="nav-link-lastword">pages<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity/prereqs-setup/"> Kurulum </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity/get-familiar/"> Başlangıç kodunu tanıma </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity/advanced-interactivity/"> Etkileşimi geliştirme </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity/remote-data/"> Uzak veri ile çalışma </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/interactivity/wrapping-up/"> Özet </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/login_requiring/"> <span>Create a login-requiring AMP</span> <span class="nav-link-lastword">page<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/login_requiring/login/"> Giriş yapma </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/login_requiring/add_comment/"> Yorum ekleme </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/login_requiring/logout/"> Çıkış yapma </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/login_requiring/summary/"> Özet </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/custom-javascript-tutorial/"> Create a UI widget with custom JavaScript <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/live_blog/"> Canlı blog oluşturma <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/develop/seatmap/"> Koltuk planı oluşturma <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>ENTEGRE ETME</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/integrate/web-story-player-guide/"> Creating Web Story experiences using the Web Story Player on non-AMP sites </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/integrate/amp-in-pwa/"> AMP'yi PWA'nız için bir veri kaynağı olarak kullanma </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/integrate/amp-to-pwa/"> AMP sayfalarınızdan PWA'nızı önceden yükleme </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/integrate/integrate-with-apps/"> AMP'yi uygulamanıza entegre etme </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/integrate/embed-stories/"> Integrate stories in AMP pages </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/integrate/embed-stories-nonamp/"> Integrate Web Stories in non-AMP pages </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>OPTİMİZE ETME VE ÖLÇME</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/publishing_checklist/"> AMP yayınlama kontrol listesi </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/"> <span>Analytics›i Yapılandırın</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/analytics_basics/"> Analytics: Temel Bilgiler </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/deep_dive_analytics/"> AMP Analytics Derinlemesine Giriş </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/use_cases/"> Kullanım Durumları </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/analytics-vendors/"> Analitik Sağlayıcıları </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/"> <span>Using an AMP Optimizer</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/explainer/"> AMP Optimizer nasıl çalışır? </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/node-amp-optimizer/"> Node.js AMP Optimizer Kılavuzu </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-managing-user-state/"> Kimliği doğrulanmamış kullanıcı durumunu AMP ile yönetme </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/signed-exchange/"> Serve AMP using signed exchanges </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/discovery/"> Sayfanızı Bulunabilir Yapma </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/engagement/"> Kullanıcı etkileşimini geliştirme </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/optimize_amp/"> Optimize your hosted AMP pages </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/secure-pages/"> Üçüncü taraf saldırılarına karşı koruma </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp_to_pwa/"> AMP sitenizi PWA'ya dönüştürme <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-as-pwa/"> Kolay çevrimdışı erişim ve iyileştirilmiş performans </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/optimize-and-measure/tracking-engagement/"> AMP sayfalarınız için temel analiz nasıl yapılandırılır? <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/contribute/"> <span>Contribute</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/contribute/"> Katkıda Bulunma Yolları </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/contribute/contribute-documentation/"> <span>Contribute documentation</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/contribute/contribute-documentation/documentation-types/websites/"> Belgeleme türleri </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/contribute/contribute-documentation/terminology/websites/"> AMP terminology </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/websites/"> Formatting guides & tutorials </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/contribute/integrate-your-analytics-tools/"> Analiz aracınızı AMP ile entegre etme </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/contribute/vendor-contributions/"> <span>Third party contributions</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/contribute/vendor-contributions/release-schedule/"> Release Schedule </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/tr/documentation/guides-and-tutorials/websites/contribute/translations/"> Contribute translations </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">Tabii ki, bu site AMP ile yapıldı!</div> <div class="-l"> <h5 class="-c">Bizi takip edin</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">Genel Bakış</h5> <ul class="-y"> <li class="-b"><a href="/tr/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Çerçevesi</a></li> <li class="-b"><a href="/tr/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>Kullanım Örnekleri</a></li> <li class="-b"><a href="/tr/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>Başarı hikayeleri</a></li> <li class="-b"><a href="/tr/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>İşlevsellik</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Belgeler</h5> <ul class="-y"> <li class="-b"><a href="/tr/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>Başlayın</a></li> <li class="-b"><a href="/tr/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>Kılavuzlar ve Öğreticiler</a></li> <li class="-b"><a href="/tr/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>Bileşenler</a></li> <li class="-b"><a href="/tr/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>Örnekler</a></li> <li class="-b"><a href="/tr/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>Tasarım Şablonları</a></li> <li class="-b"><a href="/tr/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>Araçlar</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Topluluk</h5> <ul class="-y"> <li class="-b"><a href="/tr/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Platform ve Tedarikçi İş Ortakları</a></li> <li class="-b"><a href="/tr/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>Katkı Sağlama</a></li> <li class="-b"><a href="/tr/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>Yol Haritası</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">Etkinlikler</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 Konferansı 2020</a></li> <li class="-b"><a href="/tr/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 Katılımcı Zirvesi 2019</a></li> </ul> <h5 class="-g">AMP Marka Materyalleri</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>Stil kılavuzu</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>Logolar</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">Gizlilik Politikası</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> <aside class="ap-o-translation-hint"> <p class="ap-o-translation-hint-wrapper">Sadly this page isn't translated yet, but will be shortly - check back soon!</p> </aside> <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":"guides-and-tutorials","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"guides-and-tutorials","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":"guides-and-tutorials","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":"guides-and-tutorials","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"guides-and-tutorials","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"guides-and-tutorials","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":"guides-and-tutorials","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"guides-and-tutorials","event_label":"sidebar","event_name":"sidebar"}},"tocLink":{"on":"click","selector":".ap-o-toc a","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"toc","event_name":"toc"}},"tocToggle":{"on":"click","selector":".ap-o-toc label","vars":{"event_action":"toggle","event_category":"guides-and-tutorials","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="Onayı reddet"> <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="Çerez kullanımını kabul et">Anladım!</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%))}}@keyframes collapse{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes expand{0%{transform:scale(0)}to{transform:scale(1)}}</style></body></html>