YouTubeChannelPage

A YouTube channel report - views, watch time, subscribers and view duration with comparison, a chart, top videos, traffic sources and countries.

PreviewOpen ↗

Code

import { YouTubeChannelPage } from "@fadymondy/nasaq/web";import { useState } from "react";export function Channel({ service, data }: { service: React.ComponentProps<typeof YouTubeChannelPage>["service"]; data?: React.ComponentProps<typeof YouTubeChannelPage>["data"] }) {  const [period, setPeriod] = useState(28);  return <YouTubeChannelPage service={service} data={data} period={period} onPeriodChange={setPeriod} onConnect={async () => {}} onDisconnect={async () => {}} />;}

Marketing · beta

Live examples and controls: YouTubeChannelPage in the lab.

Install

npx shadcn@latest add https://docs.nasaqui.com/r/youtube-channel-page.json

The YouTube page shows a channel's performance: MetricTiles for views, watch time, net subscribers and average view duration (they select the chart's metric), a TimeSeriesPanel with previous-period comparison, and tabs for the top videos (a BreakdownTable with watch-time and duration columns), traffic sources and countries. The channel name and subscriber count sit in the subtitle. The name is text; no YouTube logo is drawn unless you pass the official asset.

When to use

A creator or brand dashboard fed by the YouTube Analytics API.
Reporting on video performance next to other analytics.

When not to use

Playing or embedding videos.
Web traffic: use GoogleAnalyticsPage.

Import

import { YouTubeChannelPage } from "@fadymondy/nasaq/web";

Quick start

import { YouTubeChannelPage } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Channel({ service, data }: { service: React.ComponentProps<typeof YouTubeChannelPage>["service"]; data?: React.ComponentProps<typeof YouTubeChannelPage>["data"] }) {
  const [period, setPeriod] = useState(28);
  return <YouTubeChannelPage service={service} data={data} period={period} onPeriodChange={setPeriod} onConnect={async () => {}} onDisconnect={async () => {}} />;
}

Anatomy

YouTubeChannelPage     AnalyticsPageFrame
  MetricTiles          selectable; drives the chart
  TimeSeriesPanel      views | watch hours | subscribers
  Tabs (underline)     Top videos | Traffic sources | Audience

API