Barcelona Activa
Expedient BA 20/26Consultas GA4 →
Barcelona Activa · Índice del proyecto

Analítica de los portales y dashboard de objetivos

Dos bloques: Analytics (cómo se miden los portales: propiedades GA4, Tag Manager, automatización con Puppeteer, consultas y la intranet de administración) y Dashboard (los objetivos OG1–OG3, las maquetas y todo lo aprendido para construir las gráficas).

Pincha en un pantallazo para verlo a tamaño completo · en el Dashboard, pincha en una sección para ver y abrir sus archivos

23propiedades GA4ecosistema + portales y apps
167consultas en el catálogokpis.js · Excel BA_KPI_Portals
17secciones del dashboardgráficas, geometría, CSS…
178páginas enlazadaslecciones, variantes y maquetas
Bloque 1

Analytics

Todo lo que hace falta para que los datos existan y se puedan consultar: desde el contenedor de Tag Manager hasta las consultas y la administración.

Google Analytics 4
Google Analytics 4

Analytics · las propiedades

Una propiedad ecosistema que recibe todo y una propiedad por portal o aplicación. Las consultas eligen la propiedad con ?portal=; el ID numérico de cada una está en aprende-ga4/kpis.js (PROPS).

ecosistema 553157014barcelonactiva 542966261emprenedoria 553113102treball 553116743empreses 553129643cibernarium 553145541barcelonadeeptechsummit 555218114competenciasdigitals 555266512curriculumocult 555226156diccionaricompetencies 555266518entrevistadefeina 555273858espaipersonal 555255693focusempren 555232942idealab 555274345maparecursos 555243574mapadeltalent 555256420peppa 555252919pol 555271822subvencions 555265501testcompetencies 555242084testinteressos 555268268usosdeltemps 555239249valorsdeltreball 555234646
Portal Emprenedoria recorrido por Puppeteer
Automatización

Puppeteer · enviar eventos a Analytics

Aplicación automatizada que abre los portales (en la imagen, Emprenedoria) como lo haría una persona y dispara los eventos del plan de medición para comprobar el recorrido GTM → GA4:

  • generate_lead, sign_up (intent / confirmed), form_start…
  • file_download, outbound_click, share_social, cerca…
  • auditoría, verificación y «sembrado» de datos de prueba
Script pendiente de incorporar a la carpeta
Contenedor de Google Tag Manager
Google Tag Manager

Tag Manager · el contenedor

El contenedor que envía los datos a GA4. Contiene las etiquetas de consentimiento (Cookiebot, Usercentrics…) y una etiqueta Event GA4 por cada interacción y portal (ba - …, cib - …), con sus activadores y variables.

Catálogo de consultas GA4
GA4 Data API

Queries · las consultas de GA4

Cada indicador del Excel BA_KPI_Portals es una consulta a la Data API (runReport), con el mismo número que el Excel: Genèric #1 → KPI 1, Emprenedoria #5 → KPI 305. Un servidor Node (server.js) las ejecuta con la cuenta de servicio, con caché y datos simulados si no hay credenciales.

  • /api/kpi/:id ejecuta · &raw=1 enseña el body
  • /api/ga4 proxy de los dashboards · /api/metadata dimensiones registradas
Dashboard intranet
Intranet

Dashboard-intranet · las herramientas juntas

La aplicación que reúne todo lo anterior en un solo panel: crear dimensiones personalizadas y eventos clave, consultar las propiedades y sus metadatos, lanzar las consultas y ver los resultados como gráficas.

Pantalla de acceso
Administración

Login · la parte admin

Acceso al tablero de analítica de los portales. Habrá una parte de administración protegida, con acceso por Keycloak BA, Google o Microsoft, desde donde se gestionarán las propiedades, dimensiones y eventos.

Bloque 2

Dashboard

Los objetivos de negocio con sus KPI, las maquetas del proyecto y todas las secciones con las que se han aprendido las gráficas.

