Configurar SMOC Flow con iFrame y seguimiento

DesarrolladoresIntegraciones
Configurar SMOC Flow con iFrame y seguimiento
SMOC Flow incrustado en la página principal

Esta guía te muestra cómo incrustar un flujo conversacional de SMOC en tu sitio web usando un iFrame, junto con la configuración adecuada del píxel de seguimiento y la gestión de los parámetros UTM.

Resumen

Para integrar un flujo de SMOC en tu sitio web, necesitas implementar tres componentes principales:

código iFrame - Inserta el flujo conversacional en tu página

Píxeles de seguimiento - Códigos de seguimiento de Meta (Facebook) y Google

Script de cabecera - Pasa los parámetros UTM de tu página al iFrame. Los flujos de tarjetas insertan `/cards?iframe_mode=true` para que el iframe muestre solo la tarjeta; la página alojada `/cards` mantiene cualquier texto y diseño por encima, al lado o debajo.

Para orientación general y preguntas frecuentes, visita: https://www.smoc.ai/faq

1. Implementación con iFrame

El código iFrame inserta tu flujo SMOC directamente en tu página web. Tienes dos opciones de configuración según tus necesidades.

Configuración de dimensiones fijas

Utiliza este método si quieres dimensiones específicas en píxeles. El iFrame mantendrá estas medidas exactas:

<iframe  width="440"  id="smoc_iframe"  height="600"  name="code"  allowtransparency  src="https://go.smoc.ai/dummy_company/Flow/flow-name?iframe_mode=true"  style="border: none; overflow: hidden;"  loading="lazy"> </iframe>

Configuración de dimensiones dinámicas

Utiliza este enfoque cuando quieras que el iFrame ocupe todo su contenedor principal. Coloca este iFrame dentro de un <div> principal con las dimensiones adecuadas:

<iframe 
  width="100%" 
  id="smoc_iframe" 
  height="100%" 
  name="code" 
  allowtransparency 
  src="https://go.smoc.ai/dummy_company/Flow/flow-name?iframe_mode=true" 
  style="border: none; overflow: hidden;" 
  loading="lazy">
</iframe>

Consideraciones importantes sobre la ubicación

Al colocar el iFrame en tu página, asegúrate de que:

  • En dispositivos móviles, los clientes no necesitan desplazarse para ver el flujo
  • El iFrame está colocado en un lugar destacado y es visible de inmediato
  • Ajusta la altura y el ancho directamente en el código o hazlo adaptable usando la configuración dinámica

2. Configuración de píxeles de seguimiento

Los píxeles de seguimiento de Meta (Facebook) y Google pueden obtenerse a través de tu agencia de marketing o directamente desde tus cuentas de Meta Business Manager y Google Ads. Estos códigos deben colocarse en la sección <head> de tu página web.

Código de píxel de Meta

El píxel de Meta rastrea las interacciones de los usuarios para la publicidad en Facebook. Sustituye el ID del píxel por el tuyo:

<!-- Código del píxel de Meta -->
<script>
  !function(f,b,e,v,n,t,s) {
    if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_META_PIXEL_ID');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=YOUR_META_PIXEL_ID&ev=PageView&noscript=1" />
</noscript>
<!-- Fin del código del píxel de Meta -->

Código del píxel de Google

El píxel de Google rastrea las conversiones para Google Ads. Sustituye el ID de seguimiento por el tuyo:

html

<!-- Código de Google Pixel -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-XXXXXXXXXX');
</script>
<!-- Fin del código de Google Pixel -->

Nota: Sustituye YOUR_META_PIXEL_ID y AW-XXXXXXXXXX por tus identificadores de seguimiento reales de tu Meta Business Manager y cuentas de Google Ads, o solicítalos a tu agencia de marketing.

3. Propagación de parámetros UTM mediante smoc.js

Para simplificar la integración y garantizar un seguimiento coherente, SMOC ofrece ahora un script auxiliar estándar en JavaScript.

Cómo funciona

  • Al cargar la página, el script localiza todos los elementos <iframe> cuyo src comience por https://go.smoc.ai o https://go2.smoc.ai.
  • Añade los parámetros UTM que falten (utm_source, utm_medium, utm_campaign, utm_term, utm_content) de la URL de la página actual al src del iframe.
  • Si el iframe ya tiene algún parámetro UTM, estos se conservan.

Para utilizarlo:

Incluye el siguiente script una sola vez en la sección <head> de tu página:

<script src="https://go.smoc.ai/smoc.js" defer></script>

Asegúrate de que tu iframe utilice un src que apunte a https://go.smoc.ai o https://go2.smoc.ai. Visita la página con parámetros UTM en la URL. El src del iframe los incluirá automáticamente.

Limitaciones

  • El script solo se ejecuta una vez en DOMContentLoaded. Si tu sitio inyecta iframes de SMOC de forma dinámica después de que la página se haya cargado, contacta con el soporte de SMOC para activar una variante dinámica.
  • Asegúrate de que tu CSP (Content Security Policy) permita la carga y el enmarcado desde go.smoc.ai o go2.smoc.ai.

4. Reenvía los UTM a los mensajes de enlace salientes

smoc.js introduce los parámetros de campaña en el flujo. Para pasar esos mismos parámetros a una URL de tienda o socio, abre el mensaje de enlace (o el enlace Open Graph) en Studio y activa Reenviar UTM y IDs de clic. El destino recibirá las claves utm_* entrantes y los IDs de clic de anuncio (gclid, fbclid, msclkid, ttclid, wbraid, gbraid). Los parámetros que ya estén en la URL de destino se mantienen. El interruptor está desactivado por defecto.

Detalles: Incrustar flujos web y pasar UTM.

Ejemplo de implementación completo

Así es como todos los componentes funcionan juntos en las secciones <head> y <body>:

<!DOCTYPE html>
<html>
<head>

  <!-- Código Meta Pixel -->
  <script>
    !function(f,b,e,v,n,t,s) {
      if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', 'YOUR_META_PIXEL_ID');
    fbq('track', 'PageView');
  </script>
  <noscript>
    <img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=YOUR_META_PIXEL_ID&ev=PageView&noscript=1" />
  </noscript>
  <!-- Fin del código Meta Pixel -->
  
  <!-- Código Google Pixel -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'AW-XXXXXXXXXX');
  </script>
  <!-- Fin del código Google Pixel -->
  
  <!-- Gestor de parámetros UTM -->
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const iframe = document.getElementById("smoc_iframe");
      const urlParams = new URLSearchParams(window.location.search);
      const utmParams = [
        'utm_source',
        'utm_medium',
        'utm_campaign',
        'utm_term',
        'utm_content'
      ];
      
      const utmQueryString = utmParams
        .map(param => urlParams.get(param) ? `${param}=${urlParams.get(param)}` : '')
        .filter(param => param)
        .join('&');
      
      if (utmQueryString) {
        console.log('adding', utmQueryString)
        iframe.src += (iframe.src.includes('?') ? '&' : '?') + utmQueryString;
      }
    });
  </script>

  <script src="https://YOUR_DOMAIN/smoc.js" defer></script>
