Aula privada | Marketing WebAR Intermedio

Marketing intermedio

Qué vamos a construir

En este nivel construiremos una activación WebAR para un catálogo, exhibidor o folleto con dos productos. Cada producto tendrá su propio marcador, contenido aumentado, color de marca, beneficio y botón de WhatsApp.

Resultado del proyecto

Una experiencia llamada catalogo-webar-marca.
Dos imágenes target compiladas en un solo archivo .mind.
Una escena MindAR con maxTrack: 2 para detectar dos marcadores al tiempo.
Una UI comercial que cambia según el producto detectado.
QRs por canal para diferenciar poster, empaque, catálogo o evento.
Código completo en index.html, styles.css y app.js.

Historia de campaña

La marca Cafe Aurora lanza dos productos: Cafe Aurora y Snack Nativo. En una feria, el usuario escanea un QR, abre la experiencia y puede apuntar a cualquiera de los dos productos para ver contenido personalizado.

Mapa del proyectoCampaña

Proyecto: catalogo-webar-marca
Producto 1: Cafe Aurora
Producto 2: Snack Nativo
Target 0: imagen del cafe
Target 1: imagen del snack
CTA 1: WhatsApp con mensaje de cafe
CTA 2: WhatsApp con mensaje de snack
Objetivo: generar conversaciones comerciales desde WebAR

Por qué esto es intermedio

En el básico hicimos una experiencia con un solo marcador. Aquí empezamos a pensar como una campaña real: varios productos, varios canales, datos separados del HTML y eventos por cada marcador.

Marcar esta lección como completada

Marketing intermedio

Prerrequisitos antes de empezar

Este nivel asume que ya sabes crear archivos básicos, abrirlos con Live Server y entender la estructura de una escena WebAR. Si algo de esto no está claro, vuelve al nivel básico antes de continuar.

Debes tener instalado

Visual Studio Code.
Extensión Live Server.
Un navegador moderno como Chrome, Edge o Safari móvil.
Un teléfono para probar cámara real.
Dos imágenes para usarlas como targets.

Conocimientos necesarios

Crear index.html, styles.css y app.js.
Entender qué hace a-scene, a-camera y mindar-image-target.
Saber que la cámara móvil necesita HTTPS cuando se publica.

Comprobación rápidaChecklist

[ ] Puedo abrir un proyecto con Live Server
[ ] Puedo crear una escena MindAR simple
[ ] Tengo dos imágenes con buenos detalles visuales
[ ] Entiendo que QR abre la URL y target activa el tracking

Diferencia clave

El QR no reemplaza el target. El QR lleva al usuario a la experiencia. El target es la imagen que MindAR detecta dentro de la cámara para mostrar el contenido aumentado.

Marcar esta lección como completada

Marketing intermedio

Estrategia para una campaña multiproducto

Antes del código necesitamos definir qué productos aparecerán, qué mensaje mostrará cada uno y qué acción comercial esperamos.

Decisiones de campaña

Producto: qué elemento físico será escaneado.
Beneficio: qué valor comunica el contenido aumentado.
Color: cómo se diferencia visualmente cada producto.
CTA: qué acción hará el usuario después de detectar el target.
Canal: desde dónde llega el usuario: evento, empaque, poster o catálogo.

Actividad

Escoge dos productos reales o ficticios. Para cada uno escribe: nombre, beneficio, color, imagen target y mensaje de WhatsApp.

Tabla de campañaPlan

Producto: Cafe Aurora
Beneficio: Aroma intenso y origen colombiano
Color: verde
CTA: Quiero Cafe Aurora

Producto: Snack Nativo
Beneficio: Energia natural para llevar
Color: naranja
CTA: Quiero Snack Nativo

Explicación

Esta tabla luego se convertirá en un objeto JavaScript. La ventaja de planear primero es que el código no se llena de textos improvisados y la campaña se puede explicar mejor a un cliente.

Marcar esta lección como completada

Marketing intermedio

Crear QR por canal de campaña