MaquetasLas maquetas del proyecto: corporativo, lateral, informe, bento, isométricas, fechas, login, OG1–OG3.17›
BarrasBarras, línea, área, agrupadas, apiladas, capas, la recta al revés, estadística, fechas y log. Tutoriales 17–19.14›
DonutDonut y sus variantes: tarta, anillos, medidor, dasharray, explotado, nightingale, 3D.10›
Mapa de calorMapa de calor: cuadrícula e intensidad según el valor.1›
DispersiónDispersión: dos datos por punto y un tercero en el tamaño.1›
RadarRadar: ángulo fijo por eje y el dato como radio.1›
TreemapTreemap: partir un rectángulo en tiras, por jerarquías.1›
SankeySankey: flujos con bandas de Bézier y acumulados por nodo.1›
FórmulasLa teoría: de tus fórmulas a graficas-base y graficas-ba. Ejes.2›
GeometríaSólidos: cubo, tetraedro, octaedro, dodecaedro e icosaedro, con proyección y rotaciones.40›
cubo
Cubo con variables00-cubo-david-variables-1.htmlCubo con variables00-cubo-david-variables.htmlTitle00-cubo-david.htmlCubo de puntos · Geometria 0000-cubo-puntos.htmlTitle00-prueba.htmlProyección del cubo · Geometria 0101-cubo-proyeccion.htmlCubo N=2 paso a paso · Geometria 01b01b-cubo-n2-tablas.htmlDibujo paso a paso · Geometria 01c01c-cubo-dibujo-paso-a-paso.htmlGirar y proyectar · Geometria 01d01d-girar-proyectar.htmlRotaciones y ejes · Geometria 01e01e-rotaciones.htmlCubo sin proyección · Geometria 01f01f-cubo-sin-proyeccion.htmlPerspectiva simple · Geometria 01g01g-cubo-perspectiva-simple.htmlRotación simple · Geometria 01h01h-cubo-rotacion-simple.htmlRotación por ejes · Geometria 01i01i-cubo-rotacion-ejes.htmlCub de dades · Geometria02-cub.htmlCentros de celda · Geometria 0202-cubo-centros.htmlNudos y centros paso a paso · Geometria 02b02b-cubo-centros-tablas.htmlCubo por distancia · Geometria 07a07a-cubo-regla-distancia.htmlTitlecubo-3d-david.html
dodecaedro
Dodecaedro · ladosdodecaedro-1-lados.htmlDodecaedro · centrosdodecaedro-2-centros.htmlDodecaedro · tablas de ladosdodecaedro-3-lados-tablas.htmlDodecaedro · tablas de centrosdodecaedro-4-centros-tablas.html
isocaedro
Icosaedro · ladosicosaedro-1-lados.htmlIcosaedro · centrosicosaedro-2-centros.htmlIcosaedro · tablas de ladosicosaedro-3-lados-tablas.htmlIcosaedro · tablas de centrosicosaedro-4-centros-tablas.html
octaedro
Octaedro · ladosoctaedro-1-lados.htmlOctaedro · centrosoctaedro-2-centros.htmlOctaedro · tablas de ladosoctaedro-3-lados-tablas.htmlOctaedro · tablas de centrosoctaedro-4-centros-tablas.html
tetraedro
Tetraedre de composició · Geometria06-tetraedre.htmlTetraedro desde el cubo · Geometria 07b07b-tetraedro.htmlPirámide de n lados · Geometria 08a08a-piramide-n-lados.htmlPirámide en capas · Geometria 08b08b-piramide-capas.htmlPirámide infografía · Geometria 08c08c-piramide-infografia.htmlTetraedro · ladostetraedro-1-lados.htmlTetraedro · centrostetraedro-2-centros.htmlTetraedro · tablas de ladostetraedro-3-lados-tablas.htmlTetraedro · tablas de centrostetraedro-4-centros-tablas.html
IsométricasGráficas isométricas en CSS 3D: barras, apiladas, embudo, donut, mapa.10›
LuzLuz y sombras en la interfaz: elevación, brillo, cristal, esfera, temas.13›
GradientesGradientes lineales, radiales y cónicos, capas, patrones y máscaras.14›
Variables CSSVariables CSS: tokens, temas y cálculos con custom properties.13›
FlexboxFlexbox paso a paso: ejes, crecer y encoger, wrap, layouts.14›
Máscaras y filtrosMáscaras, recortes y filtros de SVG y CSS.13›
SVG y CSSSVG con CSS: estilos, transformaciones y animaciones.13›