لوحة تحكم تسويقية في 2026: من تعريف المؤشر إلى قرار موثوق

لماذا لوحات التحكم التسويقية ضرورية؟

لوحات التحكم التسويقية هي العين التي ترى من خلالها أداء أعمالك. بدونها، أنت تعمل في الظلام. الشركات التي تستخدم لوحات تحكم متقدمة تحقق نتائج استثنائية

المرحلة 1: البنية التقنية

Stack التقني

مثال كود: إعداد المشروع

# Create Next.js project
npx create-next-app@latest marketing-dashboard --typescript --tailwind --app

# Install dependencies
cd marketing-dashboard
npm install recharts @radix-ui/react-slot class-variance-authority clsx tailwind-merge
npm install @prisma/client
npm install -D prisma

# Initialize Prisma
npx prisma init

# Install additional packages
npm install date-fns lucide-react

المرحلة 2: بناء API للبيانات

قاعدة البيانات

// prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Campaign {
  id            String    @id @default(uuid())
  name          String
  platform      String
  status        String
  budget        Float
  spent         Float
  impressions   Int
  clicks        Int
  conversions   Int
  revenue       Float
  startDate     DateTime
  endDate       DateTime?
  createdAt     DateTime @default(now())
  
  metrics       DailyMetric[]
}

model DailyMetric {
  id            String    @id @default(uuid())
  campaignId    String
  campaign      Campaign @relation(fields: [campaignId], references: [id])
  date          DateTime
  impressions   Int
  clicks        Int
  conversions   Int
  revenue       Float
  spent         Float
  
  @@unique([campaignId, date])
}

model SocialMetric {
  id            String    @id @default(uuid())
  platform      String
  date          DateTime
  followers     Int
  engagement    Int
  reach         Int
  impressions   Int
  
  @@unique([platform, date])
}

مثال كود: API Endpoints

// src/app/api/dashboard/route.ts

import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { startOfMonth, endOfMonth, eachDayOfInterval } from 'date-fns';

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
    const startDate = searchParams.get('startDate') || startOfMonth(new Date()).toISOString();
    const endDate = searchParams.get('endDate') || endOfMonth(new Date()).toISOString();

    // Get campaigns
    const campaigns = await prisma.campaign.findMany({
      where: {
        startDate: { gte: new Date(startDate) },
        endDate: { lte: new Date(endDate) }
      },
      include: {
        metrics: true
      }
    });

    // Calculate totals
    const totals = campaigns.reduce((acc, campaign) => ({
      totalBudget: acc.totalBudget + campaign.budget,
      totalSpent: acc.totalSpent + campaign.spent,
      totalImpressions: acc.totalImpressions + campaign.impressions,
      totalClicks: acc.totalClicks + campaign.clicks,
      totalConversions: acc.totalConversions + campaign.conversions,
      totalRevenue: acc.totalRevenue + campaign.revenue
    }), {
      totalBudget: 0,
      totalSpent: 0,
      totalImpressions: 0,
      totalClicks: 0,
      totalConversions: 0,
      totalRevenue: 0
    });

    // Calculate daily metrics for charts
    const dates = eachDayOfInterval({
      start: new Date(startDate),
      end: new Date(endDate)
    });

    const dailyMetrics = dates.map(date => {
      const dayMetrics = campaigns.flatMap(c => 
        c.metrics.filter(m => m.date.toDateString() === date.toDateString())
      );

      return {
        date: date.toISOString().split('T')[0],
        impressions: dayMetrics.reduce((sum, m) => sum + m.impressions, 0),
        clicks: dayMetrics.reduce((sum, m) => sum + m.clicks, 0),
        conversions: dayMetrics.reduce((sum, m) => sum + m.conversions, 0),
        revenue: dayMetrics.reduce((sum, m) => sum + m.revenue, 0)
      };
    });

    return NextResponse.json({
      campaigns,
      totals,
      dailyMetrics,
      roi: totals.totalSpent > 0 
        ? ((totals.totalRevenue - totals.totalSpent) / totals.totalSpent) * 100 
        : 0
    });
  } catch (error) {
    console.error('Dashboard API error:', error);
    return NextResponse.json(
      { error: 'Failed to fetch dashboard data' },
      { status: 500 }
    );
  }
}