Una campaña intermedia puede tener varios QR que llevan a la misma experiencia, pero con parámetros diferentes para saber desde dónde llegó el usuario.

Crear los QR

Define la URL donde publicarás la experiencia.
Agrega un parámetro de canal, por ejemplo ?canal=evento.
Genera un QR para cada canal.
Coloca cada QR en su pieza física correspondiente.

Abrir generador QR

Canales sugeridos

canal=poster para afiches.
canal=empaque para cajas o etiquetas.
canal=evento para ferias o activaciones.
canal=catalogo para folletos impresos.

URLs para generar QRMarketing

https://tudominio.com/catalogo-webar/?canal=poster
https://tudominio.com/catalogo-webar/?canal=empaque
https://tudominio.com/catalogo-webar/?canal=evento
https://tudominio.com/catalogo-webar/?canal=catalogo

Explicación

El parámetro canal no cambia la experiencia por sí solo. Pero JavaScript puede leerlo y registrar desde qué pieza llegó el usuario. En el nivel avanzado esto se conecta con analítica.

Marcar esta lección como completada

Marketing intermedio

Crear estructura de carpetas del proyecto

Vamos a separar cada tipo de archivo. Esto ayuda a que el proyecto sea ordenado y fácil de entregar a un cliente o equipo.

Carpetas que usaremos

targets/ para el archivo .mind.
assets/ para imágenes de referencia.
models/ si luego agregas modelos 3D.
index.html para la escena WebAR.
styles.css para la UI de marca.
app.js para datos, eventos y lógica.

Actividad

Crea una carpeta llamada catalogo-webar-marca.
Crea los tres archivos principales.
Crea las carpetas targets, assets y models.

Estructura finalCarpetas

catalogo-webar-marca/
  index.html
  styles.css
  app.js
  targets/
    campania-productos.mind
  assets/
    cafe-target.jpg
    snack-target.jpg
    CafeAurora.webp
    SnackNativo.webp
  models/
    cafe.glb
    snack.glb

Explicación

El HTML va a pedir targets/campania-productos.mind. Si el archivo está en otra carpeta o tiene otro nombre, MindAR no podrá cargar los targets aunque el resto del código esté bien.

Marcar esta lección como completada

Marketing intermedio

Compilar varios targets en un solo archivo .mind

En este nivel necesitas cargar dos imágenes al compilador y exportarlas como un solo archivo. El orden importa: la primera imagen será targetIndex: 0 y la segunda será targetIndex: 1.

Reglas para targets múltiples

Usa imágenes diferentes entre sí para evitar confusión.
Evita targets planos, borrosos o con logos demasiado simples.
Compila primero la imagen del café y luego la del snack.
Guarda el archivo como campania-productos.mind.

Índices del compilador

Si cargas primero cafe-target.jpg, el café será targetIndex: 0. Si cargas después snack-target.jpg, el snack será targetIndex: 1.

Herramienta integrada

Compilador multi-target MindAR

Selecciona dos imágenes en orden, compílalas y descarga el archivo .mind para tu campaña multiproducto.

Seleccionar imágenes target

Selecciona dos imágenes para comenzar.

No hay imágenes seleccionadas.

Relación entre imágenes e índicesMindAR

cafe-target.jpg  -> targetIndex: 0
snack-target.jpg -> targetIndex: 1
Archivo final: targets/campania-productos.mind
Nota: El compilador de archivos .mind te dara un archivo con nombre poster.mind RECUERDA cambiar el nombre a campania-productos.mind

Marcar esta lección como completada

Marketing intermedio

Crear datos de productos en JavaScript

En lugar de escribir textos sueltos en el HTML, vamos a crear un objeto de productos. Este objeto será la fuente de información para la UI y los eventos.

app.js - paso 1Datos

const 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 línea por línea

products agrupa toda la información comercial de la campaña.
id sirve para identificar el producto en eventos o analítica.
targetId debe coincidir con el id de la entidad A-Frame.
title y benefit se mostrarán en la interfaz.
color ayuda a personalizar la UI por producto.
whatsapp cambia el mensaje del botón según el producto detectado.

