/* Tráfego · GA4 — standalone app */
const { useState, useEffect, useRef } = React;
// ─── Formatters ───────────────────────────────────────────────────────────────
const fmt = {
num(n) { if (n === null || n === undefined || isNaN(n)) return "—"; return Number(n).toLocaleString("pt-BR"); },
pct(n, dec = 1) { if (n === null || n === undefined || isNaN(n)) return "—"; return Number(n).toFixed(dec) + "%"; },
brl(n) { if (!n || isNaN(n) || Number(n) === 0) return "—"; return "R$ " + Number(n).toLocaleString("pt-BR", { minimumFractionDigits: 2 }); },
};
// ─── Icons ────────────────────────────────────────────────────────────────────
const ArrUp = () => ;
const ArrDn = () => ;
const ArrFlat = () => ;
// ─── Shared ───────────────────────────────────────────────────────────────────
function PageHeader({ title, subtitle, actions }) {
return (
{title}
{subtitle &&
{subtitle}
}
{actions &&
{actions}
}
);
}
function Tabs({ items, active, onChange }) {
return (
{items.map(it => (
))}
);
}
function Empty({ msg }) {
return {msg || "Sem dados para o período."}
;
}
// ─── Date + URL picker ────────────────────────────────────────────────────────
function toYMD(d) { return d.toISOString().slice(0, 10); }
function Ga4DatePicker({ start, end, urlFilter, onApply, loading }) {
const [s, setS] = useState(start);
const [e, setE] = useState(end);
const [url, setUrl] = useState(urlFilter || "");
const presets = [
{ label: "7d", fn: () => { const n = new Date(); return [toYMD(new Date(n - 6*864e5)), toYMD(n)]; } },
{ label: "30d", fn: () => { const n = new Date(); return [toYMD(new Date(n - 29*864e5)), toYMD(n)]; } },
{ label: "90d", fn: () => { const n = new Date(); return [toYMD(new Date(n - 89*864e5)), toYMD(n)]; } },
{ label: "Este mês", fn: () => { const n = new Date(); return [`${n.getFullYear()}-${String(n.getMonth()+1).padStart(2,'0')}-01`, toYMD(n)]; } },
{ label: "Mês ant.", fn: () => { const n = new Date(new Date().getFullYear(), new Date().getMonth(), 0); return [toYMD(new Date(n.getFullYear(), n.getMonth(), 1)), toYMD(n)]; } },
{ label: "Este ano", fn: () => { const n = new Date(); return [`${n.getFullYear()}-01-01`, toYMD(n)]; } },
];
const apply = (ns, ne) => { setS(ns); setE(ne); onApply(ns, ne, url); };
const inp = { fontFamily: "var(--font-mono)", fontSize: "var(--t-xs)", padding: "4px 8px", height: 28, background: "var(--bg-2)", border: "1px solid var(--line-strong)", borderRadius: "var(--r-sm)", color: "var(--ink-1)", colorScheme: "dark" };
return (
);
}
// ─── KPI strip ────────────────────────────────────────────────────────────────
function Ga4Kpi({ label, value, delta, deltaSuffix, deltaGoodWhen, flagBad, hint, last }) {
const up = delta !== null && delta !== undefined && (deltaGoodWhen === "above" ? delta > 0 : delta < 0);
const down = delta !== null && delta !== undefined && (deltaGoodWhen === "above" ? delta < 0 : delta > 0);
return (
{label}
{value}
{delta !== null && delta !== undefined && (
{up ? : down ? : }
{(delta > 0 ? "+" : "") + Number(delta).toFixed(1)}{deltaSuffix || "%"}
)}
{hint &&
{hint}}
);
}
function Ga4KpiStrip({ data }) {
const t = data.totais || {};
const td = data.tendencia_7d || {};
const bounceHigh = parseFloat(t.bounce_medio) > 60;
const delta = td.delta ? parseFloat(td.delta) : null;
const hasRevenue = t.receita && parseFloat(t.receita) > 0;
const cols = hasRevenue ? 7 : 6;
return (
{hasRevenue && }
);
}
// ─── Charts ───────────────────────────────────────────────────────────────────
function LineChart({ primary, secondary, labels, pColor, sColor, pLabel, sLabel }) {
const W = 900, H = 180, pL = 44, pR = 16, pT = 16, pB = 28;
const w = W - pL - pR, h = H - pT - pB;
const all = [...primary, ...(secondary || [])].filter(v => v != null);
if (!all.length) return null;
const maxV = Math.max(...all, 1), range = maxV || 1;
const xi = i => pL + (i / Math.max(primary.length - 1, 1)) * w;
const yi = v => pT + h - (v / range) * h;
const path = arr => arr.map((v, i) => (i === 0 ? "M" : "L") + xi(i).toFixed(1) + "," + yi(v).toFixed(1)).join(" ");
const area = arr => { const last = arr.length - 1; return path(arr) + ` L ${xi(last).toFixed(1)},${(pT+h).toFixed(1)} L ${pL.toFixed(1)},${(pT+h).toFixed(1)} Z`; };
const step = Math.ceil(labels.length / 7);
const pc = pColor || "var(--brand)", sc = sColor || "var(--testing)";
const li = primary.length - 1;
return (
);
}
function BarChart({ values, labels, color, height }) {
const W = 900, H = height || 140, pL = 36, pR = 8, pT = 12, pB = 24;
const w = W - pL - pR, h = H - pT - pB;
const maxV = Math.max(...values, 1);
const bW = w / values.length;
const col = color || "var(--brand)";
return (
);
}
// ─── Mini row ─────────────────────────────────────────────────────────────────
function MiniRow({ label, value, bar, barMax, sub, color }) {
const pct = Math.min(100, (bar / barMax) * 100);
return (
{label}
{sub && {sub}}
{value}
);
}
// ─── Generic table ────────────────────────────────────────────────────────────
function DataTable({ cols, rows, maxBar }) {
if (!rows || !rows.length) return ;
return (
c.w || "1fr").join(" ") }}>
{cols.map(c =>
{c.label}
)}
{rows.map((r, i) => (
c.w || "1fr").join(" ") }}>
{cols.map(c => {
const val = r[c.key];
if (c.bar && maxBar) {
return
;
}
const color = c.colorFn ? c.colorFn(val) : undefined;
return
{val ?? "—"}
;
})}
))}
);
}
// ─── Overview tab ─────────────────────────────────────────────────────────────
function Ga4Overview({ data }) {
const serie = data.serie_diaria || [];
const labels = serie.map(r => { const s = String(r.data); return s.slice(4,6)+"/"+s.slice(6,8); });
return (
Sessões e usuários ativos
{data.periodo}
Number(r.sessoes))} secondary={serie.map(r => Number(r.usuarios))} labels={labels} pColor="var(--brand)" sColor="var(--testing)" pLabel="Sessões" sLabel="Usuários"/>
Top páginas
por sessões
{(data.top_paginas || []).slice(0, 6).map((p, i) =>
)}
Top fontes
por sessões
{(data.top_fontes || []).slice(0, 6).map((f, i) =>
0 ? `${f.conversoes} conv.` : null}/>)}
);
}
// ─── Realtime tab ─────────────────────────────────────────────────────────────
function Ga4Realtime() {
const [rt, setRt] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);
const [lastUpdate, setLastUpdate] = useState(null);
const timerRef = useRef(null);
const fetchRt = async () => {
setLoading(true);
try {
const r = await fetch("/api/ga4/realtime");
if (!r.ok) throw new Error(await r.text());
setRt(await r.json()); setLastUpdate(new Date()); setError(null);
} catch (err) { setError(err.message); }
finally { setLoading(false); }
};
useEffect(() => { fetchRt(); timerRef.current = setInterval(fetchRt, 30000); return () => clearInterval(timerRef.current); }, []);
return (
Ao vivo · atualiza a cada 30s {lastUpdate ? `· ${lastUpdate.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}` : ""}
{error &&
{error}
}
{rt && (
<>
Usuários ativos agora
{fmt.num(rt.total_ativo)}
Páginas ativas
{(rt.paginas_ativas||[]).slice(0,8).map((p,i) =>
)}
{!(rt.paginas_ativas||[]).length &&
}
Dispositivos
{(rt.dispositivos_ativos||[]).map((d,i) =>
)}
Países
{(rt.paises_ativos||[]).map((p,i) =>
)}
)}
);
}
// ─── Pages tab ────────────────────────────────────────────────────────────────
function Ga4Pages({ rows, titulos }) {
const [view, setView] = useState("path");
const data = view === "path" ? rows : titulos;
if (!data || !data.length) return ;
const maxS = Math.max(...data.map(r => r.sessoes), 1);
return (
parseFloat(v)>70?"var(--neg)":parseFloat(v)<40?"var(--pos)":undefined },
{ key:"duracao", label:"Duração", w:"65px", mono:true },
]}
rows={data.map(r => ({ ...r, _bar: r.sessoes }))}
maxBar={maxS}
/>
);
}
// ─── Sources tab ──────────────────────────────────────────────────────────────
function Ga4Sources({ rows }) {
if (!rows.length) return ;
const maxS = Math.max(...rows.map(r => r.sessoes), 1);
return (
v>0?"var(--pos)":"var(--ink-3)" },
]}
rows={rows.map(r => ({ ...r, _bar: r.sessoes }))}
maxBar={maxS}
/>
);
}
// ─── Channels tab ─────────────────────────────────────────────────────────────
function Ga4Channels({ canais }) {
if (!canais || !canais.length) return ;
const maxS = Math.max(...canais.map(r => r.sessoes), 1);
const total = canais.reduce((s, r) => s + r.sessoes, 0) || 1;
return (
{canais.map((c, i) => (
{c.canal}
{((c.sessoes/total)*100).toFixed(1)}%
{fmt.num(c.sessoes)} sess.
{c.conversoes > 0 &&
{c.conversoes} conv.
}
))}
);
}
// ─── Campaigns tab ────────────────────────────────────────────────────────────
function Ga4Campaigns({ campanhas, atribuicao }) {
const [view, setView] = useState("last");
const data = view === "last" ? campanhas : atribuicao;
if (!data || !data.length) return (
);
const maxS = Math.max(...data.map(r => r.sessoes || r.usuarios || 0), 1);
return (
{view === "last" &&
v>0?"var(--pos)":"var(--ink-3)" },
]}
rows={campanhas}
maxBar={maxS}
/>}
{view === "first" && v>0?"var(--pos)":"var(--ink-3)" },
]}
rows={atribuicao}
maxBar={maxS}
/>}
);
}
// ─── Landing pages tab ────────────────────────────────────────────────────────
function Ga4Landing({ rows }) {
if (!rows || !rows.length) return ;
const maxS = Math.max(...rows.map(r => r.sessoes), 1);
return (
parseFloat(v)>70?"var(--neg)":parseFloat(v)<40?"var(--pos)":undefined },
{ key:"duracao", label:"Duração", w:"65px", mono:true },
{ key:"conversoes", label:"Conv.", w:"70px", mono:true, colorFn: v => v>0?"var(--pos)":"var(--ink-3)" },
]}
rows={rows.map(r => ({ ...r, _bar: r.sessoes }))}
maxBar={maxS}
/>
);
}
// ─── Devices tab ──────────────────────────────────────────────────────────────
function Ga4Devices({ dispositivos }) {
if (!dispositivos || !dispositivos.length) return ;
const total = dispositivos.reduce((s, d) => s + d.sessoes, 0) || 1;
const colors = { desktop:"var(--brand)", mobile:"var(--testing)", tablet:"var(--pos)" };
return (
{dispositivos.map(d => {
const col = colors[d.tipo] || "var(--brand-dim)";
const pct = ((d.sessoes/total)*100).toFixed(1);
return (
{d.tipo}
{pct}%
{fmt.num(d.sessoes)} sessões
);
})}
);
}
// ─── Technology tab ───────────────────────────────────────────────────────────
function Ga4Technology({ navegadores, sistemas_operacionais, resolucoes, plataformas }) {
const [view, setView] = useState("browser");
const views = { browser: navegadores||[], os: sistemas_operacionais||[], screen: resolucoes||[], platform: plataformas||[] };
const data = views[view];
const maxS = data.length ? Math.max(...data.map(r => r.sessoes||r.usuarios||0), 1) : 1;
return (
{(view === "browser" || view === "os") && (
parseFloat(v)>70?"var(--neg)":undefined },
]}
rows={data.map(r => ({ ...r, _bar: r.sessoes }))}
maxBar={maxS}
/>
)}
{view === "screen" && (
({ ...r, _bar: r.sessoes }))}
maxBar={maxS}
/>
)}
{view === "platform" && (
v>0?"var(--pos)":"var(--ink-3)" },
]}
rows={data.map(r => ({ ...r, _bar: r.sessoes }))}
maxBar={maxS}
/>
)}
);
}
// ─── Geography tab ────────────────────────────────────────────────────────────
function Ga4Geography({ geografia, regioes, idiomas }) {
const [view, setView] = useState("paises");
const { paises=[], cidades=[] } = geografia || {};
const views = { paises, cidades, regioes: regioes||[], idiomas: idiomas||[] };
const data = views[view];
const maxS = data.length ? Math.max(...data.map(r => r.sessoes||0), 1) : 1;
return (
{view === "paises" &&
v>0?"var(--pos)":"var(--ink-3)"}]} rows={data.map(r=>({...r,_bar:r.sessoes}))} maxBar={maxS}/>}
{view === "regioes" && v>0?"var(--pos)":"var(--ink-3)"}]} rows={data.map(r=>({...r,_bar:r.sessoes}))} maxBar={maxS}/>}
{view === "cidades" && ({...r,_bar:r.sessoes}))} maxBar={maxS}/>}
{view === "idiomas" && ({...r,_bar:r.sessoes}))} maxBar={maxS}/>}
{!data.length && }
);
}
// ─── Behavior tab ─────────────────────────────────────────────────────────────
function Ga4Behavior({ tipo_usuario, horario }) {
const novo = tipo_usuario?.novo || { sessoes:0, usuarios:0, conversoes:0 };
const rec = tipo_usuario?.recorrente || { sessoes:0, usuarios:0, conversoes:0 };
const total = (novo.sessoes + rec.sessoes) || 1;
const novoPct = ((novo.sessoes/total)*100).toFixed(1);
const recPct = ((rec.sessoes/total)*100).toFixed(1);
const hValues = (horario||[]).map(h => h.sessoes);
const hLabels = (horario||[]).map(h => h.hora+"h");
const peak = horario ? horario.reduce((b,h) => h.sessoes>b.sessoes?h:b, horario[0]||{hora:"—",sessoes:0}) : null;
return (
Novos vs Recorrentes
{[{label:"Novos",pct:novoPct,col:"var(--brand)",data:novo},{label:"Recorrentes",pct:recPct,col:"var(--testing)",data:rec}].map(item => (
{item.label}
{item.pct}%
{fmt.num(item.data.sessoes)} sess.
{item.data.conversoes > 0 &&
{item.data.conversoes} conv.
}
))}
Distribuição horária
{peak && pico: {peak.hora}h ({fmt.num(peak.sessoes)})}
{hValues.length > 0 ?
: }
);
}
// ─── Calendar tab ─────────────────────────────────────────────────────────────
function Ga4Calendar({ dia_semana, semanal, mensal }) {
const [view, setView] = useState("dow");
const DOW_ORDER = [1,2,3,4,5,6,0]; // Mon-Sun for display
const dowOrdered = DOW_ORDER.map(d => (dia_semana||[]).find(r => r.numero===d) || {dia:"",sessoes:0,usuarios:0,conversoes:0});
const fmtWeek = w => { const s = String(w); return `S${s.slice(4)} '${s.slice(2,4)}`; };
const fmtMonth = m => { const s = String(m); const months = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"]; return months[parseInt(s.slice(4))-1] + " '" + s.slice(2,4); };
return (
{view === "dow" && (
Sessões por dia da semana
agregado do período
d.sessoes)} labels={dowOrdered.map(d => d.dia)} color="var(--brand)" height={130}/>
{dowOrdered.map((d, i) => (
{d.dia}
{fmt.num(d.sessoes)}
{d.conversoes > 0 &&
{d.conversoes} cv
}
))}
)}
{view === "weekly" && semanal && semanal.length > 0 && (
Tendência semanal
r.sessoes)} secondary={semanal.map(r => r.conversoes)}
labels={semanal.map(r => fmtWeek(r.semana))}
pColor="var(--brand)" sColor="var(--pos)" pLabel="Sessões" sLabel="Conv."/>
)}
{view === "monthly" && mensal && mensal.length > 0 && (
Tendência mensal
r.sessoes)} secondary={mensal.map(r => r.conversoes)}
labels={mensal.map(r => fmtMonth(r.mes))}
pColor="var(--brand)" sColor="var(--pos)" pLabel="Sessões" sLabel="Conv."/>
)}
{(view === "weekly" && (!semanal || !semanal.length)) &&
}
{(view === "monthly" && (!mensal || !mensal.length)) &&
}
);
}
// ─── Events tab ───────────────────────────────────────────────────────────────
function Ga4Events({ todos_eventos }) {
if (!todos_eventos || !todos_eventos.length) return ;
const maxT = todos_eventos[0]?.total || 1;
return (
({ ...r, _bar: r.total }))}
maxBar={maxT}
/>
);
}
// ─── Conversions tab ──────────────────────────────────────────────────────────
function Ga4Conversions({ events, serie, serie_receita }) {
const evList = Object.entries(events).sort((a, b) => b[1] - a[1]);
const convSerie = serie.map(r => Number(r.conversoes||0));
const labels = serie.map(r => { const s = String(r.data); return s.slice(4,6)+"/"+s.slice(6,8); });
const hasConv = convSerie.some(v => v > 0);
const hasRev = (serie_receita||[]).some(r => r.receita > 0);
return (
{evList.length > 0 ? (
{evList.map(([name, count]) => (
ocorrências{fmt.num(count)}
))}
) :
Nenhum evento de conversão. Verifique o setup no GA4.
}
{hasConv && (
)}
{hasRev && (
Receita diária
r.receita)} labels={(serie_receita||[]).map(r => { const s=String(r.data); return s.slice(4,6)+"/"+s.slice(6,8); })} pColor="var(--testing)" pLabel="Receita (R$)"/>
)}
({ ...r, _bar: r.sessoes }))}
maxBar={maxS}
/>
);
}
// ─── Cohort tab ───────────────────────────────────────────────────────────────
function Ga4Cohort() {
const [cohortData, setCohortData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const fetchCohort = async () => {
setLoading(true); setError(null);
try {
const r = await fetch("/api/ga4/cohort");
if (!r.ok) throw new Error(await r.text());
setCohortData(await r.json());
} catch (err) { setError(err.message); }
finally { setLoading(false); }
};
useEffect(() => { fetchCohort(); }, []);
if (loading) return Consultando API de Coorte…
;
if (error) return {error}
;
if (!cohortData || !cohortData.length) return ;
// Group by cohort name
const cohorts = {};
for (const r of cohortData) {
if (!cohorts[r.cohort]) cohorts[r.cohort] = [];
cohorts[r.cohort].push({ week: parseInt(r.cohortNthWeek||0), users: Number(r.cohortActiveUsers||0), retention: Number(r.cohortRetentionRate||0) });
}
const cohortNames = Object.keys(cohorts).sort();
const maxWeeks = Math.max(...Object.values(cohorts).map(c => c.length), 1);
return (
Retenção por coorte semanal
4 últimas semanas completas
| Coorte |
{Array.from({ length: maxWeeks }, (_, i) => (
S+{i} |
))}
{cohortNames.map(name => (
| {name} |
{cohorts[name].sort((a,b) => a.week-b.week).map((w, i) => {
const pct = (w.retention * 100).toFixed(1);
const intensity = Math.min(1, w.retention);
return (
0.5 ? "var(--ink-0)" : "var(--ink-2)", fontWeight: i===0?700:400 }}>
{i === 0 ? fmt.num(w.users) : pct + "%"}
|
);
})}
))}
S+0 = usuários da coorte · S+1, S+2… = % que voltaram nas semanas seguintes
);
}
// ─── Screen root ──────────────────────────────────────────────────────────────
function Ga4Screen({ data: initialData }) {
const today = toYMD(new Date());
const dft30 = toYMD(new Date(Date.now() - 29*864e5));
const [tab, setTab] = useState("overview");
const [data, setData] = useState(initialData);
const [start, setStart] = useState(dft30);
const [end, setEnd] = useState(today);
const [urlFilter, setUrlFilter] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => { if (initialData) setData(initialData); }, [initialData]);
const fetchRange = async (s, e, url) => {
setLoading(true); setError(null);
const params = new URLSearchParams({ start: s, end: e });
if (url) params.set("url", url);
try {
const r = await fetch(`/api/ga4/query?${params}`);
if (!r.ok) throw new Error(await r.text());
setData(await r.json());
setStart(s); setEnd(e); setUrlFilter(url || "");
} catch (err) { setError(err.message); }
finally { setLoading(false); }
};
if (!data && !loading) return (
Carregando dados de site…
);
const tabs = [
{ id:"realtime", label:"🟢 Ao Vivo" },
{ id:"overview", label:"Visão Geral" },
{ id:"pages", label:"Páginas", count: data?.top_paginas?.length },
{ id:"sources", label:"Fontes", count: data?.top_fontes?.length },
{ id:"channels", label:"Canais", count: data?.canais?.length },
{ id:"campaigns", label:"Campanhas" },
{ id:"landing", label:"Landing Pages", count: data?.landing_pages?.length },
{ id:"devices", label:"Dispositivos" },
{ id:"technology", label:"Tecnologia" },
{ id:"geography", label:"Geografia" },
{ id:"behavior", label:"Comportamento" },
{ id:"calendar", label:"Calendário" },
{ id:"search", label:"Busca Interna", count: data?.termos_busca?.length },
{ id:"events", label:"Eventos", count: data?.todos_eventos?.length },
{ id:"conversions", label:"Conversões" },
{ id:"cohort", label:"Coorte" },
];
return (
<>
}
/>
{error && {error}
}
{loading && Consultando Google Analytics 4… (24 relatórios)
}
{!loading && data && <>
{tab==="realtime" && }
{tab==="overview" && }
{tab==="pages" && }
{tab==="sources" && }
{tab==="channels" && }
{tab==="campaigns" && }
{tab==="landing" && }
{tab==="devices" && }
{tab==="technology" && }
{tab==="geography" && }
{tab==="behavior" && }
{tab==="calendar" && }
{tab==="search" && }
{tab==="events" && }
{tab==="conversions"&& }
{tab==="cohort" && }
}
);
}
// ─── App root ─────────────────────────────────────────────────────────────────
function App() {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetch("/api/ga4-context")
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.then(d => { if (d) setData(d); })
.catch(err => setError(err.message || "Falha ao carregar contexto GA4"));
}, []);
if (error) {
return (
Erro ao carregar GA4: {error}
);
}
return
;
}
ReactDOM.createRoot(document.getElementById("root")).render();