chore: add Microsoft Clarity analytics to web landing page

web/index.html

@@ -15,6 +15,16 @@
   <meta name="theme-color" content="#4A9BD7">
   <title>亿图腾 · 浠艾福 — 家庭幸福健康成长平台</title>
   <link rel="stylesheet" href="css/style.css">
+
+  <!-- ========== Clarity (Microsoft) - User Behavior Analytics ========== -->
+  <script>
+    (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", "xbtkn3d56w");
+  </script>
+
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",

web/js/main.js

@@ -538,5 +538,88 @@ document.addEventListener('DOMContentLoaded', () => {
       ro.observe(wuxingContainer);
     }
   }
-
+  
 });
+
+// --------------------------------------------------------
+// 9. User behavior analytics — Clarity custom events
+// --------------------------------------------------------
+(function() {
+  var SCROLL_DEPTHS = [25, 50, 75, 90, 100];
+  var reportedDepths = {};
+
+  function trackScrollDepth() {
+    var docHeight = document.documentElement.scrollHeight - window.innerHeight;
+    if (docHeight <= 0) return;
+    var scrolled = Math.round((window.scrollY / docHeight) * 100);
+
+    SCROLL_DEPTHS.forEach(function(depth) {
+      if (scrolled >= depth && !reportedDepths[depth]) {
+        reportedDepths[depth] = true;
+        if (window.clarity) {
+          window.clarity('event', 'scroll_depth', { depth: depth + '%' });
+        }
+      }
+    });
+  }
+
+  var scrollTick = false;
+  window.addEventListener('scroll', function() {
+    if (!scrollTick) {
+      requestAnimationFrame(function() {
+        trackScrollDepth();
+        scrollTick = false;
+      });
+      scrollTick = true;
+    }
+  }, { passive: true });
+
+  document.addEventListener('click', function(e) {
+    var target = e.target.closest('a, button');
+    if (!target) return;
+
+    var eventData = {};
+    if (target.tagName === 'A') {
+      var href = target.getAttribute('href') || '';
+      var text = (target.textContent || '').trim().slice(0, 40);
+      if (href.startsWith('#')) {
+        eventData = { type: 'anchor', target: href, text: text };
+      } else if (href.startsWith('http') || href.startsWith('//')) {
+        eventData = { type: 'outbound', target: href, text: text };
+      } else {
+        eventData = { type: 'internal', target: href, text: text };
+      }
+      if (target.getAttribute('target') === '_blank') {
+        eventData.external = true;
+      }
+    }
+    if (target.tagName === 'BUTTON') {
+      eventData = { type: 'button', text: (target.textContent || '').trim().slice(0, 40) };
+    }
+    if (window.clarity && eventData.type) {
+      window.clarity('event', 'cta_click', eventData);
+    }
+  });
+
+  var DWELL_INTERVAL = 30000;
+  var MAX_DWELL_BEATS = 10;
+  var dwellCount = 0;
+  var dwellTimer = setInterval(function() {
+    dwellCount++;
+    if (window.clarity) {
+      window.clarity('event', 'dwell', { seconds: dwellCount * 30 });
+    }
+    if (dwellCount >= MAX_DWELL_BEATS) {
+      clearInterval(dwellTimer);
+    }
+  }, DWELL_INTERVAL);
+
+  if (window.clarity) {
+    window.clarity('event', 'session_info', {
+      width: screen.width,
+      height: screen.height,
+      referrer: document.referrer || '(direct)'
+    });
+  }
+})();
+