Uso del bloque HTML en las páginas de información

Cómo añadir un bloque HTML

1. Abre el editor de tu página de información

2. Desplázate hasta los bloques especiales y selecciona «HTML»

3. Verás dos opciones: utilizar el asistente de IA integrado o cambiar a la pestaña HTML para pegar el código directamente

✨ Dos formas de generar tu código

Opción A: Utiliza el asistente de IA integrado

Dentro del bloque HTML, hay un asistente de IA integrado. Solo tienes que describir lo que quieres en lenguaje sencillo:

«Crea un banner con estilo, con texto en negrita y color blanco sobre fondo naranja que diga: ¡Plazas limitadas, inscríbete ahora!».

¡Verás inmediatamente una vista previa del resultado final en el bloque de abajo!

¿No te convence? Solo tienes que pedirle que lo ajuste:

«Haz el fondo más oscuro» o «Añade esquinas redondeadas»

Cuando estés satisfecho con el resultado, pulsa «Guardar» y el bloque se añadirá a tu página. 

Opción B: Usar ChatGPT externamente

Ve a ChatGPT y pídele que escriba el código por ti:

«Escríbeme un fragmento de código HTML + CSS autónomo (sin JavaScript) para [describe lo que quieres]. Debe ser limpio, compatible con dispositivos móviles y funcionar como un bloque independiente en una página».

A continuación, copia el resultado y pégalo directamente en la pestaña HTML.

💡 ¿Algo parece raro? Vuelve a pegar el código en ChatGPT y di: «Esto no se muestra correctamente, ¿puedes arreglarlo?». Te lo solucionará.

🎨 Ideas: ¿Qué puedes añadir?

Estas son cosas que no puedes crear con los bloques estándar, pero que son fáciles de crear con el bloque HTML.

1. ⚡ Banner de urgencia

Un banner llamativo a ancho completo para destacar un mensaje clave. Ideal para ofertas limitadas, plazos o avisos importantes.

Texto para generar:

«Crea un banner HTML + CSS a ancho completo con texto blanco en negrita sobre un fondo rojo/naranja que diga: '🔥 Plazas limitadas, inscríbete antes del [fecha]'. Centrado, sin JavaScript».

2. 📊 Fila de estadísticas/cifras

Una fila limpia con 3-4 cifras impresionantes (como miembros, países, años de experiencia). Mucho más impactante que escribirlas en un párrafo.

Indicación de uso:

«Crea una fila de estadísticas en HTML + CSS con 3 elementos: [Más de 500 miembros], [12 países], [5 años]. Números grandes y en negrita, con una pequeña etiqueta debajo, espaciados uniformemente y adaptados a dispositivos móviles».

3. 🏅 Insignia de confianza / garantía

Un elemento tipo insignia que genera credibilidad, como «100 % gratis» o «No se necesita experiencia».

Indicación de uso:

«Crea una insignia de confianza en HTML + CSS con un icono de escudo, el titular en negrita «100 % gratis» y un breve subtítulo: «No se necesita experiencia, te guiaremos en cada paso». Centrada, en verde y blanco».

4. 🎨 Separador de secciones con título

Una banda con degradado de color para separar visualmente las secciones de tu página y añadir un toque profesional.

Instrucciones de uso:

«Crea un separador con degradado en HTML + CSS a ancho completo en morado y azul, con texto blanco centrado que diga "Por qué nos eligen". Limpio y moderno».

5. 🗺️ Mapa incrustado

Si tienes una ubicación física o un lugar para eventos, incrusta un mapa de Google directamente en tu página.

Cómo obtener el código de inserción:

1. Abre Google Maps y busca tu ubicación

2. Haz clic en «Compartir», luego en «Incrustar un mapa» y copia el código HTML

3. Pégalo en la pestaña HTML de tu bloque

📊 Cómo insertar tu píxel de Facebook

¿Qué es el píxel de Facebook?

El píxel de Facebook es un pequeño fragmento de código que añades a tu página. Una vez activo, realiza un seguimiento de quién visita tu página de información y envía esos datos a tu cuenta de Facebook Ads. Esto te permite:

