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

# Analytics Redesign

> Redesigned Analytics > Reports page with insight cards, period-over-period comparisons, trend charts, and vendor name/id or campaign name/id filters.

export const ChangelogActions = () => {
  return <>
      <style>{`
        .changelog-actions {
          display: flex;
          justify-content: center;
          gap: 12px;
          margin-top: 2rem;
          padding-top: 1.5rem;
          border-top: 1px solid #e5e7eb;
        }
        
        [data-theme="dark"] .changelog-actions {
          border-top-color: #374151;
        }
        
        .changelog-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 9999px;
          border: 1px solid #d1d5db;
          background: transparent;
          color: #6b7280;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .changelog-btn:hover {
          border-color: #9ca3af;
          background: #f9fafb;
        }
        
        [data-theme="dark"] .changelog-btn {
          border-color: #4b5563;
          color: #9ca3af;
        }
        
        [data-theme="dark"] .changelog-btn:hover {
          border-color: #6b7280;
          background: #1f2937;
        }
      `}</style>
      <div className="changelog-actions">
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    btn.innerHTML = "❤️ Like";
    btn.style.borderColor = "#ec4899";
  }}>
          🤍 Like
        </button>
        <button className="changelog-btn" onClick={() => {
    const btn = event.target.closest("button");
    navigator.clipboard.writeText(window.location.href);
    const originalContent = btn.innerHTML;
    btn.innerHTML = "✓ Copied";
    btn.style.borderColor = "#22c55e";
    btn.style.color = "#22c55e";
    setTimeout(() => {
      btn.innerHTML = originalContent;
      btn.style.borderColor = "";
      btn.style.color = "";
    }, 2000);
  }}>
          ↗ Share
        </button>
      </div>
    </>;
};

<div className="cl-badge-group">
  <Badge color="gray" size="sm" icon="calendar">
    May 29, 2026
  </Badge>

  <Badge color="blue" size="sm" icon="rectangle-ad">
    Ad Platform
  </Badge>

  <Badge color="purple" size="sm" icon="arrow-up-right-dots">
    Enhancement
  </Badge>
</div>

## What's New

The **Analytics > Reports** page in the Marketplace UI has been redesigned to make performance data easier to scan, compare, and investigate. The update keeps the familiar headline metrics from the previous experience while adding richer insight cards, period-over-period comparisons, trend charts, and more flexible filtering.

### Highlights

* **Familiar summary metrics** at the top in a collapsible section, including total ad spend, impressions, clicks, purchases, and ROAS
* **Insight cards** across spend efficiency, vendor performance, conversion health, click-through rate, and cost per click, each showing absolute values and percentage change versus the previous period
* **Trend charts** on key cards to compare current and previous periods over time
* **Top vendors** view to sort and compare leading vendors by metrics such as ad spend and promoted sales
* **Page-wide filters** by ad format and date range, plus new filters by **vendor name/id** or **campaign name/id** to focus the entire page on a specific slice of performance

The redesigned page helps marketplace teams understand campaign and vendor performance without exporting data or leaving Analytics to investigate a specific campaign.

Learn more in the [Reports Tab](/en/knowledge-base/ad-platform/reporting-and-analytics/) guide.

<ChangelogActions />