'+msg+'

'; } function err(msg) { return '

Erro ao carregar'+msg+'

'; } function kpi(lbl, val, sub) { return '

'+lbl+'

'+val+'

'+(sub?'

'+sub+'

':'')+'

'; } function badge(s) { const u = (s||'').toUpperCase(); if (u==='ACTIVE') return 'Ativa'; if (u==='PAUSED') return 'Pausada'; return ''+(s||'—')+''; } function mrow(name, val) { return '

'+name+''+val+'

'; } function openModal(url, name) { const PH = '/logos/klubi_ok.webp'; const imgEl = document.getElementById('modal-img'); const lnkEl = document.getElementById('modal-link'); const hiRes = url.replace(/[?&]stp=[^&]*/g, '').replace(/[?&]$/, ''); imgEl.style.objectFit = 'contain'; imgEl.style.padding = '0'; imgEl.onerror = () => { imgEl.onerror = () => { imgEl.onerror = null; imgEl.src = PH; imgEl.style.padding = '24px'; }; imgEl.src = url; }; imgEl.src = hiRes || url; lnkEl.href = url; document.getElementById('modal-name').textContent = name || ''; document.getElementById('img-modal').classList.add('open'); document.addEventListener('keydown', _escModal); } function closeModal() { document.getElementById('img-modal').classList.remove('open'); document.removeEventListener('keydown', _escModal); } function _escModal(e) { if (e.key === 'Escape') closeModal(); } function renderRawActions(actions) { if (!Array.isArray(actions) || !actions.length) return ''; const rows = actions.map(a => { const hasRev = a.revenue > 0; return ''+a.type+''+N(a.count)+''+(hasRev?''+R(a.revenue)+'':'—')+''; }).join(''); return '

▸ Debug — Action Types da Conta ('+actions.length+' tipos)

'+rows+'

action_type	Qtd	Receita

'; } async function renderOverview() { const el = document.getElementById('ov-body'); el.innerHTML = spin('Conectando à Meta Ads API…'); const d = await fetchData(); if (!d.ok) { el.innerHTML = err(d.error); return; } const t = d.totals; const kpis = [ kpi('Investimento', R(t.spend)), kpi('Impressões', N(t.impressions)), kpi('Alcance', N(t.reach)), kpi('Frequência', F(t.frequency)), kpi('CPM', R(t.cpm)), kpi('CTR', P(t.ctr)), kpi('Resultados', N(t.purchases), t.result_label && t.result_label !== '—' ? t.result_label : ''), kpi('Compras', N(t.purchase_count), 'Ação de compra Meta'), kpi('Faturamento', R(t.purchase_revenue), 'Receita de compras'), ].join(''); const campOptions = (d.campaigns||[]).map(c => '').join(''); const daily = d.daily || []; const top5 = [...(d.campaigns||[])].sort((a,b)=>b.spend-a.spend).slice(0,5); el.innerHTML = '

Status

Campanha

'+ '

'+kpis+'

'+ renderRawActions(d.rawActions)+ '

Investimento × Resultados por Dia

Top 5 Campanhas por Investimento

'+ '

Campanhas — '+d.period.since+' a '+d.period.until+'

