marketing-dashboard

Marketing Dashboard

Purpose

Generate an interactive HTML dashboard that visualizes the marketing project's content coverage, campaign progress, and strategic alignment. The dashboard helps identify gaps, track production, and communicate status to stakeholders.

Prerequisites

• Marketing project initialized with content strategy

Workflow

Step 1: Load All Data

1. Read marketing-project.json — markets, GTM paths, brand
2. Read content-strategy.json — full content matrix with planned/generated counts
3. Read campaigns/*.json — campaign timelines and touchpoint status
4. Read calendar/content-calendar.yaml — publication schedule and status
5. Scan content/ directories — count actual files, read frontmatter for status

Step 2: Generate 5 Dashboard Views

Build a single-page HTML file with tabbed views using inline CSS and vanilla JavaScript (no external dependencies).

View 1: Coverage Heatmap

Market × GTM Path matrix with cells colored by content completion:

• Green (>75%): Most planned content generated
• Yellow (25-75%): In progress
• Red (<25%): Just started or empty
• Gray: Not planned

Each cell shows: {generated}/{planned} count. Click to expand and see format breakdown.

View 2: Funnel Distribution

Stacked bar chart per market showing content pieces by funnel stage:

• Awareness (thought-leadership + demand-gen): blue
• Consideration (lead-gen): orange
• Decision (sales-enablement): green
• Full-funnel (ABM): purple

Highlights funnel imbalances: "Market X has 15 awareness pieces but only 2 decision pieces."

View 3: Channel Mix

Donut chart showing content distribution across channels:

• LinkedIn, Blog/Website, Email, Events/Webinar, Gated Assets, Internal (sales)

Per-market breakdown available via filter.

View 4: Content Production Tracker

Table/list view of all content pieces with columns:

• Title, Type, Format, Market, GTM Path, Status (planned/drafted/reviewed/published), Date

Sortable and filterable. Status badges with colors.

View 5: Campaign Timeline

Gantt-style timeline showing active campaigns:

• Horizontal bars per campaign with phase coloring (attract/engage/convert)
• Touchpoint markers on the timeline
• Today marker for progress tracking

Step 3: Write Dashboard

Write to output/dashboard.html.

The HTML should:

• Be self-contained (no external CDN dependencies)
• Use CSS grid for layout, inline styles
• Include tab navigation for 5 views
• Be responsive (works on laptop and projected screens)
• Include project metadata in header (brand name, markets, date generated)
• Include a "Generated by cogni-marketing" footer

Step 4: Display Summary

Dashboard generated: output/dashboard.html
  Content coverage: {overall_pct}% ({generated}/{planned})
  Active campaigns: {count}
  Next deadline: {date} — {content_piece}
  Top gap: {market} × {gtm_path} — {missing_count} pieces missing

Open in browser to explore interactive views.