Cómo activar una campaña de OptinMonster a partir del envío de un formulario

Introducción

¿Le gustaría activar automáticamente una campaña de OptinMonster a partir del envío de un formulario? Puede crear fácilmente su formulario y hacer que no sólo active la campaña, sino que también rellene previamente campos como el nombre y la dirección de correo electrónico desde el formulario a la campaña para ahorrar tiempo. En este tutorial, le mostraremos cómo puede lograr esto utilizando un fragmento.

Creación del formulario

Para empezar, crearemos un nuevo formulario y le añadiremos nuestros campos. Para el propósito de este tutorial, nuestro formulario sólo contendrá los campos Nombre y Dirección de correo electrónico.

Si necesita ayuda para crear su formulario, consulte esta documentación.

Configuración de la campaña OptinMonster

Ahora es el momento de crear una campaña OptinMonster. Para crear su campaña específicamente para este tutorial, siga estos pasos.

1) Creación de la campaña

Si es la primera vez que crea una campaña, puede empezar siguiendo esta guía.

2) Añadir el MonsterLink

A continuación, en el constructor de campañas, añada MonsterLink como Regla de visualización para mostrar la campaña sólo al hacer clic.

3) Publicación de la campaña

Si utiliza el OptinMonster WordPress para gestionar sus campañas, asegúrese de Publique la campaña de la WordPress admin " OptinMonster " Campañas.

(Opcional) Configuración de los ajustes de salida

Puede configurar los Ajustes de Salida en el plugin OptinMonster para incrustar esta campaña sólo en la(s) página(s) donde aparecerá su formulario WPForms.

Para el propósito de este tutorial, no vamos a limitar ninguna página para que esto se muestre. Sin embargo, para más información sobre este tema, consulte su documentación.

Añadir el fragmento

Ahora es el momento de añadir el snippet a su sitio. Si necesitas ayuda sobre dónde y cómo añadir snippets a tu sitio, revisa este tutorial.

/*
 * Trigger Optinmonster campaign from a WPForms submission
 * 
 * @link https://wpforms.com/developers/how-to-trigger-an-optinmonster-campaign-from-a-form-submission
 */

function trigger_om_campaign_from_wpf() {

	// The WP Form ID. 
	// Find the form ID by following this tutorial: https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
	$form_id = 519;

	// The OptinMonster campaign slug.
	$campaign_slug = 'kofeog6veaiogw1gefbb';

	// The field ID for the name field.
	// Find the field ID by following this tutorial: https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
	$name_field = 0;

	// The field ID for the email field.
	// Find the field ID by following this tutorial: https://wpforms.com/developers/how-to-locate-form-id-and-field-id/
	$email_field = 1;

	if ( empty( $_POST[ 'wpforms' ][ 'complete' ] ) ) {
		// Bail if a WP Form was not submitted.
		return;
	}

	if ( $form_id !== (int) $_POST[ 'wpforms' ][ 'id' ] ) {
		// Bail if not correct WP Form.
		return;
	}

	$entry = $_POST[ 'wpforms' ][ 'complete' ];
	$email = '';
	$name  = '';

	// WPF name field submitted value.
	if ( ! empty( $entry[ $name_field ][ 'value' ] ) ) {
		$name = sanitize_text_field( wp_unslash( trim( $entry[ $name_field ][ 'value' ] ) ) );
	}

	// WPF email field submitted value.
	if ( ! empty( $entry[ $email_field ][ 'value' ] ) ) {
		$email = sanitize_text_field( wp_unslash( trim( $entry[ $email_field ][ 'value' ] ) ) );
	}
	?>
	<script type="text/javascript">
		// Wait until OM campaign is ready.
		document.addEventListener( 'om.Campaign.init', evt => {

			// Make sure we are on the right campaign.
			if ( '<?php echo $campaign_slug; ?>' !== evt.detail.Campaign.id ) {
				return;
			}

			// Setup an event listener for
			document.addEventListener( 'om.Form.init', evt => {
				if ( '<?php echo $campaign_slug; ?>' !== evt.detail.Campaign.id ) {
					return;
				}

				document.getElementById(evt.detail.Campaign.ns + '-field-name').value = <?php echo json_encode( $name ); ?>;
				document.getElementById(evt.detail.Campaign.ns + '-field-email').value = <?php echo json_encode( $email ); ?>;
			} );

			evt.detail.Campaign.startShow();
		} );
	</script>
	<?php
}
add_action( 'wp_footer', 'trigger_om_campaign_from_wpf' );

Para que este fragmento funcione en su sitio, deberá realizar cuatro modificaciones.

• $form_id = 519; - Este es el ID del formulario de WPForms al que nos dirigimos. Esto significa que este fragmento sólo en el formulario con el ID 519. Para encontrar su ID de formulario, consulte este tutorial.
• $campaign_slug = 'kofeog6veaiogw1gefbb'; - Esta es la Slug de campaña OptinMonster.
• $name_field = 0; - Este es el ID de campo para el Nombre que hemos añadido a nuestro formulario. Esto significa que este fragmento tomará lo que el usuario introdujo en el formulario como nombre y lo pasará automáticamente al campo OptinMonster campaña. Para encontrar su ID de campo para este campo, consulte este tutorial.
• $email_field = 1; - Este es el ID de campo para el Correo electrónico que hemos añadido a nuestro formulario. Esto significa que este snippet tomará lo que el usuario introdujo en el formulario para el correo electrónico y lo pasará automáticamente a través del campo OptinMonster campaña. Para encontrar su ID de campo para este campo, consulte este tutorial.

Una vez que haya actualizado las líneas necesarias en el fragmento y lo haya guardado en su sitio, cada vez que se complete el formulario se activará automáticamente la campaña de OptinMonster y se rellenarán previamente los campos Nombre y Correo electrónico.

Y eso es todo lo que necesita para activar una campaña OptinMonster a partir del envío de un formulario. ¿Le gustaría añadir un enlace de impresión para que sus visitantes puedan imprimir el formulario y completarlo manualmente? Consulte nuestro tutorial sobre Cómo añadir un enlace de impresión a sus formularios.

Relacionado

Acción Referencia: wp_footer