'; let ovSt = 'all', ovCp = 'all'; let ovSort = { k:'spend', dir:-1 }; const OV_COLS = [ {k:'name', l:'Campanha', r:false, fmt:v=>v}, {k:'status', l:'Status', r:false, fmt:badge}, {k:'spend', l:'Investimento', r:true, fmt:R}, {k:'impressions', l:'Impressões', r:true, fmt:N}, {k:'reach', l:'Alcance', r:true, fmt:N}, {k:'ctr', l:'CTR', r:true, fmt:P}, {k:'purchases', l:'Resultados', r:true, fmt:(v,row)=>N(v)+(row&&row.result_label&&row.result_label!=='—'?' '+row.result_label+'':'')}, {k:'cost_per_purchase',l:'Custo/Res.', r:true, fmt:v=>v>0?R(v):'—'}, ]; function ovFiltered() { return (d.campaigns||[]).filter(c=>(ovSt==='all'||c.status===ovSt)&&(ovCp==='all'||c.name===ovCp)); } function ovDraw() { const rows = [...ovFiltered()].sort((a,b)=>{ const av=a[ovSort.k]??0,bv=b[ovSort.k]??0; return(typeof av==='number'?(av-bv)*ovSort.dir:String(av).localeCompare(String(bv))*ovSort.dir); }); const th = OV_COLS.map(c=>{ const cls=ovSort.k===c.k?(ovSort.dir===-1?'sd':'sa'):''; return ''+c.l+''; }).join(''); const tr = rows.map(c=>''+OV_COLS.map(col=>''+col.fmt(c[col.k],c)+'').join('')+'').join(''); document.getElementById('t-ov').innerHTML = ''+th+''+tr+''; const t5 = [...ovFiltered()].sort((a,b)=>b.spend-a.spend).slice(0,5); mkChart('ch-ov-top5','bar',t5.map(c=>c.name.slice(0,25)),[{label:'Investimento (R$)',data:t5.map(c=>c.spend),backgroundColor:'#FFD70099',borderColor:'#FFD700',borderWidth:1,borderRadius:4}]); } window._ovSort = k => { ovSort = ovSort.k===k?{k,dir:-ovSort.dir}:{k,dir:-1}; ovDraw(); }; window.ovApply = () => { ovSt = document.getElementById('ov-st').value; ovCp = document.getElementById('ov-cp').value; const sel = document.getElementById('ov-cp'); const vis = (d.campaigns||[]).filter(c=>ovSt==='all'||c.status===ovSt); if (ovCp!=='all'&&!vis.find(c=>c.name===ovCp)) ovCp='all'; sel.innerHTML=''+vis.map(c=>'').join(''); sel.value=ovCp; ovDraw(); }; ovDraw(); const dL = daily.map(x=>x.date.slice(5).replace('-','/')); mkChart('ch-ov-line','line',dL,[{label:'Investimento (R$)',data:daily.map(x=>x.spend),borderColor:'#FFD700',backgroundColor:'rgba(255,215,0,.1)',fill:true,tension:.4,pointRadius:3,borderWidth:2,yAxisID:'y'},{label:'Resultados',data:daily.map(x=>x.purchases),borderColor:'#f87171',backgroundColor:'transparent',fill:false,tension:.4,pointRadius:3,borderWidth:2,yAxisID:'y2'}],{scales:{x:{ticks:{color:'#555',font:{size:11}},grid:{color:'#1e1e1e'}},y:{position:'left',ticks:{color:'#FFD700',font:{size:11}},grid:{color:'#1e1e1e'},title:{display:true,text:'R$',color:'#FFD700'}},y2:{position:'right',ticks:{color:'#f87171',font:{size:11}},grid:{drawOnChartArea:false},title:{display:true,text:'Resultados',color:'#f87171'}}}}); mkChart('ch-ov-top5','bar',top5.map(c=>c.name.slice(0,25)),[{label:'Investimento (R$)',data:top5.map(c=>c.spend),backgroundColor:'#FFD70099',borderColor:'#FFD700',borderWidth:1,borderRadius:4}]); _loaded.overview = true; } async function renderCreatives() { const el = document.getElementById('cr-body'); el.innerHTML = spin('Carregando criativos…'); const d = await fetchData(); if (!d.ok) { el.innerHTML = err(d.error); return; } const ads = d.ads || []; const avgRoas = ads.length > 0 ? ads.reduce((s,a)=>s+a.roas,0)/ads.length : 1; let crSt='all', crSrch='', crCp='all'; let crSort = { k:'spend', dir:-1 }; let _crAvgs = {}, _crCount = 0; function crArrow(val, avg, hi=true) { if (_crCount < 2 || !avg || val === 0) return ''; const better = hi ? val > avg : (val > 0 && val < avg); return better ? '↑' : '↓'; } const campNames = [...new Set(ads.map(a=>a.campaign_name))]; const cpOpts = campNames.map(n=>'').join(''); function crFiltered() { return ads.filter(a=>(crSt==='all'||a.status===crSt)&&(crCp==='all'||a.campaign_name===crCp)&&(!crSrch||(a.ad_name||'').toLowerCase().includes(crSrch.toLowerCase())||(a.ad_id||'').includes(crSrch))); } function blockMetrics(list) { if (!list.length) return null; const agg = list.reduce((acc,a)=>({spend:acc.spend+a.spend,impr:acc.impr+a.impressions,reach:acc.reach+(a.reach||0),purch:acc.purch+a.purchases,rev:acc.rev+a.revenue,outb:acc.outb+(a.outbound_clicks||0),land:acc.land+(a.landing_page_views||0)}),{spend:0,impr:0,reach:0,purch:0,rev:0,outb:0,land:0}); const hookSum=list.reduce((s,a)=>s+(a.hook_rate/100*a.impressions),0); const holdSum=list.reduce((s,a)=>s+(a.hold_rate/100*a.impressions),0); const inlSum=list.reduce((s,a)=>s+(a.ctr_link/100*a.impressions),0); const ctrAvg=list.reduce((s,a)=>s+a.ctr,0)/list.length; const playAvg=list.reduce((s,a)=>s+a.avg_play_time,0)/list.length; const lblC={}; list.forEach(a=>{ if(a.result_label&&a.result_label!=='—') lblC[a.result_label]=(lblC[a.result_label]||0)+(a.purchases||0); }); const domLbl=Object.entries(lblC).sort((a,b)=>b[1]-a[1])[0]?.[0]||'—'; return {spend:agg.spend,impressions:agg.impr,reach:agg.reach,freq:agg.reach>0?agg.impr/agg.reach:0,cpm:agg.impr>0?(agg.spend/agg.impr)*1000:0,ctr:ctrAvg,hook:agg.impr>0?(hookSum/agg.impr)*100:0,hold:agg.impr>0?(holdSum/agg.impr)*100:0,play:playAvg,ctr_link:agg.impr>0?(inlSum/agg.impr)*100:0,outbound:agg.outb,landing:agg.land,dropoff:agg.outb>0?Math.max(0,(1-agg.land/agg.outb)*100):0,purch:agg.purch,cpp:agg.purch>0?agg.spend/agg.purch:0,roas:agg.spend>0?agg.rev/agg.spend:0,result_label:domLbl}; } function renderBlocks(bm) { if (!bm) return ''; return '

