Embedding e integración en sitios web

Embeber un dashboard significa insertarlo directamente en otro sitio web o aplicación. Esta funcionalidad transforma tus informes de Looker Studio en componentes vivos que puedes integrar en portales de clientes, intranets corporativas, sitios de Google Sites y mucho más.

Por Qué Embeber Dashboards

Beneficios del Embedding

Beneficio	Descripción
Centralización	Los usuarios acceden a datos sin salir de su plataforma habitual
Marca blanca	El dashboard aparece integrado con tu sitio o portal
Automatización	Los datos se actualizan automáticamente sin intervención
Accesibilidad	Reduce barreras de acceso para usuarios no técnicos
Profesionalismo	Impresiona a clientes con dashboards integrados

Casos de Uso Comunes

Portales de clientes: Mostrar métricas de campaña a cada cliente
Intranets corporativas: Dashboards de KPIs accesibles para empleados
Sitios públicos: Estadísticas de transparencia o datos abiertos
Aplicaciones internas: Integración con herramientas existentes
Presentaciones web: Dashboards en vivo durante reuniones

Obtener el Código de Embedding

Paso 1: Verificar Permisos de Visualización

Antes de embeber, asegúrate de que el dashboard sea accesible:

Abre tu dashboard en Looker Studio
Ve a Compartir > Obtener enlace
Configura los permisos según tu necesidad:
- Público: Cualquiera puede ver (no requiere login)
- Cualquiera en la organización: Solo miembros del dominio
- Restringido: Solo usuarios específicos

Importante: Para embedding público, el dashboard debe tener permisos públicos. Si es restringido, los usuarios deberán iniciar sesión con Google.

Paso 2: Generar el Código de Iframe

Con el dashboard abierto, ve a Archivo > Compartir > Insertar informe
Looker Studio generará el código HTML
Copia el código completo

El código generado tiene esta estructura:

<iframe
  width="600"
  height="450"
  src="https://lookerstudio.google.com/embed/reporting/REPORT_ID/page/PAGE_ID"
  frameborder="0"
  style="border:0"
  allowfullscreen
  sandbox="allow-storage-access-by-user-activation
           allow-scripts
           allow-same-origin
           allow-popups
           allow-popups-to-escape-sandbox">
</iframe>

Paso 3: Personalizar Dimensiones

Puedes modificar el ancho y alto según tus necesidades:

<!-- Tamaño fijo -->
<iframe width="800" height="600" src="..." />

<!-- Tamaño en porcentaje -->
<iframe width="100%" height="600" src="..." />

Configuración del Iframe

Atributos Importantes

Atributo	Propósito	Recomendación
`width`	Ancho del iframe	Usa 100% para responsivo
`height`	Alto del iframe	Fija según contenido
`frameborder`	Borde visible	Mantén en "0"
`allowfullscreen`	Permite pantalla completa	Incluir siempre
`sandbox`	Restricciones de seguridad	No modificar

El Atributo Sandbox

El atributo sandbox es crítico para la seguridad. No lo elimines ni modifiques:

sandbox="allow-storage-access-by-user-activation
         allow-scripts
         allow-same-origin
         allow-popups
         allow-popups-to-escape-sandbox"

Cada valor tiene un propósito:

allow-scripts: Permite JavaScript para interactividad
allow-same-origin: Necesario para cargar datos
allow-popups: Permite enlaces externos
allow-storage-access: Gestiona cookies para autenticación

Embedding Público vs Privado

Embedding Público

Configuración:

Dashboard con permisos públicos
No requiere autenticación

Ventajas:

Acceso inmediato para cualquier visitante
No hay barreras de login
Ideal para datos no sensibles

Desventajas:

Sin control de quién accede
No apto para datos confidenciales

Ejemplo de uso:

<!-- Dashboard público de estadísticas del sitio -->
<div class="dashboard-container">
  <h2>Nuestras Estadísticas</h2>
  <iframe
    width="100%"
    height="500"
    src="https://lookerstudio.google.com/embed/reporting/abc123/page/p0"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Embedding con Autenticación

Configuración:

Dashboard con permisos restringidos
Usuarios deben iniciar sesión con Google

Ventajas:

Control de acceso
Adecuado para datos sensibles
Registro de quién accede

Desventajas:

Requiere cuenta de Google
Experiencia de usuario más compleja

Flujo del usuario:

Visita la página con el dashboard embebido
Ve un mensaje solicitando inicio de sesión
Inicia sesión con Google
El dashboard se carga si tiene permisos

Técnicas de Embedding Responsivo

Método 1: Contenedor con Aspect Ratio

<style>
.dashboard-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* Ratio 4:3 */
  height: 0;
  overflow: hidden;
}

.dashboard-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

<div class="dashboard-wrapper">
  <iframe
    src="https://lookerstudio.google.com/embed/reporting/abc123/page/p0"
    allowfullscreen>
  </iframe>
</div>

Método 2: Altura Fija con Ancho Fluido