</head>
<body>
  <!-- Contenido de tu página -->
  
  <!-- iFrame de flujo SMOC -->
  <iframe 
    width="440" 
    id="smoc_iframe" 
    height="600" 
    name="code" 
    allowtransparency 
    src="https://go.smoc.ai/dummy_company/Flow/flow-name?iframe_mode=true" 
    style="border: none; overflow: hidden;" 
    loading="lazy">
  </iframe>
  
  <!-- Más contenido de la página -->
</body>
</html>

Resumen

Para integrar SMOC en tu sitio web:

Añade el código iFrame donde quieras que aparezca el flujo (tamaño fijo o dinámico)

Obtén los píxeles de seguimiento de tu agencia de marketing o de tus cuentas y añádelos a la sección <head>

Añade el archivo JavaScript de SMOC (<script src="https://YOUR_DOMAIN/smoc.js" defer></script>) en la sección <head>. Propagará automáticamente los parámetros UTM a todos los iframes de SMOC al cargar la página.

Para más preguntas o soporte, visita https://www.smoc.ai/faq o contacta con tu representante de SMOC.

Dónde corre la IA

La IA hace el trabajo. Tú lo revisas.

El chat del sitio, los flujos de tarjetas y LinkedIn comparten un sistema. La IA hace cada trabajo de abajo. La línea bajo el título dice dónde corre ese trabajo.

Cada agente

IA recorre el sitio y escribe la oferta, la audiencia, la voz y la marca. El chat del sitio, los flujos de tarjetas y LinkedIn parten de ahí.

Panel · Estrategia de leads

Fija tu objetivo de leads. IA simula miles de mezclas de canales, las ordena por eficiencia y muestra el plan más rentable. Tus datos y tus límites guían el cálculo.

Cada agente · tema en la web · lista en LinkedIn

IA escribe el flujo. El tema se ejecuta en el chat del sitio y en las tarjetas. La traducción se ejecuta en cada agente. IA encuentra la lista de prospectos en LinkedIn.

Ruta en cada flujo · web y LinkedIn por separado

El aprendizaje por refuerzo en la ruta del flujo se ejecuta en cada agente. Las recomendaciones se ejecutan en la web. El momento adecuado y la lectura de respuestas se ejecutan en LinkedIn.

Cada agente

IA propone una variante, usa tu revisión en el siguiente borrador y parte de un ejemplo que ya funciona. Tú aplicas el cambio.

Guías relacionadas

Sigue con estas guías relacionadas

Genera anuncios desde Studio

Genera anuncios desde Studio
StudioIntegraciones

Conecta SMOC con HubSpot
IntegracionesConsoleProspección

Conecta anuncios de Meta, Google, LinkedIn y ChatGPT

Conecta anuncios de Meta, Google, LinkedIn y ChatGPT
IntegracionesConsoleDesarrolladores

Ver todas las guías →

Sigue de cerca el cambio en las ventas con IA

Recibe novedades del producto y una mirada sobre agentes de IA proactivos, orquestación multicanal y conversión, sin ruido.

Producto del año Señal semanal sobre ventas con IA proactiva
Únete al boletín

Regístrate

Ingresa tu correo electrónico a continuación para comenzar con SMOC.AI

o en