Aula privada | Marketing WebAR Avanzado

Marketing avanzado

Qué vamos a construir

Tomaremos la campaña multiproducto del nivel intermedio y la convertiremos en una experiencia WebAR comercial medible. La marca podrá saber qué canal trajo usuarios, qué target se detectó, qué CTA recibió clics y cuántas personas dejaron sus datos.

Resultado del proyecto

Campaña WebAR multi-target con maxTrack: 2.
Datos comerciales separados en products.js.
Analítica local con trackEvent().
Eventos campaign_entry, target_found, target_lost, cta_click y lead_submit.
Formulario de leads con consentimiento.
QRs con parámetros UTM por canal.
Reporte local para presentar resultados.

Historia de campaña

Una marca usa WebAR en feria, poster y empaque. Cada canal tiene un QR diferente. La experiencia reconoce dos productos y registra interacciones para construir un reporte comercial.

Flujo avanzadoCampaña

1. Usuario escanea QR con UTM
2. Se registra campaign_entry
3. Usuario acepta camara
4. MindAR detecta target
5. Se registra target_found
6. Usuario toca CTA o deja datos
7. Se registra cta_click o lead_submit
8. Se genera reporte para la marca

Marcar esta lección como completada

Marketing avanzado

Prerrequisitos del nivel avanzado

Este nivel no empieza desde cero. Necesitas entender el proyecto intermedio porque vamos a agregar una capa comercial encima de esa base.

Debes dominar

Crear una experiencia MindAR con varios targets.
Usar targetFound y targetLost.
Separar HTML, CSS y JavaScript.
Crear QR para publicar una experiencia.
Probar en móvil usando HTTPS.

Qué agregaremos

Analítica, leads, lectura de UTM, reporte, estructura por módulos y checklist profesional para entregar a marcas.

Base que ya debes tenerProyecto

catalogo-webar-marca/
  index.html
  styles.css
  app.js
  targets/campania-productos.mind
  assets/
  models/

Marcar esta lección como completada

Marketing avanzado

Definir KPIs antes del código

Un KPI es una métrica que ayuda a tomar decisiones. En campañas WebAR no basta con decir que la experiencia abrió: necesitamos saber si generó atención, intención o conversión.

KPIs de campaña

Entradas por canal: cuántos usuarios llegaron desde poster, empaque, feria o catálogo.
Detecciones: qué productos fueron reconocidos.
Clics CTA: cuántas personas tocaron el botón comercial.
Leads: cuántas personas dejaron nombre y correo.
Producto más atractivo: qué target generó más interacción.

Actividad

Escribe una hipótesis comercial. Ejemplo: "El QR del empaque traerá menos usuarios que el QR de feria, pero tendrá más intención de compra".

Mapa KPI -> eventoMedición

Entrada por canal -> campaign_entry
Producto detectado -> target_found
Tracking perdido -> target_lost
Interes comercial -> cta_click
Conversion -> lead_submit
Reporte consultado -> report_view

Marcar esta lección como completada

Marketing avanzado

Arquitectura de archivos para campaña comercial

En avanzado conviene separar responsabilidades. El proyecto queda más claro si los productos y la analítica no están mezclados con toda la lógica principal.

Estructura avanzadaCarpetas

campania-marketing-avanzada/
  index.html
  styles.css
  products.js
  analytics.js
  app.js
  targets/
    campania-productos.mind
  assets/
    cafe-target.jpg
    snack-target.jpg
    CafeAurora.webp
    SnackNativo.webp
  README.md

Explicación

products.js guarda la información de cada producto.
analytics.js contiene trackEvent() y el reporte.
app.js conecta MindAR, UI, productos y eventos.
index.html mantiene la estructura de la página y escena.

Marcar esta lección como completada

Marketing avanzado

Crear HTML comercial con UI, formulario y reporte

El HTML avanzado tiene tres capas: UI de producto, formulario de lead y botón para ver reporte. La escena WebAR se mantiene debajo.

