WordPressでChart.jsを使ったアクセス解析ダッシュボードの作り方

add_action('rest_api_init', function () {
    register_rest_route('nines/v1', '/analytics/chart', [
        'methods' => 'GET',
        'callback' => 'nines_get_analytics_chart_data',
        'permission_callback' => function () {
            return current_user_can('edit_posts');
        },
    ]);
});

function nines_get_analytics_chart_data(): WP_REST_Response
{
    global $wpdb;

    $ga_table = $wpdb->prefix . 'nines_ga_daily';
    $gsc_table = $wpdb->prefix . 'nines_gsc_daily';

    $rows = $wpdb->get_results("
        SELECT
          ga.metric_date AS date,
          SUM(ga.pageviews) AS pageviews,
          SUM(ga.sessions) AS sessions,
          COALESCE(SUM(gsc.clicks), 0) AS clicks,
          COALESCE(SUM(gsc.impressions), 0) AS impressions
        FROM {$ga_table} ga
        LEFT JOIN {$gsc_table} gsc
          ON ga.metric_date = gsc.metric_date
         AND ga.page_path = gsc.page_path
        WHERE ga.metric_date >= DATE_SUB(CURDATE(), INTERVAL 28 DAY)
        GROUP BY ga.metric_date
        ORDER BY ga.metric_date ASC
    ", ARRAY_A);

    return rest_ensure_response($rows);
}

<section class="analytics-panel">
  <header>
    <p>ANALYTICS</p>
    <h2>PVと検索流入の推移</h2>
  </header>

  <div class="chart-frame">
    <canvas id="analyticsChart"></canvas>
  </div>
</section>

async function renderAnalyticsChart() {
  const response = await fetch('/wp-json/nines/v1/analytics/chart');
  const rows = await response.json();

  const labels = rows.map((row) => row.date);

  new Chart(document.querySelector('#analyticsChart'), {
    type: 'line',
    data: {
      labels,
      datasets: [
        {
          label: 'PV',
          data: rows.map((row) => Number(row.pageviews)),
          borderColor: '#ff2f63',
          backgroundColor: 'rgba(255, 47, 99, .14)',
          tension: .35,
          fill: true,
          yAxisID: 'traffic',
        },
        {
          label: '検索クリック',
          data: rows.map((row) => Number(row.clicks)),
          borderColor: '#111',
          backgroundColor: 'rgba(17, 17, 17, .08)',
          tension: .35,
          yAxisID: 'search',
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        mode: 'index',
        intersect: false,
      },
      scales: {
        traffic: {
          type: 'linear',
          position: 'left',
          beginAtZero: true,
        },
        search: {
          type: 'linear',
          position: 'right',
          beginAtZero: true,
          grid: {
            drawOnChartArea: false,
          },
        },
      },
    },
  });
}

renderAnalyticsChart();

.analytics-panel {
  padding: 24px;
  border: 2px solid #111;
  background: #fff;
  box-shadow: 8px 8px 0 #ffd93d;
}

.analytics-panel header p {
  margin: 0 0 4px;
  color: #ff2f63;
  font-weight: 800;
  letter-spacing: .08em;
}

.analytics-panel h2 {
  margin: 0 0 20px;
  font-size: clamp(24px, 4vw, 40px);
}

.chart-frame {
  position: relative;
  height: min(56vw, 420px);
  min-height: 280px;
}