microsoft clarity

Author: PrashantUnity

hugo.toml

@@ -20,6 +20,7 @@ disableKinds = ["taxonomy", "term"]
   paginate = 10
   env = "production"
   google_analytics_id = "G-VM01Q3R43D"
+  microsoft_clarity_id = "mxr4hxioh4"
   # Add static/images/og-default.png (1200×630) for better social sharing; omit or leave empty to use logo
   default_og_image = "images/og-default.png"
 

layouts/partials/cookie-consent.html

@@ -4,7 +4,8 @@
   {{- warnf "google_analytics_id not set in hugo.toml params. Please configure it." -}}
   {{- $gaId = "G-VM01Q3R43D" -}}
 {{- end -}}
-<div id="cookie-consent-banner" class="cookie-consent-banner" role="dialog" aria-labelledby="cookie-consent-title" aria-live="polite" style="display: none;" data-ga-id="{{ $gaId }}">
+{{- $clarityId := .Site.Params.microsoft_clarity_id | default "" -}}
+<div id="cookie-consent-banner" class="cookie-consent-banner" role="dialog" aria-labelledby="cookie-consent-title" aria-live="polite" style="display: none;" data-ga-id="{{ $gaId }}"{{ with $clarityId }} data-clarity-id="{{ . }}"{{ end }}>
   <div class="cookie-consent-content">
     <div class="cookie-consent-text">
       <h2 id="cookie-consent-title" class="cookie-consent-title">Cookie Consent</h2>

layouts/partials/googlegtag.html

@@ -1,4 +1,6 @@
-{{- /* Preconnect to Google Analytics for improved performance */ -}}
-{{- /* Note: Google Analytics will only load after user consent via cookie-consent.js */ -}}
+{{- /* Preconnect to analytics hosts for improved performance */ -}}
+{{- /* Note: GA and Clarity load only after user consent via cookie-consent.js */ -}}
 <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
-<link rel="dns-prefetch" href="https://www.googletagmanager.com">
+<link rel="dns-prefetch" href="https://www.googletagmanager.com">
+<link rel="preconnect" href="https://www.clarity.ms" crossorigin>
+<link rel="dns-prefetch" href="https://www.clarity.ms">

static/js/cookie-consent.js

@@ -1,6 +1,6 @@
 /**
  * Cookie Consent Manager
- * Handles GDPR/CCPA compliance for Google Analytics
+ * Handles GDPR/CCPA compliance for Google Analytics and Microsoft Clarity
  */
 
 (function() {
@@ -21,6 +21,36 @@
     return 'G-VM01Q3R43D'; // Last resort fallback
   }
 
+  function getClarityProjectId() {
+    const banner = document.getElementById('cookie-consent-banner');
+    if (banner && banner.dataset.clarityId) {
+      return banner.dataset.clarityId;
+    }
+    return '';
+  }
+
+  function loadMicrosoftClarity() {
+    const clarityId = getClarityProjectId();
+    if (!clarityId || window.__cfdClarityLoadedId === clarityId) {
+      return;
+    }
+
+    (function (c, l, a, r, i, t, y) {
+      c[a] =
+        c[a] ||
+        function () {
+          (c[a].q = c[a].q || []).push(arguments);
+        };
+      t = l.createElement(r);
+      t.async = 1;
+      t.src = 'https://www.clarity.ms/tag/' + i;
+      y = l.getElementsByTagName(r)[0];
+      y.parentNode.insertBefore(t, y);
+    })(window, document, 'clarity', 'script', clarityId);
+
+    window.__cfdClarityLoadedId = clarityId;
+  }
+
   // Check if consent has been given
   function getConsentStatus() {
     return localStorage.getItem(COOKIE_CONSENT_KEY);
@@ -110,6 +140,8 @@
         event_category: 'privacy',
       });
     }
+
+    loadMicrosoftClarity();
   }
 
   // Handle accept button click