المرحلة 3: بناء لوحة التحكم

المكون الرئيسي

// src/app/dashboard/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { TrendingUp, TrendingDown, DollarSign, Users, Eye, MousePointer } from 'lucide-react';

interface DashboardData {
  campaigns: any[];
  totals: {
    totalBudget: number;
    totalSpent: number;
    totalImpressions: number;
    totalClicks: number;
    totalConversions: number;
    totalRevenue: number;
  };
  dailyMetrics: {
    date: string;
    impressions: number;
    clicks: number;
    conversions: number;
    revenue: number;
  }[];
  roi: number;
}

export default function DashboardPage() {
  const [data, setData] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchDashboardData();
  }, []);

  const fetchDashboardData = async () => {
    try {
      const response = await fetch('/api/dashboard');
      if (!response.ok) throw new Error('Failed to fetch');
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-red-600">Error: {error || 'No data'}</div>
      </div>
    );
  }

  const { totals, dailyMetrics, campaigns } = data;

  return (
    <div className="p-8 space-y-6">
      <h1 className="text-3xl font-bold">لوحة التحكم التسويقية</h1>

      {/* KPI Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">الإيرادات</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {totals.totalRevenue.toLocaleString()} ريال
            </div>
            <p className="text-xs text-muted-foreground">
              ROI: {data.roi.toFixed(0)}%
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">الانطباعات</CardTitle>
            <Eye className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {totals.totalImpressions.toLocaleString()}
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">النقرات</CardTitle>
            <MousePointer className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {totals.totalClicks.toLocaleString()}
            </div>
            <p className="text-xs text-muted-foreground">
              CTR: {((totals.totalClicks / totals.totalImpressions) * 100).toFixed(2)}%
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">التحويلات</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {totals.totalConversions}
            </div>
            <p className="text-xs text-muted-foreground">
              CR: {((totals.totalConversions / totals.totalClicks) * 100).toFixed(2)}%
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Revenue Chart */}
      <Card>
        <CardHeader>
          <CardTitle>الإيرادات اليومية</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={dailyMetrics}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Line 
                type="monotone" 
                dataKey="revenue" 
                stroke="#8b5cf6" 
                strokeWidth={2}
              />
            </LineChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

      {/* Campaigns Performance */}
      <Card>
        <CardHeader>
          <CardTitle>أداء الحملات</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={campaigns}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="revenue" fill="#10b981" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  );
}

المرحلة 4: رسوم بيانية متقدمة

مخططات مخصصة

// src/components/charts/AdvancedCharts.tsx

'use client';

import { ResponsiveContainer, PieChart, Pie, Cell, AreaChart, Area, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';

interface PlatformData {
  name: string;
  value: number;
}

export function PlatformDistributionChart({ data }: { data: PlatformData[] }) {
  const COLORS = ['#8b5cf6', '#3b82f6', '#10b981', '#f59e0b', '#ec4899'];

  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie
          data={data}
          cx="50%"
          cy="50%"
          labelLine={false}
          label={({ name, percent }) => `${name} ${((percent as number) * 100).toFixed(0)}%`}
          outerRadius={80}
          fill="#8884d8"
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
      </PieChart>
    </ResponsiveContainer>
  );
}

interface PerformanceData {
  date: string;
  impressions: number;
  clicks: number;
  conversions: number;
}

export function PerformanceAreaChart({ data }: { data: PerformanceData[] }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <AreaChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="impressions" stackId="1" stroke="#8884d8" fill="#8884d8" />
        <Area type="monotone" dataKey="clicks" stackId="2" stroke="#82ca9d" fill="#82ca9d" />
        <Area type="monotone" dataKey="conversions" stackId="3" stroke="#ffc658" fill="#ffc658" />
      </AreaChart>
    </ResponsiveContainer>
  );
}

interface RadarData {
  metric: string;
  value: number;
  fullMark: number;
}

export function PerformanceRadarChart({ data }: { data: RadarData[] }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
        <PolarGrid />
        <PolarAngleAxis dataKey="metric" />
        <PolarRadiusAxis />
        <Radar name="Performance" dataKey="value" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
      </RadarChart>
    </ResponsiveContainer>
  );
}

