Cómo integrar un formulario de registro en tu sitio web.

Qué aprenderás

Descubre cómo añadir un formulario de registro integrado en una página o ubicación específica de tu sitio web (por ejemplo, el pie de página) para que los compradores que quieran saber más sobre la marca puedan registrarse fácilmente. Integrar un formulario de registro en el pie de página de un sitio web para que funcione junto al resto de los formularios publicados es una práctica recomendada de Klaviyo para optimizar el crecimiento de las listas. 

Para añadir un formulario integrado a tu sitio web, haz lo siguiente:

1. Crea y personaliza un formulario integrado en Klaviyo.
2. Copia el código de integración del formulario que aparece en la ventana modal de publicación.
3. Pega el código de integración en los archivos del sitio web.

Antes de empezar

Antes de crear un formulario de registro, asegúrate de que la funcionalidad de formularios de registro esté habilitada en tu cuenta de Klaviyo. De este modo, los formularios publicados en Klaviyo se mostrarán correctamente en el sitio web y se sincronizarán todos los datos necesarios. 

Para que los formularios integrados funcionen:

• La funcionalidad de formularios de registro debe estar habilitada. También suele denominarse «seguimiento en el sitio».
• El código de integración debe estar pegado en el sitio web, donde quieras que se muestre el formulario.

Ten en cuenta que pegar el código de integración solo es necesario para los formularios integrados. Los formularios emergentes, de flyout y de página completa no requieren pegar código y pueden publicarse directamente desde el editor de formularios de Klaviyo.

Vigente a partir del 6 de diciembre de 2024: Klaviyo ha mejorado la forma en la que se calculan las visualizaciones de los formularios integrados para medir la interacción de forma más precisa. Ahora, las visualizaciones de los formularios integrados solo se registran cuando el formulario se muestra en la ventana gráfica del usuario. Esta modificación puede provocar un cambio notable en el recuento de visualizaciones y un aumento de las tasas de envío, sobre todo en el caso de los formularios integrados en el pie de página de un sitio web, ya que dichas visualizaciones solo se contabilizarán si los visitantes se desplazan hacia abajo lo suficiente como para que el formulario se muestre parcialmente en su ventana gráfica. 

Añadir un formulario integrado a tu sitio web

Si usas Shopify, BigCommerce, o WooCommerce, los suscriptores que se registren mediante el formulario integrado de la plataforma se añadirán automáticamente a la lista de Klaviyo a través de la integración. Por ello, no es necesario que sustituyas el formulario integrado de la integración que uses por uno de Klaviyo, aunque puedes crear uno en Klaviyo si quieres que los suscriptores se incluyan en otra lista. 

Crear y personaliza un formulario integrado en Klaviyo

1. Selecciona la pestaña Formularios de registro de la barra de navegación izquierda de Klaviyo.
2. Selecciona Crear formulario. Desde aquí, dispones de dos opciones:
   • Personalizar una plantilla prediseñada de la colección de formularios: haz clic en el desplegable situado junto a Todos los tipos y, a continuación, selecciona Integrado para filtrar la colección de formularios y mostrar todas las plantillas de formularios integrados prediseñados.
   • Empezar a editar una plantilla de formulario integrado en blanco: selecciona Crear formulario en la esquina superior derecha.
3. En la ventana modal de creación que aparecerá, haz lo siguiente:
   • Ponle un nombre al formulario. 
   • Elige a qué lista se añadirán los nuevos suscriptores.
   • Confirma Integrado como tipo de formulario.
     
4. Haz clic en Guardar y diseñar.
5. Usa el editor para retocar el formulario y añadir los bloques o campos que quieras. Para obtener información sobre cómo personalizar el formulario, consulta Introducción a los formularios de registro.
   

   Si tienes previsto integrar el formulario en el pie de página de tu sitio web, te recomendamos que solo solicites direcciones de correo electrónico para optimizar el volumen de suscripciones.

6. Cuando hayas terminado de editar el formulario, haz clic en Publicar. Ten en cuenta que el formulario aún no aparecerá en el sitio web. Para ello, también tendrás que pegar el código de integración en el sitio.
7. En la ventana modal Publicado correctamente que aparecerá, haz clic en Copiar para copiar el código de integración al portapapeles. Este es el código que tendrás que pegar en los archivos del sitio web en la siguiente sección de este artículo.
   

Ten en cuenta que también se puede acceder al código de integración de un formulario en la pestaña Segmentación y comportamiento del editor de formularios.

Pegar el código de integración en tu sitio web

Después de publicar el formulario en Klaviyo y copiar el código de integración, tendrás que pegar el código en los archivos del sitio web para que se muestre el formulario. El lugar donde tienes que pegar el código varía según dónde quieras que aparezca el formulario (por ejemplo, en un archivo de tema o en un archivo de página específico). También puede variar según la integración. 

