> ## 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.

# Enhanced Campaign Activity Logger

> See exactly when budget changes, targeting updates, and other campaign modifications happened—with visual markers on your performance charts showing how each change affected results.

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">January 23, 2026</Badge>
  <Badge color="blue" size="sm" icon="rectangle-ad">Ad Platform</Badge>
  <Badge color="green" size="sm" icon="sparkles">New Feature</Badge>
</div>

<div className="cl-mockup-wrapper">
  <div className="cl-mockup-card">
    <div
      style={{
  height: "100px",
  background: "#F5F5F7",
  borderRadius: "6px",
  marginBottom: "12px",
  position: "relative",
  overflow: "hidden",
  padding: "8px"
}}
    >
      <div
        style={{
    position: "absolute",
    bottom: "20px",
    left: "8px",
    right: "8px",
    height: "50px"
  }}
      >
        <div
          style={{
      width: "100%",
      height: "100%",
      background: "linear-gradient(90deg, transparent 0%, #3B82F6 10%, #3B82F6 30%, #3B82F6 45%, #22C55E 50%, #22C55E 70%, #22C55E 100%)",
      opacity: 0.3,
      clipPath: "polygon(0% 80%, 15% 70%, 30% 75%, 45% 60%, 50% 30%, 60% 25%, 75% 20%, 90% 15%, 100% 10%, 100% 100%, 0% 100%)"
    }}
        />
      </div>

      <div
        style={{
    position: "absolute",
    bottom: "20px",
    left: "48%",
    width: "2px",
    height: "55px",
    background: "#F59E0B"
  }}
      >
        <div
          style={{
      position: "absolute",
      top: "-4px",
      left: "-4px",
      width: "10px",
      height: "10px",
      background: "#F59E0B",
      borderRadius: "50%",
      border: "2px solid white"
    }}
        />

        <div style={{
                      position: "absolute",
                      top: "-28px",
                      left: "50%",
                      transform: "translateX(-50%)",
                      background: "#1F2937",
                      color: "white",
                      padding: "4px 8px",
                      borderRadius: "4px",
                      fontSize: "8px",
                      whiteSpace: "nowrap"
                    }}>$500 &rarr; $1,000</div>
      </div>

      <div
        style={{
    position: "absolute",
    bottom: "8px",
    left: "8px",
    right: "8px",
    display: "flex",
    justifyContent: "space-between"
  }}
      >
        {[0, 1, 2, 3, 4].map((i) => (
                        <div key={i} style={{ height: "6px", width: "20px", background: "#E8E8ED", borderRadius: "1px" }}></div>
                      ))}
      </div>
    </div>

    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
      <div
        style={{
    display: "flex",
    alignItems: "flex-start",
    gap: "8px",
    padding: "8px",
    background: "#F5F5F7",
    borderRadius: "6px",
    borderLeft: "3px solid #F59E0B"
  }}
      >
        <div style={{ width: "18px", height: "18px", borderRadius: "4px", background: "#FEF3C7", flexShrink: 0 }} />

        <div style={{ flex: 1 }}>
          <div style={{ height: "8px", width: "100px", marginBottom: "4px", background: "#E8E8ED", borderRadius: "2px" }} />

          <div style={{ height: "6px", width: "80%", background: "#E8E8ED", borderRadius: "2px" }} />
        </div>

        <div style={{ height: "6px", width: "40px", background: "#E8E8ED", borderRadius: "1px" }} />
      </div>

      <div
        style={{
    display: "flex",
    alignItems: "flex-start",
    gap: "8px",
    padding: "8px",
    background: "#F5F5F7",
    borderRadius: "6px",
    borderLeft: "3px solid #3B82F6"
  }}
      >
        <div style={{ width: "18px", height: "18px", borderRadius: "4px", background: "#DBEAFE", flexShrink: 0 }} />

        <div style={{ flex: 1 }}>
          <div style={{ height: "8px", width: "80px", marginBottom: "4px", background: "#E8E8ED", borderRadius: "2px" }} />

          <div style={{ height: "6px", width: "70%", background: "#E8E8ED", borderRadius: "2px" }} />
        </div>

        <div style={{ height: "6px", width: "40px", background: "#E8E8ED", borderRadius: "1px" }} />
      </div>
    </div>
  </div>
</div>

### Campaign Activity Logger

Ever wonder why performance changed on a specific day? The new Activity Logger shows every modification made to your campaigns, overlaid directly on performance charts so you can correlate changes with results.

#### Key Features

1. **Visual Change Markers**: See exactly where changes happened on your performance timeline
2. **Detailed Activity Log**: Every budget change, targeting update, and status modification recorded
3. **Before/After Values**: Instantly see what changed and by how much
4. **Filterable History**: Focus on specific change types (budget, targeting, status, etc.)

#### Tracked Activities

* **Budget Changes**: Daily, weekly, monthly, and total budget modifications
* **Targeting Updates**: Keyword additions/removals, audience changes, category targeting
* **Status Changes**: Campaign paused, resumed, or ended
* **Bid Adjustments**: CPC/CPM bid modifications
* **Schedule Changes**: Start/end date updates, dayparting modifications

#### Why This Matters

When you double your budget and see performance improve the next day, you want to know if it was the budget change or just a good day. The Activity Logger gives you the data to make that connection—and make smarter decisions going forward.

<ChangelogActions />