index.html - paso 1HTML comercial

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Campaña WebAR medible</title>
    <link rel="stylesheet" href="styles.css" />
    <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>
    <section class="brand-panel" id="brand-panel">
      <p id="status">Escanea un producto</p>
      <h1 id="product-title">Campaña WebAR</h1>
      <p id="product-benefit">Apunta la cámara al catálogo.</p>
      <a id="product-cta" href="#" target="_blank">Pedir información</a>
      <button id="show-report" type="button">Ver reporte local</button>
    </section>

    <form class="lead-form" id="lead-form">
      <h2>Recibe la promoción</h2>
      <input id="lead-name" type="text" placeholder="Nombre" required />
      <input id="lead-email" type="email" placeholder="Email" required />
      <label><input id="lead-consent" type="checkbox" required /> Acepto ser contactado por la marca.</label>
      <button type="submit">Enviar datos</button>
    </form>

    <a-scene mindar-image="imageTargetSrc: targets/campania-productos.mind; maxTrack: 2" 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-cafe" mindar-image-target="targetIndex: 0"><a-image src="assets/CafeAurora.webp" width="1.15" height="1.15" position="0 0 0.05"></a-image></a-entity>
      <a-entity id="target-snack" mindar-image-target="targetIndex: 1"><a-image src="assets/SnackNativo.webp" width="1.15" height="1.15" position="0 0 0.05"></a-image></a-entity>
    </a-scene>
    <script src="products.js"></script>
    <script src="analytics.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Explicación

Líneas 12 a 18: panel comercial que cambiará por producto.
Línea 17: botón para consultar el reporte local.
Líneas 20 a 26: formulario de leads con consentimiento.
Líneas 28 a 30: cargan los scripts en orden: datos, analítica y lógica.

Marcar esta lección como completada

Marketing avanzado

Separar productos en products.js

Los datos de productos quedan en un archivo independiente para que la marca pueda actualizar nombres, beneficios, colores y enlaces sin tocar la escena WebAR.

products.jsDatos

window.PRODUCTS = {
  cafe: {
    id: "cafe",
    targetId: "target-cafe",
    title: "Cafe Aurora",
    benefit: "Aroma intenso y origen colombiano",
    color: "#10b981",
    whatsapp: "https://wa.me/573159699392?text=Quiero%20Cafe%20Aurora",
  },
  snack: {
    id: "snack",
    targetId: "target-snack",
    title: "Snack Nativo",
    benefit: "Energia natural para llevar",
    color: "#f59e0b",
    whatsapp: "https://wa.me/573159699392?text=Quiero%20Snack%20Nativo",
  },
};

Explicación

Usamos window.PRODUCTS para que app.js pueda leer los productos después de cargar el archivo. Cada producto mantiene su targetId, que debe coincidir con el id de la entidad A-Frame.

Marcar esta lección como completada

Marketing avanzado

Crear analytics.js con trackEvent()

La función trackEvent() será el centro de medición de la campaña. Cada acción importante enviará un nombre de evento y datos asociados.

analytics.js - paso 1Analítica local

const campaignEvents = [];
const sessionId = crypto.randomUUID();
const startedAt = Date.now();

function trackEvent(name, data = {}) {
  const event = {
    name,
    data,
    sessionId,
    createdAt: new Date().toISOString(),
    secondsFromStart: Math.round((Date.now() - startedAt) / 1000),
  };
  campaignEvents.push(event);
  console.log("marketing_event", event);
}

const params = new URLSearchParams(window.location.search);
trackEvent("campaign_entry", {
  source: params.get("utm_source") || "direct",
  medium: params.get("utm_medium") || "none",
  campaign: params.get("utm_campaign") || "sin_campaign",
});

Explicación línea por línea

campaignEvents guarda los eventos de la sesión actual.
sessionId identifica la visita sin pedir datos personales.
startedAt permite calcular segundos desde que inició la experiencia.
trackEvent() crea el evento, lo guarda y lo muestra en consola.
URLSearchParams lee los UTM del QR.

