GoogleAnalyticsPage

Code

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

Analytics · beta

Live examples and controls: GoogleAnalyticsPage in the lab.

InstallCopy Anchor Link

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

The Google Analytics page composes the analytics blocks: MetricTiles (users, sessions, engagement rate, engagement time, key events), a TimeSeriesPanel with period comparison, a RealtimeCounter, and tabs of BreakdownTable (channels, source / medium, pages), GeoList, devices and a Heatmap of daily sessions. It does no fetching: you give it data and callbacks. Until service.status is connected it shows AnalyticsConnect. The product name is text; no logo is drawn unless you set service.icon to the official asset.

When to useCopy Anchor Link

• A traffic and audience overview for a site or app.
• Any host that already reads GA4 through the Data API.

When not to useCopy Anchor Link

• Search performance: use SearchConsolePage.
• Custom KPI dashboards: compose MetricTiles yourself.

ImportCopy Anchor Link

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

Quick startCopy Anchor Link

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

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

AnatomyCopy Anchor Link

GoogleAnalyticsPage    AnalyticsPageFrame
  MetricTiles
  TimeSeriesPanel      + RealtimeCounter
  Tabs (underline)     Sources | Pages | Audience
    BreakdownTable ×2, BreakdownTable, GeoList, BreakdownTable, Heatmap

APICopy Anchor Link

GoogleAnalyticsPageCopy Anchor Link

GoogleAnalyticsDataCopy Anchor Link

summary (users, sessions, engagementRate as a fraction, engagementSeconds, conversions; each { value, previous?, trend? }), series (rows of date, users, sessions, conversions), previousSeries?, realtime? (active, perMinute?, pages, countries, updatedAt?), channels, sourceMedium, pages, countries, devices and daily?.

ExamplesCopy Anchor Link

Connect screen:

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

export const Connect = () => (
  <GoogleAnalyticsPage
    service={{ id: "ga", name: "Google Analytics", scopes: [{ id: "analytics.readonly", label: "See your Google Analytics reports", required: true }], status: "disconnected" }}
    period={28}
    onPeriodChange={() => {}}
    onConnect={async () => {}}
    onDisconnect={async () => {}}
  />
);

Loading and error:

import { GoogleAnalyticsPage, type IntegrationService } from "@fadymondy/nasaq/web";

export const Failed = ({ service }: { service: IntegrationService }) => (
  <GoogleAnalyticsPage service={service} period={7} onPeriodChange={() => {}} error="The request timed out." onRetry={() => location.reload()} onConnect={async () => {}} onDisconnect={async () => {}} />
);

AccessibilityCopy Anchor Link

The page has one h1; tabs follow the WAI-ARIA tabs pattern (arrow keys move, the panel is labelled by its tab). Charts and tables carry text alternatives. Disconnect asks for confirmation. Localise every string you override through labels.

RTL & i18nCopy Anchor Link

• The whole page mirrors; charts run right to left.
• URLs, paths and identifiers stay left-to-right inside Arabic text.
• Every figure uses the active locale with Western digits and is bidi-isolated (Num), so +12.4% keeps its order in Arabic.

Styling & tokensCopy Anchor Link

• Colours come from tokens (--primary, --nq-success, --nq-warning, --nq-danger, --nq-tag-*); never pass raw hex.
• Composed from tokens only; extend with className.

Do / Don'tCopy Anchor Link

• Do fetch on the server and pass data; keep secrets out of the browser.
• Do pass previous values so every tile shows its change.
• Don't draw a Google Analytics logo yourself; use only the official asset.

RelatedCopy Anchor Link

• metric-tiles
• time-series-panel
• breakdown-table
• geo-list
• realtime-counter
• analytics-connect
• heatmap

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-analytics-pages-google-analytics--docs