Lesson completed!
-

Leccion 16 / 21 · App 3: Dashboard de Analíticas

Construí el Dashboard

Max Techera
Siguiente

Construí el Dashboard

En el Capítulo 3 pulleaste tus últimos reels a data/mine/*.json a través de la API de Meta. Ahora mismo eso son solo archivos — reach, saves, shares, watch time sentados en el disco. Esta lección los convierte en algo que podés leer de un vistazo.

El output es un archivo HTML. Sin servidor, sin build step, sin app para deployar. Claude Code escribe un generador en Python que lee tu JSON, hace la matemática, y hornea un dashboards/mine.html autocontenido con gráficos reales cargados desde un CDN. Hacés doble clic y abre en cualquier navegador.

El prompt

Pegá esto en Claude Code, en la carpeta del proyecto donde vive data/mine/:

Build a self-contained `dashboards/mine.html` generator in Python.
1. Leé data/mine/*.json (mis reels, pulled en el Paso 1 vía el MCP de Meta).
2. Por reel calculá: saves/reach, shares/reach, avg_watch_time_sec,
   engagement_rate = (likes+comments+shares+saves)/views*100, y outlier_multiplier vs la mediana de views.
3. Generá UN HTML autocontenido con Plotly.js (CDN):
   - Cards: mediana de views, mejor reel, avg watch time, avg saves/reach.
   - Barras: reels rankeados por outlier_multiplier.
   - Scatter: avg_watch_time vs reach (los ganadores de watch time).
   - Tabla: top 5 y bottom 3 por engagement_rate con caption + hook.
Marcá saves/reach y shares/reach como señal primaria; tratá los likes como vanidad.

Eso es todo. Un prompt, un archivo. Si Claude Code se topa con un campo faltante o un problema de path, pegale el error con fix — parchea y vuelve a correr.

Qué lee

El único input del generador es la carpeta del Capítulo 3: data/mine/*.json, un archivo por reel. Cada archivo trae los campos owner-only que devolvió la API de Meta — reach, saved, shares, ig_reels_avg_watch_time, views, likes, comments. Nada acá es scrapeado ni adivinado. Es tu cuenta, directo de Meta.

Antes de graficar nada, el generador calcula unas cosas por reel:

  • saves/reach — cuántos de los que lo vieron lo guardaron (intención).
  • shares/reach — cuántos lo compartieron (velocidad viral).
  • avg_watch_time_sec — segundos promedio vistos, convertidos desde los milisegundos de la API.
  • engagement_rate(likes + comments + shares + saves) / views × 100.
  • outlier_multiplier — las views del reel ÷ la mediana de views de todos tus reels. La misma matemática del competitor tracker, apuntada a vos mismo: un 3x significa que ese reel hizo tres veces lo tuyo usual.

Qué dibuja

El archivo arma cuatro bloques, de arriba a abajo:

Cards de headline. Cuatro números que resumen la cuenta: tu mediana de views (tu baseline real, no el promedio — un breakout no lo distorsiona), tu mejor reel, tu watch time promedio, y tu saves/reach promedio. Esta es la fila de "cómo vengo en general".

El gráfico de barras de outliers. Cada reel como una barra, rankeada por outlier multiplier. Las barras altas son las que rompieron tu baseline. Acá detectás el reel que funcionó de verdad — y rara vez es el que tiene más likes.

El scatter de watch time. Cada reel ploteado como watch time promedio (y) vs reach (x). Los reels arriba y a la derecha son tus ganadores de watch time: retuvieron gente y consiguieron distribución. El watch time es la señal que premia el algoritmo, así que en este gráfico se esconden las lecciones reales.

La tabla top-5 / bottom-3. Tus cinco mejores y tres peores reels por engagement rate, cada fila mostrando el caption y el hook. Esta es la lectura cualitativa — mirás los top 5, ves qué tienen en común, y los bottom 3 te dicen qué dejar de hacer.

Tip:

Fijate que el dashboard nunca rankea por likes. El gráfico de barras usa outlier multiplier, la tabla usa engagement rate, y las cards arrancan con watch time y saves/reach. Los likes no tienen su propio gráfico a propósito — vas a ver por qué en la próxima lección.

Regeneralo cada semana

Como es un script de Python escribiendo un archivo HTML, refrescar el dashboard es un solo comando. Pulleás tus reels nuevos a data/mine/, volvés a correr el generador, abrís el archivo. Después, en el Capítulo 7, esto se vuelve parte del loop semanal que ata las tres apps — pero incluso solo, es la primera vez que la mayoría de los creadores ve de verdad su propio watch time en vez de adivinar desde los likes.

Knowledge check

¿Por qué rankea el gráfico de barras principal del dashboard tus reels?

Lo que te llevás

Un prompt convierte data/mine/*.json en un mine.html autocontenido: cards de headline (mediana de views, mejor reel, avg watch time, avg saves/reach), un gráfico de barras de outliers, un scatter de watch-time-vs-reach, y una tabla top-5/bottom-3 con captions y hooks. Lee tu data real de Meta, nunca likes-first, y se regenera en un solo comando.

Compartir