Marcar esta lección como completada

Marketing avanzado

Conectar eventos de Realidad Aumentada

Ahora conectamos cada target con eventos medibles. Cuando aparece un producto se registra target_found; cuando se pierde, target_lost; y cuando el usuario toca el CTA, cta_click.

app.js - eventos ARJavaScript

const products = window.PRODUCTS;
const statusText = document.querySelector("#status");
const title = document.querySelector("#product-title");
const benefit = document.querySelector("#product-benefit");
const cta = document.querySelector("#product-cta");
const panel = document.querySelector("#brand-panel");
const leadForm = document.querySelector("#lead-form");
const leadName = document.querySelector("#lead-name");
const leadEmail = document.querySelector("#lead-email");

function showProduct(product) {
  statusText.textContent = "Producto detectado";
  title.textContent = product.title;
  benefit.textContent = product.benefit;
  cta.href = product.whatsapp;
  cta.textContent = "Pedir informacion";
  panel.style.borderColor = product.color;
  cta.style.background = product.color;
}

Object.values(products).forEach((product) => {
  const target = document.querySelector(`#${product.targetId}`);
  target.addEventListener("targetFound", () => {
    showProduct(product);
    trackEvent("target_found", { productId: product.id, title: product.title });
  });
  target.addEventListener("targetLost", () => {
    trackEvent("target_lost", { productId: product.id, title: product.title });
  });
});

cta.addEventListener("click", () => {
  trackEvent("cta_click", { productTitle: title.textContent });
});

Explicación

window.PRODUCTS trae los datos definidos en products.js.
showProduct() actualiza la UI comercial.
Object.values(products) recorre todos los productos sin duplicar código.
trackEvent("target_found"...) registra qué producto fue detectado.
trackEvent("cta_click"...) registra intención comercial.

Marcar esta lección como completada

Marketing avanzado

Capturar leads con consentimiento

Un lead es un usuario que deja datos para que la marca pueda contactarlo. En producción debes guardar estos datos en una base de datos, Firebase, CRM o backend propio.

app.js - leadsJavaScript

const leadForm = document.querySelector("#lead-form");
const leadName = document.querySelector("#lead-name");
const leadEmail = document.querySelector("#lead-email");

leadForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const lead = {
    name: leadName.value.trim(),
    email: leadEmail.value.trim(),
    product: title.textContent,
  };
  trackEvent("lead_submit", lead);
  leadForm.reset();
});

Explicación

preventDefault() evita que el formulario recargue la página.
lead guarda nombre, correo y producto activo.
lead_submit marca una conversión.
reset() limpia el formulario después de enviarlo.

Marcar esta lección como completada

Marketing avanzado

QRs con UTM para medir canales

Los UTM permiten identificar desde dónde llegó el usuario. Puedes crear un QR diferente para poster, empaque, feria, catálogo o anuncio.

Genera un QR por URL

Abrir generador QR

Recomendación

Imprime el canal en pequeño cerca del QR durante pruebas internas. Así puedes verificar que cada pieza física usa la URL correcta.

URLs con UTMQR

https://tudominio.com/campania/?utm_source=poster&utm_medium=qr&utm_campaign=cafe_aurora
https://tudominio.com/campania/?utm_source=empaque&utm_medium=qr&utm_campaign=cafe_aurora
https://tudominio.com/campania/?utm_source=feria&utm_medium=qr&utm_campaign=cafe_aurora
https://tudominio.com/campania/?utm_source=catalogo&utm_medium=qr&utm_campaign=cafe_aurora

Marcar esta lección como completada

Marketing avanzado

Construir reporte local de resultados

El reporte local resume los eventos registrados en la sesión. No reemplaza GA4 o Firebase, pero enseña la lógica de medición que luego puedes conectar a servicios externos.

analytics.js - reporteJavaScript