Marcar esta lección como completada

Marketing intermedio

Crear el HTML base de la campaña

Primero creamos la página, conectamos CSS, A-Frame, MindAR y el archivo app.js. También creamos una UI fija que cambiará con JavaScript.

index.html - paso 1HTML base

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Catalogo WebAR de marca</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 del catalogo</p>
      <h1 id="product-title">Catalogo WebAR</h1>
      <p id="product-benefit">Apunta la camara a una imagen del catalogo.</p>
      <a id="product-cta" href="#" target="_blank">Ver producto</a>
    </section>

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

Explicación de líneas importantes

Línea 7: conecta los estilos de la campaña.
Línea 8: carga A-Frame para usar etiquetas como a-scene y a-entity.
Línea 9: carga MindAR para tracking de imagen.
Líneas 13 a 17: crean la UI comercial que verá el usuario.
Línea 19: carga el JavaScript que actualizará la UI y los eventos.

Marcar esta lección como completada

Marketing intermedio

Agregar escena WebAR con dos targets simultáneos

Ahora agregamos la escena MindAR. La propiedad maxTrack: 2 permite que los dos marcadores puedan funcionar al mismo tiempo si ambos aparecen frente a la cámara.

index.html - paso 2Escena WebAR

    <a-scene
      mindar-image="imageTargetSrc: targets/campania-productos.mind; maxTrack: 2"
      color-space="sRGB"
      renderer="colorManagement: true, physicallyCorrectLights"
      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>

Explicación detallada

imageTargetSrc indica dónde está el archivo .mind.
maxTrack: 2 permite detectar hasta dos imágenes al mismo tiempo.
a-camera representa la cámara de la experiencia WebAR.
target-cafe se conecta con targetIndex: 0.
target-snack se conecta con targetIndex: 1.
Cada a-image carga una imagen real del producto sobre su propio marcador.

Marcar esta lección como completada

Marketing intermedio

Diseñar una UI de marca para varios productos

La UI debe explicar qué está pasando y qué producto fue detectado. También debe funcionar en móvil sin tapar demasiado la cámara.

styles.css acumuladoCSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #0f172a;
}

.brand-panel {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  padding: 16px;
  border: 3px solid #10b981;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.brand-panel a {
  display: inline-flex;
  padding: 12px 16px;
  border-radius: 999px;
  background: #10b981;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

Explicación

position: fixed mantiene el panel encima de la cámara.
z-index: 10 evita que la escena WebAR tape la interfaz.
border será cambiado con JavaScript según el producto detectado.
El enlace se transforma en botón para que sea fácil de tocar desde celular.

Marcar esta lección como completada

Marketing intermedio

Crear JavaScript para cambiar la UI según el target

Ahora usamos los datos de productos para actualizar título, beneficio, color y enlace cuando se detecta un marcador.

app.js - paso 2UI dinámica

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");

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;
}

Explicación línea por línea

Líneas 24 a 28: seleccionan elementos del HTML para poder modificarlos.
showProduct(product) recibe el producto detectado.
title.textContent cambia el nombre visible.
cta.href cambia el enlace de WhatsApp.
panel.style.borderColor y cta.style.background cambian el color de marca.

Marcar esta lección como completada

Marketing intermedio

Conectar eventos targetFound, targetLost y CTA

El último paso de lógica es conectar cada target con su producto. Esto permite que cada marcador actualice la UI de manera independiente.

app.js - paso 3Eventos

Object.values(products).forEach((product) => {
  const target = document.querySelector(`#${product.targetId}`);

  target.addEventListener("targetFound", () => {
    showProduct(product);
    console.log("target_found", product.id);
  });

  target.addEventListener("targetLost", () => {
    console.log("target_lost", product.id);
  });
});

cta.addEventListener("click", () => {
  console.log("cta_click", title.textContent);
});

const params = new URLSearchParams(window.location.search);
console.log("canal", params.get("canal") || "directo");

Explicación

