> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vortexiq.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Microsoft Clarity on Vortex IQ

> Monitor traffic, conversion and tracking integrity from Microsoft Clarity, and catch instrumentation breaks before decisions are made on bad data.

export const CapabilityPage = ({data}) => {
  const d = data || ({});
  const [tab, setTab] = useState('overview');
  const [sel, setSel] = useState(null);
  const [q, setQ] = useState('');
  const [outcome, setOutcome] = useState('');
  const [status, setStatus] = useState('');
  const [limit, setLimit] = useState(8);
  const monitor = d.monitor || [];
  const audits = d.audits || [];
  const autos = d.autos || [];
  const outcomes = useMemo(() => {
    const s = new Set();
    monitor.forEach(m => s.add(m.o));
    audits.forEach(a => s.add(a.o));
    return [...s].sort();
  }, [monitor, audits]);
  const rows = useMemo(() => {
    const t = q.trim().toLowerCase();
    if (tab === 'monitor') {
      return monitor.filter(m => (!t || (m.n + ' ' + (m.d || '')).toLowerCase().includes(t)) && (!outcome || m.o === outcome));
    }
    if (tab === 'audit') {
      return audits.filter(a => (!t || (a.n + ' ' + (a.why || '')).toLowerCase().includes(t)) && (!outcome || a.o === outcome) && (!status || a.s === status));
    }
    if (tab === 'automate') {
      return autos.filter(w => !t || (w.n + ' ' + (w.d || '')).toLowerCase().includes(t));
    }
    return [];
  }, [tab, q, outcome, status, monitor, audits, autos]);
  const pill = (text, kind) => {
    const tone = kind === 'good' ? {
      color: '#1f9e54',
      borderColor: '#1f9e54',
      background: '#ecf8f110'
    } : kind === 'warn' ? {
      color: '#c07a17',
      borderColor: '#c07a17',
      background: '#fdf6e910'
    } : kind === 'bad' ? {
      color: '#c53527',
      borderColor: '#c53527',
      background: '#fdf0ee10'
    } : kind === 'brand' ? {
      color: '#5529d6',
      borderColor: '#5529d6'
    } : {
      color: 'inherit',
      borderColor: 'currentColor',
      opacity: 0.65
    };
    return <span key={text} style={{
      fontSize: '10.5px',
      fontFamily: 'ui-monospace, monospace',
      border: '1px solid',
      borderRadius: '999px',
      padding: '2px 8px',
      whiteSpace: 'nowrap',
      ...tone
    }}>
        {text}
      </span>;
  };
  const sevKind = s => s === 'critical' ? 'bad' : s === 'high' ? 'warn' : 'muted';
  const fixKind = s => s === 'Prepared fix' ? 'good' : s === 'Candidate remediation' ? 'warn' : 'muted';
  const card = (item, kind) => {
    const title = item.n;
    const badges = kind === 'monitor' ? [pill(item.o, 'brand'), pill(item.a === 'Watch only' || item.a === 'Merchant rule' ? item.a : `Alert ${item.a}`, 'muted')] : kind === 'audit' ? [pill(item.sev, sevKind(item.sev)), pill(item.s, fixKind(item.s))] : [pill(item.role, 'brand'), pill(item.ready, 'good')];
    const body = kind === 'monitor' ? item.nc ? 'Description pending editorial review; the signal is live.' : item.d : kind === 'audit' ? item.why : item.d;
    return <button key={title} onClick={() => setSel({
      kind,
      item
    })} style={{
      display: 'block',
      width: '100%',
      textAlign: 'left',
      border: '1px solid rgba(128,128,128,.28)',
      borderRadius: '10px',
      padding: '12px 14px',
      marginBottom: '8px',
      background: 'transparent',
      cursor: 'pointer',
      font: 'inherit',
      color: 'inherit'
    }}>
        <div style={{
      display: 'flex',
      gap: '10px',
      justifyContent: 'space-between',
      alignItems: 'flex-start',
      flexWrap: 'wrap'
    }}>
          <strong style={{
      fontSize: '14px'
    }}>{title}</strong>
          <span style={{
      display: 'flex',
      gap: '5px',
      flexWrap: 'wrap'
    }}>{badges}</span>
        </div>
        {body ? <div style={{
      fontSize: '12.5px',
      opacity: 0.72,
      marginTop: '4px'
    }}>{body}</div> : null}
      </button>;
  };
  const tabBtn = (id, label) => <button key={id} onClick={() => {
    setTab(id);
    setLimit(8);
    setQ('');
  }} style={{
    border: 0,
    background: 'none',
    font: 'inherit',
    fontWeight: 600,
    fontSize: '14px',
    padding: '9px 14px',
    cursor: 'pointer',
    color: tab === id ? '#5529d6' : 'inherit',
    opacity: tab === id ? 1 : 0.65,
    borderBottom: tab === id ? '2px solid #5529d6' : '2px solid transparent'
  }}>
      {label}
    </button>;
  const inputStyle = {
    border: '1px solid rgba(128,128,128,.3)',
    borderRadius: '999px',
    padding: '7px 13px',
    font: 'inherit',
    fontSize: '13px',
    background: 'transparent',
    color: 'inherit'
  };
  return <div style={{
    position: 'relative'
  }}>
      {}
      <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit,minmax(120px,1fr))',
    gap: '10px',
    margin: '18px 0'
  }}>
        {(d.stats || []).map(([v, l]) => <div key={l} style={{
    border: '1px solid rgba(128,128,128,.28)',
    borderRadius: '10px',
    padding: '11px 13px'
  }}>
            <div style={{
    fontSize: v.length > 6 ? '15px' : '21px',
    fontWeight: 700,
    letterSpacing: '-.02em',
    color: v.length > 6 ? '#5529d6' : 'inherit'
  }}>{v}</div>
            <div style={{
    fontSize: '11px',
    opacity: 0.66
  }}>{l}</div>
          </div>)}
      </div>

      <div style={{
    display: 'flex',
    gap: '4px',
    borderBottom: '1px solid rgba(128,128,128,.25)',
    marginBottom: '16px',
    flexWrap: 'wrap'
  }}>
        {tabBtn('overview', 'Overview')}
        {tabBtn('monitor', `Monitor (${monitor.length})`)}
        {tabBtn('audit', `Audit (${audits.length})`)}
        {tabBtn('automate', 'Automate')}
      </div>

      {tab === 'overview' && <div>
          <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))',
    gap: '10px'
  }}>
            {outcomes.map(o => <div key={o} style={{
    border: '1px solid rgba(128,128,128,.28)',
    borderLeft: '3px solid #5529d6',
    borderRadius: '10px',
    padding: '11px 14px'
  }}>
                <strong style={{
    fontSize: '13.5px'
  }}>{o}</strong>
              </div>)}
          </div>
          <p style={{
    fontSize: '13px',
    opacity: 0.75,
    marginTop: '16px'
  }}>
            Every capability follows the same controlled sequence: connect, monitor, detect, recommend,
            approve, execute, verify. Nothing changes a connected system without the approval step.
          </p>
        </div>}

      {tab !== 'overview' && <div>
          <div style={{
    display: 'flex',
    gap: '8px',
    marginBottom: '12px',
    flexWrap: 'wrap'
  }}>
            <input style={{
    ...inputStyle,
    flex: 1,
    minWidth: '170px'
  }} placeholder={`Search ${tab === 'monitor' ? 'signals' : tab === 'audit' ? 'checks' : 'workflows'}...`} value={q} onChange={e => {
    setQ(e.target.value);
    setLimit(8);
  }} />
            {tab !== 'automate' && <select style={inputStyle} value={outcome} onChange={e => {
    setOutcome(e.target.value);
    setLimit(8);
  }}>
                <option value="">All outcomes</option>
                {outcomes.map(o => <option key={o} value={o}>{o}</option>)}
              </select>}
            {tab === 'audit' && <select style={inputStyle} value={status} onChange={e => {
    setStatus(e.target.value);
    setLimit(8);
  }}>
                <option value="">All fix statuses</option>
                <option>Prepared fix</option>
                <option>Candidate remediation</option>
                <option>Report only</option>
              </select>}
          </div>

          {rows.length === 0 && tab === 'automate' && <div style={{
    border: '1px dashed #5529d6',
    borderRadius: '10px',
    padding: '15px'
  }}>
              <strong style={{
    fontSize: '14px'
  }}>Ready to build your first {d.name} workflow</strong>
              <p style={{
    fontSize: '12.5px',
    opacity: 0.75,
    margin: '6px 0 0'
  }}>
                Vortex IQ is integrated with {d.reads} read and {d.writes} write operations on {d.name}.
                Pick a trigger, add them as steps, and every step that changes data pauses for approval.
              </p>
            </div>}
          {rows.length === 0 && tab !== 'automate' && <div style={{
    opacity: 0.6,
    fontSize: '13px'
  }}>Nothing matches this search or filter.</div>}

          {rows.slice(0, limit).map(r => card(r, tab))}

          {rows.length > limit && <button onClick={() => setLimit(rows.length)} style={{
    ...inputStyle,
    display: 'block',
    margin: '10px auto 0',
    cursor: 'pointer'
  }}>
              View all {rows.length}
            </button>}
        </div>}

      {}
      {sel && <>
          <div onClick={() => setSel(null)} style={{
    position: 'fixed',
    inset: 0,
    background: 'rgba(10,6,26,.45)',
    zIndex: 40
  }} />
          <aside style={{
    position: 'fixed',
    top: 0,
    right: 0,
    width: 'min(430px, 94vw)',
    height: '100vh',
    overflowY: 'auto',
    background: 'var(--background, #fff)',
    backgroundColor: 'light-dark(#fff, #0c061f)',
    borderLeft: '1px solid rgba(128,128,128,.3)',
    padding: '20px 22px',
    zIndex: 50
  }}>
            <button onClick={() => setSel(null)} style={{
    float: 'right',
    border: '1px solid rgba(128,128,128,.3)',
    background: 'transparent',
    color: 'inherit',
    borderRadius: '999px',
    width: '30px',
    height: '30px',
    cursor: 'pointer'
  }}>
              ×
            </button>
            <DetailBody sel={sel} d={d} pill={pill} sevKind={sevKind} fixKind={fixKind} />
          </aside>
        </>}
    </div>;
};