function buildReport() {
  const summary = campaignEvents.reduce((acc, event) => {
    acc[event.name] = (acc[event.name] || 0) + 1;
    return acc;
  }, {});

  return {
    totalEvents: campaignEvents.length,
    entries: summary.campaign_entry || 0,
    targetFound: summary.target_found || 0,
    ctaClicks: summary.cta_click || 0,
    leads: summary.lead_submit || 0,
  };
}

function showReport() {
  const report = buildReport();
  alert(`Eventos: ${report.totalEvents}\nEntradas: ${report.entries}\nDetecciones: ${report.targetFound}\nClics CTA: ${report.ctaClicks}\nLeads: ${report.leads}`);
  trackEvent("report_view", report);
}

app.js - botón de reporteJavaScript

document.querySelector("#show-report").addEventListener("click", () => {
  showReport();
});

Explicación

reduce() recorre todos los eventos y cuenta cuántas veces aparece cada nombre. Luego showReport() muestra esos datos y registra que el reporte fue consultado.

Marcar esta lección como completada

Marketing avanzado

Privacidad, seguridad y entrega profesional

Cuando capturas datos personales, debes ser claro con el usuario. Pide solo lo necesario y explica por qué lo pides.

Checklist de privacidad

Formulario corto.
Texto de consentimiento visible.
No pedir datos sensibles innecesarios.
HTTPS activo.
Explicar cómo será contactada la persona.

Checklist de entrega

QR probado en móvil.
Targets impresos con buena calidad.
Eventos revisados en consola.
Reporte explicado al cliente.
Recomendaciones para mejorar siguiente campaña.

Documento de entregaCliente

URL publicada:
QRs por canal:
Targets usados:
Eventos medidos:
Leads capturados:
Producto mas visto:
Recomendacion:
Proximo paso:

Marcar esta lección como completada

Marketing avanzado

Código completo del proyecto avanzado

Estos son los archivos principales del proyecto final avanzado. El template descargable de la siguiente lección incluye esta estructura lista para editar.

index.html completoHTML

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Campaña WebAR medible</title>
    <link rel="stylesheet" href="styles.css" />
    <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>
    <section class="brand-panel" id="brand-panel">
      <p id="status">Escanea un producto</p>
      <h1 id="product-title">Campaña WebAR</h1>
      <p id="product-benefit">Apunta la cámara al catálogo.</p>
      <a id="product-cta" href="#" target="_blank">Pedir información</a>
      <button id="show-report" type="button">Ver reporte local</button>
    </section>
    <form class="lead-form" id="lead-form">
      <h2>Recibe la promoción</h2>
      <input id="lead-name" type="text" placeholder="Nombre" required />
      <input id="lead-email" type="email" placeholder="Email" required />
      <label><input id="lead-consent" type="checkbox" required /> Acepto ser contactado por la marca.</label>
      <button type="submit">Enviar datos</button>
    </form>
    <a-scene mindar-image="imageTargetSrc: targets/campania-productos.mind; maxTrack: 2" 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-cafe" mindar-image-target="targetIndex: 0"><a-image src="assets/CafeAurora.webp" width="1.15" height="1.15" position="0 0 0.05"></a-image></a-entity>
      <a-entity id="target-snack" mindar-image-target="targetIndex: 1"><a-image src="assets/SnackNativo.webp" width="1.15" height="1.15" position="0 0 0.05"></a-image></a-entity>
    </a-scene>
    <script src="products.js"></script>
    <script src="analytics.js"></script>
    <script src="app.js"></script>
  </body>
</html>

analytics.js completoJavaScript

const campaignEvents = [];
const sessionId = crypto.randomUUID();
const startedAt = Date.now();

function trackEvent(name, data = {}) {
  const event = {
    name,
    data,
    sessionId,
    createdAt: new Date().toISOString(),
    secondsFromStart: Math.round((Date.now() - startedAt) / 1000),
  };
  campaignEvents.push(event);
  console.log("marketing_event", event);
}

