{"id":22502,"date":"2025-05-24T13:29:00","date_gmt":"2025-05-24T13:29:00","guid":{"rendered":"https:\/\/www.tikitech.in\/blog\/?p=22502"},"modified":"2025-05-26T10:11:58","modified_gmt":"2025-05-26T10:11:58","slug":"how-to-add-microsoft-clarity-to-your-website-a-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/tikitech.in\/blog\/2025\/how-to-add-microsoft-clarity-to-your-website-a-step-by-step-guide\/","title":{"rendered":"How to Add Microsoft Clarity to Your Website \u2013 A Step-by-Step Guide"},"content":{"rendered":"\n

Want to know exactly how users behave on your website? Where they click, how far they scroll, or what confuses them? Microsoft Clarity<\/strong> is a powerful, free<\/strong> tool that gives you visual insights like heatmaps and session recordings\u2014 helping you improve your site\u2019s user experience.<\/p>\n\n\n\n

In this blog post, we\u2019ll walk you through the easy steps to install Microsoft Clarity on your website<\/strong>, complete with guiding images to help you every step of the way.<\/p>\n\n\n\n

\ud83d\udd27<\/strong> Step 1: Sign Up for Microsoft Clarity<\/strong><\/h3>\n\n\n\n
    \n
  1. Go to https:\/\/clarity.microsoft.com<\/a><\/li>\n\n\n\n
  2. Click \u201cGet Started\u201d<\/strong> and sign in using your Microsoft, Google, or Facebook account.<\/li>\n<\/ol>\n\n\n\n
    \"Microsoft<\/figure>\n\n\n\n

    \ud83d\udcdd<\/strong> Step 2: Create a New Project<\/strong><\/h3>\n\n\n\n
      \n
    1. Once logged in, click \u201cAdd New Project.\u201d<\/strong><\/li>\n\n\n\n
    2. Enter your website name and domain (e.g., www.yoursite.com<\/em>).<\/li>\n\n\n\n
    3. Choose your website category (optional), then click \u201cAdd.\u201d<\/strong><\/li>\n<\/ol>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      \ud83d\udd11 Step 3: Copy the Tracking Code<\/strong><\/h3>\n\n\n\n

      After creating your project, you\u2019ll be taken to a page with your Clarity tracking code<\/strong>.<\/p>\n\n\n\n

        \n
      1. Copy the script provided. It looks something like this:<\/li>\n<\/ol>\n\n\n\n
        <script type=\"text\/javascript\">\n   (function(c,l,a,r,i,t,y){\n       c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\n       t=l.createElement(r);t.async=1;t.src=\"https:\/\/www.clarity.ms\/tag\/\"+i;\n       y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\n   })(window, document, \"clarity\", \"script\", \"YOUR_PROJECT_ID\");\n<\/script><\/code><\/pre>\n\n\n\n
        \ud83e\udde9 Step 4: Add the Code to Your Website<\/strong><\/h3>\n\n\n\n
        Option A: Directly in Your HTML<\/strong><\/h5>\n\n\n\n
        Paste the code just before the closing <\/head> tag on every page you want to track.<\/p>\n\n\n\n
        Example:<\/strong><\/p>\n\n\n\n
        <head>\n    <!-- Other metadata and CSS -->\n    <script>...Clarity Script...<\/script>\n<\/head><\/code><\/pre>\n\n\n\n
        Option B: Use Google Tag Manager (Recommended)<\/strong><\/h5>\n\n\n\n
          \n
        1. Log in to your Google Tag Manager<\/a> account.<\/li>\n\n\n\n
        2. Click \u201cAdd a new tag.\u201d<\/strong><\/li>\n\n\n\n
        3. Choose \u201cCustom HTML\u201d<\/strong> and paste the Clarity code inside.<\/li>\n\n\n\n
        4. Set the trigger to All Pages<\/strong>, then Save<\/strong> and Publish<\/strong>.<\/li>\n<\/ol>\n\n\n\n
          If you have Google Tag Manager installed then you can also directly go setup and connect your tag. <\/p>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          Step 5: Verify Installation<\/strong><\/h5>\n\n\n\n
          After publishing the changes:<\/p>\n\n\n\n