/* ================================================================ Tracker FMN — Site Screen v2 Views do blog com filtros de período, referrer, device e UTM ================================================================ */ const { useState: useStateSite, useEffect: useEffectSite, useCallback: useCallbackSite } = React; const PERIODOS_SITE = [ { id: 'hoje', label: 'Hoje' }, { id: '7d', label: '7 dias' }, { id: '30d', label: '30 dias' }, { id: 'maximo', label: 'Máximo' }, { id: 'custom', label: 'Personalizado' }, ]; function isoLocal(d) { return d.toISOString().slice(0, 10); } function dateRangeFor(periodId) { const now = new Date(); const todayStr = isoLocal(now); if (periodId === 'hoje') return { from: todayStr + 'T00:00:00', to: null }; if (periodId === '7d') { const d = new Date(now); d.setDate(d.getDate() - 7); return { from: d.toISOString(), to: null }; } if (periodId === '30d') { const d = new Date(now); d.setDate(d.getDate() - 30); return { from: d.toISOString(), to: null }; } return { from: null, to: null }; } function fmtDate(iso) { if (!iso) return '—'; return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' }); } function fmtRefLabel(ref) { if (!ref) return 'Direto / Digitado'; if (/google/i.test(ref)) return 'Google'; if (/instagram/i.test(ref)) return 'Instagram'; if (/facebook/i.test(ref)) return 'Facebook'; if (/whatsapp/i.test(ref)) return 'WhatsApp'; if (/youtube/i.test(ref)) return 'YouTube'; if (/linkedin/i.test(ref)) return 'LinkedIn'; try { return new URL(ref).hostname.replace('www.', ''); } catch { return ref; } } function SiteScreen() { const { TopBar, LucideIcon, CardKPI, SectionCard } = window; const [periodo, setPeriodo] = useStateSite('7d'); const [customFrom, setCustomFrom] = useStateSite(''); const [customTo, setCustomTo] = useStateSite(''); const [sortBy, setSortBy] = useStateSite('views'); const [posts, setPosts] = useStateSite([]); const [events, setEvents] = useStateSite([]); const [loading, setLoading] = useStateSite(true); /* ── Carrega dados ─────────────────────────────────────────────── */ const load = useCallbackSite(async () => { if (!window.db) return; setLoading(true); if (periodo === 'maximo') { const { data } = await window.db .from('site_post_views') .select('slug,titulo,views,last_view_at') .order('views', { ascending: false }); setPosts(data || []); setEvents([]); } else { let q = window.db .from('site_post_view_events') .select('slug,titulo,viewed_at,referrer,utm_source,utm_medium,utm_campaign,device') .order('viewed_at', { ascending: false }) .limit(10000); if (periodo === 'custom') { if (customFrom) q = q.gte('viewed_at', customFrom + 'T00:00:00'); if (customTo) q = q.lte('viewed_at', customTo + 'T23:59:59'); } else { const { from } = dateRangeFor(periodo); if (from) q = q.gte('viewed_at', from); } const { data } = await q; const evs = data || []; setEvents(evs); // Agrega por slug const map = {}; evs.forEach(e => { if (!map[e.slug]) map[e.slug] = { slug: e.slug, titulo: e.titulo, views: 0, last_view_at: e.viewed_at }; map[e.slug].views++; if (e.viewed_at > map[e.slug].last_view_at) map[e.slug].last_view_at = e.viewed_at; if (e.titulo && !map[e.slug].titulo) map[e.slug].titulo = e.titulo; }); setPosts(Object.values(map)); } setLoading(false); }, [periodo, customFrom, customTo]); useEffectSite(() => { load(); }, [load]); /* ── Derivados ─────────────────────────────────────────────────── */ const totalViews = posts.reduce((s, p) => s + (p.views || 0), 0); const sorted = [...posts].sort((a, b) => { if (sortBy === 'views') return (b.views || 0) - (a.views || 0); if (sortBy === 'recente') return new Date(b.last_view_at) - new Date(a.last_view_at); return (a.titulo || a.slug).localeCompare(b.titulo || b.slug, 'pt-BR'); }); const maxViews = posts.length ? Math.max(...posts.map(p => p.views || 0)) : 0; // Referrers const refMap = {}; events.forEach(e => { const label = fmtRefLabel(e.referrer); refMap[label] = (refMap[label] || 0) + 1; }); const topRefs = Object.entries(refMap).sort((a, b) => b[1] - a[1]).slice(0, 6); // UTM const utmMap = {}; events.forEach(e => { if (e.utm_source) { const key = [e.utm_source, e.utm_medium].filter(Boolean).join(' / '); utmMap[key] = (utmMap[key] || 0) + 1; } }); const topUtms = Object.entries(utmMap).sort((a, b) => b[1] - a[1]).slice(0, 5); // Device const mobile = events.filter(e => e.device === 'mobile').length; const desktop = events.filter(e => e.device === 'desktop').length; const totalDev = mobile + desktop || 1; const mobilePct = Math.round((mobile / totalDev) * 100); const desktopPct = Math.round((desktop / totalDev) * 100); const postMaisLido = sorted[0]; /* ── Seletor de período ────────────────────────────────────────── */ function PeriodSelector() { return (
{PERIODOS_SITE.map(p => ( ))} {periodo === 'custom' && (
setCustomFrom(e.target.value)} style={{ background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.12)', borderRadius: 6, color: 'rgba(255,255,255,.8)', fontSize: 12, padding: '5px 8px', fontFamily: 'Roboto,sans-serif' }} /> até setCustomTo(e.target.value)} style={{ background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.12)', borderRadius: 6, color: 'rgba(255,255,255,.8)', fontSize: 12, padding: '5px 8px', fontFamily: 'Roboto,sans-serif' }} />
)}
); } /* ── Barra de progresso ────────────────────────────────────────── */ function Bar({ pct, color = 'var(--fmn-gold)' }) { return (
); } /* ── Render ────────────────────────────────────────────────────── */ return (
} />
{/* KPIs */}
{/* Linha inferior: tabela + breakdowns */}
{/* Tabela de posts */} {[['views','Mais visto'],['recente','Recente'],['alfa','A–Z']].map(([id, lbl]) => ( ))}
}> {loading ? (
Carregando...
) : posts.length === 0 ? (
Nenhuma visita neste período.
Tente "Máximo" para ver o histórico completo.
) : (
{/* Header */}
Post Views Última visita
{sorted.map((p, i) => { const pct = maxViews ? Math.round(((p.views || 0) / maxViews) * 100) : 0; const url = `https://www.fotografiaeomeunegocio.com.br/post.html?slug=${encodeURIComponent(p.slug)}`; return (
e.currentTarget.style.background = 'rgba(234,170,65,.055)'} onMouseLeave={e => e.currentTarget.style.background = i % 2 === 0 ? 'rgba(255,255,255,.02)' : 'transparent'} >
{p.titulo || p.slug}
{(p.views || 0).toLocaleString('pt-BR')}
{fmtDate(p.last_view_at)}
{ e.currentTarget.style.background = 'rgba(234,170,65,.12)'; e.currentTarget.style.color = 'var(--fmn-gold)'; }} onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,.04)'; e.currentTarget.style.color = 'rgba(255,255,255,.35)'; }} >
); })}
)} {/* Coluna lateral: breakdowns */}
{/* Device */} {!events.length ? (
{periodo === 'maximo' ? 'Disponível ao filtrar por período' : 'Sem dados'}
) : (
{[['mobile','Celular',mobilePct,'#60a5fa'],['desktop','Desktop',desktopPct,'#a78bfa']].map(([id,lbl,pct,color]) => (
{lbl} {pct}%
))}
)} {/* Origens */} {!events.length ? (
{periodo === 'maximo' ? 'Disponível ao filtrar por período' : 'Sem dados'}
) : topRefs.length === 0 ? (
Sem dados
) : (
{topRefs.map(([label, count]) => { const pct = Math.round((count / (events.length || 1)) * 100); return (
{label} {count} ({pct}%)
); })}
)} {/* UTM */} {topUtms.length > 0 && (
{topUtms.map(([key, count]) => (
{key} {count}
))}
)}
); } Object.assign(window, { SiteScreen });