Busca la plataforma que usas en la lista de abajo y, después, visita el artículo enlazado debajo para obtener instrucciones más específicas sobre cómo pegar el código de integración para esa integración. 

Si no aparece la plataforma que usas, consulta el punto «Otras plataformas».

• BigCommerce
  Si usas BigCommerce, pega el código de integración en los archivos del sitio web donde quieras que aparezca. 
  • Ve a Añadir el código de integración a tu sitio de BigCommerce.
• Shopify
  Si usas Shopify, añade la aplicación «Klaviyo Embedded Form» (Formulario integrado de Klaviyo) a la plantilla de tu página y pega el código de integración del formulario.
  • Ve a Añadir el código de integración a tu sitio de Shopify.
• Square
  Si usas Square, pega el código de integración en los archivos de tu sitio web donde quieras que aparezca.
  • Ve a Añadir el código de integración a tu sitio de Square.
• WooCommerce
  Si usas WooCommerce, pega el código de integración en el código HTML del web. 
  • Ve a Añadir el código de integración al pie de página de tu sitio de WooCommerce.
• Otras plataformas
  Si la plataforma que usas no está incluida en la lista anterior o usas una integración personalizada que no se integra de forma nativa en Klaviyo, tendrás que pegar 2 fragmentos de código en el sitio web para que el formulario integrado funcione: 
   
  • El seguimiento en el sitio (también conocido como Klaviyo.js), que permite habilitar la funcionalidad de formularios de registro 
    • Ten en cuenta que muchas plataformas (como Wix, PrestaShop, Magento 1 y 2, etc.) añaden automáticamente el seguimiento en el sitio con la integración. Comprueba la configuración de integración de la plataforma que uses en Klaviyo para confirmar que esta opción esté seleccionada.
      • Si la plataforma no tiene una integración nativa en Klaviyo, tendrás que añadir manualmente el seguimiento en el sitio.
  • El código de integración del formulario específico 
    • Una vez habilitado el seguimiento en el sitio, debes pegar el código de integración del formulario en el código HTML o código fuente del sitio donde quieras que aparezca (por ejemplo, en el pie de página). 
      • El código de integración de un formulario puede copiarse desde la pestaña Segmentación y comportamiento del editor de formularios.

Próximos pasos

Una vez que hayas publicado el formulario integrado en Klaviyo, hayas pegado el código de integración en el sitio web y hayas guardado los cambios, ve al sitio web y actualiza la página.

El formulario integrado debería aparecer en el sitio web donde hayas pegado el código de integración. 

Solucionar problemas con los formularios integrados

Si el formulario integrado está activado en Klaviyo, pero no se muestra en el sitio web, repasa los siguientes consejos para solucionar problemas:

• Actualiza la memoria caché del navegador.
• Comprueba que el sitio web esté integrado en Klaviyo correctamente y que también esté publicado en Internet.
• Confirma que hayas habilitado los formularios de registro en la cuenta (es lo mismo que habilitar el seguimiento en el sitio).
• Asegúrate de que hayas guardado los cambios del sitio web después de haber pegado el código de integración.
• En el editor de formularios de registro de Klaviyo, ve a la sección Segmentación y comportamiento y revisa lo siguiente:
  • En la sección Visualización, comprueba que: 
    • El código de integración pegado en el sitio web coincida exactamente con el código proporcionado por Klaviyo.
    • La configuración del dispositivo en Klaviyo se corresponda con el dispositivo que estés usando para ver el formulario.
  • En la sección Segmentación, comprueba que:
    • Cumplas los criterios restrictivos de los visitantes.
    • El formulario esté configurado para mostrarse en la URL que estés viendo e incluya los parámetros UTM especificados.
    • Tu ubicación se corresponda con los ajustes de geolocalización establecidos para el formulario.
    • Tu carrito cumpla los requisitos de contenido del carrito configurados para el formulario.
• Repite la prueba en una nueva ventana de incógnito (privada) del navegador.
• Comprueba que solo haya una cuenta de Klaviyo integrada en el sitio web. Más información sobre las integraciones

Otros posibles motivos por los que no se muestra el formulario

• Si el sitio web contiene CSS personalizado, es posible que entre en conflicto con el fragmento de código de seguimiento en el sitio de Klaviyo (Klaviyo.js) y que interfiera con el formulario. Pide a los desarrolladores que usen las herramientas de desarrollo de tu navegador para inspeccionar el código del sitio web e identificar el problema, o bien ponte en contacto con el servicio de asistencia.
• Si estás usando un sitio web de aplicación de página única (SPA), tu configuración puede estar provocando que el formulario aparezca de forma intermitente. Pídeles ayuda a los desarrolladores.

Recursos adicionales

• Cómo contactar con el servicio de asistencia
• Solucionar problemas con los formularios de registro
• Introducción a los formularios de registro