Aula privada

Ingresa tu código de estudiante

Mide interacción comercial, leads, clics y tiempo sobre el target en WebAR.

GA4 intermedio

Proyecto del nivel intermedio

En el nivel básico aprendiste a confirmar que una experiencia WebAR funciona y a enviar eventos simples a GA4. En el nivel intermedio vamos a medir calidad de interacción. No basta con saber que el target apareció; también queremos saber cuánto tiempo permaneció visible, cuántas veces se detectó, si el usuario hizo clic en una llamada a la acción y si completó un formulario.

Este nivel se parece más a un proyecto comercial. Una marca, una agencia o un cliente no solo preguntará “¿se ve la realidad aumentada?”. También preguntará “¿la gente interactuó?”, “¿cuántas personas mostraron intención?” y “¿qué evento puedo usar como conversión?”.

Qué cambia frente al básico

Agregamos un formulario de lead dentro del HUD.
Medimos tiempo sobre el target con Date.now().
Contamos detecciones para saber si el usuario perdió y volvió a encontrar el marcador.
Enviamos parámetros más útiles a GA4.
Aprendemos a diferenciar evento normal y evento de conversión.

Marcar objetivo como entendido

GA4 intermedio

HTML con formulario de lead

El formulario se coloca dentro del hud porque el HUD es la interfaz que queda por encima de la cámara. Esto permite que el usuario vea el contenido aumentado y, al mismo tiempo, tenga una acción clara: dejar su correo, pedir información o continuar a otra página.

Observa los atributos id="cta" y id="lead-form". No están ahí por decoración: los usaremos después desde JavaScript para seleccionar esos elementos y medir sus interacciones.

HTML intermedioindex.html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>WebAR medible con GA4</title>
    <link rel="stylesheet" href="styles.css" />
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag("js", new Date());
      gtag("config", "G-XXXXXXXXXX");
    </script>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
  </head>
  <body>
    <div class="hud">
      <strong>WebAR + GA4</strong>
      <p id="status">Apunta la cámara al marcador.</p>
      <a id="cta" class="button" href="https://realidad-aumentada.com.co/" target="_blank" rel="noopener">Ver más</a>
      <form id="lead-form" class="lead-form">
        <input name="email" type="email" placeholder="Email" required />
        <button type="submit">Enviar lead</button>
      </form>
    </div>

    <a-scene mindar-image="imageTargetSrc: targets/analitica.mind;" embedded color-space="sRGB" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity id="target" mindar-image-target="targetIndex: 0">
        <a-plane color="#ffffff" width="1.35" height="0.9" position="0 0 0.04"></a-plane>
        <a-text value="Experiencia medida con GA4" align="center" color="#0f172a" position="0 0.1 0.08" width="2.8"></a-text>
      </a-entity>
    </a-scene>

    <script src="analytics.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Explicación línea por línea

Línea 19: abre el HUD, la interfaz visible sobre la cámara.
Línea 20: muestra el título de la experiencia.
Línea 21: crea el texto de estado que cambiará con JavaScript.
Línea 22: crea el CTA. El id="cta" permite medir clics.
Línea 23: abre el formulario. El id="lead-form" permite escuchar el envío.
Línea 24: crea el campo email. El email no se enviará a GA4; solo mediremos si existe.
Línea 25: crea el botón de envío del formulario.
Líneas 28 a 34: mantienen la escena MindAR que ya existía.
Líneas 36 y 37: cargan primero analítica y luego lógica de interacción.

Marcar HTML intermedio como completado

GA4 intermedio

Medir interacción comercial

Ahora vamos a medir comportamiento, no solo detección. Para eso guardamos dos datos temporales: el momento en que el target fue encontrado y la cantidad de veces que se ha detectado. Con esas dos variables podemos calcular permanencia e intensidad de interacción.

En GA4, los parámetros son tan importantes como el nombre del evento. Un evento llamado target_lost dice que el marcador se perdió; un parámetro llamado dwell_time_ms dice cuánto tiempo estuvo visible antes de perderse.

Eventos intermediosapp.js

const target = document.querySelector("#target");
const statusText = document.querySelector("#status");
const cta = document.querySelector("#cta");
const leadForm = document.querySelector("#lead-form");
let targetFoundAt = 0;
let detectionCount = 0;

trackEvent("webar_page_open", {
  viewport_width: window.innerWidth,
  viewport_height: window.innerHeight,
  language: navigator.language
});

target.addEventListener("targetFound", () => {
  targetFoundAt = Date.now();
  detectionCount += 1;
  statusText.textContent = "Marcador detectado.";
  trackEvent("target_found", {
    target_index: 0,
    detection_count: detectionCount
  });
});

target.addEventListener("targetLost", () => {
  const dwellTimeMs = Date.now() - targetFoundAt;
  statusText.textContent = "Marcador perdido.";
  trackEvent("target_lost", {
    target_index: 0,
    dwell_time_ms: dwellTimeMs
  });
});

cta.addEventListener("click", () => {
  trackEvent("cta_click", {
    cta_label: cta.textContent.trim(),
    dwell_time_ms: targetFoundAt ? Date.now() - targetFoundAt : 0
  });
});

leadForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const form = new FormData(leadForm);
  trackEvent("lead_submit", {
    lead_type: "webar_demo",
    has_email: Boolean(form.get("email"))
  });
  leadForm.reset();
});

Explicación línea por línea

Líneas 1 a 4: seleccionan elementos.
Líneas 5 y 6: guardan tiempo y conteo de detecciones.
Líneas 8 a 12: miden apertura con contexto de pantalla e idioma.
Líneas 14 a 23: miden target detectado y contador.
Líneas 25 a 32: miden tiempo de permanencia sobre target.
Líneas 34 a 40: miden clic en CTA.
Líneas 42 a 51: miden envío de lead sin guardar datos personales en GA4.

Marcar eventos intermedios como completados

GA4 intermedio

Conversiones y parámetros

Una conversión es una acción que tiene valor para el proyecto. En una tienda puede ser una compra. En una experiencia WebAR de marketing puede ser un clic, un lead, una descarga o una interacción mínima con el target.

En GA4 puedes marcar eventos como conversiones. Para WebAR, buenos candidatos son lead_submit, cta_click y una detección con permanencia alta.

Parámetros recomendados

dwell_time_ms: tiempo mirando el target.
detection_count: cuántas veces se detectó.
target_index: marcador detectado.
cta_label: texto del botón.
has_email: si el formulario recibió email, sin enviar el email.

Marcar conversiones como entendidas

GA4 intermedio

Template final

Compilador integrado

Elegir imagen, compilar target y generar .mind

La medición empieza con una experiencia AR estable. Compila una imagen con buen contraste y guarda el resultado en la carpeta targets.

Seleccionar imagen target

Selecciona una imagen para iniciar.

La vista previa de la imagen aparecerá aquí.

Template GA4 intermedio

Incluye dwell time, CTA click, lead submit y parámetros personalizados.

Descargar template intermedio

Marcar intermedio como terminado