Tracking en landings
Las analíticas de una landing (mapa de clicks y curva de scroll) no analizan el HTML de forma automática ni "adivinan" qué es importante — dependen enteramente de dos atributos que tenés que poner vos mismo en los elementos que quieras medir. Un elemento sin estos atributos simplemente no genera datos.
El código está en app/static/js/tracking.js, que envía los eventos a POST /api/track, y estos se guardan en el modelo AnalyticsEvent.
data-track-id — mapa de clicks
Cualquier elemento con data-track-id="algo" dispara automáticamente un evento element_click al hacer click — no hace falta agregar ningún JavaScript propio, tracking.js ya escucha clicks en todo el documento.
<button data-track-id="hero-cta-donar">Quiero donar</button>
El reporte de ranking de clicks de la landing agrupa los eventos exactamente por este string — dos elementos con el mismo data-track-id cuentan como el mismo elemento en el reporte, aunque estén en lugares distintos de la página. Por eso:
- Usá un valor único dentro de la landing para cada elemento que quieras medir por separado.
- El
idinterno que genera el constructor visual (algo como#i595) no tiene nada que ver con esto — el editor no lo usa para tracking. Si no ponésdata-track-ida mano, ese botón no aparece en el ranking de clicks.
Convención de nombres existente
No hay una validación que fuerce un formato, pero el resto de la plataforma sigue el patrón <módulo>_<elemento>, por ejemplo rq_btn-continue o rq_plan-{{ plan.id }} en Recaudación, form_public_btn-submit en Formularios. Los bloques de "Secciones" que trae el constructor de landings (Hero, Planes de precio, FAQ, etc.) ya incluyen sus propios data-track-id en los botones principales (por ejemplo hero-centered-cta-primary, pricing-cta-basico) — sin prefijo de módulo, porque cada landing es su propio contexto. Si agregás botones o CTAs propios (sobre todo en modo HTML), seguí ese mismo estilo: minúsculas, guiones medios, describiendo sección + elemento.
data-track-region — curva de scroll y posición de click
Este segundo atributo identifica una sección completa de la página (no un elemento puntual) y alimenta dos reportes a la vez:
- Curva de scroll — qué porcentaje de los visitantes llega a ver cada sección. El nombre que aparece en el gráfico es literalmente el valor de este atributo — de nuevo, el
iddel constructor visual no se usa acá. - Posición de click dentro de la región — en qué parte (x/y relativo) de la sección hacen click los visitantes, útil para mapas de calor.
<section data-track-region="planes">
...
</section>
Los bloques de "Secciones" del constructor ya traen su propio data-track-region (hero-centered, features-3, pricing, faq, footer, etc.). Si armás una sección desde cero en modo HTML, ponele un data-track-region propio, corto y descriptivo (hero, beneficios, testimonios, cta-final) — sin este atributo, esa sección no aparece en la curva de scroll, ni se reporta como visible aunque los visitantes la vean.
El reporte de scroll solo muestra secciones con una cantidad mínima de muestras — en una landing con poco tráfico todavía, es normal que una región recién agregada tarde en aparecer.
Resumen rápido
| Quiero medir... | Atributo | Dónde ponerlo |
|---|---|---|
| Clicks en un botón/link puntual | data-track-id="..." |
En el elemento clickeable |
| Hasta dónde llega el scroll / qué tanto se ve una sección | data-track-region="..." |
En el contenedor de la sección completa |
| Ambas cosas en una sección con un CTA adentro | Los dos, en elementos distintos | data-track-region en la sección, data-track-id en el botón |
Cada landing reporta sus eventos por separado (identificados internamente por su slug) — podés repetir los mismos nombres de data-track-id/data-track-region en distintas landings sin que se mezclen entre sí.