Microsoft Clarity documentation

<!DOCTYPE html><html class=" is-full hub has-default-focus theme-light" lang="en-us" dir="ltr" data-authenticated="false" data-auth-status-determined="false" data-target="docs" x-ms-format-detection="none"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta property="og:title" content="Microsoft Clarity documentation" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://learn.microsoft.com/en-us/clarity/" /><meta property="og:description" content="Learn how to use Clarity, a behavioral analysis tool that helps you understand user experience, to make your website work better." /><meta property="og:image" content="https://learn.microsoft.com/en-us/media/open-graph-image.png" /> <meta property="og:image:alt" content="Microsoft Learn" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@MicrosoftLearn" /> <meta name="color-scheme" content="light dark"><meta name="author" content="AlekhyaSasi" /> <meta name="breadcrumb_path" content="/clarity/breadcrumb/toc.json" /> <meta name="depot_name" content="MSDN.clarity-docs" /> <meta name="description" content="Learn how to use Clarity, a behavioral analysis tool that helps you understand user experience, to make your website work better." /> <meta name="document_id" content="27d117fc-89af-a57c-e1e2-e9ba31e47cdc" /> <meta name="document_version_independent_id" content="28530a5f-41a0-b794-f688-6d445ee87dc2" /> <meta name="feedback_help_link_type" content="" /> <meta name="feedback_help_link_url" content="" /> <meta name="feedback_product_url" content="" /> <meta name="feedback_system" content="None" /> <meta name="git_commit_id" content="aec610d7c4fd5e8335cc8c8317db0bb1b5818e73" /> <meta name="gitcommit" content="https://github.com/MicrosoftDocs/clarity-docs-pr/blob/aec610d7c4fd5e8335cc8c8317db0bb1b5818e73/clarity-docs/index.yml" /> <meta name="locale" content="en-us" /> <meta name="ms.author" content="v-alpunnamar" /> <meta name="ms.date" content="02/19/2025" /> <meta name="ms.service" content="clarity" /> <meta name="ms.topic" content="hub-page" /> <meta name="original_content_git_url" content="https://github.com/MicrosoftDocs/clarity-docs-pr/blob/live/clarity-docs/index.yml" /> <meta name="page_type" content="hub" /> <meta name="schema" content="Hub" /> <meta name="site_name" content="Docs" /> <meta name="summary" content="Learn how to use Clarity, a behavioral analysis tool that helps you understand user experience, to make your website work better." /> <meta name="uhfHeaderId" content="MSDocsHeader-Clarity" /> <meta name="updated_at" content="2025-02-19 04:20 PM" /> <meta name="persistent_id" content="052cc7c5-0161-85a8-885c-f2a1a6200372" /> <meta name="platform_id" content="052cc7c5-0161-85a8-885c-f2a1a6200372" /> <meta name="cmProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/029d2366-5c16-4816-8cb8-dadeaf730762" data-source="generated" /> <meta name="spProducts" content="https://authoring-docs-microsoft.poolparty.biz/devrel/082dcafd-01b6-47e9-8abe-5795dbab1ea9" data-source="generated" /> <meta name="github_feedback_content_git_url" content="https://github.com/MicrosoftDocs/clarity-docs-pr/blob/live/clarity-docs/index.yml" /><link href="https://learn.microsoft.com/en-us/clarity/" rel="canonical"><title>Microsoft Clarity documentation | Microsoft Learn</title><link rel="stylesheet" href="/static/assets/0.4.029716302/styles/site-ltr.css"> <script id="msdocs-script"> var msDocs = {environment: { supportLevel: 'production', accessLevel: 'online', reviewFeatures: false, systemContent: true, azurePortalHostname: 'portal.azure.com', legacyHosting: false, siteName: 'learn', },data: { timeOrigin: Date.now(), contentLocale: 'en-us', contentDir: 'ltr', userLocale: 'en-us', userDir: 'ltr', pageTemplate: 'Hub', brand: 'dynamics', context: {}, hasBinaryRating: false, feedbackHelpLinkType:'', feedbackHelpLinkUrl:'', standardFeedback: false, showFeedbackReport: false, enableTutorialFeedback: false, feedbackSystem: 'None', feedbackGitHubRepo: '', feedbackProductUrl: '',extendBreadcrumb: false,isEditDisplayable: false, hideViewSource: false, hasPageActions: false, hasPrintButton: false, hasBookmark: false, hasShare: true, isPermissioned: false, isPrivateUnauthorized: false,hasRecommendations: false,contributors: [{ name: "ibradwan", url: "https://github.com/ibradwan" },{ name: "amralaa-MSFT", url: "https://github.com/amralaa-MSFT" },{ name: "ahmad-sameh-microsoft", url: "https://github.com/ahmad-sameh-microsoft" },{ name: "mohamedshams1", url: "https://github.com/mohamedshams1" },{ name: "josmperez1", url: "https://github.com/josmperez1" },{ name: "v-hearya", url: "https://github.com/v-hearya" }],}, functions:{} }; </script><script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script> <script src="https://js.monitor.azure.com/scripts/c/ms.jsll-4.min.js"></script><script src="/static/assets/0.4.029716302/global/deprecation.js"></script><script src="/static/assets/0.4.029716302/scripts/en-us/index-docs.js"></script></head> <body lang="en-us" dir="ltr"> <div class="header-holder has-default-focus"> <a href="#main" style="z-index: 1070" class="outline-color-text visually-hidden-until-focused position-fixed inner-focus focus-visible top-0 left-0 right-0 padding-xs text-align-center has-body-background" tabindex="1">Skip to main content</a><div hidden id="cookie-consent-holder" data-test-id="cookie-consent-container"></div> <div id="unsupported-browser" style=" background-color: white; color: black; padding: 16px; border-bottom: 1px solid grey;" hidden > <div style="max-width: 800px; margin: 0 auto;"> <p style="font-size: 24px">This browser is no longer supported.</p> <p style="font-size: 16px; margin-top: 16px;">Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.</p> <div style="margin-top: 12px;"> <a href="https://go.microsoft.com/fwlink/p/?LinkID=2092881 " style=" background-color: #0078d4; border: 1px solid #0078d4; color: white; padding: 6px 12px; border-radius: 2px; display: inline-block; ">Download Microsoft Edge</a> <a href="https://learn.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge" style=" background-color: white; padding: 6px 12px; border: 1px solid #505050; color: #171717; border-radius: 2px; display: inline-block; ">More info about Internet Explorer and Microsoft Edge</a> </div> </div> </div>   <header id="ms--site-header" data-test-id="site-header-wrapper" role="banner" itemscope="itemscope" itemtype="http://schema.org/Organization"> <div id="ms--mobile-nav" class="site-header display-none-tablet padding-inline-none gap-none" data-bi-name="mobile-header" data-test-id="mobile-header"></div> <div id="ms--primary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L1-header" data-test-id="primary-header"></div> <div id="ms--secondary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L2-header" data-test-id="secondary-header"></div> </header><div id="disclaimer-holder" class="has-overflow-hidden has-default-focus">  </div> </div> <div class="mainContainer uhf-container is-full has-default-focus" data-bi-name="body"> <div class="columns has-large-gaps is-gapless-mobile is-gapless"> <section class="primary-holder column ">  <div class="columns is-gapless-mobile has-large-gaps is-gapless"><div id="main-column" class="column "> <main id="main" class="" role="main" data-bi-name="content" lang="en-us" dir="ltr"><div> <button type="button" class="border contents-button button button-clear button-sm is-hidden-tablet has-inner-focus" data-bi-name="contents-expand" data-contents-button hidden> <span class="icon"> <span class="docon docon-editor-list-bullet" aria-hidden="true"></span> </span><span class="contents-expand-title">Table of contents</span></button> </div> <div class="content "><section id="hero" class="hero has-background-dynamics has-text-dynamics-invert background-image-pattern-plus hero-xs background-image-pattern background-size-200"> <div class="hero-content"> <h1 id="hero-title" class="title">Microsoft Clarity documentation</h1> <p id="hero-summary" class="margin-none padding-top-xs">Learn how to use Clarity, a behavioral analysis tool that helps you understand user experience, to make your website work better.</p> </div> </section> <section id="highlighted-content"> <div class="uhf-container padding-block-sm"> <div class="columns is-multiline"> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dynamics" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g data-name="Layer 1"> <path fill="#acacac" d="M40.93 51.66L24.42 54.3V12.12l16.51-2.64v42.18z"></path> <path fill-opacity=".3" fill="#e3e3e3" d="M57.71 53.19l-16.59-1.32-16.59 2.65-16.58-1.33V12.14l16.58 1.33 16.59-2.65 16.59 1.32v41.05z"></path> <path d="M24.41 54.52h-.08l-17.2-1.38V10.76l17.23 1.37 16.58-2.65H41l17.2 1.37v42.39L41 51.87zM8.46 51.91l15.9 1.27 16.58-2.65H41l15.87 1.27V12.09L41 10.82l-16.59 2.65h-.08L8.46 12.19z" fill="#e3e3e3"></path> <path d="M59.63 31.82a3 3 0 0 0-3-3A5.48 5.48 0 0 0 46.79 26h-.37a4.42 4.42 0 0 0-.48 8.81h11.1a3 3 0 0 0 2.59-2.99zm-34.02.79A3.61 3.61 0 0 0 22 29h-.06a6.6 6.6 0 0 0-11.81-3.41h-.44a5.33 5.33 0 0 0-.58 10.62h13.37a3.6 3.6 0 0 0 3.13-3.6z" fill="#fff" stroke="#e3e3e3" stroke-miterlimit="10"></path> <circle cx="32.83" cy="32" r="10" class="fill-current-color" fill="#0079d6"></circle> <path fill="#fff" d="M36.89 26.93l-5.64 4.02-2.48 6.48 5.64-4.03 2.48-6.47z"></path> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">Overview</p> <a href="about-clarity" class="card-title stretched-link has-external-link-indicator" data-linktype="relative-path">About Clarity</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dynamics" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" preserveAspectRatio="xMidYMin meet"> <g data-name="Layer 1"> <path fill="none" d="M0 0h48v48H0z"></path> <path d="M44.8 11.17v28.7a1.12 1.12 0 0 1-1 1.21h-36a1.12 1.12 0 0 1-1-1.21v-28a1.12 1.12 0 0 1 1-1.21h36.58a.46.46 0 0 1 .42.51z" fill="#e2e2e2" fill-opacity=".5"></path> <path d="M41.61 8v2.6H7.75a1.12 1.12 0 0 0-1 1.2v25.68H4.1A1.11 1.11 0 0 1 3 36.37V8a1.11 1.11 0 0 1 1.1-1.08h36.4A1.1 1.1 0 0 1 41.61 8z" fill="#acacac"></path> <path fill="#c8c8c8" d="M7.1 33.63h37.55A.36.36 0 0 1 45 34v5.72A1.33 1.33 0 0 1 43.68 41H8.07a1.33 1.33 0 0 1-1.33-1.33V34a.36.36 0 0 1 .36-.37z"></path> <circle class="fill-current-color" cx="25.68" cy="22.67" r="5.25" fill="#0079d6"></circle> <path d="M24.55 24v-2.85a.21.21 0 0 1 .31-.17l2.67 1.41a.21.21 0 0 1 0 .34l-2.67 1.41a.21.21 0 0 1-.31-.14z" fill="#fff"></path> <path stroke="#acacac" stroke-miterlimit="10" stroke-width=".94" fill="none" d="M9.93 37.1h31.68"></path> <path fill="#c8c8c8" d="M44 11.63v28.2a.35.35 0 0 1 0 .2H7.8a.35.35 0 0 1 0-.2v-28a.38.38 0 0 1 0-.2H44m.59-1H7.75a1.12 1.12 0 0 0-1 1.2v28a1.12 1.12 0 0 0 1 1.21H44a1.12 1.12 0 0 0 1-1.21v-28.7a.46.46 0 0 0-.42-.5z"></path> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">video</p> <a href="https://www.youtube.com/watch?v=cCfPxElfAz0" class="card-title stretched-link has-external-link-indicator" data-linktype="external">Watch a short video</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dynamics" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g data-name="Layer 1"> <path fill="none" d="M.04 0h64v64h-64z"></path> <path fill="none" d="M-.04 0h64v64h-64z"></path> <path d="M54.16 16v35a1.86 1.86 0 0 1-2.64 1.69 74.73 74.73 0 0 0-8.72-3.39C29.1 45 12 42.54 6.57 41.85A1.87 1.87 0 0 1 5 40V26.89A1.87 1.87 0 0 1 6.57 25c5.43-.7 22.53-3.1 36.23-7.46a76.6 76.6 0 0 0 8.72-3.3A1.85 1.85 0 0 1 54.16 16z" fill="#e3e3e3" fill-opacity=".3"></path> <path d="M32.16 46.19v1.47a6.28 6.28 0 0 1-6.28 6.28h-.81A7 7 0 0 1 18.12 47v-3.7" stroke="#c8c8c8" stroke-miterlimit="10" stroke-width="2" fill="none"></path> <path d="M59.05 33.44A7 7 0 0 1 49.56 40c-.18-2.07-.28-4.27-.28-6.54s.1-4.51.28-6.6a7 7 0 0 1 9.49 6.57z" fill="#919191"></path> <path fill="#c8c8c8" d="M52.3 15.44a.52.52 0 0 1 .52.53v35a.52.52 0 0 1-.52.52.59.59 0 0 1-.22 0A76.54 76.54 0 0 0 43.21 48c-13.88-4.41-31.42-6.86-36.47-7.5a.52.52 0 0 1-.44-.5V26.89a.53.53 0 0 1 .45-.52c6.47-.83 23-3.22 36.46-7.51a76.64 76.64 0 0 0 8.87-3.36.46.46 0 0 1 .22-.06m0-1.34a1.85 1.85 0 0 0-.78.18 76.6 76.6 0 0 1-8.72 3.3C29.1 21.94 12 24.34 6.57 25A1.87 1.87 0 0 0 5 26.89V40a1.87 1.87 0 0 0 1.62 1.85C12 42.54 29.1 45 42.8 49.3a74.73 74.73 0 0 1 8.72 3.31 1.83 1.83 0 0 0 .78.17 1.86 1.86 0 0 0 1.86-1.86V16a1.86 1.86 0 0 0-1.86-1.9z"></path> <path fill="#c8c8c8" d="M54.16 16v35a1.86 1.86 0 0 1-2.64 1.69 74.73 74.73 0 0 0-8.72-3.39V17.58a76.6 76.6 0 0 0 8.72-3.3A1.85 1.85 0 0 1 54.16 16z"></path> <circle cx="26.29" cy="21.3" r="9.8" class="fill-current-color" fill="#0079d6"></circle> <path fill="#fff" d="M26.3 15.36l1.47 4.54h4.77l-3.86 2.8 1.47 4.54-3.85-2.81-3.86 2.81 1.47-4.54-3.86-2.8h4.77l1.48-4.54z"></path> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">What's new</p> <a href="mobile-sdk/sdk-apple-appstore-privacy-guidance" class="card-title stretched-link has-external-link-indicator" data-linktype="relative-path">Apple App Store Privacy Guidance</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left display-none display-block-tablet"> <div class="image image-64x64 has-text-dynamics" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="xMidYMin meet"> <g data-name="Layer 1"> <path fill="none" d="M-.06.05h64v64h-64z"></path> <path fill="#919191" d="M32.27 18.07c0-3.54 1-3.85 4.3-5.53L49.09 6v5.67L36.05 15s-3.35 2.33-3.78 3.07zM31.75 18.07c0-3.54-1-3.85-4.3-5.53L14.94 6v5.67L28 15s3.33 2.33 3.75 3.07z"></path> <path fill="#acacac" d="M31.75 19.05c0-2.62-1.24-3.85-4.3-4.74L7.8 9.92v5.45l20.2 1.4s3.33 1.54 3.75 2.28z"></path> <path d="M32.25 19.05c0-2.62 1.24-3.85 4.3-4.74L56.2 9.92v5.45L36 16.77s-3.33 1.54-3.75 2.28z" fill="#c8c8c8"></path> <path fill="#acacac" d="M32.25 18.55c0-2.62 1.79-3.85 4.3-4.74L56.2 9.42v5.45L37 16.24a8 8 0 0 0-4.75 2.31z"></path> <path d="M32.06 58.11a4.74 4.74 0 0 1 4.07-4.7l22.35-1.59V15L36.8 16.24A4.74 4.74 0 0 0 32.06 21z" fill-opacity=".3" fill="#e3e3e3"></path> <path fill="none" stroke="#c8c8c8" stroke-miterlimit="10" stroke-width="1.25px" d="M32.27 58.11a4.74 4.74 0 0 1 4.07-4.7l22.35-1.59V14.7L37 16.24A4.74 4.74 0 0 0 32.27 21z"></path> <path d="M32 58.11a4.74 4.74 0 0 0-4.07-4.7L5.59 51.82V14.7l21.68 1.54A4.74 4.74 0 0 1 32 21z" fill="#e3e3e3"></path> <path fill="none" stroke="#c8c8c8" stroke-miterlimit="10" stroke-width="1.25px" d="M31.73 58.11a4.74 4.74 0 0 0-4.07-4.7L5.31 51.82V14.7L27 16.24A4.74 4.74 0 0 1 31.73 21z"></path> <path fill="#fff" d="M34.19 38.16l-2.61-3.36-4.24.15 6.21-4.36.64 7.57z"></path> <circle cx="32.06" cy="35.43" r="8.84" class="fill-current-color" fill="#0079d6"></circle> <path fill="#fff" d="M34.65 40.58l-3.22-4.15-5.25.19 7.68-5.39.79 9.35z"></path> </g> </svg> </div> </div> <div class="media-content"> <p class="card-supertitle margin-top-none margin-top-xs-tablet">Reference</p> <a href="faq" class="card-title stretched-link has-external-link-indicator" data-linktype="relative-path">FAQ</a> </div> </div> </div> </article> </div> </div> </div> </section> <section id="product-directory"> <div class="uhf-container anchor-headings padding-block-lg"> <h2 class="margin-top-none ">Setup and Installation</h2> <p class="margin-top-none margin-bottom-sm">Learn how to setup and install the Clarity tracking code.</p> <div class="columns"> <div id="tabpanel" role="tabpanel" class="column"> <div id="product-cards" class="columns is-multiline " data-bi-name="hub-product-card"> <div class="column is-6-tablet is-3-desktop item-column" data-categories=""> <div class="box margin-none is-full-height padding-sm"> <img src="media/getting-started-icon.jpg" alt="" loading="lazy" width="48" height="48" class="image is-48x48 margin-bottom-xxs" data-linktype="relative-path"> <h3 id="getting-started-0" class="font-size-h6 margin-none">Getting started</h3> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xxs"> <li class="is-unstyled margin-bottom-xxs"> <a href="setup-and-installation/getting-started" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Sign up for Clarity</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-setup" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Setup and install Clarity code</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-setup#verify-your-installation" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Verify your installation</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="troubleshooting-installation" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Troubleshooting installation</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="setup-and-installation/" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">See more</a> </li> </ul> </div> </div> <div class="column is-6-tablet is-3-desktop item-column" data-categories=""> <div class="box margin-none is-full-height padding-sm"> <img src="media/settings-icon.jpg" alt="" loading="lazy" width="48" height="48" class="image is-48x48 margin-bottom-xxs" data-linktype="relative-path"> <h3 id="settings-1" class="font-size-h6 margin-none">Settings</h3> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xxs"> <li class="is-unstyled margin-bottom-xxs"> <a href="manage-account" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Account management</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="ip-exclusion" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Block IP addresses</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-csp" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Content Security Policy</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-masking" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Masking content</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="team-management" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Team management</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="setup-and-installation/" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">See more</a> </li> </ul> </div> </div> <div class="column is-6-tablet is-3-desktop item-column" data-categories=""> <div class="box margin-none is-full-height padding-sm"> <img src="media/third-party-integrations-icon.jpg" alt="" loading="lazy" width="48" height="48" class="image is-48x48 margin-bottom-xxs" data-linktype="relative-path"> <h3 id="install-via-third-party-platform-2" class="font-size-h6 margin-none">Install via Third-Party Platform</h3> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xxs"> <li class="is-unstyled margin-bottom-xxs"> <a href="third-party-integrations/supported-third-party-platforms" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Supported third-party platforms</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-third-platform#how-to-raise-a-new-platform-request" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Raise a new platform request</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-setup#verify-your-installation" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Verify your installation</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="third-party-integrations/" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">See more</a> </li> </ul> </div> </div> <div class="column is-6-tablet is-3-desktop item-column" data-categories=""> <div class="box margin-none is-full-height padding-sm"> <img src="media/cookies-icon.jpg" alt="" loading="lazy" width="48" height="48" class="image is-48x48 margin-bottom-xxs" data-linktype="relative-path"> <h3 id="data-and-cookies-3" class="font-size-h6 margin-none">Data and Cookies</h3> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xxs"> <li class="is-unstyled margin-bottom-xxs"> <a href="cookie-consent" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Cookie consent</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-data" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Clarity data collection</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="cookie-list" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Cookie list</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="data-retention" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Data retention</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="setup-and-installation/privacy-disclosure" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Sample wording for Site and Privacy Policy Disclosure</a> </li> </ul> </div> </div> <div class="column is-6-tablet is-3-desktop item-column" data-categories=""> <div class="box margin-none is-full-height padding-sm"> <img src="media/live-extension-icon.jpg" alt="" loading="lazy" width="48" height="48" class="image is-48x48 margin-bottom-xxs" data-linktype="relative-path"> <h3 id="clarity-live-extension-plugin-4" class="font-size-h6 margin-none">Clarity Live Extension - Plugin</h3> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xxs"> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-live-extension" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">How to install the extension?</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="how-to-use-clarity-live-extension" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">How to use the plugin?</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="troubleshooting-live-extension" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Troubleshooting live extension</a> </li> </ul> </div> </div> <div class="column is-6-tablet is-3-desktop item-column" data-categories=""> <div class="box margin-none is-full-height padding-sm"> <img src="media/filters-icon.jpg" alt="" loading="lazy" width="48" height="48" class="image is-48x48 margin-bottom-xxs" data-linktype="relative-path"> <h3 id="filters-5" class="font-size-h6 margin-none">Filters</h3> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xxs"> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-filters" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Overview</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="exclusion-filters" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Exclusion filters</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="custom-tags" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Custom tags</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-segments" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Segments</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="regular-expressions" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Regular expressions</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="filters/" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">See more</a> </li> </ul> </div> </div> <div class="column is-6-tablet is-3-desktop item-column" data-categories=""> <div class="box margin-none is-full-height padding-sm"> <img src="media/find-out-more-icon.jpg" alt="" loading="lazy" width="48" height="48" class="image is-48x48 margin-bottom-xxs" data-linktype="relative-path"> <h3 id="find-out-more-6" class="font-size-h6 margin-none">Find out more</h3> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xxs"> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-api" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Client API reference</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="setup-and-installation/identify-api" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Identify API</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-benchmarks" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Clarity Website Benchmarks - Beta</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="glossary-of-terms" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Glossary of terms</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="clarity-downloads" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Download Clarity data</a> </li> <li class="is-unstyled margin-bottom-xxs"> <a href="share-clarity" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path">Share Clarity data</a> </li> </ul> </div> </div> </div> </div> </div> </div> </section> <section id="conceptual-content" class="padding-block-lg"> <div class="uhf-container anchor-headings"> <h2 class="margin-top-none margin-bottom-sm">Clarity Features</h2> <div class="columns is-multiline"> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Session Recordings</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-get-started"></span> </span> <a href="recordings-overview" class="has-external-link-indicator" data-linktype="relative-path">What is a session recording?</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="session-list" class="has-external-link-indicator" data-linktype="relative-path">Session list</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="inline-player" class="has-external-link-indicator" data-linktype="relative-path">Inline player</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-training"></span> </span> <a href="clarity-real-time" class="has-external-link-indicator" data-linktype="relative-path">Live recordings</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="clarity-labels" class="has-external-link-indicator" data-linktype="relative-path">Labels</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-reference"></span> </span> <a href="troubleshooting-recordings" class="has-external-link-indicator" data-linktype="relative-path">Troubleshooting recordings</a> </div> </li> <li class="is-unstyled margin-top-xs"> <a href="session-recordings/" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path"> <span>See more</span> <span class="icon" aria-hidden="true"> <span class="docon docon-chevron-right-light"></span> </span> </a> </li> </ul> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Heatmaps</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-get-started"></span> </span> <a href="heatmaps-overview" class="has-external-link-indicator" data-linktype="relative-path">What is a heatmap?</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-architecture"></span> </span> <a href="heatmaps-features" class="has-external-link-indicator" data-linktype="relative-path">Heatmaps features</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="click-maps" class="has-external-link-indicator" data-linktype="relative-path">Click maps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="scroll-maps" class="has-external-link-indicator" data-linktype="relative-path">Scroll maps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="area-maps" class="has-external-link-indicator" data-linktype="relative-path">Area maps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-how-to-guide"></span> </span> <a href="heatmaps-compare" class="has-external-link-indicator" data-linktype="relative-path">Compare heatmaps</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-how-to-guide"></span> </span> <a href="heatmaps-screenshots" class="has-external-link-indicator" data-linktype="relative-path">Switch screenshots</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-reference"></span> </span> <a href="troubleshooting-heatmaps" class="has-external-link-indicator" data-linktype="relative-path">Troubleshooting heatmaps</a> </div> </li> <li class="is-unstyled margin-top-xs"> <a href="heatmaps/" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path"> <span>See more</span> <span class="icon" aria-hidden="true"> <span class="docon docon-chevron-right-light"></span> </span> </a> </li> </ul> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Insights</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-get-started"></span> </span> <a href="insights-overview" class="has-external-link-indicator" data-linktype="relative-path">Insights overview</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-architecture"></span> </span> <a href="dashboard-features" class="has-external-link-indicator" data-linktype="relative-path">Dashboard features</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-training"></span> </span> <a href="semantic-metrics" class="has-external-link-indicator" data-linktype="relative-path">Behavioral insight metrics</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="e-commerce-insights" class="has-external-link-indicator" data-linktype="relative-path">E-commerce insights</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="content-insights" class="has-external-link-indicator" data-linktype="relative-path">Content insights</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-reference"></span> </span> <a href="troubleshooting-dashboard" class="has-external-link-indicator" data-linktype="relative-path">Troubleshooting dashboard</a> </div> </li> <li class="is-unstyled margin-top-xs"> <a href="insights/" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path"> <span>See more</span> <span class="icon" aria-hidden="true"> <span class="docon docon-chevron-right-light"></span> </span> </a> </li> </ul> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Google Analytics Integration</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-get-started"></span> </span> <a href="ga-integration" class="has-external-link-indicator" data-linktype="relative-path">Getting started</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-training"></span> </span> <a href="ga4-integration" class="has-external-link-indicator" data-linktype="relative-path">GA4 integration</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-architecture"></span> </span> <a href="ga-dashboard" class="has-external-link-indicator" data-linktype="relative-path">GA dashboard</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-concept"></span> </span> <a href="ga-goals" class="has-external-link-indicator" data-linktype="relative-path">GA goals</a> </div> </li> <li class="is-unstyled margin-top-xs"> <a href="ga-integration/" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path"> <span>See more</span> <span class="icon" aria-hidden="true"> <span class="docon docon-chevron-right-light"></span> </span> </a> </li> </ul> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Clarity for Mobile Apps</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-overview"></span> </span> <a href="mobile-sdk/mobile-sdk-overview" class="has-external-link-indicator" data-linktype="relative-path">Overview</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-get-started"></span> </span> <a href="mobile-sdk/sdk-getting-started" class="has-external-link-indicator" data-linktype="relative-path">Getting started</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-training"></span> </span> <a href="mobile-sdk/android-sdk" class="has-external-link-indicator" data-linktype="relative-path">Installation for Android</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-training"></span> </span> <a href="mobile-sdk/ios-sdk" class="has-external-link-indicator" data-linktype="relative-path">Installation for iOS</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-reference"></span> </span> <a href="recordings-overview" class="has-external-link-indicator" data-linktype="relative-path">Session recordings</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-reference"></span> </span> <a href="mobile-sdk/sdk-heatmaps-overview" class="has-external-link-indicator" data-linktype="relative-path">Heatmaps</a> </div> </li> <li class="is-unstyled margin-top-xs"> <a href="mobile-sdk/" class="has-external-link-indicator display-block font-size-sm" data-linktype="relative-path"> <span>See more</span> <span class="icon" aria-hidden="true"> <span class="docon docon-chevron-right-light"></span> </span> </a> </li> </ul> </div> </article> </div> <div class="column is-4-tablet is-4-desktop"> <article class="card is-full-height"> <div class="card-content"> <p class="card-title color-text font-size-lg">Copilot in Clarity</p> <ul class="has-line-height-reset margin-left-none margin-bottom-none margin-top-xs"> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-overview"></span> </span> <a href="copilot/overview" class="has-external-link-indicator" data-linktype="relative-path">Overview</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-training"></span> </span> <a href="copilot/clarity-copilot-chat" class="has-external-link-indicator" data-linktype="relative-path">Chat</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-training"></span> </span> <a href="copilot/session-insights" class="has-external-link-indicator" data-linktype="relative-path">Session Insights</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-training"></span> </span> <a href="copilot/grouped-session-insights" class="has-external-link-indicator" data-linktype="relative-path">Grouped Sessions Insights</a> </div> </li> <li class="is-unstyled margin-bottom-xxs font-size-sm"> <div class="justify-content-flex-start display-flex is-fullwidth font-size-sm has-text-wrap"> <span class="icon font-size-md has-text-primary margin-right-xxs" aria-hidden="true"> <span class="docon docon-topic-training"></span> </span> <a href="copilot/heatmaps-insights" class="has-external-link-indicator" data-linktype="relative-path">Heatmaps Insights</a> </div> </li> </ul> </div> </article> </div> </div> </div> </section> <section id="tools" class="padding-block-lg"> <div class="uhf-container anchor-headings padding-bottom-sm"> <h2 class="margin-top-none margin-bottom-sm">Visit Clarity</h2> <div class="columns is-multiline"> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-center"> <div class="media-left"> <div class="image image-32x32"> <img src="media/blog-icon.jpg" alt="" aria-hidden="true" data-linktype="relative-path"> </div> </div> <div class="media-content"> <a id="blog-0" href="https://clarity.microsoft.com/blog/" class="card-title stretched-link has-external-link-indicator" data-linktype="external">Blog</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-center"> <div class="media-left"> <div class="image image-32x32"> <img src="media/clarity-icon.jpg" alt="" aria-hidden="true" data-linktype="relative-path"> </div> </div> <div class="media-content"> <a id="case-studies-1" href="https://clarity.microsoft.com/case-studies" class="card-title stretched-link has-external-link-indicator" data-linktype="external">Case studies</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-center"> <div class="media-left"> <div class="image image-32x32"> <img src="media/demo-icon.jpg" alt="" aria-hidden="true" data-linktype="relative-path"> </div> </div> <div class="media-content"> <a id="demo-2" href="https://clarity.microsoft.com/demo/projects/view/3t0wlogvdz/dashboard?date_d=Last%203%20days" class="card-title stretched-link has-external-link-indicator" data-linktype="external">Demo</a> </div> </div> </div> </article> </div> <div class="column is-6-tablet is-3-desktop"> <article class="card is-full-height position-relative"> <div class="card-content display-flex"> <div class="media align-items-center"> <div class="media-left"> <div class="image image-32x32"> <img src="media/sign-in-icon.jpg" alt="" aria-hidden="true" data-linktype="relative-path"> </div> </div> <div class="media-content"> <a id="sign-in-3" href="https://clarity.microsoft.com/projects" class="card-title stretched-link has-external-link-indicator" data-linktype="external">Sign in</a> </div> </div> </div> </article> </div> </div> </div> </section> </div><div id="assertive-live-region" role="alert" aria-live="assertive" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div> <div id="polite-live-region" role="status" aria-live="polite" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div>  </main>  <div class="border-top is-visible-interactive has-default-focus margin-top-sm margin-top-none"><footer id="footer-interactive" data-bi-name="footer" class="footer-layout"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" aria-hidden="true" focusable="false" > <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu-interactive" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu-interactive" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/previous-versions/" data-bi-name="archivelink">Previous Versions</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog" data-bi-name="bloglink">Blog</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/contribute/" data-bi-name="contributorGuide">Contribute</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/legal/termsofuse" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2025</li> </ul> </footer></div></div></div>  </section>   <aside id="interactive-container" class="interactive-container is-visible-interactive column has-body-background-dark "> </aside>  </div> </div>  <section class="border-top has-default-focus is-hidden-interactive margin-top-sm margin-top-none"><footer id="footer" data-bi-name="footer" class="footer-layout uhf-container has-padding" role="contentinfo"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" aria-hidden="true" focusable="false" > <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/previous-versions/" data-bi-name="archivelink">Previous Versions</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog" data-bi-name="bloglink">Blog</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/contribute/" data-bi-name="contributorGuide">Contribute</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/legal/termsofuse" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2025</li> </ul> </footer> </section> <div id="action-panel" role="region" aria-label="Action Panel" class="action-panel has-default-focus" tabindex="-1"></div> </body> </html>

CINXE.COM

Microsoft Clarity documentation | Microsoft Learn