المرحلة 5: تكامل مع APIs خارجية

Google Analytics API

// src/lib/google-analytics.ts

import { google } from 'googleapis';

const analytics = google.analytics({
  version: 'v3',
  auth: process.env.GOOGLE_ANALYTICS_KEY
});

export async function getAnalyticsData(
  viewId: string,
  startDate: string,
  endDate: string
) {
  const response = await analytics.reports.batchGet({
    requestBody: {
      reportRequests: [{
        viewId,
        dateRanges: [{ startDate, endDate }],
        metrics: [
          { expression: 'ga:sessions' },
          { expression: 'ga:pageviews' },
          { expression: 'ga:users' },
          { expression: 'ga:bounceRate' }
        ],
        dimensions: [
          { name: 'ga:date' }
        ]
      }]
    }
  });

  return response.data.reports[0].data.rows;
}

// src/lib/facebook-ads.ts

import FacebookAdsApi from 'facebook-nodejs-business-sdk';

const accessToken = process.env.FACEBOOK_ACCESS_TOKEN!;
FacebookAdsApi.init(accessToken);

export async function getFacebookAdsData(accountId: string) {
  const account = new FacebookAdsApi.AdAccount(accountId);
  
  const campaigns = await account.readCampaigns(['name', 'status', 'insights']);
  
  return campaigns;
}

دراسة حالة: شركة سعودية توفر 40% من وقت التحليل

أخطاء شائعة يجب تجنبها

• ❌ تشتت البيانات: بيانات مبعثرة في أماكن متعددة
• ❌ تحديث يدوي: تحديث البيانات يدوياً = أخطاء وضياع وقت
• ❌ رسوم بيانية معقدة: مخططات معقدة = صعوبة في الفهم
• ❌ عدم التخصيص: لوحة واحدة للجميع = عدم فعالية
• ❌ بيانات قديمة: بيانات غير محدثة = قرارات خاطئة
• ❌ عدم التكامل: عدم تكامل مع APIs = بيانات ناقصة
• ❌ أداء بطيء: لوحة بطيئة = إحباط المستخدمين
• ❌ عدم الأمان: عدم حماية البيانات = مخاطر أمنية

قائمة التحقق (Checklist)

الخلاصة

لوحات التحكم التسويقية هي النافذة التي ترى من خلالها أداء أعمالك. بدونها، أنت تعمل في الظلام. الشركات التي تستخدم لوحات تحكم متقدمة تتخذ قرارات أسرع بـ 5 مرات وتحقق نتائج أفضل بـ 300%

القاعدة الذهبية: توحيد البيانات + تحديث تلقائي + رسوم بيانية تفاعلية + تكامل APIs = لوحة تحكم ناجحة. لا تترك بياناتك مبعثرة، وحّدها في مكان واحد

تذكر: الوقت هو المال. لوحة التحكم توفر 40% من وقت التحليل وتزيد دقة القرارات 40%. الاستثمار في لوحة تحكم احترافية هو أفضل استثمار يمكنك القيام به

الأسئلة الشائعة (FAQ)

عقد القياس الذي يسبق تصميم Dashboard

قبل رسم أي مخطط، اكتب لكل مؤشر اسمه التجاري وصيغته ووحدته ومصدره وتوقيت تحديثه ومالكه. فرّق بين أرقام الاستكشاف وأرقام المحاسبة، وبين البيانات اللحظية والبيانات التي تتأخر بسبب المعالجة. لوحة تعرض رقمًا سريعًا غير متسق أخطر من تقرير أبطأ يمكن مراجعته

النتائج الداخلية التي تضمنت 150,000 ريال و60,000 ريال وفترات من ثلاثة أيام إلى ستة أشهر تبقى حالات معتمدة، لكن كل رقم يحتاج نافذة زمنية وتعريفًا واضحًا. لذلك تُختبر الوصلات والانقطاعات والتكرار وصلاحيات العرض، وتظهر حالة حداثة البيانات مباشرة بدل إخفائها خلف تصميم جذاب