(

{r.title}

{r.section}

) }, { key: "views", label: "Views", align: "right", render: r => {fmtUsers(r.views)} }, { key: "avgMin", label: "Avg time", align: "right", render: r => {r.avgMin}m }, { key: "completion", label: "Completion", align: "right", w: 130, render: r => (

{Math.round(r.completion * 100)}%

) }, ]}/>

{cohort.journey.map((s, i) => (

{i < cohort.journey.length - 1 && }

{s.step} {Math.round(s.share * 100)}%

{s.note}

))}

); }; // =========================================================== // Analytics dashboard + cohort table // =========================================================== const toSeries = (rows, keys) => (rows || []).map((r) => ({ label: r.week || r.period || "", value: keys.reduce((s, k) => s + Number(r[k] || 0), 0), })); const liveAnalyticsView = (overview, segments, fallback) => { if (!overview) return null; const k = overview.kpis || {}; const conversions = overview.conversions_timeseries || []; const access = overview.access_type_breakdown || []; const couponPoints = overview.coupon_points || {}; return { kpis: { paidUsers: Number(k.paying_users || 0), mrr: Number(k.revenue || 0), arpu: Number(k.arpu || 0), avgRetention: 0, paidShare: Number(k.coupon_reveal_rate || 0) / 100, coinsGranted: Number(k.coins_granted || 0), coinsSpent: Number(k.coins_spent || 0), adImpressions: Number(k.ad_impressions || 0), adClicks: Number(k.ad_clicks || 0), }, revenueByDay: toSeries(conversions, ["single", "day_pass", "subscription"]).map(x => x.value), paidByPlan: access.map((x, i) => ({ label: titleize(x.type || "access"), value: Number(x.users || 0), color: ["#5b5bf5", "#0fb67e", "#e0a100", "#e5654a"][i % 4], })), signupsByWeek: toSeries(conversions, ["single", "day_pass", "subscription"]), retentionByMonth: toSeries(overview.funnel_timeseries || [], ["views", "paywall_hits", "conversions", "exits"]), funnel: overview.funnel_timeseries || [], content: overview.content_performance || overview.top_content || [], couponPoints, fallback, }; }; const titleize = (s) => String(s || "").replace(/[_-]/g, " ").replace(/\b\w/g, c => c.toUpperCase()); const AnalyticsScreen = ({ data, setData }) => { const [selected, setSelected] = React.useState(null); const [load, setLoad] = React.useState({ loading: false, error: "" }); const live = liveAnalyticsView(data.analyticsOverview, data.analyticsSegments, data.paidAnalytics); const a = live || data.paidAnalytics; const cohorts = live ? (data.analyticsSegments || []) : data.cohorts; const recCampaigns = data.adCampaigns || []; React.useEffect(() => { if (!window.__api?.getConfig?.().live || !setData) return; let cancelled = false; setLoad({ loading: true, error: "" }); Promise.allSettled([ window.__api.read("getAnalyticsOverview", { query: { limit: 25 } }), window.__api.read("listAnalyticsSegments", { query: { limit: 50 } }), ]).then(([overview, segments]) => { if (cancelled) return; const patch = {}; if (overview.status === "fulfilled") patch.analyticsOverview = overview.value; if (segments.status === "fulfilled") patch.analyticsSegments = segments.value; if (Object.keys(patch).length) setData(d => ({ ...d, ...patch })); const failed = [overview, segments].filter(r => r.status === "rejected"); setLoad({ loading: false, error: failed.length ? failed[0].reason?.message || "Analytics failed to load" : "" }); }); return () => { cancelled = true; }; }, [setData]); if (selected) { const c = cohorts.find(x => x.id === selected); if (c && c.pages && c.pages.length) return setSelected(null)}/>; } return ( {load.loading ? "Loading" : "Paid audience"}}/> {load.error && (

{load.error}

)} }/> }/> }/> }/> }/>

{a.revenueByDay && a.revenueByDay.length ? fmt.number(v)} axisLabels={["Start", "", "Now"]}/> : } title="No conversion events yet" description="Conversion activity will appear after readers hit paywalls or purchase access."/>}

s + d.value, 0))} centerLabel="paid"/>

{recCampaigns.length ?

{r.name}

{String(r.pricing_model).toUpperCase()} · ${r.bid_amount}

}, { key: "impressions", label: "Impressions", align: "right", render: r => fmt.compact(Number(r.impressions || 0)) }, { key: "clicks", label: "Clicks", align: "right", render: r => fmt.compact(Number(r.clicks || 0)) }, { key: "ctr", label: "CTR", align: "right", render: r => ((Number(r.clicks || 0) / Math.max(1, Number(r.impressions || 0))) * 100).toFixed(2) + "%" }, { key: "spend", label: "Est. spend", align: "right", render: r => fmt.currency(Number(r.spend || 0)) }, ]}/> : } title="No recommendation campaigns yet" description="Campaign performance appears here after native units start serving."/>}

fmt.number(v)}/>

{r.title || r.content_id} }, { key: "views", label: "Views", align: "right", render: r => {fmt.compact(r.views || 0)} }, { key: "paid_views", label: "Paid", align: "right", render: r => {fmt.compact(r.paid_views || 0)} }, { key: "conversion_rate", label: "Conv.", align: "right", render: r => {Number(r.conversion_rate || 0)}% }, { key: "revenue", label: "Revenue", align: "right", render: r => {fmt.currency(r.revenue || 0)} }, ]}/>

AI}> {(cohorts || []).length ? r.pages?.length && setSelected(r.id)} defaultSort={{ key: "users", dir: "desc" }} columns={[ { key: "persona", label: "Cohort", sortable: false, render: r => }, { key: "topic", label: "Consumes", render: r => {r.topic} }, { key: "users", label: "Users", align: "right", render: r => {fmtUsers(r.users)} }, { key: "share", label: "Share", w: 130, sortable: false, render: r => (

{Math.round(r.share * 100)}%

) }, { key: "arpu", label: "ARPU", align: "right", render: r => {fmt.currency(r.arpu)} }, { key: "retention", label: "Retention", align: "right", render: r => {Math.round(r.retention * 100)}% }, { key: "trendPct", label: "Trend", align: "right", render: r => ↑ {r.trendPct}% }, { key: "_v", label: "", sortable: false, align: "right", render: () => }, ]}/> : } title="No targetable cohorts yet" description="Segments appear once enough consent-safe activity is available above the privacy threshold."/>} ); }; Object.assign(window, { AnalyticsScreen, CohortDetail });

{cohort.topic}