Cómo incrustar un formulario de inscripción en su página de confirmación de pedido

Qué aprenderás

Aprenda a incrustar un formulario de registro en su página de confirmación para recopilar información adicional de los clientes una vez finalizado el proceso de pago. Estos clientes recientes ya están interesados en su marca, por lo que la confirmación representa una gran oportunidad para comprometerse aún más con ellos.

Los pasos exactos a seguir para incrustar un formulario en su página de confirmación de pedido dependerán en gran medida de su plataforma de comercio electrónico, pero el proceso implicará la actualización de los archivos de código de su tienda con un breve fragmento de código. En esta guía hemos descrito cómo conseguirlo para 2 plataformas de comercio electrónico:

• Shopify
• Bigcommerce

Antes de empezar

Si está utilizando Shopify o BigCommerce, o tiene el plugin Klaviyo para Magento o WooCommerce, está listo para empezar a construir su formulario en la sección de abajo.

Sin embargo, si está utilizando una plataforma de comercio electrónico que no se integra de forma nativa con Klaviyo, asegúrese de que ha habilitado el seguimientoActive on Site para su sitio. Esto se hace automáticamente para las plataformas enumeradas anteriormente, pero debe hacerse manualmente para otras plataformas. Es lo que permite a Klaviyo publicar formularios de inscripción en su sitio. 

Construya su formulario

Puede crear un formulario de registro e incrustarlo en su página de confirmación para hacer preguntas relevantes a sus clientes después de que hayan realizado el pago. Por ejemplo, podría hacer preguntas para saber más sobre la frecuencia con la que un cliente utiliza sus productos, o qué nuevos productos potenciales podría estar interesado en comprar.

Para construir su formulario de inscripción:

1. En Klaviyo, vaya a Formularios de registro > Crear formulario de registro > Construir desde cero.
2. En el menú que aparece, asigne un nombre a su formulario y seleccione una lista para que los nuevos suscriptores lo envíen. 
3. Seleccione Incrustar como tipo de formulario.
   
4. Haga clic en Guardar y continúe con el diseño. 
5. Esto le llevará al editor de formularios donde podrá editar los siguientes estilos:
   • Estilos: Edite el aspecto de su formulario para adaptarlo a su marca, como los estilos del formulario o de los campos de entrada y el tipo de fuente. También puede editar cualquier texto pulsando sobre él y sustituyendo la lengua predeterminada por la suya. 
   • Añadir bloques: Aquí puede añadir contenido a su formulario para recoger información, como un cuadro de texto para una pregunta o un campo de fecha para un cumpleaños. Asegúrese de establecer una propiedad de perfil con cada campo que añada y de no abrumar a los clientes con demasiadas preguntas.
   • Orientación y comportamiento: Elija si desea que el formulario aparezca en escritorio, móvil o ambos. Mantenga su formulario configurado como Mostrar a todos los visitantes o No mostrar a los perfiles existentes de Klaviyo.  
6. En la barra de menú, seleccione Éxito para editar la página que aparece después de que alguien envíe su formulario.
7. Cuando esté satisfecho con el diseño de su formulario, haga clic en Publicar.
8. Desde el modal que aparece, copie su código de incrustación para tenerlo listo para pegar. 
   
9. Pulse Publicar.

Su formulario no aparecerá en su sitio hasta que haya pegado el código de incrustación en el código de su sitio. Las próximas 2 secciones repasarán cómo pegar el código para un sitio Shopify, y luego para un sitio Bigcommerce.

Añada la incrustación a su sitio Shopify

1. Navegue hasta el backend de su tienda Shopify.
2. Vaya a Configuración > Pago > Procesamiento de pedidos.
3. En Scripts adicionales, pegue el código de incrustación.

Para probar cómo aparece el formulario en vivo, cree un pedido de muestra y complete el proceso de pago. En función del tema de su tienda, es posible que tenga que volver al editor de formularios para ajustar ligeramente el aspecto que desee. Asegúrese de publicar de nuevo después de realizar cualquier cambio; pero, no necesitará añadir el código de incrustación de nuevo ya que todas las ediciones se aplicarán automáticamente después de publicar.

En nuestro ejemplo, hemos añadido un borde blanco al formulario para dar más relleno entre el mensaje "Gracias" y el propio formulario. 

Añada la incrustación a su sitio Bigcommerce

1. Navegue a su administrador de Bigcommerce.
2. Vaya a Storefront > Script Manager y haga clic en Crear un script .
3. Nombre el script y configúrelo con lo siguiente:
   • Ubicación: Cabeza
   • Descripción (opcional): Describa el propósito del guión
   • Páginas donde se añadirá el script: Confirmación de pedido
   • Tipo de guión: Guión
     
4. Borre el contenido del script y en su lugar pegue el siguiente código para añadir klaviyo.js a su página de confirmación. Tenga en cuenta que debe hacer esto aunque ya haya instalado klaviyo.js en su sitio web:
   

     <script src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js" async="" ></script>
     <script>
        document.addEventListener("DOMContentLoaded", function() {
          var elem = document.createElement('div');
        elem.className = 'klaviyo-form-FORM_ID'
        document.body.appendChild(elem);
        });</script>

5. En el fragmento anterior, sustituya PUBLIC_API_KEY por la clave pública de API de su sitio .
6. En el fragmento anterior, sustituya FORM_ID por el ID de su formulario. Para encontrar el ID de su formulario, navegue hasta el formulario incrustado en su cuenta de Klaviyo. El ID del formulario es el código de 6 letras al final de la URL.
   
7. Cuando haya rellenado todos los datos del script, haga clic en Guardar.

Su formulario incrustado aparecerá ahora en la parte inferior de la página después de que alguien realice un pedido. Dependiendo de su tema, puede que desee editar el borde, el relleno o el tamaño de su formulario en la secciónEstilos para asegurarse de que coincide con el aspecto de su página de confirmación de pedido; publique cualquier cambio que realice para verlo reflejado.

Próximos pasos

Una vez que empiece a recopilar respuestas con su formulario incrustado, cada envío se almacenará en el perfil del cliente como una propiedad personalizada, disponible para su uso en segmentos, flujos y plantillas de correo electrónico.

Basándose en las respuestas, puede ramificar la experiencia posterior a la compra. También puede ramificar sus series de bienvenida basándose en estos datos o crear segmentos relevantes a los que enviar campañas. Por ejemplo, supongamos que decidimos lanzar una nueva máscara de pestañas. Dado que estamos recopilando datos sobre el interés por el producto en este formulario incrustado, podemos notificar a cualquier persona que nos haya dicho que está interesada en el rímel en el lanzamiento del producto.

Recursos adicionales

• Primeros pasos con los formularios de registro
• Cómo incrustar un formulario de inscripción en su sitio web