A Entrega e Volume

'+mrow('Investimento',R(bm.spend))+mrow('Impressões',N(bm.impressions))+mrow('Alcance',N(bm.reach))+mrow('Frequência',F(bm.freq))+mrow('CPM',R(bm.cpm))+'

B Atração e Retenção

'+mrow('CTR Todos',P(bm.ctr))+mrow('Hook Rate',bm.hook>0?P(bm.hook):'—')+mrow('Hold Rate',bm.hold>0?P(bm.hold):'—')+mrow('T. Médio Reprodução',bm.play>0?S(bm.play):'—')+'

C Eficiência de Saída

'+mrow('CTR Link',bm.ctr_link>0?P(bm.ctr_link):'—')+mrow('Cliques de Saída',N(bm.outbound))+mrow('Vis. Página de Destino',N(bm.landing))+mrow('Taxa de Drop-off',bm.dropoff>0?P(bm.dropoff):'—')+'

D Conversão

'+mrow('Resultados'+(bm.result_label&&bm.result_label!=='—'?' ('+bm.result_label+')':''),N(bm.purch))+mrow('Custo por Resultado',bm.purch>0?R(bm.cpp):'—')+mrow('ROAS',bm.roas>0?X(bm.roas):'—')+'

'; } function alertBadges(a) { const b=[]; if(a.frequency>3.0&&a.roas⚡ Fadiga'); if(a.dropoff_rate>25) b.push('🐢 Site Lento'); if(a.hook_rate>0&&a.hook_rate<25) b.push('🎣 Bad Hook'); if(a.cost_per_purchase>350&&a.purchases>0) b.push('💸 Custo Alto'); return b.join(''); } function trCls(a) { const c=[]; if(a.frequency>3.0&&a.roas25) c.push('al-site'); if(a.hook_rate>0&&a.hook_rate<25) c.push('al-hook'); if(a.cost_per_purchase>350&&a.purchases>0) c.push('al-custo'); return c.join(' '); } const CR_COLS=[{k:'ad_name',l:'Criativo',r:false},{k:'spend',l:'Invest.',r:true},{k:'impressions',l:'Impressões',r:true},{k:'reach',l:'Alcance',r:true},{k:'frequency',l:'Freq.',r:true},{k:'cpm',l:'CPM',r:true},{k:'ctr',l:'CTR',r:true},{k:'hook_rate',l:'Hook %',r:true},{k:'hold_rate',l:'Hold %',r:true},{k:'avg_play_time',l:'T.Play',r:true},{k:'ctr_link',l:'CTR Link',r:true},{k:'outbound_clicks',l:'Saídas',r:true},{k:'landing_page_views',l:'Vis.Página',r:true},{k:'dropoff_rate',l:'Drop-off',r:true},{k:'purchases',l:'Resultados',r:true},{k:'cost_per_purchase',l:'Custo/Res.',r:true},{k:'roas',l:'ROAS',r:true}]; function fmtCr(a,k) { switch(k) { case 'ad_name': { const PH='/logos/klubi_ok.webp'; const name=(a.ad_name||'—').slice(0,80); const nameEsc=name.replace(/'/g,"\\'"); const srcUrl=a.thumbnail?a.thumbnail.replace(/&/g,'&'):null; const modalUrl=(a.thumbnail||'').replace(/'/g,"\\'"); const imgTag=srcUrl?'

':'

'; return '

'+imgTag+''+name.slice(0,55)+alertBadges(a)+'

'; } case 'spend': return R(a.spend); case 'impressions': return N(a.impressions); case 'reach': return N(a.reach); case 'frequency': return F(a.frequency); case 'cpm': return R(a.cpm); case 'ctr': return P(a.ctr)+crArrow(a.ctr,_crAvgs.ctr); case 'hook_rate': return a.hook_rate>0?P(a.hook_rate):'—'; case 'hold_rate': return a.hold_rate>0?P(a.hold_rate):'—'; case 'avg_play_time': return a.avg_play_time>0?S(a.avg_play_time):'—'; case 'ctr_link': return a.ctr_link>0?P(a.ctr_link)+crArrow(a.ctr_link,_crAvgs.ctr_link):'—'; case 'outbound_clicks': return N(a.outbound_clicks); case 'landing_page_views': return N(a.landing_page_views); case 'dropoff_rate': return a.dropoff_rate>0?P(a.dropoff_rate):'—'; case 'purchases': return N(a.purchases)+crArrow(a.purchases,_crAvgs.purchases)+(a.result_label&&a.result_label!=='—'?' '+a.result_label+'':''); case 'cost_per_purchase': return a.purchases>0?R(a.cost_per_purchase)+crArrow(a.cost_per_purchase,_crAvgs.cost_per_purchase,false):'—'; case 'roas': return a.roas>0?X(a.roas)+crArrow(a.roas,_crAvgs.roas):'—'; default: return '—'; } } function crDraw() { const sorted=[...crFiltered()].sort((a,b)=>{ const av=a[crSort.k]??0,bv=b[crSort.k]??0; return typeof av==='number'?(av-bv)*crSort.dir:String(av).localeCompare(String(bv))*crSort.dir; }); _crCount=sorted.length; const _n=Math.max(_crCount,1); const _nv=k=>Math.max(sorted.filter(a=>a[k]>0).length,1); _crAvgs={ctr:sorted.reduce((s,a)=>s+a.ctr,0)/_n,purchases:sorted.reduce((s,a)=>s+a.purchases,0)/_n,ctr_link:sorted.filter(a=>a.ctr_link>0).reduce((s,a)=>s+a.ctr_link,0)/_nv('ctr_link'),roas:sorted.filter(a=>a.roas>0).reduce((s,a)=>s+a.roas,0)/_nv('roas'),cost_per_purchase:sorted.filter(a=>a.purchases>0).reduce((s,a)=>s+a.cost_per_purchase,0)/_nv('cost_per_purchase')}; const th=CR_COLS.map(c=>{ const cls=crSort.k===c.k?(crSort.dir===-1?'sd':'sa'):''; return ''+c.l+''; }).join(''); const tr=sorted.map(a=>''+CR_COLS.map(col=>''+fmtCr(a,col.k)+'').join('')+'').join(''); document.getElementById('t-cr').innerHTML=''+th+''+tr+''; document.getElementById('cr-blocks').innerHTML=renderBlocks(blockMetrics(sorted)); } window._crSort = k => { crSort=crSort.k===k?{k,dir:-crSort.dir}:{k,dir:-1}; crDraw(); }; window.crApply = () => { crSt=document.getElementById('cr-st').value; crSrch=document.getElementById('cr-srch').value; crCp=document.getElementById('cr-cp').value; crDraw(); }; el.innerHTML='

Status

Criativo

Campanha / Conjunto

Criativos — '+d.period.since+' a '+d.period.until+' ('+ads.length+' anúncios)

'; crDraw(); _loaded.creatives = true; } async function renderCompare() { const el = document.getElementById('cmp-body'); el.innerHTML = spin('Carregando campanhas…'); const d = await fetchData(); if (!d.ok) { el.innerHTML = err(d.error); return; } const camps = d.campaigns || []; let cmpFilterSt = 'all'; function visibleCamps() { return camps.filter(c=>cmpFilterSt==='all'||c.status===cmpFilterSt); } const CMP_METRICS=[{k:'roas',l:'ROAS',fmt:v=>v>0?X(v):'—',better:'higher'},{k:'cost_per_purchase',l:'Custo/Resultado',fmt:v=>v>0?R(v):'—',better:'lower'},{k:'purchases',l:'Resultados',fmt:N,better:'higher'},{k:'ctr',l:'CTR',fmt:P,better:'higher'},{k:'hook_rate',l:'Hook Rate',fmt:v=>v>0?P(v):'—',better:'higher'},{k:'hold_rate',l:'Hold Rate',fmt:v=>v>0?P(v):'—',better:'higher'},{k:'avg_play_time',l:'Tempo Médio',fmt:v=>v>0?S(v):'—',better:'higher'},{k:'dropoff_rate',l:'Drop-off',fmt:v=>v>0?P(v):'—',better:'lower'},{k:'ctr_link',l:'CTR Link',fmt:v=>v>0?P(v):'—',better:'higher'},{k:'frequency',l:'Frequência',fmt:F,better:'lower'},{k:'cpm',l:'CPM',fmt:R,better:'lower'},{k:'impressions',l:'Impressões',fmt:N,better:'higher'},{k:'reach',l:'Alcance',fmt:N,better:'higher'},{k:'spend',l:'Investimento',fmt:R,better:'lower'}]; function campOpts(exclude) { return ''+visibleCamps().map(c=>'').join(''); } function drawComparison() { const nameA=document.getElementById('cmp-sel-a')?.value||''; const nameB=document.getElementById('cmp-sel-b')?.value||''; const cA=camps.find(c=>c.name===nameA); const cB=camps.find(c=>c.name===nameB); const res=document.getElementById('cmp-results'); const selA=document.getElementById('cmp-sel-a'); const selB=document.getElementById('cmp-sel-b'); if(selA){selA.innerHTML=campOpts(nameB);if(nameA)selA.value=nameA;} if(selB){selB.innerHTML=campOpts(nameA);if(nameB)selB.value=nameB;} if(!cA||!cB){res.innerHTML='

Escolha as duas campanhas acima para ver a comparação.

';document.getElementById('wins-a').innerHTML='— vitórias';document.getElementById('wins-b').innerHTML='— vitórias';return;} let winsA=0,winsB=0; const metricResults=CMP_METRICS.map(m=>{const va=parseFloat(cA[m.k])||0,vb=parseFloat(cB[m.k])||0;if(va===0&&vb===0)return{m,va,vb,winner:'none'};const aWins=m.better==='higher'?va>vb:(va0);const bWins=m.better==='higher'?vb>va:(vb0);if(aWins)winsA++;if(bWins)winsB++;return{m,va,vb,winner:aWins?'a':bWins?'b':'tie'};}); document.getElementById('wins-a').innerHTML=winsA+' vitórias'; document.getElementById('wins-b').innerHTML=winsB+' vitórias'; const rows=metricResults.map(({m,va,vb,winner})=>{const total=va+vb;const pctA=total>0?Math.round((va/total)*100):50;const pctB=100-pctA;const aWin=winner==='a',bWin=winner==='b';return '

'+m.l+''+m.fmt(va)+'

'+m.fmt(vb)+'

';}).join(''); const maxCtr=Math.max(cA.ctr||0,cB.ctr||0,0.01); const maxRoas=Math.max(cA.roas||0,cB.roas||0,0.01); const radarDS=[cA,cB].map((c,i)=>({label:c.name.slice(0,20),data:[c.hook_rate||0,c.hold_rate||0,((c.ctr||0)/maxCtr)*100,((c.roas||0)/maxRoas)*100,Math.max(0,100-(c.dropoff_rate||0))],borderColor:i===0?'#FFD700':'#60a5fa',backgroundColor:i===0?'rgba(255,215,0,.15)':'rgba(96,165,250,.15)',pointBackgroundColor:i===0?'#FFD700':'#60a5fa',borderWidth:2})); res.innerHTML='

Radar de Perfil

Investimento × Resultados

'+rows+'

'; mkChart('ch-cmp-radar','radar',['Hook Rate','Hold Rate','CTR','ROAS','Site OK'],radarDS); mkChart('ch-cmp-bar','bar',[cA.name.slice(0,24),cB.name.slice(0,24)],[{label:'Investimento (R$)',data:[cA.spend,cB.spend],backgroundColor:['rgba(255,215,0,.6)','rgba(96,165,250,.6)'],borderColor:['#FFD700','#60a5fa'],borderWidth:1,borderRadius:4},{label:'Resultados',data:[cA.purchases,cB.purchases],backgroundColor:['rgba(255,215,0,.25)','rgba(96,165,250,.25)'],borderColor:['#FFD700','#60a5fa'],borderWidth:1,borderRadius:4,yAxisID:'y2'}],{scales:{x:{ticks:{color:'#555',font:{size:11}},grid:{color:'#1e1e1e'}},y:{position:'left',ticks:{color:'#FFD700',font:{size:11}},grid:{color:'#1e1e1e'}},y2:{position:'right',ticks:{color:'#60a5fa',font:{size:11}},grid:{drawOnChartArea:false}}}}); } window.cmpChange = () => { setTimeout(drawComparison, 0); }; el.innerHTML='

Status

Campanha A

— vitórias

Campanha B

— vitórias

Escolha as duas campanhas acima para ver a comparação.

'; window.cmpChangeFilter = () => { cmpFilterSt=document.getElementById('cmp-st').value; const valA=document.getElementById('cmp-sel-a')?.value||''; const valB=document.getElementById('cmp-sel-b')?.value||''; const vis=visibleCamps(); const selA=document.getElementById('cmp-sel-a'); const selB=document.getElementById('cmp-sel-b'); selA.innerHTML=campOpts(valB); selB.innerHTML=campOpts(valA); selA.value=vis.find(c=>c.name===valA)?valA:''; selB.value=vis.find(c=>c.name===valB)?valB:''; drawComparison(); }; _loaded.compare = true; } renderOverview(); (function startCountdown() { const INTERVAL = 5 * 60; let remaining = INTERVAL; const cdEl = document.getElementById('refresh-cd'); function tick() { if (cdEl) { const m=String(Math.floor(remaining/60)).padStart(2,'0'),s=String(remaining%60).padStart(2,'0'); cdEl.textContent='Atualiza em '+m+':'+s; } if (remaining <= 0) { remaining = INTERVAL; _data = null; _loaded.overview = _loaded.creatives = _loaded.compare = false; const active = document.querySelector('.tab.active')?.dataset?.tab; if (active==='overview') renderOverview(); if (active==='creatives') renderCreatives(); if (active==='compare') renderCompare(); } else { remaining--; } } tick(); setInterval(tick, 1000); }());