AdMob 수익 대시보드

KPI Ingredients

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<section class="rounded-2xl border border-zinc-200 bg-white p-5 text-zinc-950">
  <div class="mb-5 flex items-center justify-between border-b border-zinc-200 pb-4">
    <div>
      <p class="text-xs font-bold uppercase tracking-wide text-orange-600">앱 운영</p>
      <h2 class="mt-1 text-xl font-extrabold">AdMob 수익 대시보드</h2>
    </div>
    <span class="rounded-lg bg-orange-50 px-3 py-1 text-xs font-bold text-orange-700">초급</span>
  </div>
  <div class="grid gap-3 md:grid-cols-3">
    <article class="rounded-xl border border-zinc-200 p-4">
      <p class="text-xs font-bold text-zinc-500">이번 달 수익</p>
      <strong class="mt-1 block text-2xl">₩842,000</strong>
      <span class="text-xs font-black text-emerald-600">+12.4%</span>
    </article>
    <article class="rounded-xl border border-zinc-200 p-4">
      <p class="text-xs font-bold text-zinc-500">평균 eCPM</p>
      <strong class="mt-1 block text-2xl">₩5,420</strong>
      <span class="text-xs font-black text-orange-600">-3.1%</span>
    </article>
    <article class="rounded-xl border border-zinc-200 p-4">
      <p class="text-xs font-bold text-zinc-500">CTR</p>
      <strong class="mt-1 block text-2xl">2.8%</strong>
      <span class="text-xs font-black text-sky-600">+0.4%p</span>
    </article>
  </div>
  <div class="mt-5 h-64">
    <canvas id="admob-revenue-dashboard-chart"></canvas>
  </div>
</section>

<script>
  const ctx = document.getElementById("admob-revenue-dashboard-chart");
  new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["월", "화", "수", "목", "금"],
      datasets: [{
        label: "최근 7일 광고 수익",
        data: [42, 58, 51, 66, 72],
        backgroundColor: "#e84b2a",
        borderRadius: 10
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: { x: { grid: { display: false } }, y: { grid: { color: "rgba(0,0,0,0.08)" } } }
    }
  });
</script>