• Reorientar a los visitantes: mostrar anuncios específicamente a las personas que ya han visitado tu página

• Crear audiencias similares: encontrar nuevas personas similares a tus visitantes actuales

• Medir el rendimiento de tus anuncios: comprueba si tus anuncios de Facebook realmente están generando tráfico hacia tu página

En resumen, si estás publicando anuncios en Facebook, el píxel convierte tu página de información en una herramienta de marketing eficaz.

Paso 1: Obtén tu ID de píxel de Meta

1. Ve a Meta Business Manager e inicia sesión

2. En el menú de la izquierda, haz clic en «Todas las herramientas»

3. En el menú que se abre, desplázate hacia abajo y haz clic en «Gestor de eventos»

4. En el Gestor de eventos, busca «Fuentes de datos» en el menú de la izquierda y haz clic en él; a continuación, selecciona «Píxeles»

5. Verás tu píxel en la lista; el ID del píxel es el número de 15 o 16 dígitos que aparece debajo del nombre del píxel

6. Si aún no tienes un píxel, haz clic en «Conectar fuentes de datos» → «Web» y sigue los pasos de configuración

Paso 2: Añade el píxel a tu página de información

1. En tu página de información, añade un bloque HTML

2. Cambia a la pestaña HTML

3. Pega lo siguiente, sustituyendo YOUR_PIXEL_ID por tu ID real:

html

<!-- Meta Pixel Code --><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_PIXEL_ID');fbq('track', 'PageView');</script><noscript><img height="1" width="1" style="display:none"src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/></noscript><!-- End Meta Pixel Code -->

4. Guarda el bloque

Paso 3: Comprueba que funciona

1. Instala la extensión de Chrome Meta Pixel Helper (gratuita)

2. Visita tu página de información publicada

3. Haz clic en el icono de la extensión. Si muestra tu ID de Pixel con un ✅ verde, ya está todo listo

⚠️ Nota sobre privacidad

Si utilizas el píxel de Facebook, asegúrate de que tu página incluya una breve mención al respecto, algo como: «Esta página utiliza herramientas de seguimiento para mejorar tu experiencia». De este modo, cumplirás con normativas de privacidad como el RGPD.

📊 Seguimiento de conversiones con Meta Pixel (Configuración de Custom Conversion)

Después de añadir el Meta Pixel a tu bloque HTML y comprobar que los eventos funcionan correctamente, el último paso es crear una Custom Conversion en Meta para medir y optimizar resultados.

🔧 Paso 1: Ir a Events Manager

1. Abre Meta Events Manager

2. Selecciona tu Pixel (ej. Saga Pixel)

3. Haz clic en Crear → Custom Conversion

🧩 Paso 2: Configurar la conversión

Verás una pantalla como esta:

• Nombre: Usa un nombre claro(ej. “Visita Linkmate” o “Click saliente Saga”)

• Fuente de datos: Selecciona tu Pixel

• Origen de la acción: Sitio web

• Evento: Todo el tráfico URL

📌 Paso 3: Añadir la regla

En Reglas, define cuándo se activa la conversión.

Configúralo así:

• URL → contiene →

https://linkmate.one/ 

💡 Qué hace esto

Esta configuración te permite:

• Rastrear clics salientes o redirecciones con Linkmate

• Medir el rendimiento de tus enlaces

• Optimizar campañas para acciones reales

✅ Paso 4: (Opcional) Añadir valor

Puedes activar “Introducir valor de conversión” y asignar un valor.

🚀 Paso 5: Guardar y probar

1. Haz clic en Crear

2. Ve a Test Events

3. Visita tu página y activa el enlace

4. Confirma que la conversión se registra

🧠 Consejo

Si haces campañas, usa esta conversión como evento de optimización.

💬 ¿Necesitas ayuda?

Si necesitas ayuda o tienes alguna pregunta:

• Centro de asistencia: ¿Necesitas ayuda? Inicia un chat con el agente de IA de Fibi en tu SAGA. Si no pueden ayudarte, un miembro del equipo humano se hará cargo.

• Reserva una llamada: Programe una demostración con nuestro equipo