Cómo incrustar un formulario de registro en tu página de confirmación de pedido de BigCommerce

Objetivos del artículo

Aprende cómo insertar un formulario de registro en tu página de confirmación de BigCommerce para recopilar información adicional de los clientes después de que finalicen el proceso de pago. Estos clientes recientes ya están interesados en tu marca, por lo que la confirmación presenta una gran oportunidad para interactuar más con ellos.

Antes de empezar

Asegúrate de haber integrado BigCommerce y de haber revisado la configuración Agregar automáticamente el javascript en el sitio de Klaviyo (recomendado).

Crea el formulario

Puedes crear un formulario de registro e incrustarlo en la página de confirmación para hacerles preguntas relevantes a tus clientes después de que finalicen la compra. Por ejemplo, podrías hacer preguntas para saber más sobre qué tan seguido un cliente usa tus productos o en qué posibles productos nuevos podría estar interesado en comprar.

Para crear el formulario de registro:

1. En Klaviyo, ve a Sitio web > Formularios de registro y haz clic en Crear formulario.
2. Si se te solicita elegir un canal, asigna un nombre al formulario, selecciona Web y haz clic en Crear.
3. Haz clic en Crear formulario desde cero. En el menú que aparece, ingresa o confirma el nombre del formulario y selecciona una lista a la que se unirán los nuevos suscriptores.
4. Selecciona Incrustado como el tipo de formulario.
   

5. Haz clic en Guardar y diseñar.
6. En el editor de formularios, personaliza la siguiente configuración:
   • Editar estilos: Edita la apariencia de tu formulario para que coincida con tu marca, como los estilos del formulario o del campo, y el tipo de fuente. También puedes editar cualquier texto al hacer clic en él y reemplazar el idioma predeterminado por el tuyo.
   • Agregar bloques: Aquí puedes agregar contenido al formulario para recopilar información, como un cuadro de texto para una pregunta o un campo de fecha para un cumpleaños. Asegúrate de configurar una propiedad del perfil para cada campo que agregues, y de no abrumar a los clientes con demasiadas preguntas.
   • Segmentación y comportamiento de visualización: En Visualización, elige si el formulario aparece en computadora, en dispositivo móvil o en ambos. En Segmentación, configura Público como Mostrar a todos los miembros del público para que los clientes reconocidos también puedan ver el formulario. No mostrar a perfiles existentes de Klaviyo lo oculta de los visitantes que Klaviyo reconoce, lo cual puede excluir a clientes a los que quieres pedirles comentarios.
7. En la barra de menú, selecciona Éxito para editar la página que se muestra después de que alguien envíe el formulario.
8. Cuando estés satisfecho con el diseño del formulario, haz clic en Publicar o programar. Resuelve cualquier alerta del formulario que esté bloqueando el proceso y luego selecciona Publicar ahora y haz clic en Publicar ahora para activar el formulario.
9. Abre Comportamiento de segmentación y visualización & > Visualización y copia el código de inserción. Usarás el ID del formulario de este código en el script de instalación que aparece a continuación.

El formulario no aparecerá en la página de confirmación del pedido hasta que agregues el script de instalación que aparece a continuación.

Revisa la configuración de suscripción de la lista a la que envía el formulario. Las listas pueden usar suscripción única o doble confirmación de suscripción. Si la lista usa doble confirmación de suscripción, personaliza sus páginas de confirmación y recuerda que los nuevos suscriptores deben confirmar su suscripción antes de unirse a la lista.

Añade la incrustación a tu sitio de BigCommerce

1. Ve al panel de administración de BigCommerce.
2. Ve a Storefront > Gerente de scripts y haz clic en Crear un script.
3. Nombra el script y configúralo con lo siguiente:
   • Ubicación: encabezado
   • Descripción (opcional): Describe el propósito del script
   • Páginas donde se agregará el script: Confirmación de pedido
   • Tipo de script: Script
     

4. Elimina el contenido del script y, en su lugar, pega el siguiente código para agregar klaviyo.js a la página de confirmación. Ten en cuenta que debes hacer esto incluso si instalaste klaviyo.js previamente en el 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>

1. En el fragmento anterior, reemplaza PUBLIC_API_KEY con la clave de API pública del sitio.
2. En el fragmento anterior, reemplaza FORM_ID con el ID que aparece después de klaviyo-form- en el código de inserción que copiaste de Klaviyo. Copia solo el ID, no todo el código de inserción.

3. Cuando hayas completado todos los detalles del script, haz clic en Guardar.

Tu formulario insertado ahora se mostrará en la parte inferior de la página después de que alguien realice un pedido. Según tu tema, quizá quieras editar el borde, el relleno o el tamaño del formulario en la sección Editar estilos para asegurarte de que coincida con la apariencia de tu página de confirmación de pedido; publica los cambios que hagas para verlos reflejados.

Después de realizar un pedido de prueba, verifica que el formulario aparezca en la parte inferior de la página de confirmación del pedido en los dispositivos que seleccionaste. Envía una respuesta de prueba y confirma que las respuestas aparezcan en el perfil previsto en Klaviyo. Si estás probando una suscripción nueva a una lista con doble confirmación de suscripción, completa la confirmación antes de verificar la membresía en la lista.

Siguientes pasos

Después de que empieces a recopilar respuestas con el formulario integrado, cada envío se almacenará en el perfil del cliente como una propiedad personalizada, disponible para usar en segmentos, flujo y plantilla de correo electrónico.

Con base en las respuestas, puedes ramificar la experiencia de posventa. También podrías querer ramificar la serie de bienvenida con base en estos datos o crear segmentos relevantes para enviar campañas. Por ejemplo, digamos que decidimos lanzar un nuevo rímel. Como estamos recopilando datos de interés del producto en este formulario incrustado, podemos notificar sobre el lanzamiento a cualquiera que nos haya dicho que le interesaba el rímel.

Recursos adicionales