Cómo añadir un formulario integrado de Klaviyo a tu sitio de BigCommerce

Qué aprenderás

Aprende a añadir un formulario incrustado de Klaviyo a tu sitio de BigCommerce; para ello, tienes que crear el formulario en Klaviyo y luego pegar su código de inserción en los archivos del sitio donde quieras que aparezca (p. ej., en el pie de página).

Esta guía muestra cómo sustituir el formulario de registro predeterminado de BigCommerce por un formulario incrustado de Klaviyo.

Antes de empezar

Para mostrar un formulario integrado de Klaviyo en tu sitio de BigCommerce, intégralo con BigCommerce e instala el JavaScript in situ de Klaviyo (Klaviyo.js). Este script habilita el formulario de registro y el seguimiento in situ. Si marcaste la configuración Añadir automáticamente el javascript in situ de Klaviyo (recomendado) al integrar con BigCommerce, ya está todo listo.

Si no:

1. En Klaviyo, selecciona integraciones en el menú de navegación de la izquierda.
   

2. Haz clic en BigCommerce y, a continuación, selecciona la pestaña Configuración.
3. Marca la opción Añadir automáticamente el código JavaScript en el sitio de Klaviyo (opción recomendada).
4. Pulsa Guardar.

El ejemplo de este artículo usa el tema Cornerstone predeterminado de BigCommerce. Ten en cuenta que el tema puede variar, al igual que los nombres de algunos archivos o la ubicación de fragmentos de código. Si cambias de tema más adelante, añade también el código de inserción al nuevo tema.

Añadir el código de integración del formulario a tu sitio web

Primero, crea y publica un formulario integrado en Klaviyo. En esta sección se tratarán los siguientes pasos para pegar el código de inserción de tu formulario en tu sitio de BigCommerce para que se muestre y sincronice los datos correctamente.

1. Si todavía no has copiado el código de inserción, abre el formulario en el editor, selecciona Segmentación y comportamiento > Visualización y copia el código en Código de inserción.
   

2. Ve a tu sitio web y localiza el formulario de registro predeterminado de BigCommerce. Si utilizas un tema de Cornerstone, está en el pie de página del sitio.
   

• Si no ves un formulario predeterminado en tu sitio web:
  • Abre tu panel de BigCommerce.
  • Ve a Marketing > marketing por email.
  • Marca la casilla con la etiqueta Permitir suscripciones al boletín. Esto te permite recopilar el consentimiento de email de los visitantes de tu sitio web y también añade una casilla de registro de email predeterminada en tu sitio de BigCommerce. Si esta casilla ya está marcada y sigues sin ver un formulario predeterminado, es posible que tu tema no incluya uno.

3. Abre tu panel de BigCommerce y, a continuación, ve a Storefront > Themes.
4. En la sección Tema actual, haz clic en el menú desplegable Avanzado y selecciona Editar archivos del tema.
   

• Si usas un tema predeterminado, no podrás seleccionar esta opción. En su lugar:
  
  • Haz clic en Hacer una copia, ponle un nombre y luego selecciona Guardar una copia.
  • Una vez que se haya añadido a la sección Themes, selecciona los 3 puntos y, a continuación, elige Editar archivos de tema. Ten en cuenta que las ediciones que hagas solo se aplicarán al tema que estés editando, y tendrás que aplicar el tema a tu sitio web para ver los cambios reflejados.

5. En la barra lateral izquierda, abre el archivo correspondiente a donde aparecía el formulario predeterminado en tu sitio. Si el formulario predeterminado estaba ubicado en el pie de página, como en el ejemplo, ve a plantilla > components > common y haz clic en el archivo footer.html.
6. Utiliza el atajo de búsqueda (Command+F en Mac o Control+F en Windows) para buscar la palabra «newsletter» dentro del archivo de pie de página.
   

7. En el código que aparece debajo, busca la referencia al formulario. En el ejemplo, se hace referencia al formulario en una ruta de archivo diferente: {{> components/common/subscription-form}}.
   

8. En la barra lateral izquierda, sigue la ruta del archivo a la que se hace referencia en el código (en este ejemplo, selecciona components > common > subscription-form). Aquí verás los componentes reales del formulario predeterminado.
   • En este ejemplo, el encabezado y el texto introductorio del formulario predeterminado coinciden con el resto de los estilos del sitio. Mantén ese texto fuera del elemento <form> al reemplazar el formulario.
9. Resalta todo el elemento <form>, incluida la etiqueta de apertura <form ...>, la etiqueta de cierre </form> y todo lo que hay entre ellas. Pega el código de inserción que copiaste de Klaviyo para sustituirlo. Klaviyo crea su propio formulario, así que no dejes el código de inserción dentro de las etiquetas del formulario original.
   

10. Haz clic en Guardar y aplicar archivo para aplicar estos cambios a tu sitio web.
    • Si el botón solo dice Guardar archivo, entonces el archivo que acabas de editar aún no es tu Tema actual. Tendrás que hacer clic en Guardar archivo y, luego, desplazarte hacia arriba y seleccionar Editar archivos del tema > Guardar > Usar como tema activo en la esquina superior derecha para aplicar el tema a tu sitio web.

Una vez que hayas pegado el código de inserción, lo hayas guardado y hayas aplicado los cambios en BigCommerce, vuelve a tu sitio web y actualiza la página. Tu formulario incrustado de Klaviyo se mostrará en tu sitio y empezará a añadir nuevos suscriptores a la lista de Klaviyo vinculada al formulario.

Prueba el formulario

1. Envía el formulario de tu sitio web con una dirección de email que no esté ya en la lista conectada del formulario.
2. Si la lista usa la doble confirmación de registro, abre el email de confirmación y confirma la suscripción. Los nuevos suscriptores de email se añaden a la lista después de confirmar.
3. En Klaviyo, comprueba que la dirección de email se ha añadido a la lista conectada a tu formulario.

Si no ves tu formulario, consulta solucionar problemas de formularios insertados.

Próximos pasos

A continuación, crea un flujo de serie de bienvenida para causar un impacto inmediato en tus nuevos suscriptores.

Recursos adicionales