Guia de creacion de propuestas

Convenciones HTML para que el tracking de slides funcione correctamente

Estructura requerida

Para que el sistema detecte y trackee cada slide de la propuesta, el HTML debe seguir esta estructura:

<div class="deck">

  <!-- Slide 1 -->
  <div class="slide active" id="s0">
    <div class="slide-inner">
      <div class="eyebrow">SECCION</div>
      <div class="display">Titulo del slide</div>
      <!-- contenido -->
    </div>
  </div>

  <!-- Slide 2 -->
  <div class="slide" id="s1">
    <div class="slide-inner">
      <div class="eyebrow">OTRA SECCION</div>
      <div class="display">Otro titulo</div>
      <!-- contenido -->
    </div>
  </div>

  <!-- Slide N... -->

</div>
Reglas clave
1

Clase .slide en cada pagina

Cada slide debe ser un <div class="slide">. El sistema cuenta todos los elementos con esta clase.

2

Clase .active en el slide visible

El slide actualmente visible debe tener la clase .active. El tracking detecta cual slide tiene esta clase cada 300ms.

3

.eyebrow y .display para el titulo

El sistema extrae el titulo del slide de los elementos con clase .eyebrow y .display dentro de cada slide. Esto aparece en el reporte de visualizacion.

4

Navegacion con funcion go(i)

La navegacion entre slides puede usar cualquier logica, pero debe alternar la clase .active entre slides. La funcion go(i) del template de Ford Guspamar es un buen ejemplo.

5

IDs unicos por slide

Cada slide debe tener un id unico (ej: s0, s1, s2). Esto facilita la navegacion y el debug.

Template base

Podes copiar esta estructura minima para empezar una propuesta nueva:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>sens · Propuesta [EMPRESA] [AÑO]</title>
  <style>
    /* Incluir los estilos base de sens (ver propuesta Ford como referencia) */
  </style>
</head>
<body>
<div class="deck" id="deck">

  <!-- COVER -->
  <div class="slide brand active" id="s0">
    <div class="slide-inner" style="text-align:center">
      <div class="eyebrow">sens · propuesta</div>
      <div class="display">Titulo principal</div>
    </div>
  </div>

  <!-- SLIDE 2 -->
  <div class="slide" id="s1">
    <div class="slide-inner">
      <div class="eyebrow">Seccion</div>
      <div class="display">Contenido del slide</div>
    </div>
  </div>

</div>

<!-- NAVEGACION -->
<div id="nav">
  <button onclick="move(-1)">←</button>
  <span id="nnum">1 / 2</span>
  <button onclick="move(1)">→</button>
</div>

<script>
const slides = document.querySelectorAll('.slide');
let cur = 0;
function go(i) {
  slides[cur].classList.remove('active');
  cur = i;
  slides[cur].classList.add('active');
  document.getElementById('nnum').textContent = (cur+1)+' / '+slides.length;
}
function move(d) { if (cur+d >= 0 && cur+d < slides.length) go(cur+d); }
document.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight') move(1);
  if (e.key === 'ArrowLeft') move(-1);
});
</script>
</body>
</html>
Que se trackea automaticamente
Al abrir

IP del visitante, user agent, timestamp

Durante la visita

Tiempo por slide (cada 1 segundo), slide activo (cada 300ms)

Al cerrar

Duracion total + desglose por slide via sendBeacon

Cada 5 segundos

Se sincroniza slide data del iframe al padre (backup)