Object.values(products) recorre todos los productos sin duplicar código.
document.querySelector(`#${product.targetId}`) busca la entidad A-Frame de cada producto.
targetFound ocurre cuando MindAR reconoce ese marcador.
targetLost ocurre cuando se pierde el tracking.
URLSearchParams lee el canal que viene desde el QR.

Marcar esta lección como completada

Marketing intermedio

Probar la activación antes de publicarla

Una activación multiproducto debe probarse en condiciones reales. No basta con que funcione en el computador.

Checklist técnico

El archivo .mind carga sin errores.
El target del café activa solo el café.
El target del snack activa solo el snack.
Ambos targets pueden verse al tiempo si están en cámara.
El botón abre WhatsApp con el mensaje correcto.

Checklist de marketing

El QR abre la URL correcta.
El usuario entiende qué debe escanear.
La UI no tapa el producto.
El beneficio se lee rápido.
El CTA está visible y tiene sentido comercial.

Registro de pruebaQA

Dispositivo:
Navegador:
Canal del QR:
Tiempo de carga:
Cafe detecta:
Snack detecta:
Ambos detectan juntos:
CTA correcto:
Observaciones:

Marcar esta lección como completada

Marketing intermedio

Código completo del proyecto intermedio

Este es el template final de la activación multiproducto. Debes tener tres archivos: index.html, styles.css y app.js.

index.html completoHTML

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Catalogo WebAR de marca</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 del catalogo</p>
      <h1 id="product-title">Catalogo WebAR</h1>
      <p id="product-benefit">Apunta la camara a una imagen del catalogo.</p>
      <a id="product-cta" href="#" target="_blank">Ver producto</a>
    </section>

    <a-scene mindar-image="imageTargetSrc: targets/campania-productos.mind; maxTrack: 2" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" 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="app.js"></script>
  </body>
</html>

styles.css completoCSS

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #0f172a;
}
.brand-panel {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  padding: 16px;
  border: 3px solid #10b981;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.brand-panel a {
  display: inline-flex;
  padding: 12px 16px;
  border-radius: 999px;
  background: #10b981;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

app.js completoJavaScript

const 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",
  },
};

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");

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);
    console.log("target_found", product.id);
  });
  target.addEventListener("targetLost", () => {
    console.log("target_lost", product.id);
  });
});

cta.addEventListener("click", () => {
  console.log("cta_click", title.textContent);
});

const params = new URLSearchParams(window.location.search);
console.log("canal", params.get("canal") || "directo");

ZIP intermedio Plantilla Marketing WebAR intermedia Proyecto multiproducto con dos targets, maxTrack: 2, UI dinámica, QR por canal y eventos básicos.

Entrega final intermedia

Dos imágenes target y archivo campania-productos.mind.
Experiencia publicada con HTTPS.
QR por canal creado desde el generador QR.
Video probando cada marcador y ambos al mismo tiempo.
Checklist técnico y comercial completado.

Marcar esta lección como completada

Ingresa tu código de estudiante

Qué vamos a construir

Resultado del proyecto

Historia de campaña

Por qué esto es intermedio

Prerrequisitos antes de empezar

Debes tener instalado

Conocimientos necesarios

Diferencia clave

Estrategia para una campaña multiproducto

Decisiones de campaña

Actividad

Explicación

Crear QR por canal de campaña

Crear los QR

Canales sugeridos

Explicación

Crear estructura de carpetas del proyecto

Carpetas que usaremos

Actividad

Explicación

Compilar varios targets en un solo archivo .mind

Reglas para targets múltiples

Índices del compilador

Compilador multi-target MindAR

Escanea tus imágenes objetivo

Crear datos de productos en JavaScript

Explicación línea por línea

Crear el HTML base de la campaña

Explicación de líneas importantes

Agregar escena WebAR con dos targets simultáneos

Explicación detallada

Diseñar una UI de marca para varios productos

Explicación

Crear JavaScript para cambiar la UI según el target

Explicación línea por línea

Conectar eventos targetFound, targetLost y CTA

Explicación

Probar la activación antes de publicarla

Checklist técnico

Checklist de marketing

Código completo del proyecto intermedio

Entrega final intermedia