Marketing dashboard
Flipkart and Myntra
Prompt
Create a marketing dashboard
Happy to help! To make sure the dashboard meets your needs, could you tell me a bit more about: 1. The platform or tool you’d like to use (e.g., Excel/Google Sheets, Looker Studio, Tableau, Power BI, Python/Dash, etc.). 2. The marketing channels or data sources you want to include (e.g., Google Ads, Facebook Ads, email platform, web analytics, CRM). 3. The key metrics or KPIs you need to track (e.g., impressions, clicks, conversions, CAC, ROAS, attribution windows). 4. Who the primary audience is (executives, marketing managers, paid-media specialists, etc.) and how often the dashboard will be reviewed. With this info I can tailor the layout, data model, and any sample code or visuals to suit your requirements.
Drag to resize
Of course! Here is a comprehensive guide to creating a powerful and effective marketing dashboard.
A great marketing dashboard isn't just a collection of charts; it tells a story about your performance, helps you make data-driven decisions, and aligns your team around key goals.
This guide includes:
1. **A Visual Mock-up** of a multi-tabbed marketing dashboard.
2. **Breakdown of Each Section** with key metrics (KPIs) and why they matter.
3. **Different Dashboard Types** for different audiences (Executive vs. Team).
4. **Tools & Steps** to build your own dashboard.
---
### The All-in-One Marketing Dashboard (Mock-up)
Imagine a dashboard built in a tool like Looker Studio (formerly Google Data Studio), Tableau, or Power BI. It would be organized with tabs for clarity.
**[Global Filters: Date Range (This Week, Last 30 Days, Quarter, Custom), Channel (All, Organic, Paid, Social)]**
---
#### **Tab 1: 📈 Executive Summary (The 30,000-Foot View)**
* **Purpose:** To give leadership a quick, high-level overview of marketing's impact on business goals.
| **Metric** | **Current Period** | **vs. Previous Period** | **Goal** |
| --------------------------------------------- | ------------------ | ----------------------- | ------------ |
| 💰 **Sales Revenue from Marketing** | $125,000 | ▲ 15% | $110,000 |
| 🎯 **Marketing Qualified Leads (MQLs)** | 850 | ▲ 8% | 800 |
| 🤝 **Sales Qualified Leads (SQLs)** | 165 | ▲ 5% | 150 |
| 💸 **Customer Acquisition Cost (CAC)** | $450 | ▼ 5% (Good!) | < $500 |
| 🔄 **Return on Marketing Investment (ROMI)** | 5.2x | ▲ 10% | 4.5x |
**Visuals on this page:**
* **Funnel Visualization:** Shows progression from Visitor > Lead > MQL > SQL > Customer.
* **Revenue vs. Spend Line Chart:** A dual-axis chart tracking Marketing Spend and Attributed Revenue over time.
* **CAC Trend Line Chart:** Shows if you're becoming more or less efficient at acquiring customers.
---
#### **Tab 2: 🌐 Website & SEO Performance**
* **Purpose:** To understand how your website is performing as a marketing asset and how well your organic search strategy is working.
| **Metric** | **Current Period** | **vs. Previous Period** | **Notes / Chart** |
| --------------------------------------------- | ------------------ | ----------------------- | ----------------------------------------------- |
| 👤 **Website Sessions (by Source)** | 95,000 | ▲ 12% | Pie chart showing Organic, Direct, Paid, Social |
| 📉 **Bounce Rate** | 45% | ▼ 3% (Good!) | Lower is better; shows content relevance |
| ⏱️ **Avg. Session Duration** | 2m 15s | ▲ 10s | Trendline showing engagement over time |
| 📝 **Goal Completions (e.g., a form fill)** | 1,200 | ▲ 18% | Bar chart of completions by page |
| 🔑 **Top 10 Keyword Rankings** | (Table) | (vs. last month) | Table showing keyword, current rank, change |
| 🔗 **New Backlinks Acquired** | 55 | ▲ 5% | Tracks SEO authority building |
---
#### **Tab 3: 📢 Paid Advertising Performance**
* **Purpose:** To measure the effectiveness and ROI of your paid campaigns (Google Ads, LinkedIn Ads, etc.).
| **Metric** | **Current Period** | **vs. Previous Period** | **Notes / Chart** |
| --------------------------------------------- | ------------------ | ----------------------- | ----------------------------------------------- |
| 💵 **Total Ad Spend (by Platform)** | $20,000 | ▲ 2% | Bar chart showing spend on Google, LinkedIn, etc. |
| 👀 **Impressions** | 1,500,000 | ▲ 8% | How many times your ads were seen |
| 👉 **Click-Through Rate (CTR)** | 2.5% | ▲ 0.2% | Ad relevance and creative effectiveness |
| 🖱️ **Cost Per Click (CPC)** | $1.80 | ▼ 4% (Good!) | Cost efficiency of your clicks |
| ✅ **Cost Per Acquisition/Conversion (CPA)** | $85 | ▼ 10% (Good!) | The ultimate measure of campaign efficiency |
| ROI **Return on Ad Spend (ROAS)** | 4.5x | ▲ 12% | For every $1 spent, you generated $4.50 |
---
#### **Tab 4: ✍️ Content & Social Media**
* **Purpose:** To track audience engagement with your content and social media presence.
| **Metric** | **Current Period** | **vs. Previous Period** | **Notes / Chart** |
| ----------------------------------------- | ------------------ | ----------------------- | ------------------------------------------------------ |
| 📈 **Social Media Follower Growth** | +1,250 | ▲ 10% | Line chart showing total followers by platform |
| ❤️ **Engagement Rate (by Platform)** | 3.1% | ▲ 0.5% | (Likes + Comments + Shares) / Followers |
| ➡️ **Website Clicks from Social** | 4,500 | ▲ 20% | Shows social's ability to drive traffic |
| 📄 **Top 5 Blog Posts (by Pageviews)** | (Table) | - | Table listing post title and total views |
| 📥 **Ebook/Gated Content Downloads** | 250 | ▲ 15% | Measures lead generation from specific content pieces |
---
#### **Tab 5: 💌 Email Marketing**
* **Purpose:** To monitor the health of your email list and the performance of your campaigns.
| **Metric** | **Campaign Average** | **Industry Benchmark** | **Notes / Chart** |
| ------------------------------------------ | -------------------- | -------------------- | -------------------------------------------------------- |
| 📬 **Open Rate** | 28% | 22% | Subject line effectiveness |
| 👆 **Click-Through Rate (CTR)** | 4.2% | 2.6% | Content and call-to-action relevance |
| 🚫 **Unsubscribe Rate** | 0.15% | < 0.3% | List health and audience interest |
| 🌱 **List Growth Rate** | 2.5% (monthly) | - | Shows if your list is growing or shrinking |
| 💰 **Conversions from Email** | 75 | - | Number of users who completed a goal after clicking |
---
### How to Build Your Marketing Dashboard
#### Step 1: Define Your Goals and Audience
* **For Executives (CMO/CEO):** Focus on high-level, business-impact metrics (Revenue, CAC, ROMI).
* **For Marketing Managers:** A mix of strategic and tactical data (funnel metrics, channel performance).
* **For Channel Specialists (e.g., PPC Manager):** Deeply tactical data for that specific channel (CTR, CPA, ROAS by campaign).
#### Step 2: Choose Your KPIs
Select the metrics that directly align with your marketing objectives. Don't clutter your dashboard with "vanity metrics" that don't drive action. The metrics listed above are a great starting point.
#### Step 3: Select Your Tools
* **Free & Powerful:**
* **Looker Studio (Google Data Studio):** The best free option. Natively integrates with Google Analytics, Google Ads, Sheets, and BigQuery. Has connectors for almost everything else.
* **Paid & Advanced:**
* **Tableau:** The industry leader for powerful, beautiful data visualization.
* **Microsoft Power BI:** Excellent if your company is heavily invested in the Microsoft ecosystem (Azure, Office 365).
* **Klipfolio / Databox / Geckoboard:** User-friendly platforms specifically designed for building business dashboards with many pre-built integrations.
#### Step 4: Connect Your Data Sources
This is the most technical step. You will need to connect your dashboarding tool to the various platforms where your data lives. This is usually done via APIs or built-in connectors.
* **Website Data:** Google Analytics
* **Ad Data:** Google Ads, LinkedIn Ads, Facebook Ads APIs
* **CRM Data:** Salesforce, HubSpot, Zoho connectors
* **Social Data:** Native platform analytics or third-party tools like Sprout Social.
#### Step 5: Design and Visualize
* **Tell a Story:** Organize your dashboard from high-level summaries to specific details.
* **Use Visual Hierarchy:** Place your most important KPI in the top-left. Use larger numbers and prominent charts for key information.
* **Use The Right Chart:**
* **Line Chart:** For trends over time (e.g., Traffic, Revenue).
* **Bar/Column Chart:** For comparisons (e.g., Spend by Channel).
* **Pie/Donut Chart:** For showing parts of a whole (e.g., Traffic by Source).
* **Scorecards:** For single, important numbers (e.g., MQLs, Total Spend).
#### Step 6: Review and Iterate
A dashboard is a living document. Review it weekly with your team. Ask questions like:
* "What is this chart telling us?"
* "What actions should we take based on this data?"
* "Is any information missing or confusing?"
By following this structure, you can create a marketing dashboard that serves as the central nervous system for your entire marketing operation.Drag to resize
Absolutely! Here’s a **Marketing Dashboard** template you can adapt and implement. Below, I will provide: - **Key Metrics/Sections** - **Sample Layout (as a table—can be adapted to Google Sheets, Excel, Notion, Tableau, etc.)** - **Brief explanation of each component** --- ### **Key Metrics/Sections to Display** 1. **Website Performance** - Sessions - Unique Visitors - Bounce Rate - Average Session Duration 2. **Leads & Conversions** - Leads Captured - Conversion Rate - Cost Per Lead (CPL) - Sales/Signups 3. **Traffic Sources** - Organic Search - Paid Search - Direct - Referral - Social 4. **Social Media Metrics** - Followers (per channel) - Engagement Rate - Top Performing Content 5. **Email Campaigns** - Sent - Open Rate - Click-Through Rate (CTR) - Unsubscribes 6. **Revenue & ROI** - Total Revenue - Marketing Spend - Return on Ad Spend (ROAS) - Customer Acquisition Cost (CAC) --- ### **Sample Dashboard Layout (Tabular Mockup)** | Metric | Current Period | Previous Period | % Change | Target | Status | |----------------------------|:-------------:|:--------------:|:--------:|:------:|:--------:| | **Website Sessions** | 12,500 | 10,000 | +25% | 13,000 | 🟡 | | **Leads Captured** | 530 | 450 | +18% | 600 | 🟡 | | **Conversion Rate** | 4.2% | 4.0% | +0.2% | 5% | 🔴 | | **Cost Per Lead** | $8.35 | $9.12 | -8% | $7.00 | 🟢 | | **Organic Traffic** | 6,800 | 5,900 | +15% | - | 🟢 | | **Paid Traffic** | 4,000 | 3,600 | +11% | - | 🟢 | | **Social Engagement Rate** | 8.5% | 7.8% | +0.7% | 9% | 🟡 | | **Email Open Rate** | 32.1% | 30.7% | +1.4% | 35% | 🟡 | | **Email CTR** | 7.1% | 7.0% | +0.1% | 8% | 🟡 | | **Total Revenue** | $18,600 | $16,300 | +14.1% | $20k | 🟢 | | **Marketing Spend** | $4,420 | $5,120 | -13.7% | $5k | 🟢 | | **ROAS** | 4.21 | 3.18 | +1.03 | 3.5 | 🟢 | --- **Legend:** 🟢 = On Target/Above Target 🟡 = Slightly Below Target 🔴 = Underperforming --- ### **Visualization Suggestions** - **Line/Bar Charts:** Website sessions & leads over time - **Pie Chart:** Traffic source distribution - **Funnel Chart:** Conversion journey (Visitors → Leads → Opportunities → Sales) - **Geo Map:** Top-performing regions - **Tables:** For high-level and granular details --- ### **Tips to Implement** - **Google Data Studio** or **Tableau**: Great for live dashboards using data sources like Google Analytics, Facebook Ads, HubSpot, etc. - **Excel/Google Sheets**: Use formulas and conditional formatting for quick setup. - **Update Weekly/Monthly**: Set frequency based on your business needs. --- If you specify a **tool** (e.g., Excel, Google Sheets, Notion, Tableau), I can provide an even more tailored step-by-step or a sample file! Let me know if you want a **visual mockup, direct spreadsheet link, or integrations setup**.
Drag to resize
Response not available
Drag to resize
# **Marketing Dashboard Design** ## **Overview** A marketing dashboard provides a consolidated view of key performance indicators (KPIs), campaign performance, and ROI to help marketers make data-driven decisions. --- ## **Dashboard Components** ### **1. Header Section** - **Company Logo & Name** - **Date Range Selector** (Last 7/30/90 days, Custom Range) - **Quick Filters** (Campaign, Channel, Region, Product) ### **2. Summary Metrics (Top-Level KPIs)** | Metric | Current Period | Previous Period | % Change | |-----------------------|----------------|-----------------|----------| | **Total Revenue** | $250,000 | $200,000 | ▲ 25% | | **Leads Generated** | 5,200 | 4,500 | ▲ 15.5% | | **Conversion Rate** | 3.8% | 3.2% | ▲ 0.6% | | **Cost Per Lead** | $12.50 | $14.20 | ▼ 12% | | **ROAS (Return on Ad Spend)** | 4.2x | 3.5x | ▲ 0.7x | ### **3. Campaign Performance** - **Bar/Line Chart**: Revenue & Conversions by Campaign (Top 5) - **Table**: Campaign Name | Spend | Impressions | Clicks | Conversions | CPA | ROAS ### **4. Channel Breakdown** - **Pie/Donut Chart**: Traffic Sources (Organic, Paid, Social, Email, Direct) - **Trend Line Chart**: Channel Performance Over Time ### **5. Lead Funnel Visualization** - **Funnel Chart**: - **Awareness** (Impressions) → **Consideration** (Clicks) → **Conversion** (Leads) → **Customers** ### **6. ROI & Budget Allocation** - **Bar Chart**: Budget Spent vs. Revenue Generated by Channel - **ROI Heatmap**: High vs. Low Performing Campaigns ### **7. Top Performing Content** - **Table**: Top Blog Posts, Ads, or Social Posts by Engagement (CTR, Shares, Time on Page) ### **8. Customer Acquisition Cost (CAC) & Lifetime Value (LTV)** - **Comparison Chart**: CAC vs. LTV Trend Over Time - **Goal**: LTV > 3x CAC ### **9. Social Media Engagement** - **Metrics**: Likes, Shares, Comments, Followers Growth - **Chart**: Engagement Trends (Facebook, LinkedIn, Instagram, Twitter) ### **10. Email Marketing Metrics** - **Table**: Open Rate, Click Rate, Unsubscribe Rate, Conversion Rate --- ## **Dashboard Features** ✅ **Interactive Filters** (Date Range, Channel, Campaign) ✅ **Export to PDF/Excel** ✅ **Drill-Down Capability** (Click on charts for deeper insights) ✅ **Alert System** (Threshold breaches, e.g., ROAS < 2x) ✅ **Mobile Responsive** --- ## **Tools to Build This Dashboard** - **Google Data Studio** (Free) - **Tableau/Power BI** (Advanced Analytics) - **HubSpot/Marketo** (CRM-Based Dashboards) - **Custom-Built (Python + Dash/Plotly)** --- Would you like a mockup visualization or recommendations on specific KPIs for your industry? Let me know how I can refine this further! 🚀
Drag to resize
create_marketing_dashboard()
Drag to resize
Here's a comprehensive marketing dashboard solution using Streamlit and Plotly with sample data. This dashboard includes key marketing metrics, visualizations, and campaign performance tracking:
```python
import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px
from datetime import datetime, timedelta
# Set up the page
st.set_page_config(page_title="Marketing Dashboard", layout="wide")
st.title("📊 Marketing Performance Dashboard")
# Generate sample data
def generate_sample_data():
# Date range
end_date = datetime.today()
start_date = end_date - timedelta(days=90)
dates = pd.date_range(start_date, end_date, freq='D')
# Sample data generation
data = {
'date': np.random.choice(dates, 500),
'campaign': np.random.choice(['Summer Sale', 'New Product Launch', 'Holiday Promo', 'Referral Program'], 500),
'channel': np.random.choice(['Facebook', 'Google Ads', 'Instagram', 'Email', 'Organic'], 500),
'clicks': np.random.randint(50, 500, 500),
'conversions': np.random.randint(5, 50, 500),
'cost': np.random.uniform(50, 2000, 500),
'revenue': np.random.uniform(100, 5000, 500),
'region': np.random.choice(['North America', 'Europe', 'Asia', 'South America'], 500),
'product_category': np.random.choice(['Electronics', 'Apparel', 'Home Goods', 'Beauty'], 500)
}
df = pd.DataFrame(data)
df['ROAS'] = df['revenue'] / df['cost']
df['CPA'] = df['cost'] / df['conversions']
df['conversion_rate'] = (df['conversions'] / df['clicks']) * 100
return df
# Load data
df = generate_sample_data()
# Date filter
st.sidebar.header("Filters")
date_range = st.sidebar.date_input("Date Range",
[df['date'].min(), df['date'].max()],
min_value=df['date'].min(),
max_value=df['date'].max())
if len(date_range) == 2:
filtered_df = df[(df['date'] >= pd.to_datetime(date_range[0])) &
(df['date'] <= pd.to_datetime(date_range[1]))]
else:
filtered_df = df
# Channel filter
all_channels = ['All'] + list(df['channel'].unique())
selected_channel = st.sidebar.selectbox("Marketing Channel", all_channels)
if selected_channel != 'All':
filtered_df = filtered_df[filtered_df['channel'] == selected_channel]
# KPI Cards
st.subheader("Key Performance Indicators")
kpi1, kpi2, kpi3, kpi4 = st.columns(4)
total_revenue = filtered_df['revenue'].sum()
total_cost = filtered_df['cost'].sum()
total_conversions = filtered_df['conversions'].sum()
roas = total_revenue / total_cost if total_cost > 0 else 0
kpi1.metric("Total Revenue", f"${total_revenue:,.0f}")
kpi2.metric("Marketing Cost", f"${total_cost:,.0f}")
kpi3.metric("Conversions", f"{total_conversions:,.0f}")
kpi4.metric("ROAS", f"{roas:.2f}")
# First row of charts
col1, col2 = st.columns(2)
# Revenue Trend
with col1:
st.subheader("Revenue Trend")
daily_revenue = filtered_df.groupby('date')['revenue'].sum().reset_index()
fig = px.line(daily_revenue, x='date', y='revenue',
labels={'revenue': 'Revenue ($)'})
st.plotly_chart(fig, use_container_width=True)
# Channel Performance
with col2:
st.subheader("Channel Performance")
channel_perf = filtered_df.groupby('channel').agg({
'cost': 'sum',
'revenue': 'sum',
'conversions': 'sum'
}).reset_index()
channel_perf['ROAS'] = channel_perf['revenue'] / channel_perf['cost']
fig = px.bar(channel_perf, x='channel', y='ROAS',
color='channel', text='ROAS',
labels={'ROAS': 'Return on Ad Spend'})
fig.update_traces(texttemplate='%{text:.2f}', textposition='outside')
st.plotly_chart(fig, use_container_width=True)
# Second row of charts
col3, col4 = st.columns(2)
# Conversion Rate by Campaign
with col3:
st.subheader("Conversion Rate by Campaign")
campaign_cr = filtered_df.groupby('campaign').agg({
'clicks': 'sum',
'conversions': 'sum'
}).reset_index()
campaign_cr['conversion_rate'] = (campaign_cr['conversions'] / campaign_cr['clicks']) * 100
fig = px.bar(campaign_cr, x='campaign', y='conversion_rate',
color='campaign', text='conversion_rate',
labels={'conversion_rate': 'Conversion Rate (%)'})
fig.update_traces(texttemplate='%{text:.2f}%', textposition='outside')
st.plotly_chart(fig, use_container_width=True)
# Geographic Performance
with col4:
st.subheader("Regional Performance")
region_perf = filtered_df.groupby('region').agg({
'revenue': 'sum',
'cost': 'sum'
}).reset_index()
region_perf['Profit'] = region_perf['revenue'] - region_perf['cost']
fig = px.choropleth(region_perf,
locations='region',
locationmode='country names',
color='Profit',
color_continuous_scale='Blues',
title='Profit by Region')
st.plotly_chart(fig, use_container_width=True)
# Campaign Performance Table
st.subheader("Campaign Performance Details")
campaign_details = filtered_df.groupby('campaign').agg({
'cost': 'sum',
'revenue': 'sum',
'conversions': 'sum',
'clicks': 'sum'
}).reset_index()
campaign_details['CPA'] = campaign_details['cost'] / campaign_details['conversions']
campaign_details['ROAS'] = campaign_details['revenue'] / campaign_details['cost']
campaign_details['conversion_rate'] = (campaign_details['conversions'] / campaign_details['clicks']) * 100
# Format numbers
campaign_details['cost'] = campaign_details['cost'].apply(lambda x: f"${x:,.0f}")
campaign_details['revenue'] = campaign_details['revenue'].apply(lambda x: f"${x:,.0f}")
campaign_details['CPA'] = campaign_details['CPA'].apply(lambda x: f"${x:,.2f}")
campaign_details['ROAS'] = campaign_details['ROAS'].apply(lambda x: f"{x:.2f}")
campaign_details['conversion_rate'] = campaign_details['conversion_rate'].apply(lambda x: f"{x:.2f}%")
st.dataframe(campaign_details, hide_index=True)
# How to run instructions in sidebar
st.sidebar.header("How To Use")
st.sidebar.info("""
1. Select date range using date picker
2. Filter by marketing channel
3. Hover over charts for details
4. View campaign metrics in table
""")
# Add some styling
st.markdown("""
<style>
[data-testid="stMetricValue"] {
font-size: 18px;
}
[data-testid="stMetricLabel"] {
font-size: 14px;
}
</style>
""", unsafe_allow_html=True)
```
## Features of this Marketing Dashboard:
1. **Interactive Filters**:
- Date range selection
- Marketing channel selection
2. **Key Performance Indicators**:
- Total Revenue
- Marketing Cost
- Conversions
- Return on Ad Spend (ROAS)
3. **Visualizations**:
- Revenue trend over time (line chart)
- Channel performance comparison (bar chart)
- Conversion rate by campaign (bar chart)
- Regional performance (choropleth map)
4. **Campaign Performance Table**:
- Detailed metrics for each campaign
- Cost, Revenue, Conversions
- CPA (Cost Per Acquisition)
- ROAS (Return on Ad Spend)
- Conversion Rate
5. **Responsive Design**:
- Adapts to different screen sizes
- Clean, modern layout
## How to Run:
1. Save as `marketing_dashboard.py`
2. Install dependencies:
```bash
pip install streamlit pandas numpy plotly
```
3. Run with:
```bash
streamlit run marketing_dashboard.py
```
## Customization Options:
- Replace `generate_sample_data()` with your actual data connection
- Add more filters (campaign, region, product category)
- Include additional visualizations (scatter plots, pie charts)
- Add goal tracking against targets
- Implement data refresh functionality
- Add export capabilities for reports
This dashboard provides a comprehensive overview of marketing performance with interactive elements to drill down into specific time periods and channels. The visualizations help quickly identify top-performing campaigns and channels, while the detailed table provides actionable metrics for optimization.Drag to resize
I'll create a comprehensive marketing dashboard for you. Here's a complete HTML implementation with interactive charts and key metrics:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marketing Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f5f7fa;
color: #333;
}
.dashboard {
padding: 20px;
max-width: 1400px;
margin: 0 auto;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 10px;
margin-bottom: 30px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.metric-card {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s ease;
}
.metric-card:hover {
transform: translateY(-5px);
}
.metric-value {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 10px;
}
.metric-label {
color: #666;
font-size: 1rem;
margin-bottom: 10px;
}
.metric-change {
font-size: 0.9rem;
padding: 5px 10px;
border-radius: 20px;
font-weight: bold;
}
.positive {
background-color: #e8f5e8;
color: #2e7d32;
}
.negative {
background-color: #ffebee;
color: #c62828;
}
.charts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.chart-container {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.chart-title {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 20px;
color: #333;
}
.chart-wrapper {
position: relative;
height: 300px;
}
.date-filter {
background: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.filter-controls select {
padding: 10px 15px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 1rem;
background: white;
cursor: pointer;
}
.filter-controls select:focus {
outline: none;
border-color: #667eea;
}
.performance-table {
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
.table-header {
background: #f8f9fa;
padding: 20px;
border-bottom: 1px solid #dee2e6;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #dee2e6;
}
th {
background-color: #f8f9fa;
font-weight: bold;
color: #495057;
}
tr:hover {
background-color: #f8f9fa;
}
.status-badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: bold;
}
.status-active {
background-color: #d4edda;
color: #155724;
}
.status-paused {
background-color: #fff3cd;
color: #856404;
}
@media (max-width: 768px) {
.dashboard {
padding: 10px;
}
.header h1 {
font-size: 2rem;
}
.charts-grid {
grid-template-columns: 1fr;
}
.date-filter {
flex-direction: column;
gap: 15px;
}
}
</style>
</head>
<body>
<div class="dashboard">
<div class="header">
<h1>Marketing Dashboard</h1>
<p>Track your marketing performance and ROI in real-time</p>
</div>
<div class="date-filter">
<h3>Performance Overview</h3>
<div class="filter-controls">
<select id="timeRange">
<option value="7">Last 7 days</option>
<option value="30" selected>Last 30 days</option>
<option value="90">Last 90 days</option>
<option value="365">Last year</option>
</select>
</div>
</div>
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-value" style="color: #667eea;">$124,580</div>
<div class="metric-label">Total Revenue</div>
<div class="metric-change positive">↗ +12.5%</div>
</div>
<div class="metric-card">
<div class="metric-value" style="color: #2e7d32;">45,230</div>
<div class="metric-label">Website Visits</div>
<div class="metric-change positive">↗ +8.3%</div>
</div>
<div class="metric-card">
<div class="metric-value" style="color: #ed6c02;">3.2%</div>
<div class="metric-label">Conversion Rate</div>
<div class="metric-change negative">↘ -0.5%</div>
</div>
<div class="metric-card">
<div class="metric-value" style="color: #1976d2;">$2.85</div>
<div class="metric-label">Cost per Click</div>
<div class="metric-change positive">↗ +5.2%</div>
</div>
</div>
<div class="charts-grid">
<div class="chart-container">
<div class="chart-title">Revenue Trend</div>
<div class="chart-wrapper">
<canvas id="revenueChart"></canvas>
</div>
</div>
<div class="chart-container">
<div class="chart-title">Traffic Sources</div>
<div class="chart-wrapper">
<canvas id="trafficChart"></canvas>
</div>
</div>
</div>
<div class="charts-grid">
<div class="chart-container">
<div class="chart-title">Campaign Performance</div>
<div class="chart-wrapper">
<canvas id="campaignChart"></canvas>
</div>
</div>
<div class="chart-container">
<div class="chart-title">Conversion Funnel</div>
<div class="chart-wrapper">
<canvas id="funnelChart"></canvas>
</div>
</div>
</div>
<div class="performance-table">
<div class="table-header">
<h3>Campaign Performance Details</h3>
</div>
<table>
<thead>
<tr>
<th>Campaign Name</th>
<th>Impressions</th>
<th>Clicks</th>
<th>CTR</th>
<th>Cost</th>
<th>Conversions</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Summer Sale 2024</td>
<td>145,320</td>
<td>4,250</td>
<td>2.92%</td>
<td>$12,150</td>
<td>125</td>
<td><span class="status-badge status-active">Active</span></td>
</tr>
<tr>
<td>Brand Awareness</td>
<td>89,450</td>
<td>2,180</td>
<td>2.44%</td>
<td>$6,820</td>
<td>78</td>
<td><span class="status-badge status-active">Active</span></td>
</tr>
<tr>
<td>Product Launch</td>
<td>67,890</td>
<td>3,420</td>
<td>5.04%</td>
<td>$9,750</td>
<td>156</td>
<td><span class="status-badge status-paused">Paused</span></td>
</tr>
<tr>
<td>Retargeting Campaign</td>
<td>23,560</td>
<td>1,890</td>
<td>8.02%</td>
<td>$4,200</td>
<td>89</td>
<td><span class="status-badge status-active">Active</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// Revenue Trend Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
const revenueChart = new Chart(revenueCtx, {
type: 'line',
data: {
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
datasets: [{
label: 'Revenue ($)',
data: [28500, 32100, 29800, 34180],
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return '$' + value.toLocaleString();
}
}
}
}
}
});
// Traffic Sources Chart
const trafficCtx = document.getElementById('trafficChart').getContext('2d');
const trafficChart = new Chart(trafficCtx, {
type: 'doughnut',
data: {
labels: ['Organic Search', 'Paid Ads', 'Social Media', 'Direct', 'Email'],
datasets: [{
data: [35, 25, 20, 15, 5],
backgroundColor: [
'#667eea',
'#764ba2',
'#f093fb',
'#f5576c',
'#4facfe'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 20,
usePointStyle: true
}
}
}
}
});
// Campaign Performance Chart
const campaignCtx = document.getElementById('campaignChart').getContext('2d');
const campaignChart = new Chart(campaignCtx, {
type: 'bar',
data: {
labels: ['Summer Sale', 'Brand Awareness', 'Product Launch', 'Retargeting'],
datasets: [{
label: 'Conversions',
data: [125, 78, 156, 89],
backgroundColor: '#667eea',
borderRadius: 5
}, {
label: 'Cost (hundreds)',
data: [121, 68, 97, 42],
backgroundColor: '#764ba2',
borderRadius: 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
},
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Conversion Funnel Chart
const funnelCtx = document.getElementById('funnelChart').getContext('2d');
const funnelChart = new Chart(funnelCtx, {
type: 'bar',
data: {
labels: ['Impressions', 'Clicks', 'Leads', 'Conversions'],
datasets: [{
label: 'Funnel Stage',
data: [100000, 12000, 2400, 480],
backgroundColor: [
'rgba(102, 126, 234, 0.9)',
'rgba(102, 126, 234, 0.7)',
'rgba(102, 126, 234, 0.5)',
'rgba(102, 126, 234, 0.3)'
],
borderColor: '#667eea',
borderWidth: 2,
borderRadius: 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y',
plugins: {
legend: {
display: false
}
},
scales: {
x: {
beginAtZero: true,
ticks: {
callback: function(value) {
return value.toLocaleString();
}
}
}
}
}
});
// Time range filter functionality
document.getElementById('timeRange').addEventListener('change', function() {
// In a real application, this would fetch new data based on the selected range
console.log('Time range changed to:', this.value + ' days');
// You could add AJAX calls here to update the charts with new data
});
// Add some interactivity to metric cards
document.querySelectorAll('.metric-card').forEach(card => {
card.addEventListener('click', function() {
this.style.transform = 'scale(1.05)';
setTimeout(() => {
this.style.transform = 'translateY(-5px)';
}, 200);
});
});
</script>
</body>
</html>
```
This marketing dashboard includes:
## Key Features:
1. **Responsive Design** - Works on desktop, tablet, and mobile devices
2. **Interactive Charts** using Chart.js:
- Revenue trend line chart
- Traffic sources doughnut chart
- Campaign performance bar chart
- Conversion funnel horizontal bar chart
3. **Key Metrics Cards**:
- Total Revenue with growth indicators
- Website Visits
- Conversion Rate
- Cost per Click
4. **Campaign Performance Table** showing detailed metrics for each campaign
5. **Time Range Filter** for data analysis
6. **Modern UI/UX**:
- Gradient backgrounds
- Smooth animations
- Hover effects
- Clean typography
- Professional color scheme
## Customization Options:
- **Add Real Data**: Replace the sample data with API calls to your analytics platform
- **Additional Metrics**: Add more KPIs like ROAS, LTV, CAC, etc.
- **More Chart Types**: Add heatmaps, scatter plots, or gauge charts
- **Export Features**: Add PDF/Excel export functionality
- **Real-time Updates**: Implement WebSocket connections for live data
- **Filtering**: Add more advanced filtering options (date ranges, campaigns, channels)
The dashboard is fully functional and ready to use. You can easily integrate it with your existing marketing data sources by replacing the sample data with API calls to platforms like Google Analytics, Facebook Ads, Google Ads, or your CRM system.Drag to resize