<style>
.dashboard-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-container iframe {
  width: 100%;
  height: 600px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

<div class="dashboard-container">
  <iframe
    src="https://lookerstudio.google.com/embed/reporting/abc123/page/p0"
    allowfullscreen>
  </iframe>
</div>

Método 3: Breakpoints para Diferentes Dispositivos

<style>
.responsive-dashboard {
  width: 100%;
}

.responsive-dashboard iframe {
  width: 100%;
  border: none;
}

/* Móvil */
@media (max-width: 767px) {
  .responsive-dashboard iframe {
    height: 400px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .responsive-dashboard iframe {
    height: 500px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .responsive-dashboard iframe {
    height: 650px;
  }
}
</style>

Integración con Google Sites

Google Sites ofrece la integración más sencilla con Looker Studio.

Pasos para Integrar

Abre tu sitio en Google Sites
En el panel lateral, busca Insertar > Looker Studio
Selecciona el dashboard de tu Drive
Ajusta el tamaño del componente
Publica el sitio

Ventajas de Google Sites

Integración nativa sin código
Permisos sincronizados con Drive
Actualizaciones automáticas
Diseño responsivo automático

Configuración de Página

Si tu dashboard tiene múltiples páginas:

Cada página tiene su propio ID
Puedes embeber páginas específicas
Modifica el URL para apuntar a la página deseada:

https://lookerstudio.google.com/embed/reporting/REPORT_ID/page/PAGE_ID

Integración con Otras Plataformas

WordPress

<!-- Usar bloque HTML personalizado -->
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://lookerstudio.google.com/embed/reporting/abc123/page/p0"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Notion

Usa el bloque Embed
Pega la URL del dashboard (no el código iframe)
Notion generará la vista previa automáticamente

Nota: Notion tiene limitaciones con iframes. La experiencia puede variar.

Confluence

Usa la macro HTML o Iframe
Pega el código de embedding
Ajusta dimensiones según necesidad

SharePoint

Agrega un Web Part de Embed
Pega el código iframe
Configura permisos de acceso

Limitaciones del Embedding

Restricciones Técnicas

Limitación	Descripción	Solución
Sin edición	No se puede editar desde embed	Usar enlace directo para editar
Filtros limitados	Algunos controles no funcionan	Usar parámetros de URL
Rendimiento	Páginas pesadas cargan lento	Optimizar el dashboard
Mobile	Experiencia variable en móviles	Crear versión mobile-first

Consideraciones de Rendimiento

Para mejorar el rendimiento del embedding:

Limita la cantidad de gráficos por página embebida
Usa datos agregados en lugar de datos granulares
Evita cálculos complejos que se ejecutan al cargar
Considera lazy loading para dashboards debajo del fold

<!-- Lazy loading del iframe -->
<iframe
  loading="lazy"
  src="https://lookerstudio.google.com/embed/reporting/abc123/page/p0"
  width="100%"
  height="600">
</iframe>

Parámetros de URL para Personalización

Puedes pasar parámetros en la URL para personalizar la vista:

Ocultar Encabezado

https://lookerstudio.google.com/embed/reporting/abc123/page/p0?params=...

Pre-filtrar Datos

Si configuraste parámetros en tu dashboard, puedes pasarlos en la URL para mostrar vistas filtradas a diferentes usuarios o contextos.

Ejercicio Práctico

Crear una Página de Reportes con Dashboard Embebido

Objetivo: Crear una página HTML simple que muestre un dashboard embebido de manera responsiva.

Pasos:

Configura tu dashboard como público
Obtén el código de embedding
Crea un archivo HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard de Métricas</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      background: #f5f5f5;
      padding: 20px;
    }

    .header {
      text-align: center;
      margin-bottom: 20px;
    }

    .header h1 {
      color: #333;
      margin-bottom: 8px;
    }

    .header p {
      color: #666;
    }

    .dashboard-frame {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
      max-width: 1400px;
      margin: 0 auto;
    }

    .dashboard-frame iframe {
      width: 100%;
      height: 700px;
      border: none;
      display: block;
    }

    @media (max-width: 768px) {
      .dashboard-frame iframe {
        height: 500px;
      }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>Dashboard de Marketing</h1>
    <p>Datos actualizados en tiempo real</p>
  </div>

  <div class="dashboard-frame">
    <iframe
      src="TU_URL_DE_EMBEDDING_AQUI"
      allowfullscreen
      loading="lazy">
    </iframe>
  </div>
</body>
</html>

Reemplaza TU_URL_DE_EMBEDDING_AQUI con tu URL real
Abre el archivo en un navegador
Prueba en diferentes tamaños de pantalla

Puntos Clave

El embedding permite integrar dashboards en sitios web y aplicaciones externas
Los dashboards públicos no requieren autenticación; los privados sí
El código de iframe incluye atributos de seguridad importantes que no debes modificar
Usa técnicas CSS para lograr embedding responsivo
Google Sites ofrece la integración más sencilla sin necesidad de código
Considera el rendimiento: dashboards pesados cargan lentamente
Los parámetros de URL permiten personalizar la vista embebida

Próxima Lección

En la siguiente lección aprenderás a configurar reportes automatizados por email, programando envíos periódicos de tus dashboards a stakeholders sin intervención manual.