{"id":16170,"date":"2025-05-30T15:32:52","date_gmt":"2025-05-30T10:02:52","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=16170"},"modified":"2025-05-30T15:32:53","modified_gmt":"2025-05-30T10:02:53","slug":"set-up-ms-clarity-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/set-up-ms-clarity-in-magento-2\/","title":{"rendered":"How to Set up MS Clarity in Magento 2?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this blog, learn how to set up MS Clarity in Magento 2 to analyze your shopper&#8217;s interaction with your store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Microsoft Clarity and Why Use it?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Microsoft Clarity is a free heatmaps &amp; session recording tool which helps you understand your user&#8217;s behaviour on your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can easily analyze sections where they spent most of the time and also the least to make necessary changes to attract engagement.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"918\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/1-Microsoft-clarity-heatmap-dashboard.png\" alt=\"Microsoft Clarity Heatmap Dashboard\" class=\"wp-image-16184\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/1-Microsoft-clarity-heatmap-dashboard.png 1999w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/1-Microsoft-clarity-heatmap-dashboard-250x115.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/1-Microsoft-clarity-heatmap-dashboard-700x321.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/1-Microsoft-clarity-heatmap-dashboard-768x353.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/1-Microsoft-clarity-heatmap-dashboard-1536x705.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/1-Microsoft-clarity-heatmap-dashboard-403x185.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/1-Microsoft-clarity-heatmap-dashboard-964x443.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/1-Microsoft-clarity-heatmap-dashboard-120x55.png 120w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><em>Microsoft clarity heatmap dashboard&nbsp;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adding MS Clarity to Magento 2, you can<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Get usages statistics<\/li>\n\n\n\n<li>Multiple options to filter out shoppers&#8217; behaviour<\/li>\n\n\n\n<li>And more\u00a0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to Add Microsoft Clarity Code to Magento 2 (Manually)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This is one of the easiest ways to add Microsoft Clarity code to Magento 2 without needing any external tools or third-party apps.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these manual steps to add MS Clarity to Magento 2.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create a Microsoft Clarity Account<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Head to<a href=\"https:\/\/clarity.microsoft.com\/\" target=\"_blank\" rel=\"noopener\"> Microsoft Clarity<\/a> and create your free account.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"955\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/2-Create-a-Microsoft-Clarity-Account.png\" alt=\"Create a Microsoft Clarity Account\" class=\"wp-image-16174\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/2-Create-a-Microsoft-Clarity-Account.png 1999w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/2-Create-a-Microsoft-Clarity-Account-250x119.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/2-Create-a-Microsoft-Clarity-Account-700x334.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/2-Create-a-Microsoft-Clarity-Account-768x367.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/2-Create-a-Microsoft-Clarity-Account-1536x734.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/2-Create-a-Microsoft-Clarity-Account-403x193.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/2-Create-a-Microsoft-Clarity-Account-964x461.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/2-Create-a-Microsoft-Clarity-Account-120x57.png 120w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Get the Microsoft Clarity Tracking Code&nbsp;&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Navigate to Setup &gt; Advanced setting. Then head to Install manually and click on <strong>Get tracking code.&nbsp;<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1976\" height=\"950\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/3-Get-the-Microsoft-Clarity-Tracking-Code.png\" alt=\"Get the Microsoft Clarity Tracking Code\" class=\"wp-image-16176\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/3-Get-the-Microsoft-Clarity-Tracking-Code.png 1976w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/3-Get-the-Microsoft-Clarity-Tracking-Code-250x120.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/3-Get-the-Microsoft-Clarity-Tracking-Code-700x337.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/3-Get-the-Microsoft-Clarity-Tracking-Code-768x369.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/3-Get-the-Microsoft-Clarity-Tracking-Code-1536x738.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/3-Get-the-Microsoft-Clarity-Tracking-Code-403x194.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/3-Get-the-Microsoft-Clarity-Tracking-Code-964x463.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/3-Get-the-Microsoft-Clarity-Tracking-Code-120x58.png 120w\" sizes=\"auto, (max-width: 1976px) 100vw, 1976px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now, copy the code and head to your Magento 2 admin panel.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1402\" height=\"628\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/4-Copy-the-code.png\" alt=\"Copy the Code from MS Clarity\" class=\"wp-image-16180\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/4-Copy-the-code.png 1402w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/4-Copy-the-code-250x112.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/4-Copy-the-code-700x314.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/4-Copy-the-code-768x344.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/4-Copy-the-code-403x181.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/4-Copy-the-code-964x432.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/4-Copy-the-code-120x54.png 120w\" sizes=\"auto, (max-width: 1402px) 100vw, 1402px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add the Tracking Code in Magento 2&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Head to <strong>Content &gt; Configuration <\/strong>and edit your main website store. Then, scroll down to the <strong>&#8220;Other Settings&#8221;<\/strong> section and open the <strong>&#8220;HTML Head&#8221;<\/strong> settings.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1402\" height=\"680\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/5-Go-to-Magento-admin-and-head-to-HTML-Head.png\" alt=\"Go to Magento Admin and Head to HTML Head\" class=\"wp-image-16178\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/5-Go-to-Magento-admin-and-head-to-HTML-Head.png 1402w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/5-Go-to-Magento-admin-and-head-to-HTML-Head-250x121.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/5-Go-to-Magento-admin-and-head-to-HTML-Head-700x340.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/5-Go-to-Magento-admin-and-head-to-HTML-Head-768x372.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/5-Go-to-Magento-admin-and-head-to-HTML-Head-403x195.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/5-Go-to-Magento-admin-and-head-to-HTML-Head-964x468.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/5-Go-to-Magento-admin-and-head-to-HTML-Head-120x58.png 120w\" sizes=\"auto, (max-width: 1402px) 100vw, 1402px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now, find the &#8220;Scripts and Style Sheets&#8221; and paste the code you copied from Microsoft Clarity.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1868\" height=\"704\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/6-Find-Scripts-and-Style-Sheets-and-paste-the-code-.png\" alt=\"Find Scripts and Style Sheets and Paste the Code\" class=\"wp-image-16182\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/6-Find-Scripts-and-Style-Sheets-and-paste-the-code-.png 1868w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/6-Find-Scripts-and-Style-Sheets-and-paste-the-code--250x94.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/6-Find-Scripts-and-Style-Sheets-and-paste-the-code--700x264.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/6-Find-Scripts-and-Style-Sheets-and-paste-the-code--768x289.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/6-Find-Scripts-and-Style-Sheets-and-paste-the-code--1536x579.png 1536w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/6-Find-Scripts-and-Style-Sheets-and-paste-the-code--403x152.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/6-Find-Scripts-and-Style-Sheets-and-paste-the-code--964x363.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/6-Find-Scripts-and-Style-Sheets-and-paste-the-code--120x45.png 120w\" sizes=\"auto, (max-width: 1868px) 100vw, 1868px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now, browse through your store and then view the data in Clarity to verify if the setup is working properly.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other Resources&nbsp;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Like Microsoft Clarity, here are some more tracking setup guides for exceptional data collection:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/meetanshi.com\/blog\/how-to-set-up-magento-2-hotjar-tracking\/\">How to Set up Magento 2 Hotjar Tracking?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/meetanshi.com\/blog\/set-up-magento-2-google-analytics-4\/\">How to Set up Magento 2 Google Analytics 4 (GA4)?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, learn how to set up MS Clarity in Magento 2 to analyze your shopper&#8217;s interaction with your store. What is Microsoft Clarity&#8230;<\/p>\n","protected":false},"author":5,"featured_media":16190,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-16170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/16170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=16170"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/16170\/revisions"}],"predecessor-version":[{"id":16186,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/16170\/revisions\/16186"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/16190"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=16170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=16170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=16170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}