Monitor traffic, conversion and tracking integrity from Microsoft Clarity, and catch instrumentation breaks before decisions are made on bad data.

No changes are made without the configured approval policy. Read-only operations do not modify the connected system; schedules, access scopes, API usage and data handling remain governed by Vortex IQ controls.

[Connect or manage this source](https://app.vortexiq.ai/workbench/settings/sources) · [How connecting works](/integrations/connector-catalogue) · [Create a workflow](https://app.vortexiq.ai/workbench/flows/create?connector=clarity)

<CapabilityPage data={{"name": "Microsoft Clarity", "reads": 1, "writes": 0, "stats": [["25", "performance signals"], ["11", "automated checks"], ["0", "prepared fixes"], ["0", "proven workflows"], ["1", "API operations"]], "resRows": [{"n": "projectliveinsights", "r": 1, "w": 0}], "opsPhrase": "over 13,000", "connPhrase": "more than 200", "monitor": [{"n": "Avg Scroll Depth %", "o": "Catalogue quality", "a": "Merchant rule", "d": "Clarity-distinctive - average page scroll reach. Low = key content below the fold is missed.", "nc": false}, {"n": "Checkout-Path Frustration Signals", "o": "Grow revenue", "a": "Merchant rule", "d": "Dead clicks / rage clicks on checkout-path pages - direct conversion blockers.", "nc": false}, {"n": "Checkout-Path Frustration Spike", "o": "Customer experience", "a": "Merchant rule", "d": "Alerts for Checkout-Path Frustration Spike.", "nc": false}, {"n": "Dead Click Rate %", "o": "Run operations", "a": "Merchant rule", "d": "Clarity-distinctive - % of sessions with a dead click. Rising = something looks clickable but isn't.", "nc": false}, {"n": "Frustration Signal Spike", "o": "Customer experience", "a": "Merchant rule", "d": "Alerts for Frustration Signal Spike.", "nc": false}, {"n": "Landing Page Performance vs Quick-Back", "o": "Protect revenue", "a": "Merchant rule", "d": "Landing Page Performance vs Quick-Back, broken down by row.", "nc": false}, {"n": "Quick-Back Rate %", "o": "Run operations", "a": "Merchant rule", "d": "Clarity-distinctive - visitors who land then immediately go back. High = landing-page / intent mismatch.", "nc": false}, {"n": "Session Source vs Ecom Revenue Attribution", "o": "Protect revenue", "a": "Merchant rule", "d": "Session Source vs Ecom Revenue Attribution, broken down by row.", "nc": false}, {"n": "Tracking Gap (session count collapsed)", "o": "Control risk and change", "a": "Merchant rule", "d": "Alerts for Tracking Gap (session count collapsed).", "nc": false}, {"n": "Worst Scroll-Depth Pages", "o": "Run operations", "a": "Watch only", "d": "Pages where visitors scroll least - content / layout reorder candidates.", "nc": false}, {"n": "Clarity Session Outcome vs Ecom Conversion", "o": "Protect revenue", "a": "Merchant rule", "d": "Clarity Session Outcome vs Ecom Conversion for the selected period.", "nc": true}, {"n": "Clarity UX Health Score", "o": "Customer experience", "a": "Merchant rule", "d": "Clarity UX Health Score for the selected period.", "nc": true}, {"n": "Frustration Signals vs Cart Abandonment", "o": "Protect revenue", "a": "Merchant rule", "d": "Frustration Signals vs Cart Abandonment for the selected period.", "nc": true}, {"n": "Rage Click Rate %", "o": "Run operations", "a": "Merchant rule", "d": "Rage Click Rate % for the selected period.", "nc": true}, {"n": "Sessions Captured", "o": "Run operations", "a": "Merchant rule", "d": "Sessions Captured for the selected period.", "nc": true}, {"n": "Bot Traffic %", "o": "Grow revenue", "a": "Merchant rule", "d": "Clarity flags suspected bot sessions - high share inflates every other metric.", "nc": false}, {"n": "Dead Click Hotspots (by page)", "o": "Run operations", "a": "Watch only", "d": "Dead Click Hotspots (by page), broken down by row.", "nc": false}, {"n": "Excessive Scrolling Rate %", "o": "Run operations", "a": "Merchant rule", "d": "Sessions with frantic scrolling - visitor can't find what they came for.", "nc": false}, {"n": "JavaScript Errors Detected", "o": "Grow revenue", "a": "Merchant rule", "d": "Clarity surfaces JS errors observed during sessions - checkout-page errors are revenue blockers.", "nc": false}, {"n": "Sessions by Country", "o": "Grow revenue", "a": "Watch only", "d": "Sessions by Country.", "nc": false}, {"n": "Sessions by Device", "o": "Grow revenue", "a": "Watch only", "d": "Sessions by Device.", "nc": false}, {"n": "Top Pages by Sessions", "o": "Run operations", "a": "Watch only", "d": "Top Pages by Sessions.", "nc": false}, {"n": "Avg Page Engagement Time", "o": "Grow revenue", "a": "Watch only", "d": "Avg Page Engagement Time for the selected period.", "nc": true}, {"n": "Avg Session Duration", "o": "Grow revenue", "a": "Watch only", "d": "Avg Session Duration for the selected period.", "nc": true}, {"n": "Pages per Session", "o": "Grow revenue", "a": "Watch only", "d": "Pages per Session for the selected period.", "nc": true}], "audits": [{"n": "Key events not configured (purchase event firing but conversions = 0)", "o": "Grow revenue", "sev": "critical", "s": "Report only", "why": "The property has meaningful traffic but reports zero conversions, which almost never means zero sales; it means the tool cannot see the sales that are happening. Every conversion-based report and any ad spend optimised against this tool's conversion signal is blind until this is fixed.", "codes": ["ANALYTICS-TRACK-003"]}, {"n": "API Credentials Invalid", "o": "Control risk and change", "sev": "high", "s": "Report only", "why": "With invalid credentials the tool has stopped collecting entirely; every metric that depends on it is silently stale.", "codes": ["CLR05"]}, {"n": "Attribution divergence with ecommerce platform \u003e 25% over 30d", "o": "Protect revenue", "sev": "high", "s": "Report only", "why": "Analytics showing conversions while the store records zero orders (or the reverse) means one of the two systems is wrong; every decision made on the divergent numbers is at risk.", "codes": ["ANALYTICS-ATTR-001"]}, {"n": "Cart abandonment rate above 75%", "o": "Protect revenue", "sev": "high", "s": "Report only", "why": "Three out of four shoppers who add something to their cart leave without buying it. These are the closest prospects the store has, people who already decided they wanted a specific product, so this is lost revenue that was nearly captured, not cold traffic that never showed interest.", "codes": ["ANALYTICS-CART-001"]}, {"n": "Checkout-Path Frustration", "o": "Grow revenue", "sev": "high", "s": "Report only", "why": "Frustration signals on the checkout path are as close to watching lost sales happen as analytics gets; each cluster is a prioritised fix.", "codes": ["CLR04"]}, {"n": "Session Capture Collapsed", "o": "Control risk and change", "sev": "high", "s": "Report only", "why": "A sharp drop in captured events or sessions usually means a tracking break after a site change, not a real traffic collapse; decisions made on the partial data will be wrong.", "codes": ["CLR01"]}, {"n": "Session conversion rate below 1%", "o": "Grow revenue", "sev": "high", "s": "Report only", "why": "Fewer than 1 in 100 sessions convert. At this rate the store needs a large multiple of today's traffic just to hold revenue flat, so the most efficient lever right now is fixing conversion, not buying more visitors who will convert at the same low rate.", "codes": ["ANALYTICS-TRACK-002"]}, {"n": "Average engagement time below 30 seconds", "o": "Grow revenue", "sev": "medium", "s": "Report only", "why": "Under 30 seconds of engaged time is barely enough to read a headline, let alone consider a product. Visitors this disengaged are unlikely to convert on this visit or return for another, so traffic that looks healthy in a session count is not translating into attention.", "codes": ["ANALYTICS-ENGAGE-001"]}, {"n": "Bounce rate above 70% over 30d", "o": "Protect revenue", "sev": "medium", "s": "Report only", "why": "Seven in ten visitors are leaving after one page. Whatever is bringing them, an ad, a search result, a link, is not being matched by what they find when they arrive, and every one of those visits was still a cost (ad spend, content effort, SEO ranking) that produced no second page view.", "codes": ["ANALYTICS-TRACK-001"]}, {"n": "Dead-Click Concentration", "o": "Grow revenue", "sev": "medium", "s": "Report only", "why": "Dead clicks concentrated on specific elements mean shoppers believe something is clickable and it is not; each cluster is a small usability fix with real conversion upside.", "codes": ["CLR02"]}, {"n": "Quick-Back Spike", "o": "Customer experience", "sev": "medium", "s": "Report only", "why": "Visitors bouncing straight back after arriving signals a broken or misleading landing experience for that traffic source.", "codes": ["CLR03"]}], "autos": [], "inValidation": 0}} />