const params = new URLSearchParams(window.location.search);
trackEvent("campaign_entry", {
  source: params.get("utm_source") || "direct",
  medium: params.get("utm_medium") || "none",
  campaign: params.get("utm_campaign") || "sin_campaign",
});

function buildReport() {
  const summary = campaignEvents.reduce((acc, event) => {
    acc[event.name] = (acc[event.name] || 0) + 1;
    return acc;
  }, {});
  return {
    totalEvents: campaignEvents.length,
    entries: summary.campaign_entry || 0,
    targetFound: summary.target_found || 0,
    ctaClicks: summary.cta_click || 0,
    leads: summary.lead_submit || 0,
  };
}

function showReport() {
  const report = buildReport();
  alert(`Eventos: ${report.totalEvents}\nEntradas: ${report.entries}\nDetecciones: ${report.targetFound}\nClics CTA: ${report.ctaClicks}\nLeads: ${report.leads}`);
  trackEvent("report_view", report);
}

app.js completoJavaScript

const products = window.PRODUCTS;
const statusText = document.querySelector("#status");
const title = document.querySelector("#product-title");
const benefit = document.querySelector("#product-benefit");
const cta = document.querySelector("#product-cta");
const panel = document.querySelector("#brand-panel");
const leadForm = document.querySelector("#lead-form");
const leadName = document.querySelector("#lead-name");
const leadEmail = document.querySelector("#lead-email");

function showProduct(product) {
  statusText.textContent = "Producto detectado";
  title.textContent = product.title;
  benefit.textContent = product.benefit;
  cta.href = product.whatsapp;
  cta.textContent = "Pedir informacion";
  panel.style.borderColor = product.color;
  cta.style.background = product.color;
}

Object.values(products).forEach((product) => {
  const target = document.querySelector(`#${product.targetId}`);
  target.addEventListener("targetFound", () => {
    showProduct(product);
    trackEvent("target_found", { productId: product.id, title: product.title });
  });
  target.addEventListener("targetLost", () => {
    trackEvent("target_lost", { productId: product.id, title: product.title });
  });
});

cta.addEventListener("click", () => {
  trackEvent("cta_click", { productTitle: title.textContent });
});

leadForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const lead = { name: leadName.value.trim(), email: leadEmail.value.trim(), product: title.textContent };
  trackEvent("lead_submit", lead);
  leadForm.reset();
});

document.querySelector("#show-report").addEventListener("click", () => {
  showReport();
});

Marcar esta lección como completada

Marketing avanzado

Template descargable y entrega final

Descarga el template para practicar con el proyecto avanzado ya armado. Incluye estructura de carpetas, HTML, CSS, productos, analítica, lógica principal, targets de práctica y README.

ZIP avanzado Plantilla Marketing WebAR avanzada Campaña medible con productos, eventos, leads, QR/UTM y reporte local.

Entrega final avanzada

Proyecto publicado en HTTPS.
QRs por canal con UTM.
Dos targets compilados en campania-productos.mind.
Eventos funcionando en consola.
Formulario de leads con consentimiento.
Reporte local revisado.
Video de demostración para cliente.

Marcar esta lección como completada

Ingresa tu código de estudiante

Qué vamos a construir

Resultado del proyecto

Historia de campaña

Prerrequisitos del nivel avanzado

Debes dominar

Qué agregaremos

Definir KPIs antes del código

KPIs de campaña

Actividad

Arquitectura de archivos para campaña comercial

Explicación

Crear HTML comercial con UI, formulario y reporte

Explicación

Separar productos en products.js

Explicación

Crear analytics.js con trackEvent()

Explicación línea por línea

Conectar eventos de Realidad Aumentada

Explicación

Capturar leads con consentimiento

Explicación

QRs con UTM para medir canales

Genera un QR por URL

Recomendación

Construir reporte local de resultados

Explicación

Privacidad, seguridad y entrega profesional

Checklist de privacidad

Checklist de entrega

Código completo del proyecto avanzado

Template descargable y entrega final

Entrega final avanzada